add floating Style Social Sharing Sticky BOX like tricksuniversity 2015 blogger
Hello Friends,
Yesterday I got mail and ask me about how to add Social Sharing Sticky Display BOX Slide like TricksUniversity.
So today I am sharing Slide-box code, Installation is simple and easy, just follow the step and get Sticky Social Box in your blog/website.
Step 1: Login to blogger account.
Step 2: Go to Template and backup template.
Step 3: Go to Template an click on edit HTML.
Step 4: Now Search for.
</head>
Using CLRT + F.
Step 5: Add jQuery pluggin in a blog before </ head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js" type="text/javascript"></script>
Step 6: Save the template.
Step 7: Go to Layout and click add gadget .
Step 8: Select the HTML/Javascript.
Then copy and paste the code below.
<style>
#TUslidebox {
background: none repeat scroll 0 0 #F3F3F3;
border-radius: 9px 9px 9px 9px;
border: 1px solid #D7D7D7;
top: 50px;
display: none;
padding: 12px 14px;
position: fixed;
right: 50px;
width: 300px;
z-index: 3;
}
</style>
<!-- TUslidebox widget @ TricksUniversity.in -->
<script type="text/javascript">
$(window).scroll(function(){
if($(document).scrollTop()>=$(document).height()
/4)$("#TUslidebox").show("slow");
else $("#TUslidebox").hide("slow");});
function closeTUslidebox(){$('#TUslidebox').remove();}
</script>
<div id="TUslidebox" style="display: none;">
<a onclick="return closeTUslidebox();" href="javascript:void(0);" style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;">(X)</a>
<span style="font-size:14px;color:#000;font-weight:bold">Don't forget to join our community.</span>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/tricksuniversity.in&width=292&height=62&colorscheme=light&show_faces=false&border_color=black&stream=false&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:62px;" allowtransparency="true"></iframe>
<br/>
<!-- Place this tag where you want the badge to render. -->
<div class="g-plus" data-width="290" data-height="69" data-href="https://plus.google.com/+tricksuniversityin" data-rel="publisher"></div>
<!-- Place this tag after the last badge tag. -->
<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>
<br/>
<a href="https://twitter.com/Lab4Hacking" class="twitter-follow-button" data-show-count="true" data-size="large" >Follow @Lab4Hacking</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<br/>
<div style="text-align: right;">
<a href="/social-sharing-box" target="_blank">Get it !</a></div>
</div>]
Step 9: Please replace the text in the mark in bold with your link.
Thanks guys for reading post, please do comment and revisit.
COMMENTS