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

How To Backup Or Download Full Blogger Template

How to back up your blog template or download it to your computer so you have an copy of your template design always if you needed that design in future or many of us loose the design setting while we are trying to edit our template.
Its very important to save a copy of your template before you do any customization on it ( Any change in template ).

It's very easy to do. It's such a small file, so you can keep it forever.

Follow these simple steps to download / Backup your Blogger Template:

Step 1.   First of all login to your blogger account, click on Drop-Down menu and then click on Template.

Step 2.   Click on Backup / Restore.

Step 3.   Now click on Download Full Template. 

And all you done.

Note:    Keep in mind, downloading template doesn't mean you've saved the content ( posts, comments, widgets ) of your blog,
If you want to backup blogger posts and comments read this post How To Backup Blogger Posts And Comments.


Drop Your Comments...

How to Disable Blogger Official Lightbox

Follow these simple steps to disable LightBox

Step 1.  Login to your blogger account. Click on your blog.

Step 2.   On left side click on Settings and under Settings tab click on Posts and Comments. Then Scroll to the option Showcase images with Lightbox?  and set to NO.

Step 3.  Save the settings and all you done.

Drop your comments.

Add Animated Flying Twitter Bird Widget For Blogger

Step 1.  First of all login to your blogger account. click on drop down menu and click on Template

Step 2.   Now search for ( Press "CTRL+F" for search bar ).

Step 3.   Now Paste this code before / above tag.

Blogger Widgets

Step 4.  click on "Save Template" and all you done.

Note:-   Change " how2solution " with your twitter username.

Add Smooth Scroll To Top Button To Blogger

Follow Simple steps to add a Button for smooth scrolling to top.

Step 1.   login to your blogger account, click on drop down menu, click on template and then click on Edit HTML.

 

Step 2.   Search for   tag ( Press CTRL+F for a search bar to help find the tag ).

Step 3.   Add below code Before / above tag. ( Ignore this step if your blog have already a jquery Plugin )

Step 6.   Click on Save Template and all you done.

Leave your Comment about this Widget.

Animated Sexy Social Bookmarks V3 for Blogger

The arrow messages abailable are Sharing Is Sexy, Sharing Is Caring, Sharing Is Caring with Hearts, Share The Love Share The Wealth, Share And Enjoy, Share The Knowledge and even an arrow message in German !

The Bookmarking Icons In the Gadget are for Twitter, Facebook, Linkedin , Stumble Upon, Delisious, Digg, Google Buzz, Blogger, Yahoo Mail, Gmail, Google Bookmarks, Google Reader, Rss, Orkut, Design Bump, Reddit, Design Float, Friend Feed, Dzone, Web Blend, Propeller, Tumblr, Squidoo, Posterous, Technorati, Bebo, Hotmail, Blinklist, Blog Engage, Blog Marks, Box.Net, Current, Diigo, Ekudos, Evernote, Hacker News, Hives, Identica, Jumptags, Email, Memeame, Mister wong, My Link Vault, Myspace, Netvibes, Netvouz, Newsvine, Ning, Ping FM, Plaxo, Plurk, Print Friendly, Slashdot, Sphinn, Techmeme and Tipd.

OK lets add it to your blog

Follow These Simple Steps:

Step 1.   Login to your Blogger account, click on dropdown menu and click on template.

 Step 2.    Click on "Edit HTML" and then Tick the Expand Widget Templates Box.

 

Step 3.   Find the following piece of code in your blogs code: ( Press "CTRL+F" for search bar to help find the code )

Step 4.   Copy and Paste the following code directly Above / Before
-If you previously added jQuery to your blog you can remove the line in yellow.

Step 5.   Find the following piece of code in your blogs code : ( Press "CTRL+F" for a search bar to help find the code )

-If you can't find this use  
instead.


Step 6.   Copy and Paste the following code Below / Under

How To Hide Blogger Nav Bar And Have It Reappear When You Hover Over It

Follow these steps:

First of all log into your blogger account.


Now click on drop down menu and then click on "Template".

Click on "Edit HTML"

Now find the following code by pressing "CTRL+F"

]]>

And Before this code, add the next code, given below

#navbar-iframe {
  height:5px;
  }

/* IE7, IE8, IE6 */
  #navbar-iframe { height/*\**/: 30px\9; }


#navbar-iframe:hover {
  height:40px; !important; 
  }

Now Click on "Save Template"
And you are done.


If  you have any confusion, Comment Here.