Bloggerda Animasyonlu Demo Ve Download Butonları Oluşturma

 Blogunuzda tema , eklenti vb. şeyler paylaşıyor olabilirsiniz. Ziyaterçilerinize sunduğunuz içeriği canlı ön izleme ve indirme butonlarını daha dikkat çekici bir şekilde sunmak sizcede güzel olmaz mı?

  Bu eklenti ile normalde yazıyla veya klasik butonla sunduğunuz linkleri artık animasyonlu butonlarla sunabileceksiniz. Bu sayede blogunuzda güzel ve dikkat çeken bir görünüme sahip olacaksınız.

Nasıl Eklenir ?

• Blogger yönetim paneline giriş yapın.
• Tema Html'yi Düzenle yolunu izleyerek sitenizin kodlarına erişin.
• Kodlar içerisine her hangi bir yere bir kere tıklayın.
• Ctrl + F yardımı ile ]]></b:skin> kodunu aratın ve aşağıdaki css kodunu hemen üzerine ekleyin.


/* 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)}}

• Daha sonra yine aynı şekilde </body> kodunu aratın ve aşağıdaki jQuery kodunu üzerine ekleyin.


<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>

• Daha sonra temayı kaydet butonuna tıklayın.
• Butonları eklemek istediğiniz yere (yazı içerisi , widget vb.) aşağıdaki kodu ekleyip içerisindeki linkleri ve yazıları değiştirin.

<div id="wrap"> <a class="tombolripple tsatu ripple-effect" href="Ön izleme linki buraya gelecek" rel="nofollow" target="_blank">Ön İzle</a> <a class="tombolripple tdua ripple-effect" href="İndirme linki buraya gelecek" rel="nofollow" target="_blank">İndir</a></div>

Eklentide her hangi bir sıkıntı çıkarsa yorumlar bölümünden belirtebilirsiniz.