Blogger Tips And Tricks|Latest Tips For Bloggers

How To Hide Description From Blogger Header

2009-06-04T18:40:00.000-07:00

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see this :

#Header .description

Look at the picture below.

3.Copy below code and paste it after above line.

display:none;

Look at the example below.

4.Now save your template and you are done.

How To Split Header Column to 2 Columns

2009-05-03T08:52:00.000-07:00

NOTE: Instead of This Post Please Read This Post !!!

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see code like this:

/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

3.Replace above code with below code.

/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}

4.Now again Scroll down to where you see code like this :

5.Replace above code with below code.

6.Click on "save Template" and you are done.

Update: Doesn't work this method for your template? Then read below posts.They will work correctly than this method and easy to use.

How To Split Blogger Header into 2 Sections

How To Split Blogger Header into 3 Sections

How To Hidden Blogger Header and Replace Image Instead

2009-04-30T19:56:00.000-07:00

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see this:

#header-wrapper {
width:800px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Note :- width:660px can be different value.

3.Now Replace the above code with the below code.

#header-wrapper {
width:800px;
margin:0 auto 10px;
border:1px solid $bordercolor;
display:none;
}

Done. above code hides your blog header.

4.To use a image instead header,find the below code.

5.Now paste the below code just after the above code.

6Click on "Save Templates" and you are done.

How To Add New Layout below Header in Blogger

2009-04-30T19:32:00.000-07:00

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see this:

</head>

3.Add below code into your template just above the </head> tag.

#belowheader-wrapper {
width:890px;
margin:0 auto 10px;
overflow: hidden;
}

Note : You can change width:890px to equal the width to your Header wrapper.

4.Now Scroll down to where you see this:

5.Now paste the below code just after the above code.

6.Click on "Save Templates" and you are done.

What Are the Parts Of a Blogger Template

2009-04-18T18:46:00.000-07:00

There Are 5 Main Parts of a Blogger Templates.This is the basic description about these parts.

1. XML Language declarations

2. HEAD, TITLE and the META TAGS

3.Variable Definitions

4. CSS (Cascading Style Sheet) section

5.Body

Below descricptions are Examples Of Parts Of the Template

XML Language declarations

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

HEAD, TITLE and the META TAGS

<head>
<title>Latest Tips for Bloggers|Blogger Tips And Tricks</title>
<b:include data='blog' name='all-head-content'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='Latest Tips for Bloggers for easy blogging and Making Money.blogger,blogspot tips and tricks.A dummies guide,templates,layouts,widgets, JavaScript,HTML codes,SEO,Google AdSense,gadgets,How to monetize Blogger or blogspot blogs.' name='description'/>
<meta content='blogger tricks,blogspot tweaks,how to blog,blogger tips,blogging tricks,widgets,links,google,adsense,latest,Page Rank,free blog,Yahoo,MSN,FeedBurner,Comments,new bloggers,sitemaps,make money,online,Blogging tips,Sitemaps,Meta Tag,YouTube Tweaks' name='keywords'/>
<meta content='Lasantha' name='author'/>
<meta content='all,follow' name='robots'/>
<meta content='General' name='Rating'/>
<meta content='never' name='Expires'/>
<meta content='english' name='Language'/>
<meta content='Global' name='Distribution'/>
<meta content='INDEX,FOLLOW' name='Robots'/>
<meta content='4 Days' name='Revisit-after'/>
<meta content='lasanthaset4@gmail.com' name='Email'/>
<meta content='Karunarathna' name='Publisher'/>
<meta content='Keerthi' name='Copyright'/>
<META content='04a82ed1e8901452' name='y_key'></META>
<meta content='9BC9210680' name='blogcatalog'/>
<meta content='uhl6s4fkZiCGiK8tOzdJdlKTP7V4anqblyHBjk8PA0g=' name='verify-v1'/>

Variable Definitions

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima Ochre
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team

----------------------------------------------- */

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#dd9" value="#CAF99B">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#684" value="#0066CC">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#874" value="#000000">
.............................

CSS (Cascading Style Sheet) section

/* Use this with templates/template-twocol.html */

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

/* Header
-----------------------------------------------
*/

...............

/* Footer
----------------------------------------------- */
#footer {
width:950px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
]]></b:skin>
</head>

Body

<body>
<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blogger Tips And Tricks (Header)' type='Header'/>
<b:widget id='HTML17' locked='false' title='' type='HTML'/>
<b:widget id='HTML19' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div id='content-wrapper'>

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML6' locked='false' title='Subscribe to Blogger Tips' type='HTML'/>
<b:widget id='LinkList2' locked='false' title='Blogger Tips - General' type='LinkList'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
<b:widget id='HTML1' locked='false' title='Blog Directries' type='HTML'/>
<b:widget id='HTML5' locked='false' title='Social Bookmarks' type='HTML'/>
<b:widget id='HTML11' locked='false' title='Useful Free Services' type='HTML'/>
<b:widget id='LinkList1' locked='false' title='Link' type='LinkList'/>
</b:section>
<p><a href='http://bloggertipandtrick.blogspot.com/'>Blogger Tips and Trick</a> for <a href='http://bloggertipandtrick.blogspot.com/'>Bloggers</a></p></div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML14' locked='false' title='' type='HTML'/>
<b:widget id='HTML20' locked='false' title='Search Blogger Tips And Tricks' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
<b:widget id='LinkList3' locked='false' title='Blogger Tips - Useful Articles' type='LinkList'/>
<b:widget id='LinkList4' locked='false' title='Blogger Tips - Change Appearance' type='LinkList'/>
<b:widget id='LinkList5' locked='false' title='Blogger Tips -Gadget,Widget,Elements,Tools' type='LinkList'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='HTML13' locked='false' title='Privacy Policy' type='HTML'/>
</b:section>
</div>

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Get Email Updates' type='HTML'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='HTML3' locked='false' title='Get Latest Updates' type='HTML'/>
<b:widget id='HTML10' locked='false' title='' type='HTML'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='HTML8' locked='false' title='Link to This Site' type='HTML'/>
<b:widget id='HTML9' locked='false' title='Support me !!!' type='HTML'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='HTML4' locked='false' title='Flag Counter' type='HTML'/>
<b:widget id='HTML15' locked='false' title='' type='HTML'/>
</b:section>
</div>


<div class='clear'> </div>

</div> 

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='HTML21' locked='false' title='' type='HTML'/>
<b:widget id='HTML12' locked='false' title='Feed Directories' type='HTML'/>
</b:section>
</div>

</div></div> 

<script type='text/javascript'>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker("UA-8271964-1");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>

How to Link Header to Another Site

2009-04-17T05:37:00.000-07:00

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Template"

3.Scroll down to where you see this:-

4.Replace above code with below code.

NOTE : Replace 'LINK_OF_YOUR_ANOTHER_SITE' with actual URL of your another site and save template.

How To Remove Links from Header and Post Titles

2009-04-17T04:49:00.000-07:00

HOW TO REMOVE HEADER LINK

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Template"

3.Scroll down to where you see this:-

<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>

4.Replace above code with below code.

<div class='titlewrapper'>
<h1 class='title'>
<data:title/>
</h1>
</div>

5.Preview and save your Template.

HOW TO REMOVE POST TITLE LINK

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Template"

3.Scroll down to where you see this:-

<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

4.To remove the permalink Replace above code with below code.

5.Preview and save your Template.

How To Insert Search Box in Header

2009-04-09T19:31:00.000-07:00

You can insert Your Google Custom Search Box or other Search Box in Header using these steps.Then look of the page will be very smart.

log in to your dashboard--> layout- -> Edit HTML

Click on "Expand Widget Template"

Scroll down to where you see this:-

<div class='descriptionwrapper'>

<p class='description'><span><data:description/></span></p>

Now Add your search box code immediately after these lines.

Now click on Save Template and refresh your site.That's it.

How To Add Background images to Blogger Templates

2009-04-03T19:57:00.000-07:00

How To Add image to the Header

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

#header-wrapper {

Add immediately after that the following line:-

background-image: url(URL address of your image);

See the example below.

#header-wrapper {
background-image: url(http://3.bp.blogspot.com/_-j7_-ccACuU/SdR7q0uh0_I/AAAAAAAAADs/IxkuhTpf6CE/s400/digg1.jpeg);

Save the template and refresh your site.

How To Add image to the Main Background

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

body {

Add immediately after that the following line:-

background-image: url(URL address of your image);

See the example below.

body {
background-image: url(http://3.bp.blogspot.com/_-j7_-ccACuU/SdR7q0uh0_I/AAAAAAAAADs/IxkuhTpf6CE/s400/digg1.jpeg);

Save the template and refresh your site.

How To Add image to the Posts Background

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

#main-wrapper {

Add immediately after that the following line:-

background-image: url(URL address of your image);

See the example below.

#main-wrapper {
background-image: url(http://3.bp.blogspot.com/_-j7_-ccACuU/SdR7q0uh0_I/AAAAAAAAADs/IxkuhTpf6CE/s400/digg1.jpeg);

Save the template and refresh your site.

How To Add image to the Sidebar Background

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

#sidebar-wrapper {

Add immediately after that the following line:-

background-image: url(URL address of your image);

See the example below.

#sidebar-wrapper {
background-image: url(http://3.bp.blogspot.com/_-j7_-ccACuU/SdR7q0uh0_I/AAAAAAAAADs/IxkuhTpf6CE/s400/digg1.jpeg);

Save the template and refresh your site.

How To Change Colours of Blogger Templates

2009-04-03T03:26:00.000-07:00

How To Change Blogger Header background color

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

#header-wrapper {

Add immediately after that the following line:-

background:your clour;

If You want background colour set to #D3FFCC , above code must change like this.

background:#D3FFCC;

See the example below.

#header-wrapper {
background:#D3FFCC;

Save the template and refresh your site.

How To Change Blogger Main background color

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

body {
background:$bgcolor;

If you want to set bgcolor to #d3ffcc , replace above code with this.

body {
background-color:#d3ffcc;

Save the template and refresh your site.

How To Change Blogger Post background color

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

#main-wrapper {

If you want to set post color to #d3ffcc , replace above code with this.

#main-wrapper {
background-color:#d3ffcc;

Save the template and refresh your site.

How To Change Blogger Sidebar background color

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

#sidebar-wrapper {

If you want to set sidebar color to #d3ffcc , replace above code with this.

#sidebar-wrapper {
background-color:#d3ffcc;

Save the template and refresh your site.

How To Add Page Elements to Posts Column and Blog Header

2009-03-30T22:11:00.000-07:00

For example your Blog Header Page Element widget code looks like this :

<b:widget id='Header1' locked='true' title='MY BLOG (Header)' type='Header'/>

You can see this by login at Blogger.com and click on Layout link on Dashboard. Then click Edit Html subtab of Template tab. Scroll down in Template code box to see above code. This code is wrapped in the Header section code like this :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='MY BLOG (Header)' type='Header'/>
</b:section>

As you can see in the first line the number of maximum widgets in the header section is set to one. This makes it impossible for you to add new widgets in the header. Also Showaddelement is set to No.

To add more page elements in header change this code to :

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='MY BLOG (Header)' type='Header'/>
</b:section>

Set the maxwidgets to the number of widgets you want to put in the header section plus one. This makes it easier to rearrange the widget order in the header. Also change showaddelement to Yes. This will add a "Add Page Element' link to the header on the Layouts page.

You can do the same with the Blog Posts section code :

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Add a maxwidgets=x code and change showaddelement to yes. Save Template and click on Page Elements subtab of Template tab. You can now add any page Elements to the header and Blog posts. Do the same for the footer.