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

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/AVvXsEjQY7YMFiH9VVDq5SruS2bV21AeZlro5gfvXBQ2lExvK7Wg5EVElDX05rVDuLE89jfoOt4wLT0Oc7VdDeyh6u1JuEKd6VTq7Vq6oDWm2yO55qDIrP7024Mz5SjSaf8penTi2WzO1XtxPNw/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/AVvXsEjLny793tNNkAB35aBsCn-Y2iQasU6i_xI7I-UOT10-IRkewrxPCB2F2TTPkwgtzL0moGowc7nfBYWKaHk_ixEevu7cEjQvCi_D2ZqfiI2I45aNentPbkAauxO5nkx-Mx4h_xchhrFSERs/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

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