Archived Post: Some small tricks



Dear Friend,

This post is a collection of all the little tweaks I've learned thoughout my last 5-month experience with the (then) Blogger in Beta, and now the New Blogger. Some I've learned from the Blogger tutorial, some from the other hackers, and some from reading the template. I think it would be useful for certain people. I'll update this post as needed. Thanks.

Question #1: What is the URL to get 99 latest posts?



Answer:
Have a linklist widget, and put this URL as the link (replacing "hoctro" with your blog's name):


http://hoctro.blogspot.com/search/label/?max-results=99


Question #2: How to get 99 latest posts by clicking on an item of the "label" widget?



Answer:
You need to open the template in expanded mode, then first look for this line:


<b:widget id='Label1' locked='false' title='Labels' type='Label'>


then look for this line about 10+ lines below it


<a expr:href='data:label.url'><data:label.name/></a>

change that to this


<a expr:href='data:label.url + "?max-results=99"'><data:label.name/></a>



Question #3: I can't drag a widget to my header. How do I make it appendable, just like on the sidebar?



Answer:
From dashboard, go to Layout->Template->Edit HTML and look for this line:


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


You need to change it to:


<b:section class='header' id='header' maxwidgets='10' showaddelement='yes'>


Now you can add 9 more widgets to your header, besides the default header itself.


Question #4: How do I change the title of the blog with a banner?



This below example is for the Minima template

1. Go to Edit Html page, collapsed mode, look for the line:

#header-wrapper

then replace that rule and one next to it to look like this:

#header-wrapper {
width:57.69em;
*width:56.3em; /* IE */
min-width:750px;

margin:0 auto 10px;
//border:1px solid $bordercolor;
min-height:200px;
background:url("http://lh6.google.com/_h/5xBoc/s1600/baby.jpg") no-repeat left top;
}

#header {
margin: 5px;
//border: 1px solid $bordercolor;
text-align: center;
display: none;
}

The URL you see there - in bold - is the address of the picture. You could use Blogger to upload a picture, click on it to view the real size, then right click->properties to cut the URL from there.

Below is the discussion on some other tweaks made to make things look right:

1. For #header-wrapper

min-width:750px; - the minimum width shown would be 750px - you should set this to your picture size.

//border:1px solid $bordercolor; - // means commenting things out, in this case we don't want to show the box around the text

min-height:200px; - the minimum height shown would be 200px - you should set this to your picture height size.

2. For #header

//border: 1px solid $bordercolor; - leave out the inner box.

display: none; - not to display header texts by commenting them out.