Hello Today I am Presenting a tutorial on How to Add A Static Pop Out Like Box with smooth J query hover effect in Blogger.This Widget has many advantages like it does not take large space of your blog.Here I have added as the box with simple jQuery hover effect. See Facebook static plate to the right of the page and move the mouse over the plate with the frame, as is visible by sliding to the left.You can see this widget at the right side of
Bloggiks.
Recommended posts:
How To Add Google Buzz Counter To Blogger?
Add google +1 button and Other Share Buttons Below every Post Titles
How to Add A Static Pop Out Like Box with smooth J query hover effect in Blogger?
1-Go to Blogger Dashboard < Design tab > Edit Html
2- Search for
</head> tag.
3- Add the below code Before
</head> tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
4-Now Save Template
Now,
Go to blogger Dashboard and click on layout
then Add a Gadget > Html/java script.
Add below code in the Html/java scipt box.
<a href="http:bloggiks.com" target="_blank" title="Blogger Widgets"><img src="" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPXYS3yRzJ48buxOAlManVAi5dibr-7_Y1TFz1-Sgg6LleGVxmMGmhdpkRSJ8Xh2528l5s493s15cE2Wbwq5VID1JhkSmiP2ylUwMNBV_k2CS7Eq0kWAKeQtUyEmXVI8BgjgvIReOmjxoU/s1600/facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/bloggiks&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>By <a href="http://bloggiks.com/">Blogspot tutorial</a> / <a href="http://bloggiks.com/">+Get This!</a></span></div></div>
</div>
15:50 
Waleed Khan 
No comments:
Post a Comment