Memasang Google Play Button With CSS for Blogger

Dispostingan kali ini kita akan membahas lanjutan dari postingan sebelumnya adalah Membuat Tombol Demo dan Unduh Di Dalam Postingan Blog yang sangat memiliki kegunaan bagi blog yang niche nya unduh aplikasi atau lainnya. Banyak undangan kepada aku untuk membahas Tutorial lanjutannya terutama pemasangan Tombol Unduh untuk Google Play Button.

Nah di kesempatan ini akan kita bahas bersama Cara Memasang Google Play Button With CSS for Blogger yang memiliki kegunaan bagi sahabat 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 aba-aba script yang akan dipasang tersebut eksklusif mengarahkan ke URL Aplikasi Google Play.

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

Untuk karenanya dapat dilihat pada DEMO dibawah ini. 

Demo

Langkah Pertama

Silahkan salin aba-aba 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/AVvXsEhudblyjkoxU8IENqlX4sjImn73jNZbGb1-xAB_nwW8WGAahMgmo2jebiGbDCLR-9iknKDnirEiB2OtP9-dRt7-4V8BPgHv7FWI0TM2W4e8FvSoSSSnqiUHRdNvF89YRnMQR29jauD4Muad/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 aba-aba HTML di bawah ini lalu letakkan di dalam postingan.

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

Dan final selamat mencoba.