Cool Floating Recent Tweets Widget for Blogs

cool floating twitter follower boxI recently Posted a cool twitter follower widget for blogger blog. Previous one is聽 a simple widget for sidebar.Today I’ve Floating Recent Tweets Widget For Blogger and WordPress Blog. When you move cursor on it. It pop out with Cool Floating Recent Tweets Widget. This is a great widget for you to increase twitter followers and force visitors to follow you. 馃槈
 
Below I’ll show you how to add this Cool聽Floating Recent Tweets Widget In Blogger and WordPress.
 


Live Demo

Adding Cool Floating聽Floating Recent Tweets Widget.

Adding Recent Tweets Widget To Blogger

  1. Go to Dashboard > Design > Page Elements.
  2. Click Add A Gadget. In window, select HTML/Javascript .
  3. Copy the code below and paste it inside the box.
  4. Click Save button.

Adding Recent Tweets Widget To WordPress

  1. Go to Dashboard > Appearance > Widgets > Available Widgets.
  2. Drag Text widget into a sidebar.
  3. Paste in the code.
  4. Save.
<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#twitter_div{width:246px;height:353px;overflow:hidden;}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px;}#knfeedburner_div{width:300px;height:97px;margin-top:25px;overflow:hidden;}#kakinetwork_div{width:300px;height:97px;overflow:hidden;}

#twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px;}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0;}

#kakinetwork_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_right img{position:absolute;top:-2px;left:-101px;}/* left side style */#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}#twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px;}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0;}
#kakinetwork_left{z-index:10003;border:2px solid #303030;background-
color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_left img{position:absolute;top:-2px;right:-101px;}

</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>

<div id="on"><div id="twitter_right" style="top: 20%;"><div id="twitter_div"><img id="twitter_right_img" src="http://2.bp.blogspot.com/-fcEMbjMcVhI/UDzNfUCWxcI/AAAAAAAAAt4/p0lew_c7Sxw/s320/allbloggingtips.com-twitter-icon.png" /><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 260,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('allbloggingtips').start();</script></div></div></div>

</div>

Just replace allbloggingtips with your twitter username. That’s it! 馃榾

Visit your Blogs to see it floating at the right side of your webpage. I hope this Floating Recent Tweets Widget will help you in increasing the number of your Twitter Followers.聽That鈥檚 all. If you face any problem in聽Floating聽Floating Recent Tweets Widget then don鈥檛 stop just drop your comments and Feel free to ask.

Customized and Stylized Subscription Widget

ABT widget sidebarMany of this blog readers asked me which plugin/code I’m using in sidebar for Stylized Subscription Widget. So today I decide to share this with you! because It’s almost more than 2 months. I’ve not shared any Stylized Subscription for Widget Blogger and WordPress Widget.

Coming back to topic this widget simple uses HTML and CSS. It’ll keep your sidebar clean! 馃槈 It contains FeedBurner Form, Twitter Follow Button, Facebook and Google buttons.

To see demo copy code below and place it in our HTML Editor.

Adding Customized and Stylized Subscription Widget

You just need to place a code to your blog widget Follow following steps to add Customized and Stylized Subscription Widget to WordPress and Blogger both!

Adding Subscription Widget To Blogger

  1. Go to Dashboard > Design > Page Elements.
  2. Click Add A Gadget. In window, select HTML/Javascript .
  3. Copy the code below and paste it inside the box.
  4. Save the gadget. Drag the gadget and reposition it under Blog Posts gadget.
  5. Click Save button.

Adding Subscription Widget To WordPress

  1. Go to Dashboard > Appearance > Widgets > Available Widgets.
  2. Drag Text widget into a sidebar.
  3. Paste in the code.
  4. Save.

Code for Stylized Subscription Widget

<style>

 #ABT-mashable-bar {
background-color: #f9f9f9; box-shadow: 0 0 3px #b0b0b0;
     border:1px solid #ccc;
       padding:6px; 
width: 270px;

    }

#subscribe-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#f7f7f7;}
	#subscribe-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding: 9px 11px;}
	#subscribe-box .twitter-follow { background: #eef9f9; border: 1px solid #dff6f6; border-top: 1px solid #fff; padding:5px 11px;}

	#subscribe-box .email-box { 
   border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;         background: #d3e0ed;

border: 1px solid #ccdaed;  padding:11px; margin-bottom: -4px;}

		#subscribe-box .email-box h4{color: #555;font-family: Arial;font-size: 12px; margin: 0 0 10px;}

#subscribe-box .email-box .txt,#subscribe-box .email-box .txt:focus{

border: 1px solid #d2d2d2;

color: #a19999; font-size: 12px;

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

height:21px;

padding: 6px 28px 8px; width: 93px;

}

		#subscribe-box .email-box .btn,#subscribe-box .email-box .btn:focus{ float:right;

margin-top: 0px;

background: #30a146; 	background: linear-gradient(top, #30a146 0%, #249334 100%);  background: -moz-linear-gradient(top, #30a146 0%, #249334 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334));  background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%);   text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);  font-weight:bold;    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; 

    font-family: "Arial","Helvetica",sans-serif;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:1px solid #248334 ;
    color:white;
    text-shadow:#d08d00 1px 1px 0;
    padding:8.5px 10px;
    margin-left:3px;
    font-weight:bold;
    font-size:12.2px;
    cursor:pointer;
    border-image: initial;} 

			#subscribe-box .email-box .btn:hover{

opacity: .8;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:1px solid #248334  ;
    color:#FFFFFF;
    text-shadow:#d08d00 1px 1px 0}  

</style>

<div id="ABT-mashable-bar">
<div id="subscribe-box">
<div class="email-box">
<h4>Subscribe updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=latestbloggingtips4u" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/latestbloggingtips4u" target="_blank">RSS</a></h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=latestbloggingtips4u', 'popupwindow',  'scrollbars=yes,width=700px,height=700px');return true" target="popupwindow">
<input class="txt" style="background: #FFF  url('http://i.imgur.com/2BCD0.png') no-repeat 6px !important;" onfocus="if (this.value == 'Your email ID ')  {this.value = '';}" onblur="if (this.value == '') {this.value = 'Your email ID ';}" type="text" name="email" value="Your email ID " />

<input type="hidden" name="uri" value="latestbloggingtips4u" />

<input type="hidden" name="loc" value="en_US" />

<input class="btn" style="margin-left: 4px;" type="submit" value="Subscribe" />
<div style="clear: both;"></div>
</form></div>

<div class="fb-like-box"><iframe style="border: none; overflow: hidden; width: 80px; height: 21px;" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fallbloggingtips&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21" frameborder="0" scrolling="no" width="320" height="240"></iframe><a style="color: #3b5998; font-family: ubuntu; font-size: 18px; font-weight: bold; line-height: 20px;" href="http://www.facebook.com/allbloggingtips" rel="nofollow" target="_blank"> Like on Facebook </a>
<div class="clear"></div>
</div>

<div class="gplusone">
<div style="float: left; width: 90px;">
<div id="___plusone_0" style="height: 24px; width: 106px; display: inline-block; text-indent: 0pt; margin: 0pt; padding: 0pt; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline;"><iframe id="I1_1322986463651" style="position: static; left: 0pt; top: 0pt; width: 106px; margin: 0px; border-style: none; height: 24px; visibility: visible;" title="+1" name="I1_1322986463651" src="https://plusone.google.com/_/+1/fastbutton?url=http%3A%2F%2Fwww.allbloggingtips.com%2F&size=standard&count=true&annotation=&hl=en-US&jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fwidget%2F__features__%2Frt%3Dj%2Fver%3D-8uDua_W7bo.en_GB.%2Fsv%3D1%2Fam%3D%218NuGo4ypxRCIwtBaLA%2Fd%3D1%2F#id=I1_1322986463651&parent=http%3A%2F%2Fwww.allbloggingtips.com&rpctoken=511986996&_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="240"></iframe></div>
</div>
<a style="color: #dd0000; font-family: ubuntu; font-size: 16px; font-weight: bold; line-height: 24px;" href="https://plus.google.com/103280517588083500359" rel="author" target="_blank">Circle on Google+</a>
<div class="clear"></div>
<!-- Place this render call where appropriate -->

<script type="text/javascript">// <![CDATA[
  (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></div>
<div class="twitter-follow">
 <iframe style="width: 300px; height: 20px;" title="" src="http://platform.twitter.com/widgets/follow_button.html#_=1322986464549&button=blue&id=twitter-widget-22&lang=en&screen_name=allbloggingtips" frameborder="0" scrolling="no" width="320" height="240"></iframe>

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></div>
<div id="mashable" style="height: 12px; background: #f9f9f9; border: 0px solid #CCC; border-top: 1px solid white; text-align: right; border-image: initial; font-size: 10px;"><span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.allbloggingtips.com" target="_blank">Widget 禄</a></span></div>
</div>
</div>

If you face any problem with code. Please download this code..

Customization!

Due to some issue. I can’t highlight changes you’ve to make in above code. Hope you won’t mind 馃槈 . Now look for bold letter above and replace it with your Username, IDs like;

  • Replace latestbloggingtips4u with your feedburner Feed URL.
  • Replace allbloggingtips with your facebook Page URL.
  • Replace allbloggingtips with your twitter url.
  • Replace allbloggingtips with your blog URL.
  • And at least replace https://plus.google.com/103280517588083500359 with your Google+ Profile Link.

Credits!

This widget is first shared on AllBloggingTips. Readers are requested to link back if you’re going to share this widget on their blog!

That’s all. I hope you’ll like this widget. Let me know if I missed anything or you face any issue!

Happy Blogging 馃榾

Animated Social Sharing Widget with Cool Hover!

You must have heard about Shareaholic, The Leader in the creation of stylish sharing scripts. After Their Great Success of The Sexy Bookmarks, recently they just have created another awesome design which is known as SassyBookmarks (聽Social Sharing Widget ). Here in this post i’ll let you know how to implement SassyBookmarks or Social Sharing Widget on your wordpress and blogger site! :)

animated social sharing widgets
Live Demo!

How to Add Animated Social Sharing Widget to blogs? (Updated!)

Adding to WordPress!

  • Go To Your dashboard, Then Click On Appearance and then Navigate To Editor.
  • Now on The Right Side you can a list of template files, move your mouse to footer.php and then click on that
  • As Soon the page loads completely, Press CTRL+F and Find </body>
  • 聽Now be careful and paste the below code just about it !
  • Hit on Update File, Now Visit Your WordPress Blog ! You can see it located on The Bottom Left

Adding to Blogger/Blogspot!

  • Go to Blogger Dashboard > Template
  • Take a backup of your template.
  • Now find for below code in your template </body>
  • Add below piece of code just above/before of above code.

 

<!-- Start Social Sharing Widget Sassy Bookmarks HTML (allbloggingtips.com)-->
<div class="shr_ss shr_publisher">

</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
聽 var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
聽 </script>
聽<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
聽聽聽聽聽聽 (function() {
聽聽聽聽聽聽聽聽聽聽聽 var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
聽聽聽聽聽聽聽聽聽聽聽 sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
聽聽聽聽聽聽聽聽聽聽聽 var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
聽聽聽聽聽聽聽 })();
聽聽聽聽聽聽聽 </script>

<!-- End Shareaholic Sassy Bookmarks script -->

 

Endlines.
Hope You’ve find this implementation interesting. This Social Sharing Widget Code Snippet is a the property of Shareholic so please don’t remove the copyrights ! Peace and Blessing pals 馃榾

Sleek and Cool Search Boxes For WordPress!

I recently shared Sleek and Cool Search Boxes widget for Blogger. Response was pretty good. Lots of my blog readers asked me to provide these cool search boxes for WordPress. So today I am sharing 5 awesome, Sleek and Cool Search Boxes Pack for WordPress. Actually these are PSD source designed by Design3edge. We work hard in converting this to WordPress for YOU. Hope you enjoyed with this!

Update: For Blogspot Version Click Here!

sleek search boxes by allbloggingtips

Cool Search Boxes For WordPress?

  1. Go to Dashboard > Appearance > Widgets > Available Widgets.
  2. Drag Text widget into a sidebar.
  3. Paste in the code.
  4. Save.

Style 1

search boxes

<style>
.search_form2 {
border-radius:10px !important;-moz-border-radius: 13px;
聽聽聽聽聽聽聽 -webkit-border-radius: 13px;
聽聽聽聽聽聽聽 -o-border-radius: 13px;
聽聽聽聽聽聽聽 -ms-border-radius: 13px;
聽聽聽聽聽聽聽 -khtml-border-radius: 13px;
聽聽聽聽聽聽聽 border-radius: 13px;
background:URL(http://2.bp.blogspot.com/-vGjST2sX6Ts/T88uy-eRYUI/AAAAAAAAAog/xhJ2A0nGnpw/s1600/black.png) no-repeat scroll center center transparent;height:50px;display:block; width:302px;}</style>
<center><form method="get" style="-moz-border-radius: 13px;
聽聽聽聽聽聽聽 -webkit-border-radius: 13px;聽聽聽聽聽聽聽 -o-border-radius: 13px;
聽聽聽聽聽聽聽 -ms-border-radius: 13px;聽聽聽聽聽聽聽 -khtml-border-radius: 13px;
聽聽聽聽聽聽聽 border-radius: 13px;"

聽class="search_form2" action=""><p>

<input type="text" id="s" style="background:transparent;
width:180px; border-radius:10px;
border:none;
margin:11px;
padding:4px; padding-top:6px !important;
padding-left:17px !important;
" name="s" value="Search in site..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/><input type="submit" value="Go" style="border:1px
solid rgba(0, 0, 0, .25);color:#FFF!important;margin-left:3px;background:#316ca4 url(http://3.bp.blogspot.com/-L3o3uwrf0Sk/T9CO3hbq1XI/AAAAAAAAApg/8RmMXmM6-MY/s320/blue.png) repeat-x top;display:inline-block;
border-radius:5px; font-weight:bold;
width:57px; float:right; margin-right:11px;margin-top:11px; height:30px;" id="searchsubmit"></p></form></center>

Style 2

search boxes

<style>
.search_form2 {
border-radius:10px !important;-moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        -o-border-radius: 13px;
        -ms-border-radius: 13px;
        -khtml-border-radius: 13px;
        border-radius: 13px;
background:URL(http://4.bp.blogspot.com/-hxd1468RbE4/T88u0xTfk1I/AAAAAAAAApQ/BZ1WB9VG_3g/s400/whitez%2Bby%2Babt.png) no-repeat scroll center center transparent;height:50px;display:block; width:302px;}</style>
<center><form method="get" style="-moz-border-radius: 13px;
        -webkit-border-radius: 13px;        -o-border-radius: 13px;
        -ms-border-radius: 13px;        -khtml-border-radius: 13px;
        border-radius: 13px;"

 class="search_form2" action=""><p>

<input type="text" id="s" style="background:transparent;
width:180px; border-radius:10px;
border:none;
margin:11px;
padding:4px; padding-top:6px !important;
padding-left:17px !important;
" name="s" value="Search in site..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/><input type="submit" value="Go" style="border:1px
solid rgba(0, 0, 0, .25);color:#FFF!important;margin-left:3px;background:#316ca4 url(http://3.bp.blogspot.com/-L3o3uwrf0Sk/T9CO3hbq1XI/AAAAAAAAApg/8RmMXmM6-MY/s320/blue.png) repeat-x top;display:inline-block;
border-radius:5px; font-weight:bold;
width:57px; float:right; margin-right:11px;margin-top:11px; height:30px;" id="searchsubmit"></p></form></center>

Style 3

search boxes

<style>
.search_form2 {
border-radius:10px !important;-moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        -o-border-radius: 13px;
        -ms-border-radius: 13px;
        -khtml-border-radius: 13px;
        border-radius: 13px;
background:URL(http://4.bp.blogspot.com/-Z_Bf8C64sWs/T88uy_rLu3I/AAAAAAAAAow/EcYyd6sKjxA/s400/bluez%2Bby%2Ballbloggingtips.png) no-repeat scroll center center transparent;height:50px;display:block; width:302px;}</style>
<center><form method="get" style="-moz-border-radius: 13px;
        -webkit-border-radius: 13px;        -o-border-radius: 13px;
        -ms-border-radius: 13px;        -khtml-border-radius: 13px;
        border-radius: 13px;"

 class="search_form2" action=""><p>

<input type="text" id="s" style="background:transparent;
width:180px; border-radius:10px;
border:none;
margin:11px;
padding:4px; padding-top:6px !important;
padding-left:17px !important;
" name="s" value="Search in site..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/><input type="submit" value="Go" style="border:1px
solid rgba(0, 0, 0, .25);color:#FFF!important;margin-left:3px;background:#316ca4 url(http://3.bp.blogspot.com/-L3o3uwrf0Sk/T9CO3hbq1XI/AAAAAAAAApg/8RmMXmM6-MY/s320/blue.png) repeat-x top;display:inline-block;
border-radius:5px; font-weight:bold;
width:57px; float:right; margin-right:11px;margin-top:11px; height:30px;" id="searchsubmit"></p></form></center>

Style 4

search boxes

<style>
.search_form2 {
border-radius:10px !important;-moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        -o-border-radius: 13px;
        -ms-border-radius: 13px;
        -khtml-border-radius: 13px;
        border-radius: 13px;
background:URL(http://4.bp.blogspot.com/-T2F6d51MVw8/T88u0v_kIqI/AAAAAAAAApE/pB5bbugoVoM/s400/transparent%2Bby%2Ballbloggingtips.png) no-repeat scroll center center transparent;height:50px;display:block; width:302px;}</style>
<center><form method="get" style="-moz-border-radius: 13px;
        -webkit-border-radius: 13px;        -o-border-radius: 13px;
        -ms-border-radius: 13px;        -khtml-border-radius: 13px;
        border-radius: 13px;"

 class="search_form2" action=""><p>

<input type="text" id="s" style="background:transparent;
width:180px; border-radius:10px;
border:none;
margin:11px;
padding:4px; padding-top:6px !important;
padding-left:17px !important;
" name="s" value="Search in site..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/><input type="submit" value="Go" style="border:1px
solid rgba(0, 0, 0, .25);color:#FFF!important;margin-left:3px;background:#316ca4 url(http://3.bp.blogspot.com/-L3o3uwrf0Sk/T9CO3hbq1XI/AAAAAAAAApg/8RmMXmM6-MY/s320/blue.png) repeat-x top;display:inline-block;
border-radius:5px; font-weight:bold;
width:57px; float:right; margin-right:11px;margin-top:11px; height:30px;" id="searchsubmit"></p></form></center>

Style 5

search boxes

<style>
.search_form2 {
border-radius:10px !important;-moz-border-radius: 13px;
        -webkit-border-radius: 13px;
        -o-border-radius: 13px;
        -ms-border-radius: 13px;
        -khtml-border-radius: 13px;
        border-radius: 13px;
background:URL(http://1.bp.blogspot.com/-D98wjamWcwk/T88u0dnSPuI/AAAAAAAAAo4/U4Oy3x-zhRg/s400/pinkz.png) no-repeat scroll center center transparent;height:50px;display:block; width:302px;}</style>
<center><form method="get" style="-moz-border-radius: 13px;
        -webkit-border-radius: 13px;        -o-border-radius: 13px;
        -ms-border-radius: 13px;        -khtml-border-radius: 13px;
        border-radius: 13px;"

 class="search_form2" action=""><p>

<input type="text" id="s" style="background:transparent;
width:180px; border-radius:10px;
border:none;
margin:11px;
padding:4px; padding-top:6px !important;
padding-left:17px !important;
" name="s" value="Search in site..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/><input type="submit" value="Go" style="border:1px
solid rgba(0, 0, 0, .25);color:#FFF!important;margin-left:3px;background:#316ca4 url(http://3.bp.blogspot.com/-L3o3uwrf0Sk/T9CO3hbq1XI/AAAAAAAAApg/8RmMXmM6-MY/s320/blue.png) repeat-x top;display:inline-block;
border-radius:5px; font-weight:bold;
width:57px; float:right; margin-right:11px;margin-top:11px; height:30px;" id="searchsubmit"></p></form></center>
Customization: Kindly replace allbloggingtips.com from above codes to your WP site url to make these cool search boxes to works !
  • Credits

Sleek and Cool Search Boxes For WordPress tutorial is a first time shared tutorial guide by AllBloggingTips. These scripts, widget and style sheets are provided only by ABT therefore if you wish to share this tutorial with your readers and friends then kindly link back to this post as the only favour in return. 馃榾

That’s all!. We hope you enjoyed this Cool Search Boxes for WordPress. You can also subscribe us to get our next tutorial in your inbox 馃槈

Subscribe Here!

Another New Floating Facebook Like Box For WordPress

facebook like box widgetRecently we shared simple yet stylish floating facebook like box widget. Now we came with Another New Floating Facebook Like Box Widget For WordPress ! This will Floating Facebook Button when to move your cursor on it it pop out with stylish floating facebook like box. Its widget for WordPress. You can find聽floating facebook like box here.聽 Now lets move to how you can add this in blogger I will show you How You Can Add Another New Floating Facebook Like Box Widget To WordPress?

Add Floating Facebook Like Box Widget To WordPress !

  1. Go to Dashboard > Appearance > Widgets > Available Widgets.
  2. Drag Text widget into a sidebar.
  3. Paste in the code.
  4. Save.
<script type="text/javascript">
 /*<![CDATA[*/
 jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
 /*]]>*/
 </script>
 <style type="text/css">
 .abtlikebox{background: url("http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
 .abtlikebox span a{color: gray;text-decoration:none;}
 .abtlikebox span a:hover{text-decoration:underline;}
}
</style>
 <div class="abtlikebox" style="">
     <div>
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fallbloggingtips&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span></span>
     </div>
 </div>

5. Click on Save button and done !

Note:-Replace allbloggingtips With Your Facebook User name.

5. Save your widget.

Now this is most important part. If you missed it the widget will not works.

6. Goto Appearance > Editor

7. Than goto > Header.php

8. Now Place below code just before <head>

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

9. Click Save.

Now Visit your blog to see it that its working :D. Hope you enjoy the post.

Another Stylish Mashable Style Subscription Widget v2

Another Stylish Mashable Style Subscription Widget v2Recently we shared Mashable Style Subscription Widget v1 with you. Lots of our readers found this great widget. Some asked us to improve this and add some more cool features with more social profile likes like Pinterest, Facebook, Twitter, RSS.You can add聽Mashable Style Subscription Widget to your wordpress or blogger/blogspot blogs easily.聽 Mashable Style Social Subscription Widget v 2.0 is an attractive subscription form that will further increase the number of your Email subscribers. To Check demo copy and paste given below to our html editor

Features Of New Mashable Subscription Widget v2

  1. Facebook Likebox
  2. Recommend us on google+ button
  3. Twitter Follow us Badge
  4. Social Icons like RSS, Pinterest, Twitter and Google+
  5. Feedburner Subscription Widget

Live Demo

Adding New Mashable Style Social Subscription Widget

You just need to place a code to your blog widget Follow following steps to add New Mashable Style Social Subscription Widget to WordPress and Blogger.

Adding To Blogger

  1. Go to Design > Page Elements.
  2. Click Add A Gadget.
  3. In Add A Gadget window, select HTML/Javascript .
  4. Copy the code below and paste it inside the content box.
  5. Save the gadget.
  6. Drag the gadget and reposition it under Blog Posts gadget.
  7. Click Save button (top right hand corner).

Adding To WordPress

  1. Go to Dashboard > Appearance > Widgets > Available Widgets.
  2. Drag Text widget into a sidebar.
  3. Paste in the code.
  4. Save.

Download Code Here!

After download and pasting code kindly Make these important changes:

  • Replace AllBloggingTips with your Facebook , Twitter, Google+ and Pinterest ID
  • Replace http://feeds.feedburner.com/AllBloggingTips with your feedburner聽 link.
  • Replace Google+Profile Link with your Google Plus profile link

5.聽聽 Hit save and you are all done!

Visit your blogs to see it working just perfectly.聽 if not drop comment below with problem and screenshot 馃槈

I have set the width of the widget to 270px. If in case your sidebar is small or big, you may then have to adjust the two width values in brown highlight color. The first will set the width of the entire container and the second value will set the width of the subscription input box.

Credits:

You are most welcomed to share this widget with your readers. You will have to give credits to AllBloggingTips blog by attaching a link back to this post. You may also give credits to the author for the wordpress version of this sharing plugin. 馃榾