أضافة أزرار معاينة وتحميل بشكل أحترافي

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

الخطوه الأولة اضافة css مظهر الاضافة

قبل التحرير ننصحك بعمل نسخة احتياطية من القالب،ليكون عندك تصميم قالبك قبل التعديل علية . وأول شيء عليك القيام به هو الدخول إلى حساب Blogger الخاص بك والذهاب إلى القالب تحرير HTML والبحث عن  ]]></b:skin> وضع فوقة الكود التالي

/* iootek.blogspot.com Design Material Button */
#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)}}

الخطوه الثانية اضافة كود jquery الي القالب

قم بالبحث عن </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">Demo</a>
  <a class="tombolripple tdua ripple-effect" href="#" rel="nofollow" target="_blank">Download</a>
</div>

قم بحفظ الصفحه ومبروك عليك الازرار