TricksUniversity Style Social Sharing Sticky BOX

TricksUniversity Style Social Sharing Sticky BOX

add floating Style Social Sharing Sticky BOX like tricksuniversity 2015 blogger

How To Install WAMP Server? [Windows]

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="http://www.tricksuniversity.com/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

DISQUS: 1