الجمعة، 23 فبراير 2018

اضافة زر تحميل ومعاينة لبلوجر بشكل احترافي مميز

إضافة زر تحميل وزر معاينة بطريقة احترافية

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

طريقة الإضافة

تذهب إلي ⬅ اعدادات المدونة ⬅ المظهر ⬅ تحرير html ⬅ تبحث عن الوسم </head> ⬅ تضيف فوقه (أعلاه) الكود التالي:
<style>
/* Button
----------------------------------------------- */
.button-group, .text-center, .center {
text-align: center;
margin:15px 0;
font-size:13px;
letter-spacing:0px;
}

newbutton, input[type="newbutton"], input[type="reset"], input[type="submit"], .newbutton, a.newbutton {
position: relative;
width: auto;
font-weight: normal;
line-height: normal;
color: #fff !important;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: #78cd51;
border-color: #78cd51;
box-shadow: 0 4px #5da13f;
border-radius:5px;
padding:8px 18px;
cursor: pointer;
margin-right:15px;
font-family: DroidKufi-Bold;
font-size: 12px;
}


.newbutton.download:hover, .newbutton.demo:hover, .newbutton.link:hover {
background:#6dbb4a;
}
.newbutton.download:active, .newbutton.demo:active, .newbutton.link:active {
background-color:#69b646;
box-shadow: 0 -2px #5da13f;
padding:6px 18px 12px !important;
}
.newbutton.download:before {content:"\f019"}
.newbutton.demo:before {content:"\f06e"}
.newbutton.link:before {content:"\f074"}
.newbutton.link:before, .newbutton.demo:before, .newbutton.download:before{font-family:'FontAwesome';font-weight:normal;font-style:normal;vertical-align:middle;margin:0 8px 0 6px;font-size:16px;color:#529534;text-shadow:0 1px 0 rgba(255,255,255,.1)}
</style>
وبعد ذلك تضغط علي حفظ المظهر.
الآن وعند كتابة التدوينة أو الموضوع تحول وضع الكتابة من تأليف إلي HTML ولإضافة زر التحميل ضع الكود التالي:
<a class="newbutton download" href="ضع رابط التحميل هنا" target="_blank">تحميل</a>
ولإضافة زر المعاينة ضع الكود التالي:
<a class="newbutton demo" href="ضع رابط المعاينة هنا" target="_blank">معاينة</a>

إلي هنا ينتهي شرحنا لهذا اليوم نتمني أن يكون نال إعجابكم وحقق المبتغي من وراءه وهو الإفادة والإرشاد لما تحتاجونه، كن علي تواصل بكل جديد ننشره عن طريق الاشتراك في المدونة عن طريق النزول للأسفل قليلا فتجد صندوق الاشتراك 💖

ليست هناك تعليقات:

إرسال تعليق