سلام عليكم ورحمة الله وبركاته وبعد كما يعرف أغلاب مدونون بلوجر و أصحاب مواقع أن شكل هو أهم شيء قد يكون أهم من المحتوى أحيانا وكدا أزرار التحميل و المعاينة إدا كنت تستخدم روابط خارجية لدي سنحاول من خلال هدا إضافة أن نضيف أزرار بتأثير ماتريل ديزاين و كدلك ضل ل أزرار
أزرار بتأتير ماتريل ديزاين
معاينة أزرار ماتريل ديزاين
إضغط على الزر لتجربة :إضافة أزرار ماتريل ديزاين
مرحلة أولى : قم بحفظ نسخة إحتياطية
حفظ نسخة لقالب بلوجر خاص بك لتجنب وقوع أخطاء و لإستعادة شكل ما قبل إضافة. بعد دلك إضغط على تنزيل كما هو مبين من الصور :
مرحلة التانية : إضافة كود ستايل
- سجل دخول إلى بلوجر
- ثم إضغط على المظهر
- تعديل html
- إبحث عن ]]></b:skin> بإستخدام ctrl +fضع كود التالي فوقه :
/* btn demo */ .najiri-demo{ margin: 20px auto; text-align: center; text-decoration: none; cursor:pointer!important; overflow:hidden; text-decoration:none; display:inline-block; -webkit-appearance:none; font-size:1.7em; border-radius:4px; color:rgba(255,255,255,0.8); font-weight:400;padding:20px 25px; margin:0 15px; box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s; background:#ff4081; } .najiri-demo:hover{ box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22); position:relative;overflow:hidden;-webkit-transform:translatez(0) } .najiri-demo::before { color: #FFFFFF; display: -webkit-inline-box; content: "\f208"; font-family: fontawesome; padding: 0px 10px 0px 0px;} /* btn download */ .najiri-down{ margin: 20px auto; text-align: center; text-decoration: none; cursor:pointer!important; overflow:hidden; text-decoration:none; display:inline-block; -webkit-appearance:none; font-size:1.7em; border-radius:4px; color:rgba(255,255,255,0.8); font-weight:400;padding:20px 25px; margin:0 15px; box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s; background:#3f51b5; } .najiri-down:hover{ box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22); position:relative;overflow:hidden;-webkit-transform:translatez(0) } .najiri-down::before { color: #FFFFFF; display: -webkit-inline-box; content: "\f019"; font-family: fontawesome; padding: 0px 10px 0px 0px;}
مرحلة الثالثة : إضافة أيقونات تحميل و معاينة
قم بإضافة رابط أيقونات في حالة إدا كان قالب لا يحتوي عليها- إبحث عن <head/> بإستخدام ctrl+f
- ضع كود التالي فوقه
<!-- icon --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
إظهار أزرار تحميل و معاينة في مقال
هنا أمر سهل جدا كل ما عليك هو :- إضغط على مشاركة جديدة
- تم أكتب مقال خاص بك
- إضغط على html كما في صورة
- ضع كود التالى في مكان الدي تريد وضع أزرار فيه
- غير رابط مدونتي برابط خاص بك
<div> <a class="najiri-demo" href="https://ar1books.blogspot.com" rel="nofollow" target="_blank">Demo</a> <a class="najiri-down" href="https://ar1books.blogspot.com" rel="nofollow" target="_blank">Download</a></div>بالنسبة لموقع أمر مختلف سنتطرق إلى دلك مستقبلا إنشاء الله
ضع تعليقك :
إرسال تعليق
أدمين : يسعدنا تفاعلكم بالتعليق و نرجو منكم أن يكون خاص بالمقال