إضافة زر التحميل أو DOWNLOAD لمدونة بلوجر

إضافة زر التحميل أو DOWNLOAD لمدونة  بلوجر 

تركيب الإضافة

1- ادخل إلى مدونتك /واختر تحرير قالب 

2- إبحث عن الوسم ]]></b:skin> 

3- ضع الكود التالي فوقه

الكود

.3D-Download-Button {margin-top: 20px;}

a.blue {display: block;position: relative;width: 155px;height: 38px;margin: 0 auto;padding: 12px 0 0 65px;background: url(https://lh4.googleusercontent.com/-tWMx8qw-wH0/UjXWzGB6zWI/AAAAAAAAA5Q/_f_Rm_GSqVM/h120/pctoolstips.blogspot.com.png) 25px center no-repeat; /* IE < 9 */background:url(https://lh4.googleusercontent.com/-tWMx8qw-wH0/UjXWzGB6zWI/AAAAAAAAA5Q/_f_Rm_GSqVM/h120/pctoolstips.blogspot.com.png) 25px center no-repeat,-webkit-gradient(linear, left top, left bottom, from(#bcdeeb), to(#7cbdd7));background:url(https://lh4.googleusercontent.com/-tWMx8qw-wH0/UjXWzGB6zWI/AAAAAAAAA5Q/_f_Rm_GSqVM/h120/pctoolstips.blogspot.com.png) 25px center no-repeat,-webkit-linear-gradient(top, #bcdeeb, #7cbdd7);background:url(https://lh4.googleusercontent.com/-tWMx8qw-wH0/UjXWzGB6zWI/AAAAAAAAA5Q/_f_Rm_GSqVM/h120/pctoolstips.blogspot.com.png) 25px center no-repeat,-moz-linear-gradient(top, #bcdeeb, #7cbdd7);background:url(https://lh4.googleusercontent.com/-tWMx8qw-wH0/UjXWzGB6zWI/AAAAAAAAA5Q/_f_Rm_GSqVM/h120/pctoolstips.blogspot.com.png) 25px center no-repeat,-o-linear-gradient(top, #bcdeeb, #7cbdd7);background:url(https://lh4.googleusercontent.com/-tWMx8qw-wH0/UjXWzGB6zWI/AAAAAAAAA5Q/_f_Rm_GSqVM/h120/pctoolstips.blogspot.com.png) 25px center no-repeat,-ms-linear-gradient(top, #bcdeeb, #7cbdd7);background:url(https://lh4.googleusercontent.com/-tWMx8qw-wH0/UjXWzGB6zWI/AAAAAAAAA5Q/_f_Rm_GSqVM/h120/pctoolstips.blogspot.com.png) 25px center no-repeat,linear-gradient(to bottom, #bcdeeb, #7cbdd7);background-color: #85c2da;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;-moz-box-shadow:0 0px 3px 0 #fff inset,0 -1px 0 0 rgba(255,255,255,.05) inset;-webkit-box-shadow:0 0px 3px 0 #fff inset,0 -1px 0 0 rgba(255,255,255,.05) inset;box-shadow:0 0px 3px 0 #fff inset,0 -1px 0 0 rgba(255,255,255,.05) inset;font-family: 'Myriad Pro', Arial, Helvetica, sans-serif;font-size: 24px;line-height: 24px;color: #fff;text-decoration: none;text-shadow: 0 1px 1px rgba(0,0,0,.2);}

a.blue::before {content: '';position: absolute;z-index: -1;top: -1px;right: -1px;bottom: -1px;left: -1px;background-color: #3c8dac;background-image: -webkit-gradient(linear, left top, left bottom, from(#85c2da), to(#3c8dac));background-image: -webkit-linear-gradient(top, #85c2da, #3c8dac);background-image: -moz-linear-gradient(top, #85c2da, #3c8dac);background-image: -o-linear-gradient(top, #85c2da, #3c8dac);background-image: -ms-linear-gradient(top, #85c2da, #3c8dac);background-image: linear-gradient(to bottom, #85c2da, #3c8dac);-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;}

a.blue::after {content: '';position: absolute;z-index: -2;top: 8px;right: -1px;bottom: -8px;left: -1px;background: #579ab4;border: 1px solid #4d89a0;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);}

a.blue:hover {background: #85c2da url(https://lh4.googleusercontent.com/-tWMx8qw-wH0/UjXWzGB6zWI/AAAAAAAAA5Q/_f_Rm_GSqVM/h120/pctoolstips.blogspot.com.png) 25px center no-repeat;}

a.blue:active {top: 4px;}

a.blue:active::after {top: 4px;bottom: -4px;}

4- ادخل إلى مدونتك /  المشاركات / مشاركة جديدة 

5- أنسخ الكود التالي واللصقه في كود Html.

الكود

 <div class="3D-Download-Button">
<a class="blue" href="ضع هنا رابط التحميل" target="blank">Download</a>
</div>

Note:- الرجاء من الأخوة الكرام : زوار المدونة عدم النسخ دون ذكر المصدر