Add Google Play Button In blogger

Blogger CSS Google Play Button

Blogger CSS Google Play Button - When we share an android app on blog sites, we'll share tips on a Google Play button add-on to download this app. This will provide a better service for visitors, showing that the apps shared on blogs are a download link.

How to Add Google Play Button to Blog Sites


You can use the Google Play button as you like, adding CSS code to your blog site. Follow the steps below to add the button. 

1- Log in to your Blogger account and open the template codes page of your blog by following the theme> Edit HTML on your blog's control panel. In the opening page, find the </head>code with the help of CTRL + F and add the following CSS </head>codes on a line of the code and save the template.

<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:15px 16px 5px 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-color:#555;border-color:#000;}
.gp-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}
.gp-btn-google:after{content:"GET IT ON";position:absolute;top:5px;left:40px;font-size:10px;}
/*]]>*/
</style>

2- Once you've added the above CSS code, you can use the following Google Play HTML code as you like on your blog's pages or posts.

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


For bloggers, this summer we shared information about adding Google Play button to blog sites. You can send us comments and comments about the broadcast.

No comments