| Blogger Tips And Tricks|Latest Tips For Bloggers

How To Add Related Posts to Blogger

Lasantha Bandara — Mon, 29 Jul 2024 04:12:00 +0000

Are you looking to enhance your Blogger site by keeping visitors engaged and encouraging them to explore more of your content? Adding related posts is a great way to achieve this. By displaying a list of related articles at the end of each post, you can help readers discover more content that interests them, thereby increasing page views and reducing bounce rates. In this quick guide, we'll walk you through the steps to add related posts to your Blogger site.

1. Go to the "Edit HTML" page of your Blogger blog.

2. Scroll down to where you see this line:

3. After the above line, copy and paste the code below to a suitable location:






Related Posts :

4. Click on the save button and refresh your site.

The post How To Add Related Posts to Blogger 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.

Numbered Page Navigation Hack For Bloggers

Lasantha Bandara — Fri, 18 Dec 2009 12:33:00 +0000

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]> tag .

3.Copy below code and paste it just before the ]]> tag.

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.Now drag your new gadget under "Blog Posts" Section.

Note:
Change values of pageCount,displayPageNum,upPageWord,downPageWord if you like.

You are done.

The post Numbered Page Navigation Hack For Bloggers appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Add Style to Mouse Cursor in Blogger

Lasantha Bandara — Fri, 04 Dec 2009 08:50:00 +0000

1.Login to your blogger dashboard-->Layout > Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

You are done.Refresh your site to see effect.

The post How To Add Style to Mouse Cursor in Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Add jQuery Scroll Background To Blogger

Lasantha Bandara — Wed, 28 Oct 2009 02:52:00 +0000

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

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

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Note:above code can be different in your template.But important part is body { .

5.Replace above code with below code:

body {
background:url(http://1.bp.blogspot.com/_4HKUHirY_2U/Suj7uR3ZKfI/AAAAAAAAAGU/R8pnF8urjTk/bgscroll.jpg);
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Note: You can use any suitable image instead of above image.

6.Click on save template and you are done.

Demo

The post How To Add jQuery Scroll Background To Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Show HTML/CSS Codes On Coloured Background In Blogger Posts

Lasantha Bandara — Sat, 18 Jul 2009 02:38:00 +0000

1.Login to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]> tag.

3.Now copy below code and paste it before ]]> tag.

.csscode {
margin : 10px 10px 10px 10px;
padding : 5px;
clear : both;
list-style-type : none;
background : #F9F7E8;;
border-top : 2px solid #000000;
border-right : 2px solid #000000;
border-bottom : 2px solid #000000;
border-left : 2px solid #000000;
}

Look at the example below.

.csscode {
margin : 10px 10px 10px 10px;
padding : 5px;
clear : both;
list-style-type : none;
background : #F9F7E8;;
border-top : 2px solid #000000;
border-right : 2px solid #000000;
border-bottom : 2px solid #000000;
border-left : 2px solid #000000;
}

]]>

4.Now save your template.

5.Now when you want to insert some codes in your posts always put it between

and

and publish your post.



YOUR CODE HERE

Look at the example below.



<form action="http://www.roundpic.com" method="post" enctype="multipart/form-data" target="blank"><input value="1048576" name="MAX_FILE_SIZE" type="hidden"><table><tbody><tr><td class="title"><b>Image:</b></td><td class="input"><input name="file" type="file"></td></tr><tr><td class="title">or <b>URL:</b></td><td class="input"><input value="http://" name="url" type="text"></td></tr><tr><br /><td colspan="2" class="submit"><button onclick="getLoader();" type="submit">Round it!</button></td></tr></tbody></table></form>

It will look like this.

The post How To Show HTML/CSS Codes On Coloured Background In Blogger Posts appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Add Hover Menu Style Feature to Blogger Links

Lasantha Bandara — Sun, 12 Jul 2009 02:28:00 +0000

1.Login to your blogger dashboard.

2.Go to Layout- -> Edit HTML

3.Scroll down to where you see tag :

4.Now add below code immediately after tag .

5.Now save your template and you are done.Refresh your site to see effect.

The post How To Add Hover Menu Style Feature to Blogger Links appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Add Icon Image Before Blogger Post Title

Lasantha Bandara — Sat, 27 Jun 2009 01:30:00 +0000

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

4.Now copy below code .

Note : Remember to replace YOUR-IMAGE-URL with your real image url.

5.Now paste it between and .

6.Now save your template and you are done.

The post How To Add Icon Image Before Blogger Post Title appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Add Text Resizer to Blogger

Lasantha Bandara — Fri, 29 May 2009 03:44:00 +0000

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this :

]]>

4.Add below code before ]]> tag.

.textresize {
padding-left:20px;
padding-top:5px;
}

5.Now add below code between ]]> and tags.

6.Now again scroll down to where you see this :

7.Add below code immediately after above line.

Text Size : [+] | [-]

8.Now save your template and you are done.

The post How To Add Text Resizer to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

How To Add Floating ‘Subscribe’ Bar to Blogger

Lasantha Bandara — Thu, 28 May 2009 03:49:00 +0000

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

4.Now again scroll down to where you see tag.

5.Add below code before tag.


To Get Latest Update Subscribe Now !!!

NOTE : Remember to Replace YOUR-FEED-BURNER-ADDRESS and YOURBLOGNAME with your real details.Look at the example below.

6.Now save your template and you are done.

The post How To Add Floating ‘Subscribe’ Bar to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.