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 Hide Blogger Widgets from Certain Pages [Complete Hide]
Statistics for blogger [Modification of Default Blogger Stats Widget]
10 Ways To Speed Up Your Website [2016]

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="//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="//tricksuniversity.in/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

WORDPRESS: 0
DISQUS: 1
banner