34513703109690600
recent
أخبار ساخنة

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

الخط
إضافة ازرار التحميل بتقنية الماتريال لمدونة بلوجر

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

السلام عليكم ورحمة الله وبركاتة متابعينا الكرام اليوم نعرض لكم ازرار التحميل بتقنية الماتريال لمدونة بلوجر هذة الازرار قد تحتاجها الى مواقع التحميلات واللينكات
خطوات تركيب هذة الازرار سهل وبسيط 

اولاالذهاب الى اعدادات بلوجر بعد ذلك الضغط علي المظهر ثم تحرير HTML
ثم البحث عن وسم ]]></b:skin> ثم وضع الكود التالى فوقة مباشرة 

#wrap{margin:20px auto;text-align:center}
#wrap a{text-decoration:none}
.tombolripple{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.7em;border-radius:4px;color:rgba(255,255,255,0.8);font-weight:400;padding:20px 25px;margin:0 15px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s}
.tombolripple:hover,.tombolripple:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.tombolripple.tsatu{background:#e67e22}
.tombolripple.tdua{background:#3498db}
.tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:#f49541}
.tombolripple.tdua:hover,.tombolripple.tdua:active{background:#4aaff3}
svg{position:absolute;top:0;left:0;width:100%;height:100%}
circle{fill:rgba(255,255,255,0.07)}
.ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)}
.teffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5}
.teffect.animate{animation:ripple-effect 0.5s linear}
@keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}
@-webkit-keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}


بعد ذلك البحث عن الوسم </body> واضف الكود فوقة 



<script type="text/javascript">
//<![CDATA[
!function(a){a(".ripple-effect").click(function(b){var c=a(this);0===c.find(".teffect").length&&c.append("<span class='teffect'></span>");var d=c.find(".teffect");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery);
//]]>
</script>


الخطوة الاخيرة هي عند كتابة تدوينة تحتوى علي روابط كل ما هو عليك فعلة الضغط علي HTML ثم وضع الكود التالى في التدوينة



<div id="wrap">
<a class="tombolripple tsatu ripple-effect" href="الرابط " rel="nofollow" target="_blank">عرض</a>
<a class="tombolripple tdua ripple-effect" href="الرابط " rel="nofollow" target="_blank">تحميل</a>
</div>



تنبية عليك تغير كلمة الرابط برابط المعاينة الخاصة بك 


ستظهر معك الاضافة بهذا الشكل 

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



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

وفي الاخير نتمني ان تكون الاضافة قد نال اعجابكم
ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

لاتنسي ان تترك بصمتك بالتعليق

نموذج الاتصال
الاسمبريد إلكترونيرسالة