بسم الله الرحمن الرحيم بعدما تطرقنا في التدوينة السابقة لكيفية وضع كود داخل صندوق لتظهر التدوينة بشكل جذاب وأنيق سنتعرف اليوم على كيفية إضافة زر المعاينة ثم زر التحميل لمدونات البلوجر بشكل جميل أنيق واحترافي .الأزرار ستظهر كما هو موضح في الصورة أسفله مصممة بشكل احترافي وأنيق وبتقنية CSS.
طريقة التركيب:
لتركيب هذه الأزرار ما عليك سوى:
1- الذهاب إلى لوحة التحكم
2-ثم إلى قالب
3- بعدها ننقر على تحرير ال html.
4- نأخد نسخة احتياطية لقالب المدونة تفاديا لبعض المشاكل والرجوع للنسخة الأصلية في حالة حدوث مشكل.
5- النقر على CTRL+F.
6- البحث عن الكود التالي :
7- في حالة عدم وجوده نبحث مرة أخرى على هذا الوسم <head> ونلصق الكود أسفله لتفعِّيل مكتبة Font Awesome في مدونتك وتظهر الأيقونات.
8- مرة أخرى نبحث عن هذا الكود ]]></b:skin> ونضيف مباشرة الكود التالي فوقه.
9- بعدها نضيف الكود التالي داخل الموضوع بعد الإنتقال من وضع تأليف إلى وضع html
10- وأخيرا قم بوضع الراوابط المناسبة رابط المعاينة ثم رابط التحميل ومبروك عليك الإضافة.
لوضع زر واحد عوض الزرين داخل التدوينة ما عليك سوى تقسيم الكود إلى شطرين.
كود المعاينة:
كود التحميل :
مبروك عليكم الإضافة.
طريقة التركيب:
لتركيب هذه الأزرار ما عليك سوى:
1- الذهاب إلى لوحة التحكم
2-ثم إلى قالب
3- بعدها ننقر على تحرير ال html.
4- نأخد نسخة احتياطية لقالب المدونة تفاديا لبعض المشاكل والرجوع للنسخة الأصلية في حالة حدوث مشكل.
5- النقر على CTRL+F.
6- البحث عن الكود التالي :
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
7- في حالة عدم وجوده نبحث مرة أخرى على هذا الوسم <head> ونلصق الكود أسفله لتفعِّيل مكتبة Font Awesome في مدونتك وتظهر الأيقونات.
8- مرة أخرى نبحث عن هذا الكود ]]></b:skin> ونضيف مباشرة الكود التالي فوقه.
#wrap {
margin: 20px auto; text-align: center;}.btn-slide, .btn-slide2 { position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid #0099cc; margin: 10px; transition: .5s;}.btn-slide2 { border: 2px solid #efa666;}.btn-slide:hover { background-color: #0099cc;}.btn-slide2:hover { background-color: #efa666;}.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc;}.btn-slide2:hover span.circle2 { color: #efa666;}.btn-slide:hover span.title, .btn-slide2:hover span.title2 { left: 40px; opacity: 0;}.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px;}.btn-slide span.circle, .btn-slide2 span.circle2 { display: block; background-color: #0099cc; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 50%;}.btn-slide2 span.circle2 { background-color: #efa666;}.btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #30abd5; transition: .5s;}.btn-slide2 span.title2, .btn-slide2 span.title-hover2 { color: #efa666; left: 80px;}.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { left: 80px; opacity: 0;}.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color: #fff;}
9- بعدها نضيف الكود التالي داخل الموضوع بعد الإنتقال من وضع تأليف إلى وضع html
<div id="wrap"><a href="رابط المعاينة" class="btn-slide" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">معاينة</span> <span class="title-hover">اضغط هنا</span></a><a href="رابط التحميل" class="btn-slide2" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">تحميل</span> <span class="title-hover2">اضغط هنا</span></a></div>
10- وأخيرا قم بوضع الراوابط المناسبة رابط المعاينة ثم رابط التحميل ومبروك عليك الإضافة.
لوضع زر واحد عوض الزرين داخل التدوينة ما عليك سوى تقسيم الكود إلى شطرين.
كود المعاينة:
< class="tr_bq"> <div id="wrap"><a href="رابط المعاينة" class="btn-slide" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">معاينة</span> <span class="title-hover">اضغط هنا</span> </a>
كود التحميل :
<a href="رابط التحميل" class="btn-slide2" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">تحميل</span> <span class="title-hover2">اضغط هنا</span></a></div>
مبروك عليكم الإضافة.
تعليقات: 0
إرسال تعليق