How to Hide Blogger Nav Bar and Have It Appear When You Hover Over It

A navigation bar isn't defined in any one way; on many websites, such as Google and Facebook, feature a navigation bar along the top of the page. However, you can also feature a invisible navigation bar and have it reappear when you mouse over the top of your blog.

Thanks to AllBlogTools.com for sharing this trick.

1. Login to your Blogger account.


2. Go to "Blogger Dashboard" > "Template" > "Edit HTML".


3. Back up your template.


4. Check the  "Expand Widget Templates".


5. In the code window, search for (Ctrl + F):



]]></b:skin>



6. Add below code just before ]]></b:skin> tag



#navbar-iframe {
  height:5px;
  }

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

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



7. Save your template and you are done.

If you already applied "How To Remove A Blogger Navbar" to your blog, please undo it before you start.

This hack is compatible with all browsers but some times it’s not working correctly with some IE versions.

Read More...

How to Add Post Dividers to Blogger

Without a divider between your Blogger posts, you may find that your words are becoming a bit jumbled together. Adding a simple divider image to your Blogger template can give your blog a much more polished look. Once you have chosen or designed a divider, you will need to edit the code within your template. Though this edit can be accomplished with a bit of copy-and-paste, this tutorial is recommended for those with basic knowledge of HTML.

1. Upload your divider image to your preferred image hosting location. If you do not have your own Web host, there are a number of free online image hosting services.


2. Open the "Template" menu within your Blogger dashboard. Select "Edit HTML."


3. Click the "Download Full Template" link at the top of the Edit HTML page. This will backup your current template as-is. This way, if you make a mistake in editing the code or decide that you'd rather go back to the original settings, you can upload your backup later.


4. Locate the "Posts" section within your template's code. Find the following section of code:



.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}



5. Replace the code from step four with the following code. The "URL" value will need to be changed to the full Web address for your divider image. The margin and padding values can be customized as well.



.post {
background: URL(REPLACE THIS TEXT);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:5.5em;
}

The margins and padding values may vary slightly depending on the template you are using.

Read More...

Add Sharing is Sexy Bookmark to Blogger

Social bookmarking is a great tool to drive tons of traffic to a blog/website within minutes. “Sharing is sexy” blog gadget/widget is one of the most popular social bookmarking widget in blogsphere. The button of this widget has autohide effect when you hover on it.

1. Log in to your "Blogger Dashboard "> "Template" > "Edit HTML".


2. Click on "Expand Widget Templates" check box.


3. Find (Ctrl + F) below code in your template:



]]></b:skin>



4. Copy and paste the code below before it.



.sexy-bookmarks {
 height: 54px;
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvtsUtCnP6Z2W5NT0zN4tbq0qAp1Zhh1VH1Fvzj_dbkZAtksgZmHb2fBAl1OzrfDy7xM1wLH_9-cB9VICtPYXYPLr9zex10nBprt1vruwEY62EgoCkkXw0Ohzct0Dk7GzDLs9mUVo-z37G/s1600/11sharingsexy.png') no-repeat left bottom;
 position: relative;
 width: 540px; }
.sexy-bookmarks span.sexy-rightside {
 width: 17px;
 height: 54px;
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvtsUtCnP6Z2W5NT0zN4tbq0qAp1Zhh1VH1Fvzj_dbkZAtksgZmHb2fBAl1OzrfDy7xM1wLH_9-cB9VICtPYXYPLr9zex10nBprt1vruwEY62EgoCkkXw0Ohzct0Dk7GzDLs9mUVo-z37G/s1600/11sharingsexy.png') no-repeat right bottom;
 position: absolute;
 right: -17px; }
.sexy-bookmarks ul.socials {
 margin: 0 !important;
 padding: 0 !important;
 position: absolute;
 bottom: 0;
 left: 10px; }
.sexy-bookmarks ul.socials li {
 display: inline-block !important;
 float: left !important;
 list-style-type: none !important;
 margin: 0 !important;
 height: 29px !important;
 width: 48px !important;
 cursor: pointer !important;
 padding: 0 !important; }
.sexy-bookmarks ul.socials a {
 display: block !important;
 width: 48px !important;
 height: 29px !important;
 font-size: 0 !important;
 color: transparent !important; }
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVPLyDpX0wT1ZCD-lKLMaG6x4UHVdfZAQyHYOB6OpvnvpH5coeOovIhg_wm1DtlFsjZnrmoiOBt70gmkLpByhK4uBd7ghPPAODv3X5OcOGEftEC_Y-VIZJRPzfmpKUpqe9z14uNVe83XGl/s1600/11Sexysprite.png') no-repeat !important; }
.sexy-furl {
 background-position: -300px top !important; }
.sexy-furl:hover {
 background-position: -300px bottom !important; }
.sexy-digg {
 background-position: -500px top !important; }
.sexy-digg:hover {
 background-position: -500px bottom !important; }
.sexy-reddit {
 background-position: -100px top !important; }
.sexy-reddit:hover {
 background-position: -100px bottom !important; }
.sexy-stumble {
 background-position: -50px top !important; }
.sexy-stumble:hover {
 background-position: -50px bottom !important; }
.sexy-delicious {
 background-position: left top !important; }
.sexy-delicious:hover {
 background-position: left bottom !important; }
.sexy-yahoo {
 background-position: -650px top !important; }
.sexy-yahoo:hover {
 background-position: -650px bottom !important; }
.sexy-blinklist {
 background-position: -600px top !important; }
.sexy-blinklist:hover {
 background-position: -600px bottom !important; }
.sexy-technorati {
 background-position: -700px top !important; }
.sexy-technorati:hover {
 background-position: -700px bottom !important; }
.sexy-myspace {
 background-position: -200px top !important; }
.sexy-myspace:hover {
 background-position: -200px bottom !important; }
.sexy-twitter {
 background-position: -350px top !important; }
.sexy-twitter:hover {
 background-position: -350px bottom !important; }
.sexy-facebook {
 background-position: -450px top !important; }
.sexy-facebook:hover {
 background-position: -450px bottom !important; }
.sexy-mixx {
 background-position: -250px top !important; }
.sexy-mixx:hover {
 background-position: -250px bottom !important; }
.sexy-script-style {
 background-position: -400px top !important; }
.sexy-script-style:hover {
 background-position: -400px bottom !important; }
.sexy-designfloat {
 background-position: -550px top !important; }
.sexy-designfloat:hover {
 background-position: -550px bottom !important; }
.sexy-syndicate {
 background-position: -150px top !important; }
.sexy-syndicate:hover {
 background-position: -150px bottom !important; }
.sexy-email {
 background-position: -753px top !important; }
.sexy-email:hover {
 background-position: -753px bottom !important; }



5. Now find (Ctrl + F) this code in the template:



<data:post.body/>



6. Copy the following code and paste it just below it:



<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='YOUR FEED BURNER URL' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
</ul>
<span class='sexy-rightside'/>
</div>



7. Save your template.

Remember to replace "YOUR FEEDBURNER URL" with your real feedburner url.

Read More...

How to Show or Hide a Blogger Blog on Your Profile

It's common for people who use Blogger to have more than one blog at Blogger. It's also common for one person to manage or monitor several blogs. A great way to get traffic from one blog to other blogs within Blogger is to list on a profile one or more other blogs. The administrator can determine which blogs will show on a profile. To show or hide a Blogger blog on your profile, follow the steps.

1. First you need to log in to Blogger.


2. On the "Blogger Dashboard" click on the "Edit Profile" link.


3. On the new page, scroll down to "Show My Blogs."


4. Here you will see a list of all of your blogs.


5. If you want a blog to show on your profile click in the box next to the title of the blog.


6. Once you do, there should be a check mark in the box.


7. If you want to hide a blog from your profile, leave the box next to that blog empty.


8. When you've selected the blogs you want to show, click "Save Settings".

You can change what Blogger blogs show on your profile any time you want.

Adding Blogger blogs to your profile is the same as recommending them. You can also add other people's blogs to your list. You and your friends could exchange links: you add a link to their blog and they add a link to your blog on their profile.

If you don't click on "Save Settings," your profile will remain the same as it was before.

Read More...

How to Replace Blogger Favicon With Custom Favicon

A favicon image is the tiny icon you see on a browser tab when you open a Web page. Blogger uses a default favicon of the orange square with the white Blogger "B" inside of it. Choosing a custom Blogger favicon requires a small square of 16-by-16 pixels as either a PNG, JPG or GIF file. Everyone that opens your Blogger blog sees your favicon icon on the browser tab. Choosing an image that identifies your blog keeps it from getting lost if a person has more than one tab open.

1. Open Blogger in a browser window. Click "Layout" to make changes to your blog layout.


2. Click on the "Favicon" link that says "Edit." It has a Blogger symbol next to it on the layout page.


3. Press "Choose File" to select the icon image you want to display as your Blogger favicon.


4. Click "Save" to confirm your favicon image change.


5. Select "Save" on the main layout page to complete your Blogger changes.

Blogger allows favicon files up to 100KB in size, and it must be square.

If you don't like the image, click the "Remove" link choose a new one.

Read More...

How to Make a Top Ten Commenter List on Blogger

Blogger, a content publishing platform owned by Google, enables you to show the top commenters and their comments on your blog's sidebar using a widget. By showing the top comments to your readers, you give them more of an incentive to comment on your posts, as they receive some recognition if their comments are featured on your site.

1. Sign in to Blogger.com with your Google account.


2. Click the "Layout" link next to the blog you want to add the widget to.


3. Click "Add a Gadget."


4. Type "Top Comments" into the search box, and then click the magnifying glass.


5. Click the "+" icon next to the "Top Comments" widget.


6. Type "10" in the "Display Number of Comments" field, and then click "Save." Your top ten commenter list appears when you view your Blogger blog.

Read More...

How to Download All Blog Posts From Blogger

Whether you blog for business or pleasure, you will need to back up your posts occasionally. Backing up your posts ensures that your hard work will never go to waste due to technical errors. Blogspot features an easy blog export tool that allows you to download all of your blog posts in a matter of seconds. This feature is free and easy to use, so you can download your posts on a regular basis to ensure you never lose your hard work.

1. Open your blog dashboard and locate the blog you wish to back up.


2. Select the “Settings” option from the dashboard menu to open the “Others” settings menu.


3. Click “Export blog” link, which is located at the top of the pages beside the “Blog Tools” sub-header.


4. Click the “Download Blog” button. Choose to save the file and select a destination path from the directory that pops up. Click “OK” to begin the download process. Once the download is complete, you will have an XML file in your save destination that contains each post from your blog. The file retains any HTML markings that were on the posts, so you can easily copy and paste your posts into a new blog if you ever lose your original entries.

Read More...

How to Make Rainbow Color Link Text on Mouse Over

When you design a website, the links on your site will not have any special effects unless you manually add the effects you want to see. You can use special HTML code to add visual interest to your links. Instead of your hyperlinks remaining the same color, you can create a hover (mouse over) effect. With a hover effect, the link will change color whenever your website visitors rolls their mouse over the link.

1. Login to your Blogger account.


2. Go to "Blogger Dashboard" > "Template" > "Edit HTML".


3. Check the  "Expand Widget Templates".


4. In the code window, search for (Ctrl + F) </head> tag.


5. Add below code just before </head> tag.



<script type='text/javascript' src='https://bloggerxtutorials.googlecode.com/files/rainbow.js'></script>



6. Save it.

If you'd like to add effect to other texts(not link texts), then add 'onmouseover="doRainbow(this);"' and 'onmouseout="stopRainbow();"' to the target tags.

Read More...

How to Make a Number Page Navigation Bar for Bloggers

If you run a blog on the Blogger platform, then by default, you do not have a numbered page navigation bar along the bottom of your blog. While some themes include this, if you do not have a numbered page navigation bar and want to use one on your blog, you can insert the code manually. Unfortunately, the code will only work with certain themes, so it is not a guaranteed method. If you have already customized your template, ensure you back it up before proceeding.

Big thanks for Abu Farhan and Mohamed Rias for the script.

1. Log into "Blogger Dashboard," then "Template" and then "Edit HTML." (No need to expand widgets template)


2. Locate the following code: ]]></b:skin>


3. Add the following code before it:



.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}



4. Find this code:



<b:section class='main' id='main' showaddelement='yes' >
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>



5. Add the following code after that code:



<script type='text/javascript'>

var home_page_url = location.href; 


var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';


function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;



htmlMap[htmlMap.length]=&#39;/&#39;;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {

  
 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
 timestamp = encodeURIComponent(timestamp1);
 var title = post.title.$t;
   if(thisUrl.indexOf(timestamp)!=-1 ){
     thisNum = postNum;
   }
 
   postNum++;
   htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;&amp;max-results=&#39;+pageCount;
 
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
 var banyaknomer = htmlMap.length -1 ;
 postNum=postNum-1;
};

 
for(var p =0;p&lt; banyaknomer;p++){
 if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
  if(fFlag ==0 &amp;&amp; p == thisNum-2){
   if(thisNum==2){
    upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
   }else{
    upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
   }
 
   fFlag++;
  }
 
  if(p==(thisNum-1)){
   html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
  }else{
   if(p==0){
     html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;

   }else{
    html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
   }
  }
 
  if(eFlag ==0 &amp;&amp; p == thisNum){
   downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
   eFlag++;
  }
 }
}
 
if(thisNum&gt;1){
 html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
 
html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;
 
if(thisNum&lt;(postNum-1)){
 html += downPageHtml; 
}
 
if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;
 

var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
 html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
 pageArea[p].innerHTML = html;
}


if(pageArea&amp;&amp;pageArea.length&gt;0){
 html =&#39;&#39;;
}

if(blogPager){
 blogPager.innerHTML = html;
}


}


function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;



var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;
var thisUrl = home_page_url; 

htmlMap[htmlMap.length]=labelHtml;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
 timestamp = encodeURIComponent(timestamp1);

 
 var title = post.title.$t;

   if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
   }
 
   if(title!=&#39;&#39;) postNum++;
   htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;&amp;max-results=&#39;+pageCount;
    
 itemCount++;
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
 var banyaknomer = htmlMap.length -1 ;
 postNum=postNum-1;
};
 
for(var p =0;p&lt; banyaknomer;p++){
 if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
  if(fFlag ==0 &amp;&amp; p == thisNum-2){
   if(thisNum==2){
    upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
   }else{
    upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
   }
 
   fFlag++;
  }
 
  if(p==(thisNum-1)){
   html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
  }else{
   if(p==0){
    html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
   }else{
    html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
   }
  }
 
  if(eFlag ==0 &amp;&amp; p == thisNum){
   downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
   eFlag++;
  }
 }
}
 
if(thisNum&gt;1){
 if(!isLablePage){
  html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
 }else{
  html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
 }
}
 
html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;
 
if(thisNum&lt;(postNum-1)){
 html += downPageHtml; 
}
 
if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;
 
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
 html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
 pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
 html =&#39;&#39;;
}

if(blogPager){
 blogPager.innerHTML = html;
}


}


</script>

<script type='text/javascript'>

  var thisUrl = home_page_url;
 if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
  if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
   var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
  }else{
   var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
  }
 }

 var home_page = &quot;/&quot;;
 if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){ 
  if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){   
   document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
  }else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
  }
 }
</script>



6. Click "Save Template."

Read More...

How to Make a Simple Post Divider for Blogger

Blogger is a free blog-hosting service operated by Google. You can customize Blogger templates by adding options such as post dividers. A post divider is a graphic that shows up between each post. Adding a post divider can help your blog look more organized and add another dimension of visual appeal.

1. Log in to your Blogger account.


2. Click the "Template" link on the Blogger dashboard, then click "Edit HTML."


3. Click the "Expand Widget Templates" link below the Edit Template box.


4. Insert a new blank line below this line of code:



<div class='post-footer-line post-footer-line-3'/>



5. Paste this code into the new line:



<center><img height='20' src='Border URL'/></center>



6. Replace the words "Border URL" with the URL of your post divider image.


7. Click "Save Template" to finalize the changes.

Read More...

How to Post Multiple Pictures in Blogger

If you have a lot of photos to add to your Blogger entries (posts), you have the option to use the Blogger tool that lets you select and insert more than one picture at a time. This built-in feature works with the accessible, digital images on your computer, Picasa Web album, URL address or with the images already stored on your blog account. Understand how to access this tool and post the multiple pictures you desire to your Blogger page.

1. Log in to your Blogger account and click the "New Post" button next to the blog you want to post multiple pictures to.


2. Click the "Compose" tab on the top, right corner of the text box that appears and then click the "Add Image" button that displays.


3. Click the "Choose Files" button and then click the "Upload," "From this blog," "From Picasa Web Albums" or "From a URL" link on the left to select multiple images from your computer to post. Follow the prompts to choose files from your computer or enter the data needed to access your photos. Press and hold the "CTRL" button on your keyboard and then click the images you want to select them. Click the "Add selected" button when ready.


4. Click on the image when it appears in your post and then click the menu items that automatically display to determine the size and alignment of your graphic. Repeat this process for your other pictures.


5. Enter the desired information for your post and then click the "Publish Post" button.

Read More...

How to Make Your Navbar Scroll Down on a Blogger

By default, the navigation bar on your Blogger website disappears when you scroll down on the page. This navigation menu includes important features such as a search field and a share button. You can keep this bar visible at all times using Cascading Style Sheets, or CSS. Use the tools in your Blogger account to add the CSS that will keep your navigation bar in a fixed position.

1. Log in to your Blogger account.


2. Click the "Template" link on the page that opens, then click the "Edit HTML" link in the menu that appears beneath the main tabs. This displays the text box that contains your blog's code.


3. Find the "#navbar" or "#navbar-iframe" style rule in the CSS code at the top. Position your cursor between the curly brackets.


4. Type "position: fixed;" to specify you want the navigation bar to scroll down with the rest of the page. To illustrate:



#navbar-iframe { position: fixed; }



5. Click the "Preview" button to test out your page. When ready, click the "Save Template" button to publish your work.

To quickly find the code you want, simultaneously press the "Ctrl" and "F" keys and enter the content in the text field that displays. Press the "Enter" key to highlight the text.

Read More...

How to Add a Picture on Blogger

Web surfers accustomed to seeing images everywhere on the Internet may consider your blog to be rather dull if it contains no pictures. Text-only pages were fine when the Internet was young, but many bloggers today include music, videos and photos on blog posts. As a Google Blogspot blogger, you have to ability to add flavor to your blog posts using pictures. Blogspot provides two ways to do this.

1. Click the "New Post" button that appears in the Manage Blogs section. A Create Post page opens.


2. Type a title in the "Title" text box, and then type a few words in the text editor that appears below the Title text box.


3. Click the "Insert Image" icon that appears at the top of the text editor. A window opens that allows you to add a picture from your computer or add a link to an image on the Web.


4. Click the "Browse" button to display a window containing your hard drive's files. Scroll through the files and find an image file you would like to add to your blog post. Double-click that file to select it.


5. Click one of the layout choices in the "Choose a Layout" section. The choices are "Left," "Center" and "Right." Choosing one of these options positions your picture in the location you specified. Select "Left," for example, and the picture will appear on the left side of your blog post.


6. Click "Small," "Medium" or "Large" to select one of the size options in the Image Size section. The default image size is medium.


7. Click the "Terms of Service" check box to place a check mark there and then click "Upload Image." The site shows you a preview of the image. Click "Done" to add it to your post.


8. Click "Publish Post," and then click "View Post" to see your post containing your new picture.

You can also type or paste the URL of an image located on the Web into the URL text box that appears in the Upload Images window. The site will add it to your blog post.

Add as many pictures as you like to a Blogspot post. Images that you add appear in your post at the location where your cursor lies when you click the "Insert Image" icon.

Read More...

How to Disable the Mouse Right Click on Blogger

If you're posting a piece of writing or a particular photograph onto your Blogspot blog, and you don't want people to copy it, you can use a Javascript code to prevent users from right-clicking. However, you should know that this will only prevent users who have Javascript turned on from right-clicking -- more advanced users will simply be able to bypass this protection. Unfortunately, besides the Javascript code, there isn't anyway to prevent someone from right-clicking.

1. Go to Blogger.com and log in to your blog.


2. Go to your "Blogger Dashboard," then click "Layout".


3. Click "Add Gadget."


4. Click "HTML/Javascript."


5. Copy and paste the following code:



<script language=JavaScript>
<!--

//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="Function Disabled!";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>



6. Click "Save." When you try and right click anywhere on your blog you will see a message that reads "Function Disabled."

You can change the words "Function Disabled" to anything you want by changing the words in the code.

Read More...

How to Follow a Blog on Blogger

Blogger offers a free blog publishing website where you can share your thoughts, memos, pictures, and links - basically a blog. The website has an option where you can follow your favorite blogs. Whenever the person makes a new post, it shows up on your dashboard when you are logged in. Read on to find out how!

WHAT KIND OF BLOGS CAN I FOLLOW?
You can follow any blog that has "feed". For example, you can follow Blogger blogs and Wordpress blogs. It's an excellent way to keep in touch with someone as well as find out when they make new blog posts! There are two ways you can follow someone"s blog.

FOLLOW VIA WIDGET
Sometimes, you will see a widget on someone's blog. Click on FOLLOW, make sure you are signed into your Blogger account. You can choose to publicly follow (meaning your little icon shows up on the widget) or you can follow privately (your little icon won't show up on the widget)

FOLLOW VIA DASHBOARD.
Like someone's blog but don't see the widget? Try this step. Before that, make sure you are signed in on your Blogger account.

1. Under the "Reading List" and "Blogs I"m Following", you should see a "ADD" button.


2. Click on that and type in the URL of the blog you would like updates on.


3. Click "Next" and viola!

Read More...

How to Get Sparkles That Follow Your Mouse on Blogger

To add an interesting effect to your Blogger blog consider getting sparkles to follow your mouse. This way when a visitor moves her cursor over your site a line of glitter follows her movements. Blogger gives you access to your blog's code so you can add the JavaScript that produces this enhancement. Edit your blogger template code to assign a glitter effect to your mouse pointer.

1. Log in to your Blogger account. Click your blog's name in the menu bar.


2. Click the "Template" button that displays on the left side of the page and click the "Edit HTML". Your blog's code appears in a text box.


3. Position your cursor before the closing </head> tag. Copy and paste the following JavaScript code:

Black Mouse Sparkle


<script src="https://bloggerxtutorials.googlecode.com/files/blacksparkle-min.js" type="text/javascript"></script>


Blue Mouse Sparkle


<script src="https://bloggerxtutorials.googlecode.com/files/bluesparkle-min.js" type="text/javascript"></script>


Pink Mouse Sparkle


<script src="https://bloggerxtutorials.googlecode.com/files/pinksparkle-min.js" type="text/javascript"></script>


Purple Mouse Sparkle


<script src="https://bloggerxtutorials.googlecode.com/files/purplesparkle-min.js" type="text/javascript"></script>


White Mouse Sparkle


<script src="https://bloggerxtutorials.googlecode.com/files/whitesparkle-min.js" type="text/javascript"></script>



4. Click the "Save Template" to see the sparkles on your blog.

Read More...

How to Find and Install Free Blogger Templates

There are literally dozens of places on the Internet where you can get free blogger templates. These free blogger templates will allow you to dramatically change the look of your Blogger blog. Follow these steps to decorate your blogspot (Blogger) today.

The very first step you should take when looking for free Blogger templates is Blogger itself. From your Blogger dashboard you should click on the "Template" tab of the blog you wish to edit. You will find free Blogger templates under it. Chose your favorite template design, then click "Apply to Blog."

The next best place for free Blogger templates is Btemplates. On this site you will find a wealth of Blogger templates in every color, pattern, design, and in 1, 2, 3, and 4 column styles; Btemplates has the largest selection of free Blogger templates. When you find the free Blogger template you want to use on Btemplates, you will have to upload it to your blog in the following manner:

1. Click the button on Btemplates which will allow you to download the free blogger template you desire. Be sure to unzip it, and remember the location that you saved the file in.


2. Navigate to your Blogger blog and click on the "Template" tab in your chosen blog's dashboard.


3. Click on the tab that says "Backup/Restore."


4. Click on the button that says "Download Full Template" in order to save a copy of the current template for back up purposes.


5. Click on the "Browse" button to find the Btemplates Template you downloaded earlier.


6. Once it is located, you will need to click on it, then click the "Upload" button.


7. Now you can click the "Save Changes" button and your new blogger template will be saved.

This whole process seems long, but it should take you around one minute to complete.

Finally, you should check out some site for free Blogger Templates. There is a large selection of Blogger templates for you to chose from, and you will need to download and install them the same way that you did for the step above.

Btemplates
Blogskins
Bthemes
Deluxe Templates

Read More...

How to Add Feedjit to Blogspot Without Displaying It

Feedjit is a widget for blog owners that allows them to see how many visitors they're getting and where they come from. There are different reasons for why a blog owner wouldn't want the widget displayed. It may take too long to load, they may not want their visitors to feel like they're being "watched" or maybe they just don't like the way the widget looks on their page. You can keep the widget from being displayed and still reap the benefits of being a Feedjit user.

1. Log in to your blog and go to the section where the Feedjit code is.


2. Copy the following HTML code:



<div style="height:0;width:0;overflow:hidden;">Your Feedjit Script Code</div>



3. Replace "Your Feedjit Script Code" with  your Feedjit script code.


4. Save the changes and view your page.

Read More...

How to Create a Blogger Redirect

With a single line of HTML you can redirect visitors to any website you wish from any site. For example, if you move your website from a hosted Blogger blog (located on the Blogspot domain), you can not only create a post instructing your visitors of the change but also insert code to automatically bring them to the new website. If you wish, you can let the visitor remain on your site long enough to read a message about the move as well.

1. Log into your Blogger dashboard in your browser.


2. Click the "Template" tab and click "Edit HTML" with your mouse.


3. Search for the "<head>" tag, which will appear toward the top of your HTML.


4. Paste the following code after the "<head>" tag:



<meta http-equiv="REFRESH" content="0;URL=http://www.website.com">


Change "http://www.website.com" to whatever website you wish your visitors see instead of your Blogger page. Change "0" to the number of seconds that you wish to allow your visitor to remain on the old site if you don't want them to be on the old page at all.


5. Click "Save Template" to save the changes.

Read More...

How to Scroll to the Top With Jquery in Blogger

Scrolling to the top of a Web page can decrease productivity, especially if the page is long. A website visitor can scroll to different locations on a Web page using several methods including scroll wheels, keyboard keys and even mouse gestures. If you'd like to make a user's scrolling tasks a little quicker, add a simple jquery function to your HTML code that moves scrollbars to the top automatically.

1. Login to your Blogger Dashboard and proceed to "Template".


2. Add the jquery plugin to your blog. If your blog already have a latest jQuery plugin, then Ignore this step and directly follow the third step.



<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>



3. Go to "Layout" and click "Add a Gadget" and choose "HTML/Javascript".


4. Copy the code below and paste it inside the content box.



<style type="text/css">
.scrollToTop{
 width:100px;
 height:130px;
 padding:10px;
 text-align:center;
 background: whiteSmoke;
 font-weight: bold;
 color: #444;
 text-decoration: none;
 position:fixed;
 top:75px;
 right:40px;
 display:none;
 background: url('http://bloggerxtutorials.googlecode.com/files/arrow_up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
 text-decoration:none;
}
</style>
<p style="display:none;"><a href="http://bloggerxtutorials.blogspot.com/">Blogger X Tutorials</a></p>
<script src="https://bloggerxtutorials.googlecode.com/files/scrolltotop-min.js"></script>

<a href="#" class="scrollToTop">Scroll To Top</a>



5. That's all you need to do and "Save".

Your blog must have the jQuery plugin. If your blog do not have the latest jQuery plugin, then follow the step "Adding JQuery To Blogger"

Read More...