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

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

معاينة الاضافة

طريقة الاضافة الى البلوجر

1.نتوجه الى المدونة ، قالب ، تحرير HTML
2.نبحث عن الكود

</head>

3.نضيف الكود الثالي فوقه

<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>

4. نضغط حفظ .

5. عند كتابة مقالة نضيف الكود الثالي الخاص باضافة في HTML

<a class="newbutton demo" href="http://hukmat.blogspot.com" target="_blank">معاينة</a>

<a class="newbutton download" href="http://hukmat.blogspot.com" target="_blank">تحميل</a>

6. اضافة اكتملت .

مقالات ذات صلة