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

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

Change Older and Newer posts with Post Titles for Blogger

Change posts Navigation Links Newer posts and older posts by the Corresponding Post Titles.This Awesome Blogger Hack lets your blog visitors to Know Newer and Older posts and they can go to that Posts.I got this hack from Spiceupyourblog.com .This trick done using some jquery script.

Add Jquery script

• Copy and paste the below code before

<br /><!--Start post title http://netoopsblog.blogspot.com --><br /><a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikZ_t5NVft4aFH5Q3wYHoqmiX9YPnKOYWxcIaMl_6Ym4URZG2wD3YJgIjeojDTnwW9KswlR3GBRb6BrtTTd50TxVQIA5M2P7fbJnK3ZCY3rUBnHnDzbMZYuCMWkURHfPfAlwW_cxdq17g/s1600/1x1juice.png'/></a><br /><b:if cond='data:blog.pageType == "item"'><br /><script type='text/javascript'>/*<![CDATA[*/var urlToNavTitle={};function getTitlesForNav(d){for(var c=0;c<d.feed.entry.length;c++){var e=d.feed.entry[c];var b="";for(var a=0;a<e.link.length;a++){if(e.link[a].rel=="alternate"){b=e.link[a].href;break}}if(b!=""){urlToNavTitle[b]=e.title.$t}}}document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"><\/script>');function urlToPseudoTitle(a){var b=a.match(/\/([^\/_]+)(_.*)?\//);if(b){b=b[1].replace(/-/g," ");b=b[0].toUpperCase()+b.slice(1);if(b.length>28){b=b.replace(/ [^ ]+$/,"...")}}return b}$(window).load(function(){window.setTimeout(function(){var a=$("a.blog-pager-newer-link").attr("href");if(a){var b=urlToNavTitle[a];if(!b){b=urlToPseudoTitle(a)}if(b){$("a.blog-pager-newer-link")/("<< Newer Post<br />"+b)}}a=$("a.blog-pager-older-link").attr("href");if(a){var b=urlToNavTitle[a];if(!b){b=urlToPseudoTitle(a)}if(b){$("a.blog-pager-older-link")/("Older Post >><br />"+b)}}},500)});/*]]>*/</script><br /></b:if><br /><a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikZ_t5NVft4aFH5Q3wYHoqmiX9YPnKOYWxcIaMl_6Ym4URZG2wD3YJgIjeojDTnwW9KswlR3GBRb6BrtTTd50TxVQIA5M2P7fbJnK3ZCY3rUBnHnDzbMZYuCMWkURHfPfAlwW_cxdq17g/s1600/1x1juice.png'/></a><!--End post title http://netoopsblog.blogspot.com -->

Add CSS code

• Add the following css code before ]]> (Add CSS code another way)

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
#blog-pager{height:100% !important;}

Remove Threaded Comments in Blogger Easily

This is a simple article explaining How to remove Blogger 's New Threaded commenting system easily.There are some problems with it,Many users report that when a user click on post link,it takes control to the bottom of the page(to the comment section).Would you think that Threaded commenting system is not Good for Blog? Then you can remove it.
I am not going to say too much about Threaded commenting System,because i hope you know about it.
Follow the instructions below carefully.

Before Editing Template,you must Backup your template(How to Backup Template?)

• Go to Design-> Edit HTML
• Tick on Check box  Expanded Widget Templates
• Find the code data:post.showThreadedComments easily using ctrl+F
• You will found code snippet like this

           
         
           
         
       
       
         
           
         
           
         
       

• Replace it carefully with the following code [Note: You will find the above code twice,replace it twice]

         
              
                    
      
       

• Save it ,

No longer Threaded commenting appear on your blog.Normal commenting will back.
Cheers..!

Add Page Peel effect with jQuery & CSS to Blogger

You may saw this awesome trick used by many professional and other Websites/Blogs.This Page peel is used to Show ads ,this page peel attract Blog visitors and they may have the tendency to click on ad and your earnings increases.Also this page peel can be used to increase your Subscribers.Here I am going to show you how to add a page peel trick to Blogger blog.







Click the link below to view demo

View Demo

Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)

• Copy the below code inside

Step 3:

• Copy the below code inside   or   
  

Change can the RED highlighted text with url image url that you want,else leave it default(needn't change)
Change the BLUE highlighted text with your feed URL or place your advertisement

•  Save the Template

You are done..! If any problem persists please do comment.

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