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

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

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

معاينة

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

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

<!-- Flat UI Buttons By Www.mudwnp.blogspot.Com Start -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"></link>
<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;}
</style>
<!-- Flat UI Buttons By Www.mudwnp.blogspot.Com End -->

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

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

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

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

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

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

Big Size Buttons

<a class="button blue big" href="#">Blue Button</a>
<a class="button green big" href="#">Green Button</a>
<a class="button red big" href="#">Red Button</a>
<a class="button purple big" href="#">Purple Button</a>
<a class="button seagreen big" href="#">SeaGreen </a>

Medium Size Buttons

<a class="button blue medium" href="#">Blue Button</a>
<a class="button green medium" href="#">Green Button</a>
<a class="button red medium" href="#">Red Button</a>
<a class="button purple medium" href="#">Purple Button</a>
<a class="button seagreen medium" href="#">SeaGreen </a>

Small Size Buttons

<a class="button blue small" href="#">Blue Button</a>
<a class="button green small" href="#">Green Button</a>
<a class="button red small" href="#">Red Button</a>
<a class="button purple small" href="#">Purple Button</a>
<a class="button seagreen small" href="#">SeaGreen </a>.

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

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


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

في امان الله