Blogger Tips And Tricks|Latest Tips For Bloggers
This site contains huge collection of useful tips and tricks for bloggers.These tips and tricks very helpful to bloggers to create a excellent blog site and to get a high traffic to their blogsites.So every blogger must read this tips carefully.
Articles
How To Create Auto Numbered Link List
2009-10-20 04:37:00
Do you want to add Auto Numbered Link List in blogger.It is vey simple.Follow the steps below.1.Log in to your dashboard--> layout- ->Page Elements2.Click on 'Add a Gadget' and select 'HTML/Javascript'.3.Add the code given below and click save.(or if you want to add this into a blog post, copy and paste below code in 'Edit Html' mode in blogger post editor.)<h4>Your-Link-List-Title</h4><ol><li><a href="YOUR-LINK-1">LINK-NAME-1</a></li><li><a href="YOUR-LINK-2">LINK-NAME-2</a></li><li><a href="YOUR-LINK-3">LINK-NAME-3</a></li><li><a href="YOUR-LINK-4">LINK-NAME-4</a></li><li><a href="YOUR-LINK-5">LINK-NAME-5</a></li><li><a href="YOUR-LINK-6">LINK-NAME-6</a></li><li><a href="YOUR-LINK-7">LINK-NAME-7</a></li><li><a href="YOUR-LINK-8">LINK-NAME-8</a></li><li><a href="YOUR-L
2009-10-20 04:37:00
Do you want to add Auto Numbered Link List in blogger.It is vey simple.Follow the steps below.1.Log in to your dashboard--> layout- ->Page Elements2.Click on 'Add a Gadget' and select 'HTML/Javascript'.3.Add the code given below and click save.(or if you want to add this into a blog post, copy and paste below code in 'Edit Html' mode in blogger post editor.)<h4>Your-Link-List-Title</h4><ol><li><a href="YOUR-LINK-1">LINK-NAME-1</a></li><li><a href="YOUR-LINK-2">LINK-NAME-2</a></li><li><a href="YOUR-LINK-3">LINK-NAME-3</a></li><li><a href="YOUR-LINK-4">LINK-NAME-4</a></li><li><a href="YOUR-LINK-5">LINK-NAME-5</a></li><li><a href="YOUR-LINK-6">LINK-NAME-6</a></li><li><a href="YOUR-LINK-7">LINK-NAME-7</a></li><li><a href="YOUR-LINK-8">LINK-NAME-8</a></li><li><a href="YOUR-L
How To Set All Links Open in a New Window in blogger
2009-10-20 03:52:00
Do you like to set all the links of your site open in a new window? Then follow the simple steps below:1.Login to your blogger dashboard--> layout- -> Edit HTML2.Scroll down to where you see <head> tag .3.Now copy below code and paste it just after <head> tag :<base target='_blank'/>4.Click on "Save Templates" and you are done.5.Now all the links of your site (blog post links,link list widget links,...) will open in a new window/new tab.You do not want to add target="_blank" to each of your link separately.
2009-10-20 03:52:00
Do you like to set all the links of your site open in a new window? Then follow the simple steps below:1.Login to your blogger dashboard--> layout- -> Edit HTML2.Scroll down to where you see <head> tag .3.Now copy below code and paste it just after <head> tag :<base target='_blank'/>4.Click on "Save Templates" and you are done.5.Now all the links of your site (blog post links,link list widget links,...) will open in a new window/new tab.You do not want to add target="_blank" to each of your link separately.
How To Linking Other Parts of the Same Webpage
2009-10-16 00:43:00
For example if we think we want to link the word part "Submit Article" ,first you need to mark that part of the web page.You can do this by inserting a small code around the word "Submit Article".<A NAME="name1">Submit Article</A>Then it will look like this:Submit ArticleNow,you can make the link to Submit Article. Here's the code:<A HREF="#name1">Go back Submit Article</A>It will look like this:Go back Submit ArticleNow when you click on the above link you can go to the word "Submit Article".Note: You can use any name instead of name1.
2009-10-16 00:43:00
For example if we think we want to link the word part "Submit Article" ,first you need to mark that part of the web page.You can do this by inserting a small code around the word "Submit Article".<A NAME="name1">Submit Article</A>Then it will look like this:Submit ArticleNow,you can make the link to Submit Article. Here's the code:<A HREF="#name1">Go back Submit Article</A>It will look like this:Go back Submit ArticleNow when you click on the above link you can go to the word "Submit Article".Note: You can use any name instead of name1.
How To Create Rollover Images in Blogger
2009-10-15 21:29:00
A rollover image is an image that changes to some other image when you or your customer rolls the mouse over it.To add a rollover effect to your images use the code below.<a href="IMAGE-DESTINATION-URL"><img src="IMAGE-1-LINK" onmouseover="this.src='IMAGE-2-LINK'" onmouseout="this.src='IMAGE-1-LINK'" /></a>IMAGE-1-LINK : The original image linkIMAGE-2-LINK : The rollover image linkTo get a good understand look at the example below.CODE :<a href="http://bloggertipandtrick.blogspot.com/"><img src="http://2.bp.blogspot.com/_ar9PeTUrwMY/StfeZBycIdI/AAAAAAAAAyg/Rdc5cb3TUzk/18838.jpg" onmouseover="this.src='http://1.bp.blogspot.com/_ar9PeTUrwMY/Stfedv95ncI/AAAAAAAAAyo/qKWJMwsvNes/12396.jpg'" onmouseout="this.src='http://2.bp.blogspot.com/_ar9PeTUrwMY/StfeZBycIdI/AAAAAAAAAyg/Rdc5cb3TUzk/18838.jpg'" /></a>RESULT :
2009-10-15 21:29:00
A rollover image is an image that changes to some other image when you or your customer rolls the mouse over it.To add a rollover effect to your images use the code below.<a href="IMAGE-DESTINATION-URL"><img src="IMAGE-1-LINK" onmouseover="this.src='IMAGE-2-LINK'" onmouseout="this.src='IMAGE-1-LINK'" /></a>IMAGE-1-LINK : The original image linkIMAGE-2-LINK : The rollover image linkTo get a good understand look at the example below.CODE :<a href="http://bloggertipandtrick.blogspot.com/"><img src="http://2.bp.blogspot.com/_ar9PeTUrwMY/StfeZBycIdI/AAAAAAAAAyg/Rdc5cb3TUzk/18838.jpg" onmouseover="this.src='http://1.bp.blogspot.com/_ar9PeTUrwMY/Stfedv95ncI/AAAAAAAAAyo/qKWJMwsvNes/12396.jpg'" onmouseout="this.src='http://2.bp.blogspot.com/_ar9PeTUrwMY/StfeZBycIdI/AAAAAAAAAyg/Rdc5cb3TUzk/18838.jpg'" /></a>RESULT :
How To Change Heading Tag For Better SEO in Blogger
2009-10-09 20:02:00
Heading Tag (h1, h2, h3, h4, h5) is very important for SEO. All of Blogger widgets (gadgets) title use h3 or h2 tags. So blogger template use h2 or h3 tag for post title.If you want to improve your site SEO, you need to use h1 tag for post title.Follow the simple steps below to do it:1.Login to your blogger dashboard--> layout- -> Edit HTML2.Click on "Expand Widget Templates"3.Scroll down to where you see below code :<b:if cond='data:post.title'><h3 class='post-title entry-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></b:if></h3></b:if>Note: If you can't find above code search it replacing h3 with h2.4.Now Replace above code with below code:<b:if cond='data:post.title'><h1 class='post-title entry-title'>&l
2009-10-09 20:02:00
Heading Tag (h1, h2, h3, h4, h5) is very important for SEO. All of Blogger widgets (gadgets) title use h3 or h2 tags. So blogger template use h2 or h3 tag for post title.If you want to improve your site SEO, you need to use h1 tag for post title.Follow the simple steps below to do it:1.Login to your blogger dashboard--> layout- -> Edit HTML2.Click on "Expand Widget Templates"3.Scroll down to where you see below code :<b:if cond='data:post.title'><h3 class='post-title entry-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></b:if></h3></b:if>Note: If you can't find above code search it replacing h3 with h2.4.Now Replace above code with below code:<b:if cond='data:post.title'><h1 class='post-title entry-title'>&l
How To Add jQuery Horizontal LinkList in Blogger
2009-10-08 00:54:00
1.Log in to your dashboard--> layout- -> Edit HTML2.Scroll down to where you see </b:skin> tag.3.Now copy below code and paste it just before </b:skin> tag .#nav, #nav ul{margin:0;padding:0;list-style-type:none;list-style-position:outside;position:relative;line-height:26px;}#nav a:link,#nav a:active,#nav a:visited{display:block;color:#FFF;text-decoration:none;background:#444;height:26px;line-height:26px;padding:0 6px;margin-right:1px;}#nav a:hover{background:#0066FF;color:#FFF;}#nav li{float:left;position:relative;}#nav ul {position:absolute;width:12em;top:26px;display:none;}#nav li ul a{width:12em;float:left;}#nav ul ul{width:12em;top:auto;}#nav li ul ul {margin:0 0 0 13em;}#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul{display:none;}#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block;}Note: If you want you can change above code as you like.4.Now again Scroll down to where you see </head> ta
2009-10-08 00:54:00
1.Log in to your dashboard--> layout- -> Edit HTML2.Scroll down to where you see </b:skin> tag.3.Now copy below code and paste it just before </b:skin> tag .#nav, #nav ul{margin:0;padding:0;list-style-type:none;list-style-position:outside;position:relative;line-height:26px;}#nav a:link,#nav a:active,#nav a:visited{display:block;color:#FFF;text-decoration:none;background:#444;height:26px;line-height:26px;padding:0 6px;margin-right:1px;}#nav a:hover{background:#0066FF;color:#FFF;}#nav li{float:left;position:relative;}#nav ul {position:absolute;width:12em;top:26px;display:none;}#nav li ul a{width:12em;float:left;}#nav ul ul{width:12em;top:auto;}#nav li ul ul {margin:0 0 0 13em;}#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul{display:none;}#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block;}Note: If you want you can change above code as you like.4.Now again Scroll down to where you see </head> ta
How To Create Jquery Read More-Expandable Post in Blogger
2009-10-04 06:02:00
1.Login to your blogger dashboard--> layout- -> Edit HTML2.Click on "Expand Widget Templates"3.Scroll down to where you see </head> tag .4.Copy below code and paste it just before the </head> tag .<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/><script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {$('.excerpt').expander({slicePoint: 280, // default is 100expandText: '[Read More...]', // default is 'read more...'});});</script>Note:280 is the number of summary words, the minimum is 100 and the maximum is 400You Can Change the word Read More... as your choice.5.Now again Scroll down to where you see this code :<div class='post-body entry-content'><data:post.body/><div style='clear: both;'/> <!-- clear for
2009-10-04 06:02:00
1.Login to your blogger dashboard--> layout- -> Edit HTML2.Click on "Expand Widget Templates"3.Scroll down to where you see </head> tag .4.Copy below code and paste it just before the </head> tag .<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/><script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {$('.excerpt').expander({slicePoint: 280, // default is 100expandText: '[Read More...]', // default is 'read more...'});});</script>Note:280 is the number of summary words, the minimum is 100 and the maximum is 400You Can Change the word Read More... as your choice.5.Now again Scroll down to where you see this code :<div class='post-body entry-content'><data:post.body/><div style='clear: both;'/> <!-- clear for
How To Host Java Script Files in Blogger with Unlimited Bandwidth
2009-09-17 07:45:00
As a blogger when you want to host java script files, you want to get help from free .js hosting provider like google sites.But here the problem is bandwidth limitations.If you can host java script files into blogger you can get unlimited bandwidth for your .js files.So if you want to host your .js files with unlimited bandwidth use the code below.<script type='text/javascript'>//<![CDATA[PASTE YOUR JAVASCRIPT CODE HERE//]]></script>If you can't understand above code look at the example below.This is the code when you host your java script file into another hosting account.<script type='text/javascript'>var thumbnail_mode = "float" ;summary_noimg = 230;summary_img = 140;img_thumb_height = 170;img_thumb_width = 300;</script><script src='http://keerthiset2.110mb.com/excerpt.js' type='text/javascript'/>Now when you host your java script file into blogger it should change like this :<script type='text/javascript'>var thumbnail_mo
2009-09-17 07:45:00
As a blogger when you want to host java script files, you want to get help from free .js hosting provider like google sites.But here the problem is bandwidth limitations.If you can host java script files into blogger you can get unlimited bandwidth for your .js files.So if you want to host your .js files with unlimited bandwidth use the code below.<script type='text/javascript'>//<![CDATA[PASTE YOUR JAVASCRIPT CODE HERE//]]></script>If you can't understand above code look at the example below.This is the code when you host your java script file into another hosting account.<script type='text/javascript'>var thumbnail_mode = "float" ;summary_noimg = 230;summary_img = 140;img_thumb_height = 170;img_thumb_width = 300;</script><script src='http://keerthiset2.110mb.com/excerpt.js' type='text/javascript'/>Now when you host your java script file into blogger it should change like this :<script type='text/javascript'>var thumbnail_mo
How To Add Slide Show to Blogger Using Mootools
2009-08-22 05:21:00
1.Login to your blogger dashboard--> layout- -> Edit HTML2.Don't Click on "Expand Widget Templates"3.Scroll down to where you see ]]></b:skin> tag:4.Copy below code and paste it just before the ]]></b:skin> tag./* slideshow */.sample{padding:20px 10px; margin:4px 0 25px 0; border:1px solid #e1e1e1}#box2{position:absolute;}#box2 span{display:block;float:left;}.buttons{text-align:center;padding:5px;}.buttons span{color:#0080FF;padding:0 5px;cursor:pointer;font:10px Verdana}.buttons span.active, .buttons span:hover{background:#0080FF;color:#fff}.mask2{position:relative;width:240px;height:180px;overflow:hidden;}5.Scroll down to where you see </head> tag:6.Copy below code and paste it just before the </head> tag.<!-- mootools --><script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'/><!-- Slideshow --><script type='text/javascript'>//<![CDATA[var noobSlide=new Class({initialize:function(a
2009-08-22 05:21:00
1.Login to your blogger dashboard--> layout- -> Edit HTML2.Don't Click on "Expand Widget Templates"3.Scroll down to where you see ]]></b:skin> tag:4.Copy below code and paste it just before the ]]></b:skin> tag./* slideshow */.sample{padding:20px 10px; margin:4px 0 25px 0; border:1px solid #e1e1e1}#box2{position:absolute;}#box2 span{display:block;float:left;}.buttons{text-align:center;padding:5px;}.buttons span{color:#0080FF;padding:0 5px;cursor:pointer;font:10px Verdana}.buttons span.active, .buttons span:hover{background:#0080FF;color:#fff}.mask2{position:relative;width:240px;height:180px;overflow:hidden;}5.Scroll down to where you see </head> tag:6.Copy below code and paste it just before the </head> tag.<!-- mootools --><script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'/><!-- Slideshow --><script type='text/javascript'>//<![CDATA[var noobSlide=new Class({initialize:function(a
How To Add Beautiful Page Peel Effect with jQuery
2009-08-21 20:52:00
1.Login to your blogger dashboard--> layout- -> Edit HTML2.Don't Click on "Expand Widget Templates"3.Scroll down to where you see ]]></b:skin> tag:4.Copy below code and paste it just before the ]]></b:skin> tag.#pageflip {position: relative;}#pageflip img {width: 50px; height: 52px;z-index: 99;position: absolute;right: 0; top: 0;-ms-interpolation-mode: bicubic;}#pageflip .msg_block {width: 50px; height: 50px;position: absolute;z-index: 50;right: 0; top: 0;background: url(http://2.bp.blogspot.com/_p4Te9Li52fs/So9Qb5J1yWI/AAAAAAAAAAU/8_mR7vt-tCw/subscribe.png) no-repeat right top;text-indent: -9999px;}Note : Please host 'subscribe.png' image yourself.5.Scroll down to where you see </head> tag:6.Copy below code and paste it just before the </head> tag.<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function(){//Page Flip on hover$("#pageflip").hover(f
2009-08-21 20:52:00
1.Login to your blogger dashboard--> layout- -> Edit HTML2.Don't Click on "Expand Widget Templates"3.Scroll down to where you see ]]></b:skin> tag:4.Copy below code and paste it just before the ]]></b:skin> tag.#pageflip {position: relative;}#pageflip img {width: 50px; height: 52px;z-index: 99;position: absolute;right: 0; top: 0;-ms-interpolation-mode: bicubic;}#pageflip .msg_block {width: 50px; height: 50px;position: absolute;z-index: 50;right: 0; top: 0;background: url(http://2.bp.blogspot.com/_p4Te9Li52fs/So9Qb5J1yWI/AAAAAAAAAAU/8_mR7vt-tCw/subscribe.png) no-repeat right top;text-indent: -9999px;}Note : Please host 'subscribe.png' image yourself.5.Scroll down to where you see </head> tag:6.Copy below code and paste it just before the </head> tag.<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function(){//Page Flip on hover$("#pageflip").hover(f