Facebook like box for blogger - scroll down type

How to Add this Widget in Blogger :

1. Open Blogger in your browser and log in to your account.
2. Now go to Layout option tab.
3. Click on Add a Gadget and then select HTML/JavaScript.
4. Now copy and paste the code mentioned below in HTML/JavaScript area.

*********************************************

<!-- Widget on http://codeshares.blogspot.in start -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>


<div id="dialog" title="Get updates via Facebook">
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/codeshares&width=292&height=258&show_faces=true&colorscheme=light&stream=false&show_border=true&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:285px; height:258px;" allowtransparency="true"></iframe></center>
<center style="float:right; margin-right:10px;">
<span style="font-size:xx-small; color:#000; text-decoration:none;">Get this gadget at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href=" http://codeshares.blogspot.in/">Facebook like Box</a></center>
</div>
<!-- Widget on http://codeshares.blogspot.in End -->

*********************************************

***Replace the red  text with the link of your facebook page

and its done. Enjoy. More to come....

Do comment, your feedback will help us in improving this codesharing site.

Popular Posts Widget with Hover Effect for Blogger

A Popular Posts widget shows the list of most popular posts on your blog along with an image thumbnail and a snippet of the post. One can add Blogger's official Popular posts widget by Clicking on Blog Title → Layout → Add a Gadget → Popular Posts. For making this widget more attractive make sure that you have checked image thumbnail and snippet box. Blogger provides CSS for this widget in their default CSS file. We will overwrite these CSS rules and add new rules to make it even more attractive.

The widget we will add shows the Thumbnail and Post Title when page is fully loaded. When hovered over, a bouncing snippet effect takes place. You can see the demo of this widget by clicking on the below link. The popular post widget is on the right sidebar, just scroll a bit.

Procedure of adding this widget to Blogger

First of all go to Blog Title → Template → Edit HTML. Search for the tag ]]></b:skin> by pressing Ctrl + F. Add the below given code just above ]]></b:skin>

*******************

/* Popular Post Customization on codeshares.blogspot.in */
.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #FF0202;z-index: 2;left: 300px;top: 60%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}
.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}
/* Popular Post Customization on codeshares.blogspot.in */

******************

After adding the code click on Save Template. You are done. Your visitors can now see attractive Popular posts list on the sidebar of your blog.

my posts in alphabetical order

Listing post titles in alphabetical or chronological order by Greenlava

In this tutorial I will show you how to list the titles of your blog’s 2000 most recent  posts. If you are looking for an alternative to Blogger’s Archive gadget, then this might be it. This list can also be used as a Table Of Contents. This list is made possible with the use of Yahoo! Pipe.

continue on Greenlava's website