السلام عليكم ورحمة الله وبركاته والصلاة والسلام على رسول الله.
في هذا الدرس سنشرح كيفية اضافة زر التحميل والمعاينة بطريقة احترافية لمدونات بلوغر ان هذه الازرار تساعد الزائر على عملية التحميل وتعطي للمدونة شكل جميل و متناصق مع الدوينة سنحتاج الى هذه العملية الاكواد من اجل اضافة الازار الكود الاول و الكود الثاني وساشرح لكم كيفية اضافته على منصة بلوغر
بالبداية يجب عليك فتح مدونتك والذهاب الى المضهر ثم تضغط تحريرHTML
نبحث عن <head>
الكود الأول
<style>
/* Download Button */
.downloadbutton {margin:20px auto;padding:20px 0;width:200px;}
.downloadbutton a {background:#fff;;color:#666;display:block;font-size:17px;font-weight:700;
font-family:'Arial',Verdana,sans-serif;height:50px;line-height:50px;text-align:center;
text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;}
.downloadbutton a:hover {background:#ddd;}
.downloadbutton a:before {content:"\f019";font-family:FontAwesome;font-weight:normal;
padding:8px;margin-left:-12px;margin-right:6px;}
.downloadbutton span {background:#444;color:#fff;display:block;font-size:12px;font-family:'Arial', Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase;
font-weight:bold;}
.downloadbutton .up {background:#8493A0;margin:-25px auto;opacity:0;border-radius:0 0 5px 5px;transform: translate(0,-50px);transition:350ms;}
.downloadbutton .down {margin:-30px auto;opacity:0;border-radius:5px 5px 0 0;transform: translate(0,-50px);transition:350ms;}
.downloadbutton .down:before {content:"\f14a";font-family:FontAwesome;font-weight:normal;
margin-right:6px;color:#aaa;}
.downloadbutton:hover .up {opacity:1;transform: translate(0,0);}
.downloadbutton:hover .down {opacity:1;transform: translate(0,-90px);}
.demobutton {margin:20px auto;padding:20px 0;width:200px;}
</style>
نضع الكود الاول ثم حفظ المظهر
تأتي للتدوينة التي تريد وضع العلامة فيها اعمل تحرير html وتضع الكود الثاني في الاسفل وتعمل حفظ
الكود الثاني:
<div class="downloadbutton">
<a href="هنا تضع رابط التحميل" rel="nofollow" target="_blank">Download</a>
<br />
<span class="up">التحميل</span>
<br />
<span class="down">اضغط هنا</span>
</div>
للفهم اكثر أكثر اليك الفيديو
0 تعليق على موضوع : طريقة سهلة وبسيطة للمبتدئين لوضع علامة تحميل لمدونتك بلوجر
الأبتساماتأخفاء الأبتسامات