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

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

معاينة

الخطوة 1. التثبيت

الذهاب إلى بلوجر >>  قالب  >>  النسخ الاحتياطي القالب
انقر فوق تحرير HTML و لصق التعليمة البرمجية التالية قبل

<style type="text/css">
.button {color:white!important; font-family:open sans; margin:10px 10px 10px 0;text-decoration:none!important; font-weight:700;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-oborder-radius:5px; transition:all .4s;-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;}
.blue {background: #3498db;border-bottom: 3px solid #226693;}
.blue:hover {background:#2980b9;}
.green {background: #2ecc71;border-bottom: 3px solid #1F8C4C;}
.green:hover {background: #27ae60;}
.red {background: #e74c3c;border-bottom: 3px solid #922C20;}
.red:hover {background:#c0392b;}
.purple {background: #9b59b6; border-bottom: 3px solid #74398E;}
.purple:hover {background:#8e44ad;}
.seagreen {background: #1abc9c;border-bottom: 3px solid #127F69;}
.seagreen:hover {background: #16a085;}
.big {font-size:18px; padding:15px 20px;}
.medium {font-size:15px; padding: 10px 15px;}
.small {font-size:12px; padding:8px 10px;}

أهم الملاحظات حول الكود

لتغيير حجم الخط قم باستبدال الرقم الذي بجانب font-size:18px
لتغيير الخط قم بتغيير font-family:open sans  بالخط الموجود بمدونتك

انقر على "حفظ القالب".

الخطوة 2. إضافة أزرار فلات في المدونة

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

الذهاب إلى المدونة >> مشاركة جديدة
انتفل إلى وضع HTML
نسخ ولصق أي كود للزر الذي تريده

Big Size Buttons

#">Blue Button
#">Green Button
#">Red Button
#">Purple Button
#">SeaGreen

Medium Size Buttons

#">Blue Button
#">Green Button
#">Red Button
#">Purple Button
#">SeaGreen

Small Size Buttons

#">Blue Button
#">Green Button
#">Red Button
#">Purple Button
#">SeaGreen .

أهم الملاحظات حول الكود

استبدل # برابط المعاينة او الذي تريده
استبدل النص Blue Button  بالكلمة الذي تريدها


يمكنك ايضا مشاهدة : اضافة ازرار CSS احترافية لمدونتك

في امان الله 

مدونة مدون محترف