How to install widget google plus floated on the blogspot

ErnasLie
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

Widget Google plus Floating On Blogspot Irvandev
Widget Google Plus[images:acebangsam.us]



Change This Text: +IrvanDevIce with your own Url

2 comments

  1. nice share.... :tq
  2. Thank You Very much.... :gl
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.