إضافة أزرار المعاينة والتحميل بشكل جديد لمدونات بلوجر
شرح طريقة اضافة ازرار المعاينة والتحميل لمدونات بلوجر بطريقة سهلة
كما ترون هذه صورة الاضافة وهذه شكل الازرار وتقريبا هذه الازرار المستخدمة في معظم القوالب الاجنبية نذهب لشرح الاضافة
الشرح
قم باضافة اكواد الازرار داخل المواضيع عن طريق ال html
ازرار المعاينة
<div class="small-button"> <a class="button small demo" href="https://www.blogger.com">Demo Button</a> <a class="button medium demo" href="https://www.blogger.com">Demo Button</a> <a class="button large demo" href="https://www.blogger.com">Demo Button</a> <br> <div class="clear"> </div></div>ازرار التحميل
<div class="small-button"> <a class="button small download" href="https://www.blogger.com">Download Button</a> <a class="button medium download" href="https://www.blogger.com">Download Button</a> <a class="button large download" href="https://www.blogger.com">Download Button</a> <br> <div class="clear"> </div> </div>ثم قم بحفظ الموضوع وهذه الاكواد الذي ستستخمهم في اي مقال وهذه احجامهم
ثم قم بفتح المظهر ثم تعديل HTML وقم بالبحث عن ]]></b:skin> وضع هذا الكود اعلاه
.button{ background-color:#2c3e50; float:left; padding:5px 12px; margin:5px; color:#fff; text-align:center; border:0; cursor:pointer; border-radius:3px; display:block; text-decoration:none; font-weight:400; transition:all .3s ease-out !important; -webkit-transition:all .3s ease-out !important } a.button{ color:#fff } .button:hover{ background-color:#27ae60; color:#fff } .button.small{ font-size:12px; padding:5px 12px } .button.medium{ font-size:16px; padding:6px 15px } .button.large{ font-size:18px; padding:8px 18px } .small-button{ width:100%; overflow:hidden; clear:both } .medium-button{ width:100%; overflow:hidden; clear:both } .large-button{ width:100%; overflow:hidden; clear:both } .demo:before{ content:"\f06e"; margin-right:5px; display:inline-block; font-family:FontAwesome; font-style:normal; font-weight:400; line-height:normal; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale } .download:before{ content:"\f019"; margin-right:5px; display:inline-block; font-family:FontAwesome; font-style:normal; font-weight:400; line-height:normal; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }ثم قم باضافة مكتبة ايقونات Fontawesome ان لم تكن موجودة في القالب من الأساس, في المظهر ايضا قم بالبحث عن <head> وضه هذا الكود اسفله
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>ثم قم بحفظ القالب وستعمل معك ازرار المعاينة والتحميل لمدونات بلوجر
الكود مقتبس من sorabloggingtips .
وانتهي موضوع اليوم لاتنسي زيارة قسم بلوجر لمزيد من الشروحات اذا واجهتك اي مشكلة عموما في موقعك قم بكتابتها في صفحة اسألنا, او اذا كنت تريد شرح معين عن أي شي في بلوجر او SEO لاتتردد في كتابته في التعليقات , وقم بالاطلاع علي شهادات الموقع
تعليقات
إرسال تعليق