How to install widget google plus floated on the blogspot

Scroll Down and click on Go to Link for destination

Congrats! Link is Generated

Irvan Dev Blog on this occasion will share a litle tutorial on how to install the widget google plus floated on blogspot, before going into the installation process, i would like to say hello to all of my dear friends, wherever you are, i hope you all always in a good health, and had time to read this article.

Well to start installing the widget with using CSS and Javascript Code, you can do easily provided it is done with carefull and it will be perfect :D.

How To Install Widget Google Plus Floating On Blog

Lets follow the steps bellow:

1. Login to your blogger panel admin

2. Click On Template » Edit HTML

3. Find this kbd Ctrl+F ]]></b:skin> or </style>

4. Then add the following CSS script just above the kbd ]]></b:skin> or </style>

#irvandevbox {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:blue;
border:2px solid black;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#irvandevbox a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}

5. Add script HTML/Javascript just above the code </head>

<script type='text/javascript'>
$(window).bind("load", function() {
// Page Loaded
$('#irvandevbox').animate({top:"200px"}, 1000);
// Close Button
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>

6. Add script HTML/Javascript just above the code </body>

<div id='irvandevbox'>
<!-- HTML Start -->
<div style="text-align: center;">
<p style=" margin:10px; font-size:15px; color:#000; font-weight:bold;">Please Follow Me On Google Plus 
, Thanks.</p>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-person" data-href="https://plus.google.com/+IrvanDevIce"></div>
</div><div class='g-plusone' data-annotation='inline' data-width='300'>
<script type='text/javascript'>
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<!-- HTML End -->
</div>
<small><div style="text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://irvandev.blogspot.com" target="_blank" title="Get Widget">+ Get This </a></div></small><a class='close' href='http://irvandev.blogspot.com' title="Click G+, Thanks">X</a>
</div>
<div class='clear'></div>

Click save and see the results, good luck