دليلك الشامل لتبسيط كل جديد ودخول عالم كبير من الاخبار المميزه

Advertisements

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

0 120

Advertisements

السلام عليكم ورحمه الله وبركاته اليوم سوف اضع بين يديك عزيزي المتابع زر تحميل رائع يصلح لاي شئ فانا استخدمه شخصيا
فالزر تصميمه رائع وخفيف جدا وذلك لانه مصمم بالكامل بلغه 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>

Advertisements

اشترك الان مجانا وبدون اي مجهود او تعب ستتوصل بجديد المواضيع المميزه

قد يعجبك ايضا

يستخدم موقع تبسيط ملفات تعريف الارتباط . للتحسين المستمر لزيارتك يمكنك الموافقه او الالغاء في اي وقت . موافقاقرا المزيد