طريقة تركيب أزرار التحميل بتقنية CSS3 لمدونات بلوجر

زوار ومتابعي المدونة 

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

اليوم سوف أقدم لكم طريقة تركيب أزرار التحميل بتقنية CSS3

على منصة بلوجر .

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

1- ادخل إلى مدونتك | ثم أختر تحرير قالب .

2- إبحث عن الوسم :  ]]></b:skin>

3- أختر الكود المناسب لمدونتك وضعه فوق الوسم  : :  ]]></b:skin>

1- كود الشكل الأول :

/* === Button Style === */ 
.mbt-button { 
background-color: #0C464A; 
background-image: -o-linear-gradient(bottom, #0C464A 0%, #276268 100%); 
background-image: -moz-linear-gradient(bottom, #0C464A 0%, #276268 100%); 
background-image: -webkit-linear-gradient(bottom, #0C464A 0%, #276268 100%); 
background-image: -ms-linear-gradient(bottom, #0C464A 0%, #276268 100%); 
background-image: linear-gradient(to bottom, #0C464A 0%, #276268 100%); 
border: 1px solid #0C464A; 
border-bottom: 1px solid #0C464A; 
border-radius: 3px; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
-ms-border-radius: 3px; 
-o-border-radius: 3px; 
box-shadow: inset 0 1px 0 0 #0D5357; 
-webkit-box-shadow: 0 1px 0 0 #0D5357 inset ; 
-moz-box-shadow: 0 1px 0 0 #0D5357 inset; 
-ms-box-shadow: 0 1px 0 0 #0D5357 inset; 
-o-box-shadow: 0 1px 0 0 #0D5357 inset; 
color: white; 
font-weight: bold; 
padding: 8px 25px; 
text-align: center; 
text-shadow: 0 -1px 0 #396715; 
}
.mbt-button:hover { 
opacity:.85; 
cursor: pointer; 
}
.mbt-button:active { 
border: 1px solid #0D5357; 
box-shadow: 0 0 10px 5px #0D5357 inset; 
-webkit-box-shadow:0 0 10px 5px #0D5357 inset ; 
-moz-box-shadow: 0 0 10px 5px #0D5357 inset; 
-ms-box-shadow: 0 0 10px 5px #0D5357 inset; 
-o-box-shadow: 0 0 10px 5px #0D5357 inset; 
}

2- كود الشكل الثاني :

/* === Button Style === */ 
.mbt-button { 
background-color: #3498db; 
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9); 
  background-image: -moz-linear-gradient(top, #3498db, #2980b9); 
  background-image: -ms-linear-gradient(top, #3498db, #2980b9); 
  background-image: -o-linear-gradient(top, #3498db, #2980b9); 
  background-image: linear-gradient(to bottom, #3498db, #2980b9); 
border: 1px solid #0d73b3; 
border-bottom: 1px solid #0d73b3; 
border-radius: 3px; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
-ms-border-radius: 3px; 
-o-border-radius: 3px; 
box-shadow: inset 0 1px 0 0 #0d73b3; 
-webkit-box-shadow: 0 1px 0 0 #0d73b3 inset ; 
-moz-box-shadow: 0 1px 0 0 #0d73b3 inset; 
-ms-box-shadow: 0 1px 0 0 #0d73b3 inset; 
-o-box-shadow: 0 1px 0 0 #0d73b3 inset; 
color: white; 
font-weight: bold; 
padding: 8px 25px; 
text-align: center; 
text-shadow: 0 -1px 0 #396715; 
}
.mbt-button:hover { 
opacity:.85; 
cursor: pointer; 
}
.mbt-button:active { 
border: 1px solid #0d73b3; 
box-shadow: 0 0 10px 5px #0d73b3 inset; 
-webkit-box-shadow:0 0 10px 5px #0d73b3 inset ; 
-moz-box-shadow: 0 0 10px 5px #0d73b3 inset; 
-ms-box-shadow: 0 0 10px 5px #0d73b3 inset; 
-o-box-shadow: 0 0 10px 5px #0d73b3 inset; 
}

3- كود الشك الثالث :

/* === Button Style === */
.mbt-button { 
background-color: #446CB3; 
  background-image: -webkit-linear-gradient(top, #446CB3, #2959ab); 
  background-image: -moz-linear-gradient(top, #446CB3, #2959ab); 
  background-image: -ms-linear-gradient(top, #446CB3, #2959ab); 
  background-image: -o-linear-gradient(top, #446CB3, #2959ab); 
  background-image: linear-gradient(to bottom, #446CB3, #2959ab); 
border: 1px solid #446CB3; 
border-bottom: 1px solid #446CB3; 
border-radius: 3px; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
-ms-border-radius: 3px; 
-o-border-radius: 3px; 
box-shadow: inset 0 1px 0 0 #446CB3; 
-webkit-box-shadow: 0 1px 0 0 #446CB3 inset ; 
-moz-box-shadow: 0 1px 0 0 #446CB3 inset; 
-ms-box-shadow: 0 1px 0 0 #446CB3 inset; 
-o-box-shadow: 0 1px 0 0 #446CB3 inset; 
color: white; 
font-weight: bold; 
padding: 8px 25px; 
text-align: center; 
text-shadow: 0 -1px 0 #396715; 
}
.mbt-button:hover { 
opacity:.85; 
cursor: pointer; 
}
.mbt-button:active { 
border: 1px solid #446CB3; 
box-shadow: 0 0 10px 5px #446CB3 inset; 
-webkit-box-shadow:0 0 10px 5px #446CB3 inset ; 
-moz-box-shadow: 0 0 10px 5px #446CB3 inset; 
-ms-box-shadow: 0 0 10px 5px #446CB3 inset; 
-o-box-shadow: 0 0 10px 5px #446CB3 inset; 
}

4 - كود الشكل الرابع :

/* === Button Style === */
.mbt-button { 
background-color: #68b12f; 
background-image: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e)); 
background-image: -webkit-linear-gradient(top, #68b12f, #50911e); 
background-image: -moz-linear-gradient(top, #68b12f, #50911e); 
background-image: -ms-linear-gradient(top, #68b12f, #50911e); 
background-image: -o-linear-gradient(top, #68b12f, #50911e); 
background-image: linear-gradient(top, #68b12f, #50911e); 
border: 1px solid #509111; 
border-bottom: 1px solid #5b992b; 
border-radius: 3px; 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
-ms-border-radius: 3px; 
-o-border-radius: 3px; 
box-shadow: inset 0 1px 0 0 #9fd574; 
-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ; 
-moz-box-shadow: 0 1px 0 0 #9fd574 inset; 
-ms-box-shadow: 0 1px 0 0 #9fd574 inset; 
-o-box-shadow: 0 1px 0 0 #9fd574 inset; 
color: white; 
font-weight: bold; 
padding: 8px 25px; 
text-align: center; 
text-shadow: 0 -1px 0 #396715; 
} 
.mbt-button:hover { 
opacity:.85; 
cursor: pointer; 
} 
.mbt-button:active { 
border: 1px solid #20911e; 
box-shadow: 0 0 10px 5px #356b0b inset; 
-webkit-box-shadow:0 0 10px 5px #356b0b inset ; 
-moz-box-shadow: 0 0 10px 5px #356b0b inset; 
-ms-box-shadow: 0 0 10px 5px #356b0b inset; 
-o-box-shadow: 0 0 10px 5px #356b0b inset; 
}

- الآن استخدم هذا الكود عندما تريد عمل مشاركة وتحتاج فيها زر التحميل  كما بالصورة التالية :

الــكود 

<a class="mbt-button" href="ضع هنا رابط صفحة التحميل"> Css3 Button </a>