TricksUniversity Style Social Sharing Sticky BOX

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&amp;width=292&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;border_color=black&amp;stream=false&amp;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.