افكار بلوجر: اضافة ازرار بشكل جميل بتقنية css لمدونة بلوجر [Blogger]

ساشرح لكم اضافة بلوجر نحتاجها كثيرا في مدوناتنا انها ازرار التحميل ومشاهدة و تستعمل خاصة في مدونات التي تهتم بطرح القوالب و مشاهدة او تحميل الاضافات و البرامج

كثيرا ما نشاهدها في المدونات الاجنبية لكن معظم المدونين العرب لا يعرف هذه الطريقة .
هذه الاداة افضل بكثير من استعمال الصور لانه يمكن ان تكتب فيها ما تشاء اضافة الي ان الصور تاخذ وقت كبير في التحميل مما يفقد المدونة سرعتها فمع نمط css يمكنك انشاء ازرار بتاثيرات جميلة و سريعة.

لنبدأ على بركة الله

1 - قم بتسجيل الدخول إلى مدونتك بلوجر.
2 - من لوحة التحكم الخاصة بمدونتك توجه إلى تصميم أو قالب.
3- ابحث عن : ]]></b:skin> باستخدام ctrl + f .
ثم قم بإضافة هذا الكود قبله مباشرة :

.button { 
 -moz-border-radius:5px 5px 5px 5px; 
 -webkit-border-radius:5px 5px 5px 5px; 
 border-radius:5px 5px 5px 5px; 
 -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); 
 -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); 
 box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); 
 background:url("http://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 #222222; 
 border-bottom:1px solid rgba(0, 0, 0, 0.25); 
 color:#FFFFFF !important; 
 cursor:pointer; 
 font-weight:bold; 
 line-height:1; 
 overflow:visible; 
 font-size:17px; 
padding:8px 19px 9px; 
 position:relative; 
 text-decoration:none; 
 text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25); 
 width:auto; 
 } 
 .demobutton { 
 background-color:#999999; 
 text-align:center; 
 width:150px; 
 } 
 .demobutton:hover { 
 background-color:#00A0EE; 
 } 
 .downloadbutton { 
 background-color:#91BD09; 
 text-align:center; 
 width:150px; 
 } 
 .downloadbutton:hover { 
 background-color:#00AC00; 
 } 
 .button:hover { 
 -moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); 
 -webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); 
 box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); 
 }#ixzz2T1CoxWBT

قم بحفظ القالب

ثم اذهب الي مشاركة جديدة و عندما تحتاج لهذه الاضافة اضغط علي زر html بجانب زر تاليف ثم اضف الكود التالي

هذا الزر ناحية اليمين
<a class="demobutton button" href="الرابط الذي تريد مشاهدته" rel="nofollow" style="float: right;" target="_blank">مشاهدة</a>

هذا الزر في الوسط
<a class="demobutton button" href="الرابط الذي تريد تحميله" rel="nofollow" style="float: center;" target="_blank">معاينة </a>

هذا الزر في اليسار
<a class="demobutton button" href="الرابط الذي تريد تحميله" rel="nofollow" style="float: left;" target="_blank">تحميل </a>

غير ما باللون الاحمر بما يتماشي معك