Google Plus Author And Page Badge With Photo For Blogger Blog

Google have rocked the SEO world with their release of Google+ Pages and you’ll want your Google+ Page Badge in place quickly to take advantage of this cool feature. You can link your Google+ page to your site but you can only choose the default styles from Google developer tool.

So, I want to tell that you can customize your G+ author and page badge for blogger blog. I had customized the author page badge from Google. I had added some cool features in this widget. Features of this widget are given below:

• Profile Picture With Hover Effect
• Your Name and Circles

<div style="width:280px; padding:10px 10px 5px 10px; margin:0px; border:1px solid #000000;">
<b><font style=" font-size:20px; color:#167cdc; font-family:arial;"><a href='https://plus.google.com/117100549673033253859' target="_blank" rel='nofollow' title='Gagan Masoun' alt='Gagan Masoun'>Gagan Masoun</a> <font style=" font-size:14px; color:#2e2e2e; font-family:arial;">In <a href="https://plus.google.com/117100549673033253859" target="_blank" rel="nofollow">+195</a> Circles →</font><div style="clear"><br />
<style>
#BlogsDaddy{
border:2px solid #167cdc; margin:2px 5px 0px 0px; padding:1px;
}
#BlogsDaddy:hover {
border:2px solid #167cdc;
cursor:pointer;
}
.opacity  {
opacity: 0.6;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
zoom: 1;
}
.opacity:hover  {
opacity: 1;
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
</style>
<a href="https://plus.google.com/117100549673033253859" target="_blank" rel='nofollow'><img class="opacity" id="BlogsDaddy" src="https://lh4.googleusercontent.com/-wVsJ5TO9IJo/AAAAAAAAAAI/AAAAAAAAC2E/f-QShaCQ8bg/s250-c-k/photo.jpg" align="left" height='48px' width='48px' title='Gagan Masoun' alt='Gagan Masoun' /></a>
<!-- Place this tag where you want the badge to render -->
<g:plus href="https://plus.google.com/117100549673033253859" rel="author" width="210" height="69"></g:plus></div></font></b></div><br />

• https://plus.google.com/117100549673033253859 - Replace With Your Google+ Profile URL ( 4 Times Repeated)
• https://lh4.googleusercontent.com/-wVsJ5TO9IJo/AAAAAAAAAAI/AAAAAAAAC2E/f-QShaCQ8bg/s250-c-k/photo.jpg  - Replace With Your Profile Picture URL
• Gagan Masoun - Replace With Your or Page Name  ( 4 Times Repeated)
• +195 - Replace This With The Number Of People In Your Circles

How To Add Google Plus Author And Page Badge To Blogger Blog

• Go to Blogger Dashboard > Layout
• Then Select Add a Gadget > HTML/JavaScript
• Copy and Paste The Above Code Into HTML/JavaScript Gadget and Click On Save
• Its Done, Enjoy Blogging

If you need any type of help regarding this widget. Don't hesitate, ask via comments below.See you soon with more tutorials and useful articles. Keep blogging.