Replace Older, Newer And Home Naviagtion Links With Button Images

In this tutorial I'll show you that how to replace older, newer and home Navigation links with button images. These Navigation links are located at the bottom of posts section.

Just Follow these simple steps:

Note: Backup Your Template before making any changing in Template.

Step 1.  Login to your blogger account. click on drop-down menu and then click on template.

Step 2.   Now click on Edit Html and then click on Expand Template Widgets checkbox.

Step 3.   Search for ( press CTRL+F for a search bar ). Replace with below code.

Step 4.  Search for and replace it with below code.

Step 5.   Now last time search for   and replace with below code.

Click on Save Template.

You can change your own icons by replacing the image url in the above three codes.

Drop Your Comments.....

Replace Older, Newer And Home Naviagtion Links With Button Images

In this tutorial I'll show you that how to replace older, newer and home Navigation links with button images. These Navigation links are located at the bottom of posts section.

Just Follow these simple steps:

Note: Backup Your Template before making any changing in Template.

Step 1.  Login to your blogger account. click on drop-down menu and then click on template.

Step 2.   Now click on Edit Html and then click on Expand Template Widgets checkbox.

Step 3.   Search for ( press CTRL+F for a search bar ). Replace with below code.

Step 4.  Search for and replace it with below code.

Step 5.   Now last time search for   and replace with below code.

Click on Save Template.

You can change your own icons by replacing the image url in the above three codes.

Drop Your Comments.....

CSS button generator

There are many old timey Button generator out there but with new css you can make some awesome buttons. To save your time you can use generators. One of the best and easy to use button generator can create awesome css buttons like the image below.

The css will be already generated for you to copy paste. You can very use these codes in your website or blogs very easily. An example of the code is shown below

Get this

If your still confused about how to use your generated button, You can check out step by step tutorial here.


And now to give you the magic link:

http://www.cssbuttongenerator.com/

Changing Blogger Font Size ( J-Query Widget )

Changing Blogger Posts font size is a cool widget. This widget will allows your reader to change the font size of your blogger posts as they want, bigger or smaller. This widget will change blogger post font size very fast. With the help of this widget your reader do not need to refresh page or do any thing else, they just drag a point to right or left and they get bigger or smaller text. So let's see how to add this widget to your blogger.

Note: Before you apply any changing to your blogger template, Download Full Template of your blog.

Now just follow these simple steps to add Widget.

Step 1.    Log in to your blogger account, click on drop down menu and then click on template.

Step 2. Click on Edit HTML

Step 3.  Find the following code

and before / above this code add the following code.

<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/> <script type='text/javascript'> window.addEvent('domready', function(){var el = $('myElement'), font = $('fontSize');new Slider(el, el.getElement('.knob'), { steps: 35, // Tamaño máximo de la letra range: [8], // El 8 es el tamaño mínimo onChange: function(value){ font.setStyle('font-size', value); } }).set(font.getStyle('font-size').toInt());}); </script><style type='text/css'> div.slider { width: 97%; height: 26px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio6Rcxwi7_gUOFDXwauRMa9MuqVI_rhOc-72aNjxyUYdM0NXh7V1E1hJdo1QpyzWulpYFeMNyPLtxezmez5nLlWIWyU5oI9RdrkEt4XP3nyuJ2nbvt_c-4WnVJI-e7Jj4t8mNMp-m4aCQ/s1600/Slider-bg.gif) no-repeat right top; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border:1px solid #708B95; margin-top:40px; } div.slider div.knob { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfi054yrUM0sezoBTBu91wz-Ua6rfs1N9J2Yh-bVIQ2puByy51KA4DgGNAcbFeZYHpIgGX9DjN_JrfCLFGhH3Ry33Sf56HH4hEhbGFkkwZtjHAVTcXUb2C5KYzp5oF9rDvHiU1siMCO0s/s1600/iactips.blogspot.com-pin.png) no-repeat; width: 32px; height: 47px; margin:-35px 0 0 0; cursor: move; } div#fontSize { height: 40px; } </style>

Step 4.   At the same page try to find the following code or a similar one

And you'll have to add simple code before and after it, then it will look like following.

after adding these codes click on Save Template.

Step 5.   Now click on Layout tab, click on Add A Gadget and choose Html / Javascript .

And in the content area, paste the following code.

<div id="myElement" class="slider"><div class="knob">/div></div><p style="font-size:10px; float:right; margin:3px;">Widget By <a href="http://www.iactips.blogspot.com" title="Blogger Tricks" target="_blank">IAC Tips</a> | <a href="http://www.iactips.blogspot.com" title="Blogger Font Control Widget." target="_blank">Get Yours ?</a></p>

And Click On "Save".
Now your widget is ready for your blog.

Drop Your Comments........
This Script is originally made by CiudadBlogger.com

Changing Blogger Font Size ( J-Query Widget )

Changing Blogger Posts font size is a cool widget. This widget will allows your reader to change the font size of your blogger posts as they want, bigger or smaller. This widget will change blogger post font size very fast. With the help of this widget your reader do not need to refresh page or do any thing else, they just drag a point to right or left and they get bigger or smaller text. So let's see how to add this widget to your blogger.

Note: Before you apply any changing to your blogger template, Download Full Template of your blog.

Now just follow these simple steps to add Widget.

Step 1.    Log in to your blogger account, click on drop down menu and then click on template.

Step 2. Click on Edit HTML

Step 3.  Find the following code

and before / above this code add the following code.

<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/> <script type='text/javascript'> window.addEvent('domready', function(){var el = $('myElement'), font = $('fontSize');new Slider(el, el.getElement('.knob'), { steps: 35, // Tamaño máximo de la letra range: [8], // El 8 es el tamaño mínimo onChange: function(value){ font.setStyle('font-size', value); } }).set(font.getStyle('font-size').toInt());}); </script><style type='text/css'> div.slider { width: 97%; height: 26px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio6Rcxwi7_gUOFDXwauRMa9MuqVI_rhOc-72aNjxyUYdM0NXh7V1E1hJdo1QpyzWulpYFeMNyPLtxezmez5nLlWIWyU5oI9RdrkEt4XP3nyuJ2nbvt_c-4WnVJI-e7Jj4t8mNMp-m4aCQ/s1600/Slider-bg.gif) no-repeat right top; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border:1px solid #708B95; margin-top:40px; } div.slider div.knob { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfi054yrUM0sezoBTBu91wz-Ua6rfs1N9J2Yh-bVIQ2puByy51KA4DgGNAcbFeZYHpIgGX9DjN_JrfCLFGhH3Ry33Sf56HH4hEhbGFkkwZtjHAVTcXUb2C5KYzp5oF9rDvHiU1siMCO0s/s1600/iactips.blogspot.com-pin.png) no-repeat; width: 32px; height: 47px; margin:-35px 0 0 0; cursor: move; } div#fontSize { height: 40px; } </style>

Step 4.   At the same page try to find the following code or a similar one

And you'll have to add simple code before and after it, then it will look like following.

after adding these codes click on Save Template.

Step 5.   Now click on Layout tab, click on Add A Gadget and choose Html / Javascript .

And in the content area, paste the following code.

<div id="myElement" class="slider"><div class="knob">/div></div><p style="font-size:10px; float:right; margin:3px;">Widget By <a href="http://www.iactips.blogspot.com" title="Blogger Tricks" target="_blank">IAC Tips</a> | <a href="http://www.iactips.blogspot.com" title="Blogger Font Control Widget." target="_blank">Get Yours ?</a></p>

And Click On "Save".
Now your widget is ready for your blog.

Drop Your Comments........
This Script is originally made by CiudadBlogger.com

How to backup your blogger blog template

It is very important to back up your blogger template before you start messing with it. If you mess up the template and don't know where and how to fix you might have to change the whole template. By backing up your template you don't have any risk for any unexpected problem, if you do then you can just re-upload your old template and your blog is back to normal. Its very easy to back up your template in blogger blog. Just follow the instructions below.

How to back up your template on the new blogger interface

1. Go to blogger.com
2. Choose your blog and click on the down arrow
3. Click on the template
4. Click on the Backup/Restore from top right
5. Now click download full template and save it.

How to back up your template on old blogger interface

1. Go to blogger.com
2. Click design for the blog you want to back up
3. Click Edit HTML
4. Click on download full template and save it.

Add Drop-Down Menu For Blogger

This Menu is compatible with most of modern and classic browsers, and can be added for any template in only 3 steps,

Note: Don't forget to Backup your current blogger template ( If you don't know how to download blogger template Click Here to see article ).

Follow These simple Steps:

Step 1.   Log in to your blogger account, click on Drop-Down menu and then click on Template.

Step 2.   Click on Edit HTML and Find the following code ( Press CTRL+F for a search bar ).

]]>

And before / above this code add the following CSS code,

<pre>#jsddm {margin: 0;padding: 15px;z-index:1000000000;position:relative;}#jsddm li {float: left;list-style: none;font: 12px Tahoma, Arial;}#jsddm li a {display: block;white-space: nowrap;margin:1px 3px;border: 1px solid #AAAAAA;background: #cccccc;background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));background: -moz-linear-gradient(top, #ebebeb, #cccccc);padding: 5px 10px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;text-shadow: #ffffff 0 1px 0;color: #363636;font-size: 15px;font-family: Helvetica, Arial, Sans-Serif;text-decoration: none;vertical-align: middle;}#jsddm li a:hover {background: #C8C8C8;}#jsddm li ul {margin: 0;padding: 0;position: absolute;visibility: hidden;border-top: 1px solid white;}#jsddm li ul li {float: none;display: inline;}#jsddm li ul li a {width: auto;background: #CAE8FA;}#jsddm li ul li a:hover {background: #A3CEE5;}</pre>

Step 3.   Now Find the following code (  Press CTRL+F for a search bar ).

Before / above this code add following code

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[var timeout = 500; var closetimer = 0; var ddmenuitem = 0;function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible');}function jsddm_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}function jsddm_timer() { closetimer = window.setTimeout(jsddm_close, timeout);}function jsddm_canceltimer() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;}}$(document).ready(function() { $('#jsddm > li').bind('mouseover', jsddm_open) $('#jsddm > li').bind('mouseout', jsddm_timer)});document.onclick = jsddm_close; //]]> </script>

Step 4.   Now Click on "Save Template".

Step 5.   Now go to your blogger Dashboard click on layout tab, click on Add A Gadget.

Any where on the screen, and choose "HTML / JavaScript".

Leave the title empty and at the content area, Paste the following code.

<ul id="jsddm"> <li><a href="#">Home</a> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Drop 1-1</a></li> <li><a href="#">Drop 1-2</a></li> <li><a href="#">Drop 1-3</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Drop 2-1</a></li> <li><a href="#">Drop 2-2</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Drop 3-1</a></li> <li><a href="#">Drop 3-2</a></li> <li><a href="#">Drop 3-3</a></li> <li><a href="#">Drop 3-4</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="http://iactips.blogspot.com">IACTips</a></li> </li></ul>

Step 6.   And click on "Save".

Now , it's a important to move the new gadget from the current place to the top of your page, if it was on the sidebar, or any other place , just drag it to header and click on "Save"  again.

In last code you must change the menu titles and replace all # letters by right menu url.

Drop  Your Comments......

Add Drop-Down Menu For Blogger

This Menu is compatible with most of modern and classic browsers, and can be added for any template in only 3 steps,

Note: Don't forget to Backup your current blogger template ( If you don't know how to download blogger template Click Here to see article ).

Follow These simple Steps:

Step 1.   Log in to your blogger account, click on Drop-Down menu and then click on Template.

Step 2.   Click on Edit HTML and Find the following code ( Press CTRL+F for a search bar ).

]]>

And before / above this code add the following CSS code,

<pre>#jsddm {margin: 0;padding: 15px;z-index:1000000000;position:relative;}#jsddm li {float: left;list-style: none;font: 12px Tahoma, Arial;}#jsddm li a {display: block;white-space: nowrap;margin:1px 3px;border: 1px solid #AAAAAA;background: #cccccc;background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));background: -moz-linear-gradient(top, #ebebeb, #cccccc);padding: 5px 10px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;text-shadow: #ffffff 0 1px 0;color: #363636;font-size: 15px;font-family: Helvetica, Arial, Sans-Serif;text-decoration: none;vertical-align: middle;}#jsddm li a:hover {background: #C8C8C8;}#jsddm li ul {margin: 0;padding: 0;position: absolute;visibility: hidden;border-top: 1px solid white;}#jsddm li ul li {float: none;display: inline;}#jsddm li ul li a {width: auto;background: #CAE8FA;}#jsddm li ul li a:hover {background: #A3CEE5;}</pre>

Step 3.   Now Find the following code (  Press CTRL+F for a search bar ).

Before / above this code add following code

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[var timeout = 500; var closetimer = 0; var ddmenuitem = 0;function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible');}function jsddm_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}function jsddm_timer() { closetimer = window.setTimeout(jsddm_close, timeout);}function jsddm_canceltimer() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;}}$(document).ready(function() { $('#jsddm > li').bind('mouseover', jsddm_open) $('#jsddm > li').bind('mouseout', jsddm_timer)});document.onclick = jsddm_close; //]]> </script>

Step 4.   Now Click on "Save Template".

Step 5.   Now go to your blogger Dashboard click on layout tab, click on Add A Gadget.

Any where on the screen, and choose "HTML / JavaScript".

Leave the title empty and at the content area, Paste the following code.

<ul id="jsddm"> <li><a href="#">Home</a> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Drop 1-1</a></li> <li><a href="#">Drop 1-2</a></li> <li><a href="#">Drop 1-3</a></li> </ul> </li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">Drop 2-1</a></li> <li><a href="#">Drop 2-2</a></li> </ul> </li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Drop 3-1</a></li> <li><a href="#">Drop 3-2</a></li> <li><a href="#">Drop 3-3</a></li> <li><a href="#">Drop 3-4</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="http://iactips.blogspot.com">IACTips</a></li> </li></ul>

Step 6.   And click on "Save".

Now , it's a important to move the new gadget from the current place to the top of your page, if it was on the sidebar, or any other place , just drag it to header and click on "Save"  again.

In last code you must change the menu titles and replace all # letters by right menu url.

Drop  Your Comments......

How To Backup Your Blogger Posts And Comments

Backup your blogger posts and comments regularly. This is blogger tip I think every blogger should follow for its safety. Backup your posts regularly. Very less amount of bloggers would have been using this tip. So lets follow this tip and start backing up your blog posts from now.
How to backup bloggers posts for all bloggers including blogspot users.

Just Follow These Steps:


Step 1.   Login to your blogger account, click on drop-down menu and then click on Setting.

Step 2.   On the left side under the setting tab click on Other.

Step 3.   At the top of page you will see an option of Export Blog. Click on Export blog.

Step 4.   Then click on Download blog.

And That's It.


Your Blog ( Content + Posts ) is save as .xml document. It's quite small file. You will not be able to see it, or read it on externally, but you can always upload it through Blogger.

Now you go to your any other blog and get there the import blog option following same path as above and upload the file you downloaded when it asks after clicking on import blog. Your all posts and comments will be uploaded, then the blogger will ask you to publish all posts, select the posts you want to publish and click publish, all selected posts will be published.
If you want to download your blogger template design also It's Here

Drop Your Comments......

How To Backup Your Blogger Posts And Comments

Backup your blogger posts and comments regularly. This is blogger tip I think every blogger should follow for its safety. Backup your posts regularly. Very less amount of bloggers would have been using this tip. So lets follow this tip and start backing up your blog posts from now.
How to backup bloggers posts for all bloggers including blogspot users.

Just Follow These Steps:


Step 1.   Login to your blogger account, click on drop-down menu and then click on Setting.

Step 2.   On the left side under the setting tab click on Other.

Step 3.   At the top of page you will see an option of Export Blog. Click on Export blog.

Step 4.   Then click on Download blog.

And That's It.


Your Blog ( Content + Posts ) is save as .xml document. It's quite small file. You will not be able to see it, or read it on externally, but you can always upload it through Blogger.

Now you go to your any other blog and get there the import blog option following same path as above and upload the file you downloaded when it asks after clicking on import blog. Your all posts and comments will be uploaded, then the blogger will ask you to publish all posts, select the posts you want to publish and click publish, all selected posts will be published.
If you want to download your blogger template design also It's Here

Drop Your Comments......