How To Create Most Popular Post Widget

The previous widget for showing Popular posts (most commented), has been stopped working, so here's a new code for the widget.

Steps:

Log in to Blogger
Go to Layout => Add a Gadget => HTML/JavaScript

You just need copy and paste code below in to the widget:

1. 
   

   
   <script type="text/javascript">
   function pipeCallback(obj) {
   document.write('<ul style="text-transform: capitalize;">');
   var i;
   for (i = 0; i < obj.count ; i++)
   {
   var href = "'" + obj.value.items[i].link + "'";
   var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
   document.write(item);
   }
   document.write('</ul>');
   }
   </script>
   <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=28a6afad7c6ba1288c1b738277e42385&url=http%3A%2F%2FYOUR_BLOG_ADDRESS_HERE_WITHOUT_http://&num=10" type="text/javascript"></script>
   <a href="http://hi-template.blogspot.com" target="_blank"><span style="font-size: xx-small;">Popular Posts Widget</span></a>

   
   NOTE: REPLACE everything in YOUR_BLOG_ADDRESS_HERE_WITHOUT_http:// in the code above with your blog's address without typing http://
   
   The above code displays 10 posts, you can change it by editing the number being displayed in blue !
   
   Code displays the titles like:
   Post one (18)
   Post two (14) etc.
   



2. 
   

   
   <script type="text/javascript">
   function pipeCallback(obj) {
   document.write('<ol style="text-transform: capitalize;">');
   var i;
   for (i = 0; i < obj.count ; i++)
   {
   var href = "'" + obj.value.items[i].link + "'";
   var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
   document.write(item);
   }
   document.write('</ol>');
   }
   </script>
   <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ML4p0UfW3RGgS7iN1JzWFw&url=http%3A%2F%2FYOUR_BLOG_ADDRESS_WITHOUT_http://&num=10" type="text/javascript"></script>
   <span style="font-size: 80%">Widget by <a href="http://hi-template.blogspot.com">Blogger Widgets </a></span>
   

   
   Code displays the titles like:
   Post one (18 comments)
   Post two (14 comments),
   



3. In case if you want to display the popular posts without the number of comments you just need using this code:
   

   
   <script type="text/javascript">
   function pipeCallback(obj) {
   document.write('<ol style="text-transform: capitalize;">');
   var i;
   for (i = 0; i < obj.count ; i++)
   {
   var href = "'" + obj.value.items[i].link + "'";
   var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
   document.write(item);
   }
   document.write('</ol>');
   }
   </script>
   <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1a1c6e4e6d4f148e3650fda46910e15f&url=http%3A%2F%2FYOUR_BLOG_ADDRESS_WITHOUT_http://&num=10" type="text/javascript"></script>
   <span style="font-size: 80%">Widget by <a href="http://hi-template.blogspot.com">Blogger Widgets </a></span>
   

   
   

How to create Read More at blogger

You who have a problem with a very long content that is at page index your blog at blogger.com can cut the content to be "Read More".

1. If you've never had "Read More" then you only need to add a little script.
   Log in to your blogger.com Dasboard -> Setting -> Formating -> Post Template:
   Post the contents of templates, this tag with the code:
   

   
   <span class="fullpost">
   
   </span>
   





• Open your .XML file template.


• Find code:
  

  
  } ]]></b:skin> before tag </head>
  

  
  


• Enter the following code right after the code } ]]></b:skin> before tag </head>
  with:
  

  
  <style>
  <b:if cond='data:blog.pageType == "item"'>
  span.fullpost {display:inline;}
  <b:else/>
  span.fullpost {display:none;}
  </b:if>
  </style>
  

  
  


• Further arranged for the posting cut, find the code: <p>
  and add the code below:
  

  
  <b:if cond='data:blog.pageType != "item"'>
  <a expr:href='data:post.url'><b>Read More</b></a>
  </b:if>
  

  
  


• Upload your template .XML

Blogspot SEO to increase your traffic by keyword

If you playing with google adsense you need to increase the traffic to your blog. How to do that? How you hack your template to specify keyword?
OK this is just a easy step to hack your template. Just follow the step.

1. Login to your blogspot/blogger account


2. Click "Layout"


3. Click "Edit HTML"


4. Edit the code or change with code below:
   

   
   <head>
   <b:include data='blog' name='all-head-content'/>
   <b:if cond='data:blog.pageType == "item"'>
   <title><data:blog.pageName/> - <data:blog.title/></title>
   <b:else/>
   <title><data:blog.pageTitle/></title>
   </b:if>
   <meta expr:content='data:blog.pageTitle + "type your specify description here"' name='description'/>
   <meta expr:content='data:blog.pageTitle + "type your specify keyword here"' name='keywords'/>
   <b:skin><![CDATA[/*
   

   
   


5. Click "Save Template" button


6. Done!

How to remove blogspot navigation bar

If you want to remove the blogger/blogspot navigation bar/navbar, this is the easy way to do it:

1. Login to your blogger account.


2. Click the “Layout” your blog.


3. Click the “Edit HTML”


4. Copy and paste this code right after the /* Variable definitions
   

   
   #navbar-iframe {
   height:0px;
   visibility:hidden;
   display:none;
   }
   

   
   


5. Click “Save Template” button

How to remove the blogger header

Just enter the shown code below on your template XML after the </body> and before the </html>:

</body>
<script>
var a = ["b-navbar", "header"]

for (var i=0; i < a.length; i++) {
var ai = document.getElementById(a[i])
ai.style.visibility="hidden"
ai.style.display="none"
}
</script>
</html>

How to expandable post summaries your blogspot

For version template classic I was ever create some experience about it. But always fail. Now I was found the steps to create it.

Steps:

1. Logged to blogger.com, choose which blog you want to edit.


2. Click link Layout then click Edit HTML


3. To be able to edit the template as a whole, you must check / mark / switch Expand Widget Templates


4. Enter the following code below after the code } ]]></b:skin> before tag </head>
   

   
   <style>
   <b:if cond='data:blog.pageType == "item"'>
   span.fullpost {display:inline;}
   <b:else/>
   span.fullpost {display:none;}
   </b:if>
   </style>
   



5. Further arranged for the posting cut, look for the code <p><data:post.body/></p> in your template and add the code below:
   

   
   <b:if cond='data:blog.pageType != "item"'>
   <a expr:href='data:post.url'><b>Read More..</b></a>
   </b:if>
   

   
   


6. Well, now how to cut your post on index page, every time you create new post where you want the "Read More.." appear on Index page write the code <span class="fullpost"> and remaining posts until the end.. </span>


7. Example:
   This is the beginning of the news I wanted to cut because it was too long to post up everything, so I need to cut the news reached here only.<span class="fullpost"> And this is the rest of my posting which I will hide and only appear when the post page or link read more ..</span>
   

Done? Not yet! If you want the codes appear every time on your new post dashboard when you wanto to create new post, you just need to setting the Post Template How to do this? it's easy steps.

1. Go to your blog Settings click Formatting Scrolled down and find the form of Post Template


2. Paste the code below:
   

   
   <span class="fullpost">
   
   </span>
   

   
   


3. Done! It may appear on your new post dashboard and ready to used everytime when you need create a new post