| Blogger Tips And Tricks|Latest Tips For Bloggers

How to Link Blogger Header to Another Site

Lasantha Bandara — Mon, 12 May 2014 13:07:00 +0000

As you can see in most times, your template header title links to your blogger blog that template has been applied. This tutorial explains how to link your blogger site header to another site you like.

Follow the steps given below to link blogger header to other site.

1.Login to your Blogger account and go to "Edit HTML" of your blog.

2.Scroll down to where you see this (or use Ctrl+F to find that code):

3.Replace above code with below code:

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

The post How to Link Blogger Header to Another Site appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Add Random,Rotating Images for Blogger Header

Lasantha Bandara — Fri, 09 Jul 2010 12:46:00 +0000

In this tutorial I am going to explain how to add random,rotating images for your blogger header background.When after you adding this feature to your blogger blog,header image of your blog will rotate/change in each page refresh.Before doing this trick you must create header images for your blog.In this tutorial I am going to show how to rotate 5 header images.

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

2.Scroll down to where you see tag.

3.Now copy below code and paste it just after the tag.

NOTE :

Replace "URL-OF-HEADER-IMAGE-X" with your image URLs.

If above code doesn't work for your blog,then replace "#header-wrapper" with "#header".(ID or Class of your header section).

You can add different number of images than 5.But remember to change "4*Math.random()" according to the number of images you add.For example,when you want to add 8 different images for your blog header background, then code should be change as "7*Math.random()".Look at the example below:

4.Now save your template and your done.Refresh your site few times to see the result.Your header image will be rotate.

The post How To Add Random,Rotating Images for Blogger Header appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Hide Description From Blogger Header

Lasantha Bandara — Fri, 05 Jun 2009 02:10:00 +0000

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.

The post How To Hide Description From Blogger Header appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Split Header Column to 2 Columns

Lasantha Bandara — Sun, 03 May 2009 16:22:00 +0000

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

The post How To Split Header Column to 2 Columns appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

What Are the Parts Of a Blogger Template

Lasantha Bandara — Sun, 19 Apr 2009 02:16:00 +0000

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

HEAD, TITLE and the META TAGS

Latest Tips for Bloggers|Blogger Tips And Tricks

Variable Definitions

-----------------------------------------------
Blogger Template Style
Name: Minima Ochre
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team

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

/* Variable definitions
====================
type="color" default="#dd9" value="#CAF99B">
type="color" default="#333" value="#333333">
type="color" default="#684" value="#0066CC">
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;
}
]]>

Body

The post What Are the Parts Of a Blogger Template appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Remove Links from Header and Post Titles

Lasantha Bandara — Fri, 17 Apr 2009 12:19:00 +0000

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:-

4.Replace above code with below code.

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:-

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

5.Preview and save your Template.

The post How To Remove Links from Header and Post Titles appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Add Background images to Blogger Templates

Lasantha Bandara — Sat, 04 Apr 2009 03:27:00 +0000

How To Add image to the Header

#header-wrapper {

Add immediately after that the following line:-

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

body {

Add immediately after that the following line:-

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

#main-wrapper {

Add immediately after that the following line:-

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

#sidebar-wrapper {

Add immediately after that the following line:-

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.

The post How To Add Background images to Blogger Templates appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Change Colours of Blogger Templates

Lasantha Bandara — Fri, 03 Apr 2009 10:56:00 +0000

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

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

#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

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.

The post How To Change Colours of Blogger Templates appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Hidden Blogger Header and Replace Image Instead

Lasantha Bandara — Wed, 01 Apr 2009 03:26:00 +0000

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

2.Scroll down to where you see header-wrapper code block.It will nearly look like this:

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

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

3.Now add "display:none;" into your header-wrapper code block.Look at below:

#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.

URL_OF_YOUR_BLOG">URL_OF_THE_IMAGE" alt="Home" />

Note : Replace URL_OF_YOUR_BLOG and URL_OF_THE_IMAGE with your content.

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

The post How To Hidden Blogger Header and Replace Image Instead appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Add New Layout below Header in Blogger

Lasantha Bandara — Wed, 01 Apr 2009 03:02:00 +0000

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

2.Scroll down to where you see tag.

3.Add below code into your template just above the 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.

The post How To Add New Layout below Header in Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.