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('http://4.bp.blogspot.com/-Cpq2EvNo7cQ/TvtIdwHLAjI/AAAAAAAAA7o/GgtjfWGsMc8/s1600/11sharingsexy.png') no-repeat left bottom;
 position: relative;
 width: 540px; }
.sexy-bookmarks span.sexy-rightside {
 width: 17px;
 height: 54px;
 background:url('http://4.bp.blogspot.com/-Cpq2EvNo7cQ/TvtIdwHLAjI/AAAAAAAAA7o/GgtjfWGsMc8/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('http://2.bp.blogspot.com/-CbLImS-FYzE/TvtIimuGxcI/AAAAAAAAA7w/qC_c-F8jtYI/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 Earn More Page Views With Blogger Blogs

Finding ways to gaining exposure on your blogger blog is part of the fun of blogging. There are things you can do to help you get more visitors and even subscribers. Once you have a big following, you can even earn money by blogging.

1. Update your blog regularly. If you want people to come, give them interesting content to read. This content will help you get indexed in search engines on relevant topics and bring visitors your way.


2. Publicize your blog by telling people about it. Add your blog URL to your email autosignature line and to signature lines in message forums. This can entice visitors.


3. Comment on other people's blogs with a link back to your own. People will often return the favor and if they find something interesting on your blog, they may bookmark you and visit again.


4. Syndicate your blog by joining an RSS (Really Simple Syndication) feeder service such as the one at Feedburner which can help you bring more traffic in by syndicating your blog to many news sources and give people an option to subscribe to receive future entries in their email inbox.


5. Install a fun and interesting template. Templates that are unique on blogger blogs can grab someone's attention and get them to view more than just your landing page. There are many free templates online that you can download to make your blogger blog unique.


6. Ping your blog. A ping service such as Pingomatic is a Web site that you simply put your blog information into each time there's a new blog entry written. It notifies multiple directory services that you have something new to share.


7. Join Technorati and utilize tools there including tagging services that help you categorize your blog to bring it more exposure and to advertise your blog in directories. Technorati has a lot of useful tools for bloggers.


8. Submit your blogger blog to the search engines for indexing. For Google, use the link in the Resources section. This will help your blogger blog gain more page views when people search on a subject that Google has indexed. This is especially helpful if you write about a niche topic.


9. Join social bookmarking Web sites and list their widgets on your blog. Bloggers can bookmark their own posts on sites like Digg and Del.icio.us in order to gain more page views. Other people who bookmark your site might bookmark you with widgets and additions to your blog template which can bring new visitors in as well.

Read More...

How to Ping a Blog in Google

Google, like many search engines, gives you the ability to submit a "ping" when you update your blog. Pinging Google notifies the search engine's Web crawling robots that your website has been updated and that you would like the new content to be added to Google's database as quickly as possible. When you add new content to your blog you may be able to get the content listed faster by utilizing Google's blog ping service.

1. Navigate in your Web browser to the Google blog search ping service at blogsearch.google.com.


2. Click the text field next to "Your blog's address," and type the address to your blog, such as "example.com." If your blog has an RSS feed you may also type the address to the feed, such as "example.com/rss."


3. Click the "Submit Blog" button. The page changes to display the message "Thanks for sharing your blog."

Many blog management systems such as WordPress have the ability to ping Google automatically each time you publish a new post. Consult the help files for the blog management software installed on your Web server to see if the software supports this feature.

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 Get Your Blog Seen

After creating a blog, it can be frustrating to create new posts every day when your blog doesn't appear to have many visitors. You can increase your readership by submitting your blog to search engines, commenting on other blogs, submitting your blog to human-edited directories, using SEO add-ons for your blogging platform, and by engaging people on Facebook and Twitter. These methods won't drive millions of people to your website overnight, but they will increase your blog's audience over time.

1. Submit your blog URL to major search engines like Google, Yahoo! and Bing, so your website gains maximum exposure. After your website is indexed by a search engine, it begins to show up in each search engine's results after a search is performed.


2. Comment on other people's blogs that are thematically similar to your blog. Don't try to use the comment section as a way to advertise your blog. Instead, say something interesting about the topic and try to build friendships with people who also comment on the blog. Post your blog's URL as part of your signature when leaving a comment so that people who are interested in what you have to say will visit your blog.


3. Create a sitemap for your entire website and submit it to Google, Bing and Yahoo! A sitemap is a list of pages that are available for visitors to surf, and search engines to crawl, on your website.


4. Submit your website to a human-edited directories like the Open Directory Project or the Yahoo! Directory. Human-edited directories are more highly valued by search engines than link farms that accept any submitted link.


5. Use social media to promote your blog. Use Facebook and Twitter to look for people to follow while gaining new followers for your blog. Create a status update or a tweet for every blog post you generate to let your followers know that you have new content on your blog.


6. Use add-ons or extensions to get the most from your blogging platform. If you use WordPress, Joomla, Drupal or any other blogging platform, you can install extensions to help you promote your blog through SEO, automatic pinging, social media integration and more.

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 Post Links in Blogger Comments

If you have a pertinent piece of information to include in your comment on a Blogger blog, but don't have room to write it in the comment itself, you can include a hyperlink. Placing links in Blogger comments lets you comment on the blog post itself and at the same time link to relevant content that other readers can click on only if they choose to, without filling your comment with potentially unnecessary material. However, bear in mind that some blog masters view hyperlinks as spam, so be sure to include relevant text with the hyperlink so as to not look like a spammer.

1. Log in to Blogger.com with the username under which you intend to post a comment. In some cases, the blog may not require readers to sign in to leave comments.


2. Navigate to the desired blog post. Find the "Post Comment" box at the bottom of the blog post.


3. Paste the following text into the comment box:



<a href="http://www.yourlinkhere.com">Your Text Here</a>.


Delete the existing URL and replace it with your own. Delete the "Your Text Here" link text and replace it with the words you want to use to describe your link. These words will appear as clickable link text in the comment.


4. Add any other text before or after this code. Click "Post Comment" when finished to submit your link.

Some bloggers will keep comments in moderation until approved. Note that your comment will not appear immediately if this is the case.

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

Blogger Customization Tips

Blogs are an easy way for individuals and companies to publish their thoughts, activities and products on the Internet. Blogger, a free blog publishing service owned by Google, allows you to create time stamped blogs with your own unique blog address. Bloggers are encouraged to fully customize their Blogger page to suit their personal style and preferences.

Templates
Templates are an ideal way to customize your Blogger page with little or no knowledge of coding. Templates are available from Blogger as well as many Internet sites -- most of which are free except for more intricate designs, which will require purchase. They feature a wide variety of themes, layouts, colors and purposes that you will be able to choose from to fit your needs. Template code is copied and pasted into Blogger, which will apply it to your site.

Add-ons
Blogger allows you to add on custom features and gadgets to your site that range from hit counters to third-party applications. Add-ons are a quick way to customize your blog by simply locating an add-on under the customization menu and adding it to a section of your site where it will be displayed. A photo book allows your viewers to see your pictures and can be configured to display random photos on your homepage.

Revenue
Popular blogs can reach a broad audience that a blogger can utilize to make a profit by adding revenue ads to the site. Blogger has Google AdSense directly available to users which will display content on the blog. The owner receives revenue when a user clicks on an ad. AdSense also allows the owner to track the site's audience, including the location, time on site and number of one-time viewers, which they can use to customize the site to a specific audience.

Search Engine Optimization
Search engine optimization or SEO customizes your Blogger site to be found in search results from a specific keyword. An owner can improve the likelihood of an Internet searcher finding their site by editing the Meta tags within the Blogger template to include keywords that are directly related to the site's content. It is recommended that you use the keywords frequently in the content of the site. Providing links to other blogs and websites as well has having other sites display your link will improve your site within the major search engines.

Read More...