Ana Sayfa CSS HTML Blogger CSS Google Play Butonu

Blogger CSS Google Play Butonu

6.6.17
Blogger CSS Google Play Butonu

Blogger CSS Google Play Butonu - Bu yazımızda blog sitelerinde android bir uygulama paylaşıldığında, bu uygulamayı indirmek için bir Google Play butonu eklentisi ile ilgili ipuçları paylaşacağım. Böylece blog sitelerinde paylaşılan adroid uygulamaların bir indirme bağlantısı olduğunu gösterek ziyaretçilere daha iyi bir hizmet sunulmuş olacak.

Blog Sitesine Google Play Butonu Nasıl Eklenir?


Google Play butonunu CSS kodları ile blog sitenize ekleyerek istediğiniz gibi kullanabilirsiniz. Butonu eklemek için aşağıdaki adımları takip edin.

1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Açılan sayfada CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki CSS kodlarını </head> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

<style type='text/css'>
/*<![CDATA[*/
@font-face{font-family:"fontfutura";src:url("https://rawgit.com/Bloggeritunes/font/master/futura-pt-medium.otf") format("woff");font-weight:normal;font-style:normal;}
a.gp-btn-google{color:#fff}
.gp-btn{padding:10px 16px;margin:5px;font-size:18px;line-height:1.3333332;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}
.gp-btn:active:focus,.gp-btn:focus{outline:0}
.gp-btn:focus,.gp-btn:hover{color:#333;text-decoration:none;outline:0}
.gp-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)}
.gp-btn-google{color:#fff;background-color:#111;border-color:#000;padding:5px 16px 15px 40px;position:relative;font-family:fontfutura;font-weight:400}
.gp-btn-google:focus{color:#fff;background-color:#555;border-color:#000}
.gp-btn-google:active,.gp-btn-google:hover{color:#fff;background:#555;border-color:#000;}
.gp-btn-google:before{content:"";background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABXFBMVEVHcEz/xwj/3BrvzQAAy//30AAb8YAA4f8A2f8A0v//0yk/8pv/3Q3/0xb/3zsA9Yn70wAW8X3TAECKdQD4ygDzNULiMT8t84zzNEbmMEMT8XwAAAAh8YXmLkfGJj1B4lgfn/9M76MAxv/kK0kb33s524o15YzSJkYa6n7YJE7WJkvjKU0A8XYA2f8Azv8Ayf8Awv8Ax/8A3v8A6v8A0/8A0f8A1v8AzP8A4f8A3P8A82f/zgD/ygAA1f8A0tj/xgD8N0b3M0kA4///1wD/0gAA5//5NUfyMEsA9Hz/wwD/LUf/JTIH+ny0fp0A93img6HxCUL1FDvuLE//4wAA83f/OEn/vQAN83r9HTevgZ8A73b4MFAH6GYDz9irg6D/3we730P/eDe51UD/cTW500C51jL/ZiS4daH/bzUA2OCahqUA0dgGy9gC8GcJ73oN1eEO5GoA9v8A7f/lKFHBJrdUAAAALHRSTlMA9L5+ZKS3ZGRkbjjC3UCX+9hLGMbkeGb4n/EMkMFDTicvZt/tb19x07uZ9noB8iEAAAExSURBVCjPvdLXcoJQEAZgUvSk9957xwKaYIsiUhQRJNEoanrv5f1nckikBchNZrK3387Ozu6PIH+v+dXfdOHldWXNnZf8j/XnjUU3bvcFGnUl73XjcDDQeFIKRzPOHPIHAw9RZacwNe7AnYk96PtRRTnMD3bbGfVpDhu8dg4bDlfot3JHJGR27rSly8JYyOTceTZO9faZeddw7rKcjMcyJ60GE6jud1flrMrUQY/OaVRz3811sskejUE60vSEwOdu45CpgTZ9OKAj344KfCqVu4jFMh7T5oDGvhwTeIaBfjYyjFhZdaJaIUkmVRodsp4F0AT0dLXCkmRpYuznUQFOEBh+XGQhT9o/pjJUma3NTiOOjItFubY85xgHgL+Lkry97hIm8CZKH1vuUb2XNpH/r0+zYUz0ADwFrwAAAABJRU5ErkJggg==);background-size:cover;background-repeat:no-repeat;width:30px;height:30px;position:absolute;left:6px;top:50%;margin-top:-15px}
.gp-btn-google:after{content:"'Den indir";position:absolute;bottom:5px;left:40px;font-size:10px;}
/*]]>*/
</style>

2- Yukarıdaki CSS kodlarını ekledikten sonra aşağıdaki Google Play HTML kodunu blogunuzun sayfalarında veya yayınlarında istediğiniz gibi kullanabilirsiniz.

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


Blogcular için bu yazımızda blog sitelerine Google Play butonu ekleme ile ilgili bilgiler paylaştık. Yayın ile ilgili soru ve görüşlerinizi yorum yaparak bize iletebilirsiniz.

Yorum Gönder