أدوات بلوجر: أزرار مسطحة (Flat)

مرحباً بكم إخواتي بعد غيابي عن المدونة منذ فترة لذا جئت إليكم بمجموعة من الأزرار المسطحة (Flat) بشكل رائع أرجوا أن تنال إعجابكم.

فكما نعلم كلنا أن التصميم الجيد للمدونة يعطي انطباع جيد لزوار المدونة وحالياً التصميم المسطح هو الأكثر استخداماً بين المصممين, فهو محبوب لدي العديد من زوار المدونات.

في هذه الأزرار ستستمتع بجمالها وبساطتها وسرعتها فهي قالبلة للإستعمال في العديد من الأماكن كاالصفحة الرئيسية للمدونة أو في المشاركات..إلخ ,وهي متوفرة بثلاث أحجام مختلفة.

كيف تقوم بإضافتها إلي بلوجر؟
في هذه الخطوة ستقوم بوضع أكواد الـ CSS.

• أذهب للوحة التحكم/القالب/احفظ نسخة احتياطية من القالب/تحرير HTML.
• ابحث عن </head> ولصق الكود التالي فوقها.

<!-- Flat UI Buttons By Www.TH3SKILL.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.TH3SKILL.COM End -->

•  ثم قم بحفظ القالب.

كيف تضيف الأزرار إلي المشاركات؟

في هذه الخطوة سنعمل علي إضافة أكواد الـ HTML في صفحات المشاركة.

• قم بإنشاء مشاركة جديدة/اختر تحرير 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 Green Button Red Button Purple Button SeaGreen Blue Button Green Button Red Button Purple Button SeaGreen Blue Button Green Button Red Button Purple Button SeaGreen