Memasang Google Play Button With CSS for Blogger

Dispostingan kali ini kita akan membahas lanjutan dari postingan sebelumnya yaitu Membuat Tombol Demo dan Download Di Dalam Postingan Blog yang sangat berguna bagi blog yang niche nya download aplikasi atau lainnya. Banyak permintaan kepada saya untuk membahas Tutorial lanjutannya terutama pemasangan Tombol Download untuk Google Play Button.

Nah di kesempatan ini akan kita bahas bersama Cara Memasang Google Play Button With CSS for Blogger yang berguna bagi sobat yang mau menshare aplikasi buatannya. Google Play Button ini dapat di pasang di dalam Postingan Blog atau pun diluar silahkan tentukan saja maunya dipasang dimana. Cara Memasang Google Play Button With CSS for Blogger ini juga cocok untuk Blog yang membahas seputar aplikasi yang sudah di daftarkan ke Google Play nanti didalam kode script yang akan dipasang tersebut langsung mengarahkan ke URL Aplikasi Google Play.

Langsung saja bagi sobat yang mau mencobanya mari ikuti langkah penerapannya Cara Memasang Google Play Button With CSS for Blogger.

Untuk hasilnya dapat dilihat pada DEMO dibawah ini. 

Demo

Langkah Pertama

Silahkan salin kode CSS dibawah ini lalu letakkan di atas kode </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
@font-face{font-family:"fontfutura";src:url("https://fonts.googleapis.com/css?family=Open+Sans") format("ttf");font-weight:normal;font-style:normal;}
a.btn-google{color:#fff}
.btn{padding:10px 16px;margin:5px;font-size:18px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none;display:inline-block}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-google{color:#fff;background-color:#111;border-color:#000;padding:15px 16px 5px 40px;position:relative;font-family:fontfutura;font-weight:600}
.btn-google:focus{color:#fff;background-color:#555;border-color:#000}
.btn-google:active,.btn-google:hover{color:#fff;background-color:#555;border-color:#000;}
.btn-google:before{content:"";background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiggs3_jXPRxydvpdw8fS42RMGUT_4E32TOAzQ-pJ77pv8AhV5LAm-eJzltIIfmVvpafzx3swJh5ywMiumevLkb8s8cHRW0NaPoO-lFGPQ6jcnbG_zIVxczi1T4HX7ULV-Ph-VzB0Kp03mN/s30/nexus2cee_ic_launcher_play_store_new-1.png);background-size:cover;background-repeat:no-repeat;width:30px;height:30px;position:absolute;left:6px;top:50%;margin-top:-15px}
.btn-google:after{content:"GET IT ON";position:absolute;top:5px;left:40px;font-size:10px;font-weight:400;}
/*]]>*/
</style>
</b:if>

Langkah Ke Dua
Untuk menampilkan tombol Google Play silahkan salin kode HTML di bawah ini lalu letakkan di dalam postingan.

<a class="btn btn-google" href="#" title="Google Play">Google Play</a>

Dan selesai selamat mencoba.