Add Customized Google+ Badge In Blogger

In my previous post i talked about how to add a customized Facebook like box without attribution in blogger.But today we developed the framework of that like box working with the Google+ Badge on your blog.It will gather more circles from your readers because it is customized with css.As you can see in the pic in your left,the Google+ Badge is placed inside the customized Framework.
So if you want to add it then follow these simple steps that are just waiting for you below.

1.Go to Blogger Dashboard>Design>Page Elements.
2.Click on "Add a Gadget".

3.Select "Html/JavaScript" from the list and paste the the code below in to it,

<style>
.sharethetricksG1 {
width: 280px;
height: 120px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0

}

.sharethetricksG1, .sharethetricksG1:before, .sharethetricksG1:after {
background: #f4f4f4;
border: 1px solid #ccc;
}

.sharethetricksG1:before, .sharethetricksG1:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}

.sharethetricksG1:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}

</style>
<div class="sharethetricksG1">
<div style="height:160px;overflow:hidden">

<script type="text/javascript">mbgc='fff';ww='300';bbc='0080ff';bmobc='289728';bbgc='0080ff';bmoc='289728';bfc='FFFFFF';bmofc='ffffff';tlc='0080ff';tc='0080ff';nc='333';bc='6a6a6a';l='y';t='Add_Your_Name_on';fs='13';fsb='13';bw='100';ff='4';pc='4889F0';b='s'; pid='111083081178940422621';</script><script type="text/javascript" src="http://widgetsplus.com/google_plus_widget.js"></script>



<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

4.Click on "save".

Then the customization part is left, follow these simple steps for the customization,

• Replace the red code with your Google+ id (only numbers).
• Replace Green with your name.

I hope you like this widget another next awesome post on it's way so to keep updated with us by subscribing to our blog,add us to your circles and like us on Facebook.

Regards,

Abdulsalam