Adding different networks plugin really help every site or blogs to increase their subscriber and followers. So it is necessary for every Blogger to take benefit from these plugins. I already publish may social sharing and social subscribing widgets. So here is another one, which is combine slide out widget. Few days back i post about Facebook Slide out Widget which was really awesome. Today i am going to introduce another widget similar to previous one but the amazing part behind gadget is it contain 4 different networks Facebook, Google+, Twitter and Feedburner. This widget appear on right side of your blog and comes out on mouse hover. If you want to add then follow below given simple steps.Add 4 in 1 Social Gadget On Blog
- Firstly Open your blogger Dashboard >> Then go to Layout Section
- Click on Add a gadget button
- Then open HTML/JavaScript
- Now Paste the below code in Gadget Blog
<style>
img, a { border: 0; } #on { visibility: visible; } #off { visibility: hidden; } #facebook_div { width: 235px; height: 236px; overflow: hidden; } #twitter_div { width: 246px; height: 240px; overflow: hidden; } #google_plus_div { width: 290px; height: 250px; overflow: hidden; margin-left: 5px; margin-top: 1px; }
#STfeedburner_div { width: 300px; height: 120px; overflow: hidden; margin-top: 5px; margin-left: -4px; }
#ST_div { width: 300px; height: 97px; overflow: hidden; } /* right side style */ #facebook_right { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 235px; height: 236px; position: fixed; right: -239px; }
#facebook_right img { position: absolute; top: -2px; left: -35px; }
#facebook_right iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 236px; left: -2px; top: -3px; }
#twitter_right { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 250px; height: 240px; position: fixed; right: -254px; }
#twitter_right_img { position: absolute; top: -2px; left: -35px; border: 0; } #google_plus_right { z-index: 10003; background-color: #F2F2F2; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-right: 2px solid #0056a0; border-left: 2px solid #0056a0; width: 290px; height: 250px; position: fixed; right: -294px; }
#google_plus_right_img { position: absolute; top: -2px; left: -33px; border: 0; }
#feedburner_right { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-right: 2px solid #5b5b5b; border-left: hidden; width: 300px; height: 97px; position: fixed; right: -304px; }
#feedburner_right_img { position: absolute; top: -2px; left: -33px; border: 0; }
#ST_right { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; }
#ST_right img { position: absolute; top: -1px; left: -101px; } /* left side style */ #facebook_left { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 235px; height: 236px; position: fixed; left: -239px; } #facebook_left img { position: absolute; top: -2px; right: -35px; }
#facebook_left iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 236px; right: -2px; top: -3px; }
#twitter_left { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; height: 240px; position: fixed; left: -254px; } #twitter_left_img { position: absolute; top: -2px; right: -35px; border: 0; }
#google_plus_left { z-index: 10003; background-color: #006ec9; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-left: 2px solid #0056a0; border-right: 2px solid #0056a0; width: 290px; height: 120px; position: fixed; left: -294px; }
#google_plus_left_img { position: absolute; top: -2px; right: -33px; border: 0; }
#feedburner_left { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-left: 2px solid #5b5b5b; border-right: hidden; width: 300px; height: 97px; position: fixed; left: -304px; }
#feedburner_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #ST_left { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #ST_left img { position: absolute; top: -2px; right: -101px; }
.box-title1 { border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; /*box-shadow*/ -webkit-box-shadow: 5px 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px 5px #CCCCCC; box-shadow: 5px 5px 5px #CCCCCC; padding: 10px; margin: 10px 0; } .enteryouremail { background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 165px; /*border-radius*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 0px; }
.submitbutton { background: #FF8000; border: 1px solid #F66303; /*box-shadow*/ -webkit-box-shadow: 3px 3px 3px #666; box-shadow: 3px 3px 3px #666; font: bold 12px Arial, sans-serif; color: #000000; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; /*border-radius*/ -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function () {jQuery("#facebook_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#facebook_right").stop( true, false).animate( { right: -239 }, 500); }); jQuery("#twitter_right").hover( function () { jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#twitter_right").stop( true, false).animate( { right: -254 }, 500); }); jQuery("#google_plus_right").hover( function (){ jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function () { jQuery("#google_plus_right").stop( true, false).animate( { right: -294 }, 500); }); jQuery("#feedburner_right").hover( function (){ jQuery(this).stop(true, false).animate( { right: 0 }, 500); }, function (){ jQuery("#feedburner_right").stop( true, false).animate( { right: -304 }, 500); }); }); </script>
<br />
<div id="on">
<div id="facebook_right" style="top: 8%;">
<div id="facebook_div">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVn06DYSLGy14yHLjvtgU1Nw_RGEwTwjhBLOs9t3rs0fcd86qV_Q0ncNhj1NB1iFcLj4M9N57FaPJj8sS3Yh2bz9l8rqZImNs1iFVu0_j-eWKxAwtsYW_auRNKj21Iy5x6wmoeV7Zem2_r/s101/fbfloat.jpg"/>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FSafeTricks&width=250&height=250&colorscheme=light&show_faces=true&border_color&stream=false&header=false" style="border: none; height: 250px; overflow: hidden; width: 250px;"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 25%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCAKRjQQBvNXAkD4iA1fI4V9pJ1b73RCTqTytQ4iqseqOJruqHwkj6nsAvvdxqT4OCyDW1WGozGR_nFX7pU2icCN4ILc13vfCe0XwfpEzCLMTFMpVe6ELm0znxHOfFlxOv0dgqK65Q5NE/s101/twitter-icon.png" />
<div style="width:248px;font-size:8px;text-align:right;">
<script type="text/javascript"> document.write(unescape("%3Cscript src='http://twitterforweb.com/twitterbox.js?username=safetricks&settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699' type='text/javascript'%3E%3C/script%3E" ));</script> <a href="http://Safetricks.net/" target="_blank"></a></div></div></div></div><div id="on"><div id="google_plus_right" style="top: 42%;"><div id="google_plus_div">
<img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1ud1ir9oZT7iet3yChICOT-dsL-AF5B8-i-a_C_m0UWoV6R4j-eh_NLqZS1-P4nM3hJpCVcNv4yyAbtFkoGZgjxou36kdj5M8FdIE0nke4rc95Ftn-rYXbGlfS80LiqRFAh4ycpVpyE/s101/googleplus.png"/> <div style="float: left; margin: 10px 10px 10px 0;">
<div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/118420518669081259516"data-source="blogger:blog:followers"data-width="270"></div> <script type="text/javascript"> (function () { window.___gcfg = { 'lang': 'en' }; 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></div></div></div><div id="on"><div id="feedburner_right" style="top: 59%;">
<div id="STfeedburner_div"><center> <h4 style="color: #f66303;">You can also receive Free Email Updates:</h4> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Safetricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="enteryouremail" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" value="Enter your email here..."/> <input name="uri" type="hidden" value="Safetricks" /><input class="submitbutton" type="submit" value="Submit" /></form></center>
<img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhJI_izd7pX0bFEs-NTcg-MVkw7fFmYWbNNWesxxfhiAKpe9p88toV4jNdec9EgdToFtYnCssQ6pCBpl9Os5X-zHbVJAbmAtZvYkIYymnLz0pxaLjyr27I73mDA-R68P2SQUkua5Zs970/s101/subscribe-icon.png"/>
<div style="float: right; padding: 15px; margin: 0px;">
<span style="font-size:10px;">Widget by <a href="http://Safetricks.net rel="nofollow"> ST</a></span>
</div></div></div>
</div></div>
- Now Replace Usernames on bases of matching colors
SafeTricks With your Facebook Username
SafeTricks with your Twitter Username
118420518669081259516 with your Google+ id
SafeTricks with Feedburner id which comes 2 times
- After replacing all usernames click on Save Gadget button
0 Comments