How to add a searchbox to Blogger
1 comments Published by Darwyn4 on Thursday, October 25, 2007 at 10/25/2007I 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>
"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
0 comments Published by Darwyn4 on at 10/25/2007And 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
0 comments Published by Darwyn4 on Wednesday, October 24, 2007 at 10/24/2007This 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
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)
0 comments Published by Darwyn4 on at 10/24/2007This 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
0 comments Published by Darwyn4 on Tuesday, October 23, 2007 at 10/23/2007
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
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
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
