Skip to main content
KOMPI AJAIB

follow us

Mau memiliki tema blog seperti tema blog Kompi Ajaib ini? Silahkan baca postingan ini ➜ Template Kompi Ajaib AMP V3
Tambahkan aplikasi Kompi Ajaib di smartphone tanpa install, klik ikon 3 titikdi browser Chrome kemudian pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi Kompi Ajaib dari layar utama smartphone Anda.

×

Google Play Button With CSS

Mungkin saja di antara sahabat Blogger ada yang berniat membuat blog share aplikasi android dengan link download menuju halaman Google Play. Tentu saja agar lebih bagus postingan tentang aplikasi android-nya, sebaiknya link download yang menuju Google Play menggunakan Google Play button.

Selain menggunakan gambar tombol Google Play yang sudah ada, tentu saja kita juga bisa membuat tombol Google Play menggunakan CSS.

Sebagai demonya, penampakan tombol Google Play seperti pada iframe JSFiddle di bawah ini.


Bagaimana, tertarik juga untuk menggunakannya?

Silahkan simpan CSS di bawah ini 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://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: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://4.bp.blogspot.com/-52U3eP2JDM4/WSkIT1vbUxI/AAAAAAAArQA/iF1BeARv2To-2FGQU7V6UbNPivuv_lccACLcB/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>

Kemudian gunakan kode HTML di bawah ini untuk menampilkan logo di dalam postingan.


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

Selamat mencoba dan semoga bermanfaat.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar