TransBloggers

How to add a searchbox to Blogger

2007-10-25T04:23:00.000-07:00

I found this on Tips for New Bloggers
Put this code in a HTML/JavaScript widget:

<p align="left">
<form id="searchthis" action="http://your_blog_url/search" style="display:inline;" method="get">
<strong>The_Searchbox_Title<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

Replace your_blog_url with the url of your blog
(eg: "http://findhow.blogspot.com/search")
Replace The_Searchbox_Title with something

My favorite Blogger template

2007-10-25T03:13:00.000-07:00

"Varsity Blue is a sleek and professional 3 column blogger template. It has a clean design that has been tested in all internet browsers."
It comes in many colors :)
You can find it at K2 Modify, see the other templates, too.

How to add page elements in the header or in the main body

2007-10-25T01:49:00.000-07:00

And how to remove the header or the post body

1. Go to your blog's dashboard -> Template -> Edit HTML
2. For the header, find this code:


<div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TEST BLOG (Header)' type='Header'>
<b:includable id='main'>

maxwidgets='1' - this sets the maximum nuber of page elements you can add in the header
showaddelement='no' - set this to yes and you'll be able to add page elements
locked='true' - set this to false, and you'll be able to move it, or remove it

For the main body:


<div id='main-wrapper'>
      <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>

How to wrap text around an image

2007-10-24T08:55:00.000-07:00

This is the code:
<img style="float:left; margin:0 10px 10px 0;" src="http://image_link.jpg" border="0"/>
Replace left with the place you want your image to be in (left/center/right)
Replace http://image_link.jpg with the link of your image

How to make a drop-down menu

2007-10-24T08:30:00.000-07:00

I use this for the categories on my other blog: FindHow
You can add this code in a HTML/JavaScript page element


<select onchange="javascript:window.navigate(this.options[this.selectedIndex].value);"><option value=""/>THE NAME OF THE LIST
<option value="http://www.Item1URL.com"/>Item1Name
<option value="http://www.Item2URL.com"/>Item2Name
</select>

Replace http://www.Item1URL.com Item1Name and http://www.Item2URL.com Item2Name with your own stuff

UPDATED
The second method:


<script language="JavaScript" type="text/javascript">
function menu_goto( menuform )
{
selecteditem = menuform.url.selectedIndex ;
newurl = menuform.url.options[ selecteditem ].value ;
if (newurl.length != 0) {
location.href = newurl ;
}
}
document.writeln( '<form action="chgoto" method="get">' );
document.writeln( '<select onchange="menu_goto(this.form)" name="url">' );
document.writeln( '<option value=""/>THE NAME OF THE LIST' );
document.writeln( '<option value="Item1URL"/>Item1Name' );
document.writeln( '<option value="Item2URL"/>Item2Name' );
document.writeln( '</select>' );
document.writeln( '</form>' );
</script>

Replace the url and the name like on the first method

How to make your navbar retractable (Doesn't work with IE)

2007-10-24T06:30:00.000-07:00

This is a modified version of Avatar's hack. With his hack, the navbar leaves a blank space when it's hidden (because it's invisible, but it's there), with this hack, the navbar pushes the whole page down.. i think it's cooler :)
1. Go to your blog's dashboard -> Template tab -> Edit HTML
2. Add this code after the <head> tag:


#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0); height:2px;}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100); height:28px;
}

3. Save the template

How to change the Blogger navigation messages

2007-10-23T16:28:00.000-07:00

1. Go to your blog's dashboard -> Template tab -> Edit HTML
2. Check Expand Widget Templates
3. Find this code:

   <b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

4. Replace: <data:newerPageTitle/>, <data:olderPageTitle/> and <data:homeMsg/> with everything you want.. i think you can even use images, i haven't experimented enough

How to change the favicon of a Blogger

2007-10-23T16:25:00.000-07:00

1. Design the icon and save it as png (ico is preferred, but it's harder to upload). The preferred resolution is 16x16, but i saved mine at 22x22 for greater quality, and it seems it works :) (i think 32x32 is the limit)
2. Upload the icon somewhere (photobucket, pages.google.com), and copy the link
3. Go to Edit HTML under the Template tab in your blog's dashboard
4. Find the follwowing line (Ctrl+f) : <title><data:blog.pagetitle/></title>
5. Insert this code below it: <link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/> (replace "URL of your icon file" with the link you've copied at step 2)
6. Save the template
In order to see the change, close your page, delete the temporary internet files from your browser and reopen your page

How to remove the navbar from Blogger

2007-10-23T16:24:00.000-07:00

1. Go to Costumize (in navbar)
2. Go to the Template tab -> Edit HTML
3. Scroll down until you see the section with the template's name, the author's name and other stuff

4. Under it, add the following code:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

5. Click Save Template

How to remove the Blogger title from the header

2007-10-23T16:20:00.000-07:00

1. Go to Costumize -> Template -> Edit HTML
2. Find the following text and add the red text like below:

#header h1 {
color: $blogTitleColor;
font: $pageTitleFont;
display:none;

#header .description {
margin: 0;
padding: 7px 16px 0 84px;
color:
$blogDescriptionColor;
font: $blogDescriptionFont;
display:none;