زوار ومتابعي المدونة
السلام عليكم ورحمة الله وبركاته
اليوم سوف أقدم لكم طريقة تركيب أزرار التحميل بتقنية 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>
كتب بواسطة Expert Blogger
بلدي هو الأردن مشرف سابقا على عدة منتديات و مواقع و صفحات تعليمية على الفيسبوك و من عشاق البحت و الاكتشاف أشياء جديدة و حصرية حول شبكت الأنترنيت من أهمها مدونات بلوجر و وود دبرس و الصفحات على الفيسبوك أحب مساعدة المبتدئين لإنجاز طموحاتهم كما أسعى لتحقيقي طموحاتي من خلال هذا الموفع المتواضع أتمنى أن تنال مقالاتي إعجابكم و أن أكون أول من يدعمكم لشق طريقكم نحو التطور و الإحتراف و الإستفادة من خلال عرض مجموعة من المعلومات و المواضيع القيمة .
0 التعليقات:
إرسال تعليق