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

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

خطوات تركيب هذة الازرار سهل وبسيط 

ثم البحث عن وسم ]]></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>

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

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

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

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

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