Facebook is the number one social media website. and it gets a lot of monthly unique visitors and it have 1 billion users. It's the best place to promote your website and get new visitors for your blog.
You must have social sharing widget in your website, so people will share your posts on facebook easily. And facebook will drive traffic to your website.
and it's a cool widget which save space and it's a eye catching widget. After telling it's advantages then if you want to add it to your website then follow my instructions.
Adding Static Facebook Pop out like box with smooth Jquery Hover Effect:
Step 1: Open blogger dashboard.
Step 2: Click on the template button, then click on the "EDIT HTML" button.
Step 3: Search (Using CTRL + F ) to find the following code.
Step 4. Add the below code before/after </head> tag:
Step 5: Save the template.
Step 6: Now Open Layout>Add a gadget> Choose HTML JavaScript and paste the below code in the HTML box.
Step 2: Click on the template button, then click on the "EDIT HTML" button.
Step 3: Search (Using CTRL + F ) to find the following code.
</head>
Step 4. Add the below code before/after </head> tag:
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Step 5: Save the template.
Step 6: Now Open Layout>Add a gadget> Choose HTML JavaScript and paste the below code in the HTML box.
<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrWSBTGJknjPL3rdDs8QkQ0oSwz0VNyO42omFJPlQtqfdhLgblXUaHNCf0wKEyn9pN9Mj_B3ZBHvtuzrOZDpCotnQz9YVJRbi-RBQRP_kDVrUHsxlFCpNbOE_66yP06rFRYWRvmqalav4/s1600/vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
(function(w2b){
w2b(document).ready(function(){
var $dur = "medium"; // Duration of Animation
w2b("#fbplikebox").css({right: -250, "top" : 100 })
w2b("#fbplikebox").hover(function () {
w2b(this).stop().animate({
right: 0
}, $dur);
}, function () {
w2b(this).stop().animate({
right: -250
}, $dur);
});
w2b("#fbplikebox").show();
});
})(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
<div class="fbplbadge"></div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=YOUR-FACEBOOK-PAGE&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#FFFFFF;" allowtransparency="true"></iframe>
</div>
Step 5: Replace YOUR-FACEBOOK PAGE with your facebook page URL.
Now you're done, Please Share and Comment on this post if u like this widget. If you face any problem don't hesitate to ask in the comment section.
Now you're done, Please Share and Comment on this post if u like this widget. If you face any problem don't hesitate to ask in the comment section.
0 comments:
Post a Comment
If you face any problem, then don't hesitate. Just Sumbit Your Problem In The Comment Section Within 24 Hours. Be Careful We Have Zero Tolerance For Spam !