Nakul has asked me few questions on Blogger hacks. I will give the explanation here and hopefully it will benefit other people as well.
Hide Blogger navigation bar
Insert this in your b:skin
#navbar-iframe {Use Blogger custom search engine in layout
height:0px;
visibility:hidden;
display:none;
}
It is important for you to hide blogger navigation bar first. I don't think you would like to see two search box in the same layout :). Put this code on anywhere where you want it to be displayed.
<form action="http://yourblogname.blogspot.com/search" id="searchthis" method="get" style="display: inline;">
<input id="b-query" maxlength="200" name="q" size="30" type="text" />
<input alt="Search" id="b-searchbtn" src="http://hafiz238.googlepages.com/search.gif" align="top" hspace="1" type="image" />
</form>
Replace yourblogname with your blog address. Maxlength refers to the maximum number of characters eg letters and numbers, that can be put into your search box. Size refers to the length of your search box. For example, the length of my search box is 30 characters. src refers to the image of search button. You can change this link to your own search button. Perhaps, you want to change the search button into a magnifying glass :).
If you would like to use standard search button, Replace this code
<input alt="Search" id="b-searchbtn" src="http://hafiz238.googlepages.com/search.gif" align="top" hspace="1" type="image" />with this code<input id='b-searchbtn' type='submit' value='Search' />How to add social bookmarks
How to change date header format into a date calendar icon
This hack is achieved by using an image. All my new blogger layouts have this hack. The image for this layout is this one 
.
.If you would like to use this image for your blog, insert this code in b:skin
.date-header {
height:52px;
width:45px;
float:left;
text-align:center;
font: normal normal normal 10px/100% Arial, Helvetica, sans-serif;
padding: 22px 4px 0 0;
margin: 0 10px;
background: url('http://hafiz238.googlepages.com/calendar.gif') no-repeat;
}Next, go to your setting tab and click formatting. Use the following options
- Language: English (United States)
- Date Header Format: Month Day Year. Please ensure that the month is in abbreviation form. For example 15 September 2007 will be written as Sept 15 2007.
Related post
Useful links for new Blogger
6 comments:
for the search box
i am not good with html
so where should i post the code in my html to get the result as u rs
my answer is in the email :)
nice! looks like i have a long way to go before i could even think of trying to do all this, hehehe.
yes, i took several years to learn this all by myself. It requires strong dedication and lots of free time.
Thanks for this hack. Good work. I think it's better to have the icon above the post title-remove the line
float:left;
thanks for visiting. there are many ways to modify this provided that you know a bit on CSS :). Another alternative is to use different picture for the icon.
Post a Comment