Add A "Circle Me On Google Plus" Widget To Blogger:Digital Tech Inspiration

I already have a nice widget of Facebook on my blog that lets people friend me and I have also shared an equivalent widget from Google Plus in my previous post.

Let's say you don't want to use a third party widget but instead want to build your own, however. I like to build things myself, personally, so this is right up my alley anyway...

LIVE DEMO

How to add "Circle Me On Google Plus" Widget to Blogger?

STEP #1: Log on to Blogger

STEP #2: Go to Dashboard>Layout

STEP #3: Click on Add a Gadget

STEP #4: Select HTML/JavaScript gadget.

STEP #5: Copy/Paste the following code inside that gadget.

<div style="border:1px solid #CCC;border-radius:8px;width:300px;font-family: sans-serif;color:#666;"> <div style="background: #CCC;padding:2px;font-size:100%;border-top-left-radius:7px;border-top-right-radius:7px;color:#fff;"> <center> <img src="http://plus.scriptrr.com/google-plus.png" /> </center> </div> <center> <div style="font-weight:bold;padding:10px;font-size:150%;">Aditya Pratap Mahato</div> <a href="https://profiles.google.com/103576187731291423463"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvbfw7JLLPN-0mrKxHsOiOvZ2gZqMYdYsPMnT9HCmr95YJQ0SBqO_PRzDglw3956ATnRGjSMKiNyxAsiZapRNWl60-xhuFh4CyAabrXZbQcZSBAkHAQGxMLZzkFrQZhzZ_I6-anFsQsX-Q/s321-c-o-k/adirusts01.jpg" alt="Aditya Pratap Mahato on Google Plus" width="140" height="140" border="0" /> </a> <br /> <div style="font-size:80%;">Tech Blogger, Business Partner at M & M Enterprises, Founder of Digital Tech Inspiration.</div> <div style="background: #DB4A38;padding:8px;width:80px;font-size:80%;color:#fff;margin:4px;"> <a href="https://profiles.google.com/103576187731291423463" style="color:#fff;text-decoration:none;">Add to circles</a> </div> </center></div>

How to Customize?

Replace 103576187731291423463 with your Google Plus username.
Replace above highlighted in RED with your profile name and summary details.
Replace above highlighted in YELLOW with your Google Plus profile image link.
You can also adjust the width according to your blog/website.

STEP #6: Now click on Save and it’s done.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.