اضافه زر تحميل بوجهيين متجاوب لمدونات بلوجر

السلام عليكم ورحمه الله وبركاته اليوم سوف اضع بين يديك عزيزي المتابع زر تحميل رائع يصلح لاي شئ فانا استخدمه شخصيا
فالزر تصميمه رائع وخفيف جدا وذلك لانه مصمم بالكامل بلغه css ولا يحتوي علي صوره او اي شي يجعله ثقيل في التحميل
الان ناتي للتركيب تابع معي

اضافه زر تحميل رائع لمدونات بلوجر

زر تحميل متجاوب رائع لمدونات بلوجر

اولا قم بالدخول للقالب ثم تحرير وقم بالبحث عن ]]></b:skin>  وضع الكود التالي فوقه ( اي قبله )

.buttonsBar{ padding-top: 20px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; width:70%; margin:auto; } .button { cursor: pointer; font-size: 16px; font-family: Droid Arabic Naskh,sans-serif; letter-spacing: 1px; border-radius: 25px; float: left; min-width: 10px; max-width: 250px; display: block; margin: 1em; margin-left: 8px; margin-right: 8px; padding: 1em 0em; border: none; background: none; color: inherit; vertical-align: middle; position: relative; z-index: 1; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; overflow: hidden; color: #FFFFFF; min-width: 210px; background-color: #2C323C; font-weight: bold; } .redBandButton{ padding: 0; min-width: 280px; } .button.button–inverted { color: #37474f; border-color: #37474f; } .button::before, .button::after { content: attr(data-text); position: absolute; width: 100%; height: 50%; left: 0; background: #bf2f24; color: #fff; overflow: hidden; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .button.button–inverted::before, .button.button–inverted::after { background: #fff; color: #37474f; } .button::before { border-radius: 5px; top: 0; padding-top: 1em; } .button.redBandButton::before { content: attr(data-text-1); padding-top: 7px; font-family: avenirMed, sans-serif; font-size: 16px; } .button#storyButton::before{ padding-top: 15px; } .button::after { border-radius: 0px 0px 20px 20px; bottom: 0; line-height: 0; } .button > span { display: block; -webkit-transform: scale3d(0.2, 0.2, 1); transform: scale3d(0.2, 0.2, 1); opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .button:hover::before { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .button:hover::after { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .button:hover > span { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

للقيام بتغيير الالوان علي الزر

للقيام بتغيير اللون الاحمر ابحث عن هذا الكود bf2f24# وقم بتغييره للون الذي يناسبك

 للقيام بتغيير اللون الاسود ابحث عن هذا الكود #2C323C وقم بتغييره للون الذي يناسبك

الان عند القيام بعمل تدوينه او موضوع جديد انتقل لتبويب HTML وضع الكود التالي في المكان الذي يناسبك

<!– Download Button by tapseet.com –>
<div class=”buttonsBar”>
<a href=’#’ target=’_blank’><button class=”button button–border-thick” data-text=”تحميل”><span>تبسيط | دائما الابسط</span></button></a> </div>