Join With Girls Whatsapp Group

Join With Girls Whatsapp Group
Click Here
Showing posts with label Face Book Like Box. Show all posts
Showing posts with label Face Book Like Box. Show all posts

Sunday, 11 May 2014

Adding Static Facebook Pop Out Like Box Widget To Blogger Free

Adding Static Facebook Pop Out Like Box Widget To Blogger Free
Hello friends, here's another Facebook jquery pop up for facebook like box widget for bloggers (or) website. Advantages this widget is to free space on the page. Because Facebook can prevent website normal as the box. Static Pop Out Facebook as soft box with jQuery effect of activation for the blogger, this is another cool control. 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. 


Step 1: Adding Static Facebook Pop Out Like Box Widget To Blogger layout.

Now let's start adding it...




Step 2. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.




Step 3. After click on Add a Gadget link A pop-up box will open now

with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.


Step 4. Select 'HTML/Javascript' and add the one of code given below.

Step 5. Now Click On Save 'JavaScript' You are done.




<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<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/AVvXsEiqww83Yc373PgwElGrqgZgdxN7pxPbkn7AHLasTEy09If8hIKW0xuf5MoqIo3dkAtNi7tvtlFU_KFD6IM-4PmIsyqL5Wy_eL7NLehzY4o-IjgifWS6bGf8SdIYdg2xskprkGHQc1Yk_vXn/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><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/MultySolutions&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>



>> In Customize Field Replace "https://www.facebook.com/MultySolutions" with your own facebook page name (Not your own profile name)


<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>


Note :If your template already have a jquery do not put again, just copy after it

Html from above a few things could be replaced :


05:21 - By ASLOM MOBILE 0

Add a Custom Facebook Like Box to your Blog Free

 Add a Custom Facebook Like Box to your Blog Free

Facebook Like Box is very useful widget to show visitors the authority and love of the people for his blog. Facebook offers a simple Like Box plugin that you can easily integrate into your website But the default Facebook like box is not having good look at ugly all. This tutorial will show you How To Add Cute Custom Facebook Like Box using CSS To Blogger. Facebook Like Box is the best way to get more fans on Facebook. A Fan Box allows great attract your Blog more visitors or readers to like your Facebook fan page not leaving the like go here. you don't need to do any think you only need to copy and paste the code. Im Sure that this Cool Customize Facebook Like Box With CSS widget attracts your facebook fans increase the count of Likes.

How To Add a Custom Facebook Like Box to Your Site


Now let's start adding it... 

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link. 

http://multy-solutions.blogspot.in/

Step 2. After click on Add a Gadget link A pop-up box will open now
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget. 


Step 3. Select 'HTML/Javascript' and add the one of code given below. 

Step 4. Now Click On Save 'JavaScript' You are done.

Note:- Replace MULTY SOLUTIONS With your Facebook User name


Style 1:-
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfAgWdLNm3Lh5oOqCz8AqXtTOdXDGCvBGsA-b51o02mxJc9nW8jRnBS9Yii5k2CA_1bE7aBABCWqi4TcjTiI7rJuZfc4WPZmWwVv03kUDk5p-8EQW4oAtouJKGmh7HGfqN0ayiP_LshnE/s1600/multy+solution+copy.jpg


<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXRvUkGwUkcIS7kvUVs9kEV5rbcMn9w5_otApLId4Fc9dkNDzdhLGfb0BnvsVc09a2yBk5g0Mbs70wpKJXL4MOauQZ7lHAvV9MOq71QlmIxt7cPqULsvXw5s8i-URY5P7cT6fAxukGaq4p/s1600/fan-02-pic.png');overflow:hidden;border-radius: 110px;.height:250px;width: 238px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/MultySolutions&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe>
</div>
</div>


02:16 - By ASLOM MOBILE 0

Visitor

Powered by Blogger.
back to top
-