Cara Mudah Membuat Google Play Button With CSS

Cara Mudah Membuat Google Play Button With CSS - Biasanya, para Blogger yang membuat blog dengan niche download aplikasi Android membuat link download menuju halaman Google Play dengan menggunakan gambar tombol Google Play.

Nah, selain bisa menggunakan gambar Google Play, kamu juga bisa menggunakan Google Play Button menggunakan CSS untuk membuat link download menuju halaman Google Play. Selain ringan, dengan menggunakan Google Play Button tentu akan membuat postingan kamu terlihat keren dan juga rapi. Untuk melihat demonya, kamu bisa lihat tampilan Google Play Button with CSS dibawah ini.

Google Play

Gimana? Keren kan. Penasaran bagaimana membuatnya? Yuk, simak penjelasannya berikut ini.

Cara Membuat Google Play Button With CSS

1. Buka Blogger. Lalu, pilih Theme/Tema > Edit HTML.

2. Kemudian, cari </head>. Lalu, simpan kode CSS di bawah ini tepat diatas kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
@font-face{font-family:"fontfutura";src:url("https://cdn.rawgit.com/KompiAjaib/font/master/product-sans-regular.ttf") format("ttf");font-weight:normal;font-style:normal;}
a.btn-google{color:#fff}
.btn{padding:10px 16px;margin:5px;font-size:16px;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: 'Product Sans', Arial, sans-serif;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/AVvXsEiqtx5-PiOY5JbjgCFjmpMl9XhY8J7cXPUr3jIqq-NTf7Idkt2n5n0Z3vD9nT_2wYvUfJLKkR0CduCEDKf4H5SUinoBB7YjricHZOUtm_DvCBTvnsSJjIDsghQ_nMBAgeZjE17_iBmwzQhs/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>

3. Setelah itu, Simpan Template.

Cara Menggunakan Google Play Button With CSS di Postingan

1. Masih di Blogger, pilih Post. Lalu, pilih postingan mana yang akan kamu letakkan Google Play Button.

2. Jika sudah, masuk ke Editor Postingan. Lalu, ubah ke Mode HTML. Kemudian, copy kode HTML di bawah ini dan pastekan di posisi mana Google Play Button tersebut akan muncul.

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

Catatan :

• Ganti tanda pagar (#) dengan link tujuan ke halaman aplikasi di Google Play Store.

3. Selesai!

Itulah Cara Mudah Membuat Google Play Button With CSS. Dengan menggunakan Google Play Button With CSS, tentu bisa membuat blog kamu menjadi fast loading karena gambar yang dipakai memiliki size yang sangat kecil.

Selamat mencoba! (http://infodiki.blogspot.com)

Referensi :

http://www.kompiajaib.com/2017/05/google-play-button-with-css.html

Related Posts