TransBloggersTransBloggersLearn how to transform your blog - blogger tips, tricks and tutorials Articles
How to add a searchbox to Blogger
2007-10-25 13:23:00 I found this on Tips for New Blogger sPut this code in a HTML/JavaScript widget:<p align="left"><form action="http://your_blog_url/search" method="get"><strong>The_Searchb ox_Title<br/></strong><inp ut maxlength="255" name="q" size="20" type="text"/><input value="Search" type="submit"/></form></p> Replace your_blog_url with the url of your blog(eg: "http://findhow.blogspot.com/search")Repl ace The_Searchbox_Title with something
My favorite Blogger template
2007-10-25 12:13: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. More About: Blogger , Template , Favorite
How to add page elements in the header or in the main body
2007-10-25 10:49:00 And how to remove the header or the post body1. Go to your blog's dashboard -> Template -> Edit HTML2. For the header, find this code:<div> <b:section maxwidgets='1' showaddelement='no'><b:widget locked='true' title='TEST BLOG (Header )' type='Header'><b:includable>maxw idgets='1' - this sets the maximum nuber of page elements you can add in the headershowaddelement='no' - set this to yes and you'll be able to add page elementslocked='true' - set this to false, and you'll be able to move it, or remove itFor the main body:<div> <b:section showaddelement='no'><b:widget locked='true' title='Blog Posts' type='Blog'><b:includable var='top'> More About: Body , Elements , Page , Main
How to wrap text around an image
2007-10-24 17:55:00 This is the code:<img 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 More About: Text , Image , Wrap
How to make a drop-down menu
2007-10-24 17:30:00 I use this for the categories on my other blog: FindHowYou 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"/>Item1 Name<option value="http://www.Item2URL.com"/>Item2 Name</select>Replace http://www.Item1URL.com Item1Name and http://www.Item2URL.com Item2Name with your own stuffUPDATEDThe 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="http://transbloggers.blogspot.com //chgoto" method="get">' );document.writeln( '<select onchange="menu_goto(this.form)" name="url">' );document.writeln( '<option value=""/>THE NAME OF THE LIST' );document... More About: Make , Menu , Drop
How to make your navbar retractable (Doesn't work with IE)
2007-10-24 15:30: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 HTML2. Add this code after the <head> tag:#navbar-iframe{opacity:0.0;filter:alp ha(Opacity=0); height:2px;}#navbar-iframe:hover{opacity: 1.0;filter:alpha(Opacity=100, FinishedOpacity=100); height:28px;}3. Save the template More About: Work , Make
How to change the Blogger navigation messages
2007-10-24 01:28:00 1. Go to your blog's dashboard -> Template tab -> Edit HTML2. Check Expand Widget Templates3. Find this code: <b:if cond='data:newerPageUrl'><span>& lt;a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><d ata:newerPageTitle/></a></spa n></b:if><b:if cond='data:olderPageUrl'><span>& lt;a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><d ata:olderPageTitle/></a></spa n></b:if><b:if cond='data:blog.homepageUrl != data:blog.url'><a expr:href='data:blog.homepageUrl'>< data:homeMsg/></a><b:else/> ;<b:if cond='data:newerPageUrl'><a expr:href='data:blog.homepageUrl'>< data:homeMsg/></a></b:if>& lt;/b:if>4. Replace: <data:newerPageTitle/>, <data:olderPageTitle/> and <data:h... More About: Blogger , Change , Navigation , Messages , Ages
How to change the favicon of a Blogger
2007-10-24 01:25: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 link3. Go to Edit HTML under the Template tab in your blog's dashboard4. Find the follwowing line (Ctrl+f) : <title><data:blog.pagetitle/> </title>5. Insert this code below it: <link href=http://transbloggers.blogspot.com//' 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 More About: Blogger , Change , Favicon
How to remove the navbar from Blogger
2007-10-24 01:24:00 1. Go to Costumize (in navbar)2. Go to the Template tab -> Edit HTML3. Scroll down until you see the section with the template's name, the author's name and other stuff4. Under it, add the following code:#navbar-iframe {height:0px;visibility:hidden;display:non e}5. Click Save Template More About: Blogger
How to remove the Blogger title from the header
2007-10-24 01:20:00 1. Go to Costumize -> Template -> Edit HTML 2. Find the following text and add the red text like below:#header h1 {color: $blogTitle Color;font: $pageTitleFont;display:none;#header .description {margin: 0;padding: 7px 16px 0 84px;color:$blogDescriptionColor;font: $blogDescriptionFont;display:none; More About: Blogger , Header |
|
 |
|
 |
