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

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

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

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://prothe01.blogspot.com" target="_blank">معاينة</a>

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

شارك هذه الصفحة وتابعنا على صفحاتنا الرسمية

شارك الموضوع →

تويت

تابعنا →

إنشر الموضوع →