Cara Membuat Tombol Download Dan Demo Keren. Hallo teman-teman kali ini saya akan membagikan cara membuat icon download dan demo di postingan blog keren dengan menggunakan edit template HTML di blog kalian.
mungkin banyak blogger di luar sana yang mengira jika icon atau tombol download di artikel blog menggunakan gambar entah itu .png atau .jpg, tapi cara itu dirasa malah mengurangi kualitas SEO blog kita, jadi lebih bagusnya menggunakan tombol dwnload via edit HTML.
penasaran seperti apa? contoh seperti dibawah ini
Cara Membuat Tombol Download Dan Demo Di Blog
1. Buka blogger masuk ke template - edit HTML - dan masukkan script dibawah ini sebelum kode ]]></b:skin> atau </style>
/* Arlina 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)}}
2. Kemudian tambahkan kode ini sebelum </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>
kemudian simpan template
sampai disini anda sudah berhasil memasang tombol download dan demo di blog kalian, selanjutnya untuk menampilkan tombol tersebut di setiap artikel yang kita ingginkan tinggal masukan kode dibawah ini di HTML postingan kalian.
<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>
Ganti # ke link yang kalian inginkanoiya cara ini saya dapat dari situs arlinadzgn hehe terimakasih buat mba arlina udah buatin tutorial keren ini hehe
sekian Cara Membuat Tombol Download Dan Demo Keren semoga bermanfaat jika ada yang perlu ditanyakan silahkan berkomentar dibawah, sampai jumpa di artikel saya selanjutnya..
Next
« Prev Post
« Prev Post
Previous
Next Post »
Next Post »
Post a Comment