اضافة أزرار التحميل بصيغة CSS لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته

في درسنا اليوم سوف نتعرف على طريقة تركيب أزرار التحميل بأستخدام CSS لمدونات بلوجر ، وهذه الاضافة تعتمد على خط الوسوم ، ومن مميزات هذه الاضافة ، متجاوبة ، خفيفة وسهلة التركيب ، وفيها لمسة أحترافية جمالية .

::: طريقة التركيب :::

1- من لوحة تحكم مدونتك اختر قالب ثم تحرير قالب .

2- ابحث عن الوسم :

3- اضف الكود التالي تحته .

 <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

4- ايضاً ابحث عن الوسم :

5- اضف الكود التالي فوقه .

 .vn-red a{
  background-color:#e74c3c;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}

.vn-red a:before{
  content:"\f019";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:28px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}

.vn-red a:hover{
  background:#2c3e50
}

.vn-green a{
background-color:#27ae60;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}

.vn-green a:before{
  content:"\f019";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:28px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}

.vn-green a:hover{
  background:#2c3e50
}

.vn-teal a{
background-color:#16a085;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}

.vn-teal a:before{
  content:"\f019";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:28px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}

.vn-teal a:hover{
  background:#2c3e50
}

.vn-orange a{
background-color:#f39c12;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}

.vn-orange a:before{
  content:"\f019";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:28px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}

.vn-orange a:hover{
  background:#2c3e50
}

.vn-blue a{
background-color:#2980b9;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}

.vn-blue a:before{
  content:"\f019";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:28px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}

.vn-blue a:hover{
  background:#2c3e50
}

6- بعد ذلك اختر لون الزر الذي يناسبك ، واستخدمه بوضعية HTML .

 <div class="vn-red" style="text-align: center;">
<a href="#">تحميل</a>
</div>
<div class="vn-green" style="text-align: center;">
<a href="#" class="btn-wrap">تحميل</a>
</div>
<div class="vn-teal" style="text-align: center;">
<a href="#" class="btn-wrap">تحميل</a>
</div>
<div class="vn-orange" style="text-align: center;">
<a href="#" class="btn-wrap">تحميل</a>
</div>
<div class="vn-blue" style="text-align: center;">
<a href="#" class="btn-wrap">تحميل</a>
</div>

- استبدل هذه الإشارة برابط التحميل ( # ) .

انقر هنا للمعاينة