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

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

كثيرا ما نشاهدها في المدونات الاجنبية لكن معظم المدونين العرب لا يعرف هذه الطريقة .

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

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

1 - قم بتسجيل الدخول إلى مدونتك بلوجر.

2 - من لوحة التحكم الخاصة بمدونتك توجه إلى تصميم أو قالب.

3- ابحث عن :

]]></b:skin>

ثم قم بإضافة هذا الكود قبله مباشرة :

.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); }

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

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

<a class="demobutton button" href="الرابط الذي تريد مشاهدته" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">مشاهدة</span></a>

<a class="demobutton button" href="الرابط الذي تريد تحميله" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">تحميل </span></a> 

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

منشورة في: اضافات وادوات بلوجر, بلوجر