Cara Membuat Tombol Download & Demo Keren Di Dalam Postingan

Siapa yang punya blog blog download? Jika punya blog download pasti kalian membuat link download. Namun jika tampilan dari link tersebut masih berupa teks atau gambar yang bertuliskan DOWNLOAD maka blog download anda tersebut kurang keren.

Namun berbeda jika tujuannya untuk menambahkan penghasilkan dari ngeblog. Dengan sengaja membuat link download berupa teks sehingga membuat pengunjung bingung mana link download dan mana yang iklan. Jika memang begitu maka pengunjung akan masuk jebakan anda.

Jika anda ingin supaya tampilan link download anda lebih menarik dan keren maka anda perlu melanjutkan membaca artikel ini sampai selesai. Mungkin anda lebih suka untuk membuat link download yang keren dan menarik untuk memudahkan pengunjung untuk mengetahui link downloadnya. 

Akan ada 2 link,link pertama untuk link download dan link kedua untuk link demo. 2 link tersebut ditujukan untuk blog download template namun jika anda tidak memiliki blog download template maka anda bisa menghapus link demonya. Lalu bagimana cara membuatnya? 

Membuat Tombol Download dan Demo Keren 

1. Silakan masuk ke blogger, Template → Edit HTML

2. Salin kode dibawah dan letakkan diatas kode ]]></b:skin>

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

3. Salin kode berikut dan letakkan diatas kode </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>

Lalu simpan Template

4. Sekarang untuk bisa menggunakan tombol download dan demo maka silakan terapkan kode dibawah setiap anda ingin menampilkan tombol demo dan download

<a class="tombolripple tsatu ripple-effect" href="https://www.blogger.com/link_demo" rel="nofollow" target="_blank">Demo</a>
<a class="tombolripple tdua ripple-effect" href="https://www.blogger.com/link_download" rel="nofollow" target="_blank">Download</a>

Selesai...sudah diterapkan belum di blog anda. Cukup sekian tutorial yang bisa saya bagikan. Semoga bisa membantu dan bermanfaat.