Showing posts with label Tips. Show all posts
Showing posts with label Tips. Show all posts

Remove bottom link Posts (Atom)

  1. Go to dashboard/ template/ edit HTML
  2. Click the 'Expand Widgets Templates' box
Find:

<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>


Remove this line:

<b:include data='feedLinks' name='feedLinksBody'/>

That should remove bottom link Subscribe to: Posts (Atom).

Remove the HOME link

  1. Click "Edit html" under "design" tab.
  2. Check the box "Expand Widget Templates"
  3. Find the follwoing line in the html code and delete it:
<a class='home-link' expr:href='data:blog.homepageUrl'> <data:homeMsg/></a>

Remove Attribution

One way of removing "powered by Blogger" from your blog is to hide it.   To do so, simply add this rule to your template:

#Attribution1 {display: none;}


Mobile template blogs:
If you have enabled a custom mobile template, you can either use the standard way of removing your attribution from your mobile blog, or by adding a 2nd rule:

.mobile #Attribution1 {display: none;}


If this rule doesn't work and you have tried several other approaches on the same template, your gadget may now be called  Attribution2 or even Attribution3.   Look at your template (Design > Edit HTML) and search for "attribution" to find out what the correct digit is, and modify the rule to use it.

Remove Feedburner Logo


Feedburner lets you display headlines using the RSS Feed. It republishes your Feed as HTML. By default the widget includes a credit at footer that says "Headlines By Feedburner".

  1. Go to Blogger Dashboard > Design > Page/Edit Layout.
  2. Click on EDIT LINK at the bottom of your Feedburner widget tab.
  3. Add below code just BEFORE your present code:
<style>
div  #creditfooter{display: none; }
</style>

The credit footer ID is responsible for the appearance of the logo image in gif format which has the following URL: http://www.feedburner.com/fb/images/buzzboost-pwrd.gif

Redirect Your Blog To blogspot.com

Recently Google changed a lot of things along with their policies. Google started redirecting blogger blogs to country-specific URL. Lets consider that you have open anyblog.blogspot.com in your browser, you might be redirected to anyblog.blogspot.in if you are located in India or to anyblog.blogspot.com.au if you access the same blog from Australia. It is not a new thing since few days that your blogspot.com blog may redirect to a country based domain. Perhaps it is worldwide. Every blogger blog owner may have the same problem of automatic redirection. So here in this post, we have a tweak that enables your blog to stay on blogspot.com URL.

How To Redirect Your Blogger Blog To .Blogspot.com?
We will apply this hack with using very short JavaScript.
  • Go to Blogger Dashboard > Design > Edit HTML.
  • Take a backup/download your template.
  • Find for </head> tag.
  • Add below piece of JavaScript code just above </head> tag.
<script type="text/javascript">
var blog = document.location.hostname;
var slug = document.location.pathname;
var ctld = blog.substr(blog.lastIndexOf("."));
if (ctld != ".com") {
var ncr = "http://" + blog.substr(0, blog.indexOf("."));
ncr += ".blogspot.com/ncr" + slug;
window.location.replace(ncr);
}
</script>

Now save your template.
Now your Blogger Blog will always redirect to the blogspot.com URL.

Recent Posts Widget

How To Add Recent Posts Widget To Blogger?
Today we will learn how to add feedburner recent posts widget to blogger ? Feedburner recent posts widget is a widget which shows recent posts of your blog via your RSS feeds.You can add this widget as a HTML/JavaScript widget i.e. you don't have to edit your template. This widget is highly customizable so that you can customize this widget as you wish.Below is a list of some things that you can customize in your recent posts widget.
  • Display feed title
  • Display favicon
  • Display feed title
  • Display item author name
  • Display item content
  • Display item publication date
  • Display link to feed
First go to Feedburner.
Then click on Publicize and choose BuzzBoost.
Customize the widget as you wish.
Now scroll to top and choose Blogger Platform then Hit Go button.
After you hit Go button you will redirect to Blogger Add Widget page.
Give the title as you wish and click Add Widget Button.
Refresh your blog.You will see the recent post widget hanging on your blog.

Multi Level Drop Down Menu

Drop down menus helps your readers and visitors to easily navigate through your blog's important links or categories. I hope this drop down menu will surely help you to organize your links, categories and sub-categories easily. This script for this menu was taken from dynamicdrive and bloggerized by Helper Blogger.In order to create smooth hover effect this use jQuery. The arrange of HTML is damn easy so that you can customize this menu very easily.

How To Add This Menu To Blogger?
  • Go to Blogger Dashboard > Design > Layout. (In new User Interface Dashboard > Layout)
  • Click on add a gadget link just below of Header (see image below)

Paste below code and save it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://helperblogger.webs.com/files/hb-smooth-menu.js">
</script>

<script type="text/javascript">

ddsmoothmenu.init({
 mainmenuid: "smoothmenu1", //menu DIV id
 orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu', //class added to menu's outer DIV
 //customtheme: ["#1c5a80", "#18374a"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

ddsmoothmenu.init({
 mainmenuid: "smoothmenu2", //Menu DIV id
 orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
 //customtheme: ["#804000", "#482400"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>

<style>.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}

.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/


/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{ /*shadow for NON CSS3 capable browsers*/
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
}</style>

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.helperblogger.com/">Home</a></li>
<li><a href="#">Folder 0</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>

  </ul>
</li>
<li><a href="http://www.helperblogger.com/">Create This</a></li>
</ul>
<br style="clear: left" />
</div>


Customizations
To change background of menu find this #414141 code tow times and replace this code two times.
To change font size and font family fing this code font: bold 12px Verdana;
To add a link in menu use <li>
To add a sub-link use <ul>.
Replace the # symbols with page links
Replace the Sub Item 1.1 with Page Titles

Recent Posts Slider With jQuery

How To Add This Slider To Blogger?

Step 1 - Applying Styles
  • Go to Blogger Dashboard > Design > Edit HTML. (In new User Interface It Is - Dashboard > Template)
  • As always download a copy of your template first.
  • Now find for ]]></b:skin>
  • Add below code just before ]]></b:skin>
/* START EasySlider By helperblogger.com */

#slide-container {
    height: 360px;
    position: relative;
    width: 480px;
}

#slider {
    height: 360px;
    left: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 480px;
    font-family: calibri;
}

.slide-desc {
    background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 0;
    width: 200px;
    z-index: 99999;
}

.slide-desc h2 {
    display: block;
}

.crosscol .widget-content {
    position: relative;
}

#slider ul, #slider li,

#slider2 ul, #slider2 li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#slider2 {
    margin-top: 1em;
}

#slider li, #slider2 li {
/*

define width and height of list item (slide)

entire slider area will adjust according to the parameters provided here

*/
    width: 480px;
    height: 360px;
    overflow: hidden;
}

#prevBtn, #nextBtn,

#slider1next, #slider1prev {
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    text-indent: -9999px;
    top: 71px;
    z-index: 1000;
}

#nextBtn, #slider1next {
    left: 520px !important;
}

#prevBtn, #nextBtn, #slider1next, #slider1prev {
    display: block;
    height: 77px;
    left: 0;
    position: absolute;
    top: 132px;
    width: 30px;
    z-index: 1000;
}

#prevBtn a, #nextBtn a,

#slider1next a, #slider1prev a {
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a {
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}

/* numeric controls */

ol#controls {
    margin: 1em 0;
    padding: 0;
    height: 28px;
}

ol#controls li {
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 28px;
    line-height: 28px;
}

ol#controls li a {
    float: left;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    background: #DAF3F8;
    color: #555;
    padding: 0 10px;
    text-decoration: none;
}

ol#controls li.current a {
    background: #5DC9E1;
    color: #fff;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
    outline: none;
}

/* END EasySlider By helperblogger.com */


You can edit above CSS values as you wish.You may use our HTML Editor to see a live preview of your changes.(Note - If you are editing this gadget in HTML Editor then you have to add all three codes simultaneously in editor)

Step 2 - Adding JavaScript
  • Now find for </body> tag
  • Add below code just after/below </body> tag.
<!-- Start easy content slider by helperblogger.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>
<!-- End easy content slider by helperblogger.com -->

Now save your template.

Adding The Gadget
  • Now go to Page Layout
  • Add a Gadget > HTML/JavaScript
  • Paste below piece of code and save it.
<div id="slider">
<script style="text/javascript" src="http://helperblogger.webs.com/files/easySlider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>


Now replace yourblog.blogspot.com with your own blog url. (Only change blog URL don't change any other things.

To change number of post find this var numposts_gal = 6; line in above code.

If you want to change number of characters to show in description find this piece of code var numchars_gal = 150;

Now save your all the changes and you are done.Visit your blog to see this beautiful slide.

Follow this tutorial to show this gadget only on specific page or only in homepage.

jQuery Popup For Facebook Like Box

How To Add This Popup To Your Blog?

As always I have kept the installation extremely easy. You just have to copy and paste the code below...
  • Now go to Blogger Dashboard > Design.
  • Add a Gadget > HTML/JavaScript.
  • Paste below code after replacing my username with yours.
<style>
/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
 
/*
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_1XBRXS-vPr1X7DLAs4RRcTx4DzqEoWlIVt2ooMU5N8-LeHMocZO7capBAWEz5WOBFupbnCqDN7BKjDlqjXi-CiHFrm8D90EaR7gTUOE08KyH2dwX4C2giR7Op1SxdeAE3OtU34SO7DCK/s1600/overlay.png) repeat 0 0;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhth9OVCvaPPS8Oeh2TO9VYOVycLSzvSelPryHllQiukL7ndprUh2Y9Wr9CmX1I1DCG94SaA0erIHeJ8teayd6NlngaDB3CsLXLF-hX0Ngb9xTgRWwHJLbzJeBD5ckqw1Cv8xxncbOfMvaD/s1600/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhth9OVCvaPPS8Oeh2TO9VYOVycLSzvSelPryHllQiukL7ndprUh2Y9Wr9CmX1I1DCG94SaA0erIHeJ8teayd6NlngaDB3CsLXLF-hX0Ngb9xTgRWwHJLbzJeBD5ckqw1Cv8xxncbOfMvaD/s1600/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhth9OVCvaPPS8Oeh2TO9VYOVycLSzvSelPryHllQiukL7ndprUh2Y9Wr9CmX1I1DCG94SaA0erIHeJ8teayd6NlngaDB3CsLXLF-hX0Ngb9xTgRWwHJLbzJeBD5ckqw1Cv8xxncbOfMvaD/s1600/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhth9OVCvaPPS8Oeh2TO9VYOVycLSzvSelPryHllQiukL7ndprUh2Y9Wr9CmX1I1DCG94SaA0erIHeJ8teayd6NlngaDB3CsLXLF-hX0Ngb9xTgRWwHJLbzJeBD5ckqw1Cv8xxncbOfMvaD/s1600/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhth9OVCvaPPS8Oeh2TO9VYOVycLSzvSelPryHllQiukL7ndprUh2Y9Wr9CmX1I1DCG94SaA0erIHeJ8teayd6NlngaDB3CsLXLF-hX0Ngb9xTgRWwHJLbzJeBD5ckqw1Cv8xxncbOfMvaD/s1600/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhth9OVCvaPPS8Oeh2TO9VYOVycLSzvSelPryHllQiukL7ndprUh2Y9Wr9CmX1I1DCG94SaA0erIHeJ8teayd6NlngaDB3CsLXLF-hX0Ngb9xTgRWwHJLbzJeBD5ckqw1Cv8xxncbOfMvaD/s1600/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlsE-SGYMtV9IJvxgs50LSrhVefl202gZdfcaWflGbfSP5AohwiPio0QRidgPXje7kgfhWq1UKakqGfuPazUrY4X_tg9tComdv6RIs8RloUqKvFLH4hwB-GYxU7qR9jKC7PS0MwJXjHxwN/s1600/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlsE-SGYMtV9IJvxgs50LSrhVefl202gZdfcaWflGbfSP5AohwiPio0QRidgPXje7kgfhWq1UKakqGfuPazUrY4X_tg9tComdv6RIs8RloUqKvFLH4hwB-GYxU7qR9jKC7PS0MwJXjHxwN/s1600/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhth9OVCvaPPS8Oeh2TO9VYOVycLSzvSelPryHllQiukL7ndprUh2Y9Wr9CmX1I1DCG94SaA0erIHeJ8teayd6NlngaDB3CsLXLF-hX0Ngb9xTgRWwHJLbzJeBD5ckqw1Cv8xxncbOfMvaD/s1600/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhth9OVCvaPPS8Oeh2TO9VYOVycLSzvSelPryHllQiukL7ndprUh2Y9Wr9CmX1I1DCG94SaA0erIHeJ8teayd6NlngaDB3CsLXLF-hX0Ngb9xTgRWwHJLbzJeBD5ckqw1Cv8xxncbOfMvaD/s1600/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiobUEJT9I38KuBieHZuP1wwj_4rYLFpQ2lnI4Ks8LlB0nRJl9w5M5ihGt297SCpeMVkTA7bhVwxFzfHq5yAlK3wU9GUpfiNyfzVY1DJqNGImBwFJYRmQY7_lMNi_y5cHjPGxuPRW8XB9aX/h120/loading.gif) no-repeat center center;}
        #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiobUEJT9I38KuBieHZuP1wwj_4rYLFpQ2lnI4Ks8LlB0nRJl9w5M5ihGt297SCpeMVkTA7bhVwxFzfHq5yAlK3wU9GUpfiNyfzVY1DJqNGImBwFJYRmQY7_lMNi_y5cHjPGxuPRW8XB9aX/h120/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhth9OVCvaPPS8Oeh2TO9VYOVycLSzvSelPryHllQiukL7ndprUh2Y9Wr9CmX1I1DCG94SaA0erIHeJ8teayd6NlngaDB3CsLXLF-hX0Ngb9xTgRWwHJLbzJeBD5ckqw1Cv8xxncbOfMvaD/s1600/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}
 
/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
 
/*
  The following provides PNG transparency support for IE6
  Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKRslonVIFxObgSF_rnjwQhJBBYS-Ma8OXOI73m1LoTkHZ00Fy5TvJcFTP1SFJZo8D1hoO2v_FE-W07c4BugbXLFTfi_lR3c7gVwxsYVNih7vfm5e3D9kwZ1WkpEsYL2yO38SrEVwgHWYD/s1600/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV0WcCuauDR2LQmXfNf1QYvQVEf8zBqZQdS6hExwgSdwW2r4dzEBHoxzcqMypCmFCHodMYwwIW6JcXwN6Ksm1EEn7aekTMrYPV-ZQuZxElWrYyKQ3NjdMm4KNg-MHvGWJYxlfa6a7YhRN8/s1600/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNVm-fJMQGWrwN7Yt8469k_B12uX5qBRMskUMfA5GBX84Gl6ux-x71PrMp0ezyWqpUAfnQsrJqQMM5-3fUAPxpWBxvGYsdQUKq5EXP8COK16v6a6LtsE46wz3CFWJm-G4MB3KfxpMq_MuS/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNVm-fJMQGWrwN7Yt8469k_B12uX5qBRMskUMfA5GBX84Gl6ux-x71PrMp0ezyWqpUAfnQsrJqQMM5-3fUAPxpWBxvGYsdQUKq5EXP8COK16v6a6LtsE46wz3CFWJm-G4MB3KfxpMq_MuS/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZZYJ7Bf2gS50NahKKzGcC8hEnv7y6ytMJa1pMe6-HhcVCcPmc4THRGxkqdQF-Saf9jtWG_LzqaPuih4hxesD82KUQxUtTxEbo_kKSaFXkx-4SNoPn0Qhy1p756pPLq170siIH6ZjP1J2I/s1600/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvt9Rkap9HRXHnEXUrc-g7b2r03xBOyxlX8pBnGT8HFbvn9bnGF6p7rKl24kLMHKwrLfh-Wl46CP3cUNQbLpJzXF2OKma0heZWzrlKIrP3qA29gApkEDKymQrTo-IR4lR5MHACWFpvRNVL/s1600/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcgK-SK7fP0vosK0NaxgLH309lHjRuqWEK6NXmvVuO0nr6IYawFB0_bZWDL9VtAA0ucHMw3EwsUs3_xss_zLns-tJ_OrTTdkV1ArW-t5X_gYOW-4SYLhRrI6nON18ylFKa1jaxT3te4oBH/s1600/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisKXWwQKw1EmLl9wCOYbB-LAOxDxEHb5zO2Z0L0MXqVe1RxwbqlZhEuwdJSjTyvk23QJCBhIwzFKJ_OYA_wCukoYjFFNv8067y-dM27dzcmtUz7NqVHLxD18NLPNzFYkR56rVtUPjbHvbN/s1600/borderMiddleRight.png);}
 
.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}
 
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger By Helper Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
 
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="http://helperblogger.webs.com/files/jquery.colorbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->
 
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgJEa8SfWY8KVvGqYoEEptk2r90aMjlpYC0hLaklf7ZpBlXSqJzA017N2qxMzGCZ_EgsE91CLYD2zs3EbIkk86xzXlXl3Vji86SssGIydHDhfeMVQsIQB8cLz3DrFC2_LnvDaLH7lSccu9/s1600/LikeUsOnFacebook.png" width:300px; height:150px;"/></center>
<center>
 
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbtsnts&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"><!-- Warning: Don't edit this line,If you edited this line then your gadget may not work --></iframe></center><p style=" float:right; margin-right:45px; font-size:4px;" ><a style=" font-size:8px; color:#3B78CD; text-decoration:none;" href="http://goo.gl/9fXrd">Grab This Gadget »</a> </p></div>
</div>


Now replace btsnts with your facebook fan page username.

Horizontal Floating Share Bar

Today we are sharing another cool social bookmarking for blogger. This is a horizontal floating share bar containing AddThis share buttons. This gadget is created by AddThis.com and we bloggerized this gadget to work perfect with your blog. It contains a close and plus buttons,when any visitor hits the close button then the bar goes inside and shows the plus button. When again he/she clicks the plus button then it appears. I have kept the installation easy as possible as you just have to copy and paste the two pieces of code. Now lets go to tutorial,before adding it to your blog see the demo first.

View Demo

How To Add Horizontal Floating Share Bar To Blogger?
  • Go to Blogger Dashboard > Design > Edit HTML (In new User Interface it is Dashboard > Template)
  • Now find for </head> tag in your template.
  • Add below code just before </head> tag.
<script type="text/javascript">
var addthis_config = {
    bar_show_below : 150
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>


Now find for </body> tag.
Add below code just before </body>  tag.

<div class="addthis_bar addthis_bar_medium">
    <label>Share This Page:</label>
    <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
        <span><a class="addthis_button_preferred_1"></a></span>
        <span><a class="addthis_button_preferred_2"></a></span>
        <span><a class="addthis_button_preferred_3"></a></span>
        <span><a class="addthis_button_preferred_4"></a></span>
        <span><a class="addthis_button_compact"></a></span>
        <span><a class="addthis_counter addthis_bubble_style"></a></span>
    </div>
</div>


Now save your template and you are done..
Go to your blog,you will see this floating horizontal share menu.

Add Social Bookmark Buttons to Blogger

In today's Blogger tutorial (Blogspot tutorial) you will learn how to place social bookmark buttons in the sidebar, footer and below each post in a Blogger Blogspot blog. This is a social bookmarking script for individual buttons or icons rather than the Add This all-in-one solution that I have previously written about. These free social bookmark buttons will encourage social bookmarking SEO by having your visitors save their favorite content and hopefully share it on social media sites such as Digg, Technorati and Stumble Upon thereby helping to grow your blog traffic.

I personally prefer to use an Add This social bookmark button because individual buttons can create a cluttered busy look. However, I also realize that the Add This social bookmarking button is not necessarily that recognizable to visitors who may have otherwise bookmarked your pages had the button been more recognizable to them.

How to Add Social Bookmark Buttons to Blogger Sidebar or Footer

1. Login to Blogger if not already logged in

2. Navigate to Page Layout > Page Elements

3. Click on Add Gadget in Sidebar or Footer

4. Select HTML/Javascript gadget from the list of available gadgets

5. Copy and paste the social bookmarking button code into the content box that is available for free download below. Note you will only be able to add the small social bookmarking buttons to the sidebar unless you only want a few of them.

Download Code for Large Buttons (48x48)
Download Code for Small Buttons (24x24)

6. Add a title such as Bookmark and Share if you wish

7. Click on the Save button

8. Use the drag and drop feature in the sidebar to reposition the new widget if necessary and save again

9. Click on View Blog to admire new social bookmarking buttons


How to Add Social Bookmark Buttons Below Every Post in Blogger

1. Login to Blogger if not already logged in

2. Navigate to Page Layout > Edit HTML

3. Back up your template as a precaution by downloading it to your computer

4. Check the Expand Widget Templates box

5. Find the following line of code using CTRL + F

<p><data:post.body/></p>

or

<data:post.body/>

6. Paste the button code below directly below this line

Download Code for Large Buttons (48x48)
Download Code for Small Buttons (24x24)

7. Click on the Save Template button to save

8. Click on View Blog to admire your new social bookmarking button set at the bottom of your blog


Tips and Troubleshooting
To center the social bookmarking buttons

<p><data:post.body/></p>
<div align='center'>
Your social bookmarking button code goes here
<br/>
</div>


To have your social bookmarking buttons only appear on post pages you will need to enclose the code in an if statement

<p><data:post.body/></p>
<b:if cond='data:blog.pageType == "item"'>
Your social bookmarking button code goes here
<br/>
</b:if>


To center the social bookmarking buttons and have them appear only on post pages

<p><data:post.body/></p>
<b:if cond='data:blog.pageType == "item"'>
<div align='center'>
Your social bookmarking button code goes here
<br/>
</div></b:if>


To center the social bookmarking buttons and have them appear only on post pages

<p><data:post.body/></p>
<b:if cond='data:blog.pageType == "item"'>
<div align='center'>
Your social bookmarking button code goes here
<br/>
</div></b:if>


To add extra social bookmarking buttons to this set download the Aqauticus Icon Set

To change the social bookmarking buttons for another set simply do the following:

To find other social bookmarking buttons please do check out my article Best Free Social Bookmark Button Sets for Blogger first as very likely you will find something suitable in that collection. Download your preferred icon set. These will be in a zip file so you will need to unzip them and take a look at what sizes are on offer. Most icon sets come in at least several sizes.

Upload your button images to Blogger or to an image storage site like Photobucket or Flickr. One easy way to upload to Blogger is to create a post called images that you never publish. Then upload the images you want individually (that's the drawback). Copy the URL address of the button image and paste it into the social bookmarking button code replacing existing URLs

Change the URL address of each button in the button code I have supplied. That's the code beginning with scr='

Add Email This Post Link to Blogger

In this article you will learn how to place an email this post link or button at the bottom of each post in a Blogger Blogspot blog.

You may have noticed that some blogs give readers the option below their posts to email the article to themselves or a friend via a link or button. This affords readers yet another way to have access to your posts and a link for them to find you if they want to call back.

This email link should not be confused with the subscribe by email link which once a reader is signed up to will give them regular updates of each post you publish. This email link on the other hand only emails the reader the single post they are interested in.

There are several ways to place an email this post link on your Blogger Blogspot blog. Here are three methods known to me.

Add Email This Post to Blogger - Method 1
The easiest method. Adds an email button to the end of each post.

1. Login to Blogger if not already logged in

2. Navigate to Layout > Page Elements

3. Within the template click the Edit link on Blog Posts

4. A pop up menu will open. Under Select Items check the box labelled Show Email Post Links

5. Click Save

6. Click on View Blog and scroll to the end of your post to see the envelope button which has now appeared.


Add Email This Post to Blogger - Method 2
Another method of adding an email this post link to your blog is to add an all-in-one social bookmarking button to your Blogger Blogspot blog. All in one social bookmarking buttons are minimalist and reduce the clutter of having lots of buttons. Read the following article for information about how to add an Add This Social Bookmarking Button to your Blogger blog


Add Email This Post to Blogger - Method 3
By far the most advanced method and requires a change to your Blogger template. Yet another way to add an email this post link to your Blogger blog is to make use of your Feedburner FeedFlare if you have one. For information about getting a Feedburner FeedFlare for a Blogger feed and configuring it please refer to my article Add a Feedburner FeedFlare to a Blogger Feed

Assuming that you already have a burned feed at Feedburner (if not then read my article on how to Burn a Blogger RSS Feed at Feedburner and a FeedFlare set up follow these instructions to add an email this post link.

1. Click the My Account link at the top right corner of the Blogger navbar and then select Feedburner from the list of Google services or sign in to Feedburner directly.

2. Select your blog feed from the My Feeds List on the My Feeds page

3. From the Feedburner dashboard select the Optimize tab.

4. From the left sidebar menu select FeedFlare

5. On the FeedFlare page enable Email This by checking the box under the Site column. (Note the first column is what appears in the feed and the second column is what will appear on your blog). If you don't have your FeedFlare set up yet you can set up the FeedFlare options for both site and feed together at the same time. Follow my article about adding a Feedburner FeedFlare to Blogger for more on this.

6. Once you have checked the Email This option under Site and added any other options to the FeedFlare in the feed or site that you would like then click on Save. If this is a new FeedFlare then you will click on a button marked Activate instead.

7. After activating or saving you need to get the code to add to Blogger. Do this by clicking on the dropdown menu labelled Get the HTML code to put FeedFlare on your site and selecting Blogger from the list.

8. A pop up window entitled Adding FeedFlare to your Blogger blog will open with instructions on how to make the necessary changes to your blog. These are a bit confusing so I will break them down a bit here. Don't close this window yet as we will return

9. Login into Blogger if not already logged in

10. Navigate to Layout > Edit HTML.

11. Check the Expand Widgets Template

12. As a precaution back up you template

13. Scroll down to the following code or use CTRL + F to bring up the search tool.

<div class='post-footer'>

14. Copy the layout code in the Feedburner pop up window and paste it directly below this line <div class='post-footer'>

15. Click Save Template to save changes

16. Click View Blog to see the link in the footer of your blog posts

Add Breadcrumb Navigation to Blogger

One way you can improve navigation of a Blogger blog (Blogspot blog) is to add breadcrumb navigation to your Blogger blog. There is also a SEO benefit of installing a breadcrumb as major search engines like Google treat anchor text links as important. In this Blogger tutorial I will guide you through the steps to add breadcrumb navigation to a Blogger blog (Blogspot blog).

What Will a Breadcrumb Do on My Blog?
Adding a breadcrumb to your blog provides a form of text-based navigation. A breadcrumb displays the visitor's location within a blog. The advantage of a breadcrumb is that it provides shortcuts to enable visitors to quickly get around your blog by jumping from one part of your blog to another.

To illustrate how adding a breadcrumb would work in your blog let's use an example. A breadcrumb for an individual post would follow this format:

Home > Label > Post Title

Using this post as an example a breadcrumb might be Home > Navigation > Add a Breadcrumb to Blogger Blogspot Blog. In cases where there is more than one label this hack uses the last label listed. If a visitor wanted to look at other posts about navigation all they need do is click on the "Navigation" link in the breadcrumb and they will be taken to a page which will show them all the posts with the "Navigation" label.


SEO Benefits of a Breadcrumb
Apart from improving the navigation of your Blogger blog adding a breadcrumb also has SEO benefits. Anchor text such as labels tells search engines about the subject of the linked page. Search engines view a breadcrumb with a text link to relevant keywords in the post as important. Read more about SEO try the following articles:

Blogger Blogspot SEO Tips and Tricks
Add Meta Tags to Blogger for Better SEO

How to Add a Breadcrumb Navigation to your Blogger Blog
It is not difficult to add a breadcrumb to your blog but it does involve adding a snippet of code to your template. Below is a step by step walkthrough which I have aimed at beginners so that anyone reading my blog will be able to follow the instructions.

1. Login in to Blogger if you are not already logged in

2. Navigate to Design > Edit HTML

3. Back up your blog using Download Full Template as a precaution in case you accidently overwrite some code and are not able to retrieve it.

4. Check the Expand Widget Template box

5. Add the following CSS code above this line ]]></b:skin>

.breadcrumbs {float: left;width: 590px;font-size: 11px;margin: 5px 10px 20px 10px;padding: 0px 0px 3px 0px;border-bottom: double #EAEAEA;}

Once your breadcrumb is working modify this if you need to so that it blends with the look and style of your template.

6. Find this line of code <b:includable id='main' var='top'>

7. Older XML Blogger templates and custom templates replace the entire block of code below. If you are using the new generation of Blogger templates such as Simple look for alternative instructions further down in this Step)

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>


with

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message
<b:include data='top' name='status-message'/>default status message disabled -->
<b:include data='posts' name='breadcrumb'/><data:adStart/>


Note: if you are using the new generation of Blogger templates eg Simple then do the following instead:

Find this code block and add the code in red between <div class='blog-posts hfeed'> and <data:defaultAdStart/>

<b:includable id='main' var='top'>
<b:if cond='data:top.showPlusOne'>
<script expr:src='data:top.plusOneJsUrl'/gt;
</b:if>
<!-- posts -->
<div class='blog-posts hfeed'>
<!--Breadcrumb Hack - disable default status message
<b:include data='top' name='status-message'/>default status message disabled -->
<b:include data='posts' name='breadcrumb'/>
<data:defaultAdStart/>


8. Now immediately before <b:includable id='main' var='top'> paste the following large block of code:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on front page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> » <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if> </b:loop>
» <span><data:post.title/></span> </b:if> </b:loop> </div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </div> <b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
Posts filed under <data:blog.pageName/>
</b:if> </div> </b:if> </b:if> </b:if>
</b:if>
</b:includable>


9. Click on Save Template button

10. Click View Blog and navigate to any post page to see your new breadcrumb in action

Add a Breadcrumb Based on Archives
Follow this hack provided by Purple Moggy if you would like to add a breadcrumb based on year and month. Likely format would be: Home > Year > Month > Blog Title

Tips and Troubleshooting
Some browsers have problems displaying the code above. If experience any issue then use the code in this link Add Breadcrumb Navigation to a Blogger Blog

In this Blogger tutorial you have learned how to add breadcrumb navigation to your Blogger blog (Blogspot blog) to improve SEO and site navigation. Please let me know how you get on. Good luck!

Increase Your Recent Posts

Before you get too excited and try the tricks in this post, I just wanted to let you know beforehand that it might not work anymore. Several visitors have tried and told me it didn’t work so the result might be the same for you. Blogger continues to make changes without announcing them so hacks and tricks expire which makes it frustrating for everyone. If you’re willing to try and increase your recent posts and comments to 10, then continue reading. I apologize in advance if it doesn’t work for you.

By default, Blogger is very limited in comparison to features or plugins available to WordPress blog users. For example, there are free plugins for WordPress that allow you to show your most recent posts, most popular posts, and most recent comments.

Blogger, on the other hand, doesn’t have that functionality but people have figured out a clever way to do it anyhow. If you haven’t already read our How to Setup Your Recent Posts and Recent Comments Blogger Page Elements then you might want to start there first before reading on.

This article will take Blogger users to the next level and allow you to do things like increase the default max posts from 5 to 10 (or whatever size you want), filter by category, or filter by a date range, etc. It’s actually pretty powerful and I’m happy to share my secrets with you.


How to Increase Your Post Limit
There’s a cool way to increase the number of recent posts showing up in your rss feed widget. All you need to do is add the parameter “?max-results=10” (or whatever number you want to return is) to the end of your existing feed url.

So your new feed widget url should look something like this:

http://YOUR-BLOG-NAME-HERE.blogspot.com/feeds/posts/default/?max-results=10

Pretty cool huh? Now it might not work right away in your feed widget so to make sure it’s working properly is to view it in your browser. Yup, just put it right into your browser window and you’ll see if it’s working properly because trying to troubleshoot it after it’s in your rss feed widget is really tough — especially since it doesn’t always update right away.


Filter Your Post List by Category (Tag, Label)
Say you only want to show a certain list of posts based on category in your rss feed widget. Well, now you can by using the “category” parameter.

Here’s what your url would look like:

http://YOUR-BLOG-NAME-HERE.blogspot.com/feeds/posts/default/-/cure/

I was only able to get this to work with one category but according to the example below, you can filter by multiple categories. If any of you are able to get that to work, please let me know.


Filter Your Post List by a Date Range
If you wanted to restrict your feed results to a certain time frame you can. I can’t think of a good reason for me to personally read this since I always want the latest posts to be listed but the filter is here to use regardless.

Here’s an example which will only show posts that were published between 1/16/2008 – 2/28/2008:

http://YOUR-BLOG-NAME-HERE.blogspot.com/feeds/posts/default/?published-min=2008-01-16T00:00:00&published-max=2008-02-28T23:59:59

You can also substitute the published-min and published-max with updated-min and updated-max if you wanted to filter by updated dates instead of published dates.


Order By Filter
I actually don’t ever modify this since the default order by filter is lastmodified or createdate which makes the most recent post appear first on the list. If you wanted to change this for some reason you easily could by using the “orderby” filter.


Start Index Filter
This one could be handy if you wanted to skip certain posts and start listing after, say the 1st post. Maybe you have a section where you feature the latest post on your blog and you don’t want it to also show up first in your rss feed.

This is the filter you would use. An example of the “start-index” filter would be:

http://YOUR-BLOG-NAME-HERE.blogspot.com/feeds/posts/default/?start-index=2

This would essentially skip and not show your latest post and post #2 would come up first. Be careful if you do this and later wonder why your first post isn’t show up.




Multiple Parameter Example
You can combine all these filters into one url and really fine tune your results if you wanted to. Let’s say you want to show your 10 most recent posts filtered by the “book” category (label, tag).

Your feed url would look something like this:

http://YOUR-BLOG-NAME-HERE.blogspot.com/feeds/posts/default/-/cure/?max-results=10

Another example would be to show 10 most recent posts filtered by a date range:

http://YOUR-BLOG-NAME-HERE.blogspot.com/feeds/posts/default/?published-min=2008-01-16T00:00:00&published-max=2008-02-28T23:59:59&max-results=10

Here’s a list of all the query parameters you can change for any Blogger rss feed. I wouldn’t worry about the “alt” one but the rest are pretty useful to know.

alt – the type of feed to return, such as atom (the default) or rss.
orderby – the order to return entries, such as lastmodified (the default) and starttime.
max-results – the maximum number of entries to return.
/category – specifies categories (i.e. labels) to filter the feed results. For example, http://www.blogger.com/feeds/blogID/posts/default/-/Fritz/Laurie will return entries labeled with Fritz AND Laurie.
updated-min, updated-max – the bounds on entry update dates.
published-min, published-max – the bounds on entry publication dates.
start-index – 1-based index of the first result to be retrieved (for paging).

Now that you are familiar with all your rss feed url options, you can really customize your Blogger recent posts and comments sections. Many of you have asked me how to increase your feed limit from 5 to 10 so now you can. In some cases I had to completely delete my recent comments widget and install it again for the filters to correctly work. I’m not sure why but you might run into a similar issue.