Floating Facebook Like Box widget For Blogger:

Floating Facebook Like Box widget For Blogger:
Floating and scroll to to left Side of Blogger Sidebar Facebook Like Box is very attractive way to get more fans to your facebook Page.
As A Blog Owner You need to promote Your Blog. and for this Facebook Really help you. infact Facebook Fan Page is A great Source to attract Visiters.
Now a days everyone Using Facebook to Promote Blog. and you need some likes means Fans to Share your thoughts and to share your Blog posts.

How it Works:
when Some one Hover Mouse on Facebook then it Move to left side and then Go back to the previous state.
The best thing is that it doesn't hurt the user and also did not reserve place in Your Blog.
if you are Using the Common facebook LikeBox in your Blog. usually it Reserve Space and not good impression.

How To add to blogger:

1. Go to Your Blogger Layout, Add Gadget>Html/javaScript
2.Copy The Below Code and Paste it into a Gadget.

<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/AVvXsEhp7-4682LWwJ6ydXLOKgacOIj-EnoC4cCGI32rqlGQYcqMqj-6IaZobvbO4ILigquch45cn9B4GOqc9UOQb3gS0BBnoRHb5WclS360zJRZ4JbpZM0ocydWZsidEQ3j4bwTQDgO3GQtOoUy/s1600/facebook1.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: 10px;font: 9px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #FF9D00;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/username&
width=245&colorscheme=light&show_faces=true& connections=8&stream=false&header=false&height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;">

</iframe></div>
</div>
<a href="http://TrixKing.blogspot.com" target="_blank">Get This Floating Likebox </a>

3. Paste The below Code Just Before </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Note: ignore Step-3 if you already have this code at Before </head>

How to Add in Website:

1. copy and paste above html code just above</body>
2. Also do step no 3 above

Customization And Usage: 
In the Html/Javascript code Replace Username with your Facebook Page User Name.

Replace username with your Facebook Page username

image slider widget | html code for blogger

As Per Your Requests We Are Glad To Present Yet Another Stunning Version Of Image Slideshow Widget For BlogSpot Blogs. This Widget Is Different From Its Previous Versions With Regard To Speed, Load Time, Navigation And Control Options. You Can Use It To Display Even Your Featured Posts Using The Featured Post Title And Description. This Widget Is Again An Extracted Code From A WordPress Template. The Slider Is Coded Such That It Will Appear On Your Homepage Only. So Lets First See A Demo,

Adding The Slider To Blogger:

Kindly follow these steps:

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for </head>
4. Just above it paste the jQuery code in this page -> Slider jQuery Code
5. Then search for ]]></b:skin>
6. Just above it paste the CSS code below, 
7.  /*-------------------- MTS jQuery Image Slider -------------*/

   .featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;} 

   .fp-slides{} 

   .fp-post{padding:13px;} 

   .fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;} 

   .fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;} 

   .fp-title{color:#787878;font:bold 14px  Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;} 

   .fp-title a{color:#000;text-decoration:none;} 

   .fp-title a:hover{color:#0080fF;text-decoration:none;} 

   .fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;} 

   .fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;} 

   .fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;} 

   .fp-nav{width:590px;padding:0px 10px;height:14px;} 

   .fp-pager a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiha679wqKaIPVDaQw-MFXm_koDKWG6oKOx-pcSR1ln_wVLYAk3tCZh2ZDWXGgkoet2z3iFG6XwEYORG8QTb-RfvMa1LBhhsMMeqwaLCI7fndeL81Gm3DgpRoDJt-DJF5dJThzVoeobNi8/s1600/featured-pager.png);cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0 0;} 

   .fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;} 

   .fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJxDcv6RkKAIMPx3uKVoM2mt6UNfU5jMvwVuU-024BRzxq0Pn6MHuM1sBXOeLBCjf6yDX15Pdm6rilNAiByxsnKez8aNTZxt4Glmgjj_K0VwQFMQ3Wz2z2z3uBUAhM1vQWPzes6pHaco8/s1600/featured-prev.png) top left no-repeat;} 

   .fp-prev:hover{opacity:1;} 

   .fp-prev:active{opacity:0.7;} 

   .fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaWaL43_Xa3SdD-hTGycCSkYusZh4FESZNs7rd7mLoPoOjx4sMWiDv_LWlZ7oR5fe039EATRTrXmoFWdxwyJ2SBDKSp4O5xqLADxmU6mT7wn1K77f_82G2ic-Gh5RgvEDM49Xnrxb4PTM/s1600/featured-next.png;) top left no-repeat} 

   .fp-next:hover{opacity:1;} 

   .fp-next:active{opacity:0.7;}

   
   

   7.   Now Search for this,

       <div id='main-wrapper'>   
   
   
   Hint: This code is located near <div id='content-wrapper'>
   PS: In this part most of you will face problems as the coding for each template differ. If you could not find this code then do not panic and simply post your Blog URL in the comments.
      8.   and just below it add the HTML code below,
   <b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   
   <div class='featuredposts clearfix'>
   <div class='fp-slides'>
   <div class='fp-post'> 
   <div class='fp-thumbnail'><a href='ADD POST URL-1 HERE'><img src='ADD IMAGE-1 LINK HERE'/></a></div><h3 class='fp-title'><a href='ADD POST URL-1 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE...</p> 
   </div>
   <div class='fp-post'> 
   <div class='fp-thumbnail'><a href='ADD POST URL-2 HERE'><img src='ADD IMAGE-2 LINK HERE'/></a></div> 
   <h3 class='fp-title'><a href='ADD POST URL-2 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p> 
   </div>
   <div class='fp-post'> 
   <div class='fp-thumbnail'><a href='ADD POST URL-3 HERE'><img src='ADD IMAGE-3 LINK HERE'/></a></div> 
   <h3 class='fp-title'><a href='ADD POST URL-3 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p> 
   </div>
   <div class='fp-post'> 
   <div class='fp-thumbnail'><a href='ADD POST URL-4 HERE'><img src='ADD IMAGE-4 LINK HERE'/></a></div> 
   <h3 class='fp-title'><a href='ADD POST URL-4 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p> 
   </div>
   <div class='fp-post'> 
   <div class='fp-thumbnail'><a href='ADD POST URL-5 HERE'><img src='ADD IMAGE-5 LINK HERE'/></a></div> 
   <h3 class='fp-title'><a href='ADD POST URL-5 HERE'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </p> 
   </div>
   </div>           
   <div class='fp-nav clearfix'> 
   <span class='fp-pager'/>                
   <a class='fp-next' href='#fp-next'/> 
   <a class='fp-prev' href='#fp-prev'/> 
   </div> 
             
   </div>
   
   </b:if></b:if>
   Make these changes:
   

   • Replace ADD POST URL-1, 2, 3, 4, 5 HERE with the URL of your post pages one by one. These URLs will be added twice for each slide. Once for the image and second time for the Post title.
   • Replace ADD IMAGE-5 LINK HERE with the Image link of the Featured post. By default all images have width:580px; height:266px; You can edit the image size by editing the width and height in the CSS code shared in step#6. Make sure all your images must have same size
   • Replace WRITE POST TITLE HERE... with the title of your Post Page
   • Replace WRITE POST DESCRIPTION HERE with the Post Page description. You can write the first few lines of your post here and the readers can read the full post by clicking the title.
   • To Change the Overall size of the slider container then edit in step#6 the following two codes ->width:608px and height:400px

      9.   Save your template and you are done! Visit your blog and say Bingo! :>

Cool Follow Us Twitter Bird ANIMATION Widget For Blogger

Hi guys. Exposure to social media is a very crucial task to gainreputation. Well, people often don't share others blog on their account because they see not benefit in that. In this post, we would show you a very nice twitter widget bird which is attractive. It is made from Flash javascript. I was just surfing on internet and found this widget on a site so I immediately took out the code from source. Hope you would like it..

 Live Demo:  

How To Install The Widget yo Blogger?

• Go to Blogger > Layout > Add A Gadget > HTML/JAVASCTIPT
• Paste the following coding inside it:

 <center> <object data="http://www.buzzbuttons.com/BUTTON12/twitbutton.swf" height="202" type="application/x-shockwave-flash" width="182"><param name="movie" value="http://www.buzzbuttons.com/BUTTON12/twitbutton.swf"></param> <param name="allowscriptaccess" value="always"></param> <param name="menu" value="false"></param> <param name="wmode" value="transparent"></param> <param name="flashvars" value="username=tbloggertricks"></param> <embed src="http://www.buzzbuttons.com/BUTTON12/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="182" height="202" menu="false" wmode="transparent" flashvars="username=tbloggertricks"></embed></object></center> 

• Replace the bolded text with your twitter username and red text with your height and width.
• Save the widget!

Enjoy!!