Want Your Own Blog?

When you surf the internet, it is not rare to find a good and high quality of contents or materials coming from similarly an interesting blog. Such blog is carefully managed with quite enough of functionalities, links, or any other features that enable you to spend more time and seek more information without ever feeling bored.

That is a good blogging capability. That is to say a good and clever way to manage and handle a certain site, or blog especially, as this blog represents much more personal and private sense. Thus, we know that whoever is behind such blog, such person has to be, at the least, good in managing certain things.

You can be such person, indeed. You can be good at managing your own things, hence blog, only if you simply know how. And to know it, you can find many of blogging tutorial, instructions, advices, in the internet. All you have to do is that you need to only search them at the right place to have the right tutorial. Once you got that proper learning and know-how from the internet, you can then start to post your own blog as good as other people. Who knows that yours could probably be the best?

Automatic Category with only Thumbnail

At our previous discussion on Automatic Category feature with Thumbnail, someone asked if only thumbnail was displayed and lined to the side. That can be done with a modification in the coding of your template.
See the example below where screenshot of automatic category with only thumbnail.


The following is how you will modify the coding of your template to display the automatic category only with the thumbnail.

Step 1

1. Login to blogger with your ID.
2. Click Design.
   
3. Click Edit HTML .
   
4. Please backup your full template by clicking the Download Full Template link.
   
5. Find the code ]]></b:skin>. Copy and paste the code below exactly above the code]]></b:skin>

   /*** Labels Thumbs ***/
   img.label_thumb{
   float:left;
   border:1px solid #ccc;
   width:85px;
   height:70px;
   margin-right:10px;
   margin-bottom:10px;
   }

   
   



6. Find the code </head>. Copy and paste the code below exactly above the code </head>
   

   <script type='text/javascript'>
   //<![CDATA[
   function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++)

   {var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++)

   {if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
   if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
   var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
   {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
   else thumburl='';}
   document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
   if(i!=(numposts-1))
   document.write('');}
   document.write('</div>');}
   //]]>
   
   </script>

   
   



7. SAVE TEMPLATE.



8. Step 1, done.

Step 2

1. Click Page Element.
   
   
   



2. Click Add a Gadget to add a new gadget.
   



3. A new window will appear and click on the sign plus (+) for HTML/JavaScript
   



4. Copy below script and then paste it into the available field. Give a title as you desire, but previously, you have to change the red-printed text into your own category (label).
   
   <script type='text/javascript'>var numposts = 6;</script>
   
   <script type="text/javascript" src="/feeds/posts/default/-/labelname?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
   
   



5. Click SAVE



6. Step 2, done.

If you want to add other widgets for other categories, repeat from the Step 2.


For custom settings such as the size of thumbnail, border, and others, you can set up at the CSS section. Just do your own creation.


 /*** Labels Thumbs ***/


img.label_thumb{


float:left;


border:1px solid #ccc;


width:85px;


height:70px;


margin-right:10px;


margin-bottom:10px;


}




To set up the number of thumbnail to display, you only need to change the value 6 into another value.


<script type='text/javascript'>var numposts = 6;</script>


Well, displaying the automatic category with only thumbnail could best fit with a blog with the gallery template, photo gallery, etc.

Automatic Category with Thumbnail

Automatic Category with thumbnail actually is advanced trick from previous one about Displaying category based on the label name. This feature can be used to display the categories based the names of the categories with the thumbnail and summary.

The example of automatic category with thumbnail can be seen at the demo of Fresh Revolution Template:

Live Demo

The category or label you want to display will automatically be displayed without having to edit at anytime.

What to prepare? You have to prepare is the category name only you want to display. But need to know that the label name is case sensitive. It means that the label name should be exactly as that of in your blog, e.g. Health is different from health. Therefore, make sure the label name you will use is exactly as it is.

The easiest way to know the label name exactly is to display the label widget on your blog. Point the label name you want and see the status bar of your internet browser.

You will find that the label Featured, the exact label name is featured (all lower case). It happens because the blog display is affected by the CSS setting. In this case, we need the original label name.

 

Create automatic category with thumbnail.

 

The following is how to create automatic category with thumbnail.

Step I

 

1. Login to blogger with your ID.
2. Click Design.
   
   
3. Click Edit HTML.
   
   
4. Please backup your full template first by clicking Download Full Template. 
5. Find the code ]]></b:skin>, copy and then paste the code below exactly above the code]]></b:skin>

    

   /*** Featured Categories ***/
        img.label_thumb{
           float:left;
   	padding:5px;
   	border:1px solid #8f8f8f;
   	background:#D2D0D0;
   	margin-right:10px;
   	height:55px;
   	width:55px;
   	}
        img.label_thumb:hover{
   	background:#f7f6f6;
   	}
        .label_with_thumbs {
   	float: left;
   	width: 100%;
   	min-height: 70px;
   	margin: 0px 10px 2px 0px;
   	adding: 0;
   	}
        ul.label_with_thumbs li {
   	padding:8px 0;
   	min-height:65px;
   	margin-bottom:10px;
   	}
       .label_with_thumbs a {}
       .label_with_thumbs strong {}

   
   



6. Find the code </head>, copy and then paste the code below exactly above the code </head>
   

   <script type='text/javascript'>
   //<![CDATA[
   function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
   if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
   {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh3PgUM_TfDSF2CSXlcFaVfiQLZDNONtc9Oy9ojrfs7aZU-dnTPBO9zJMrbCz6l60YT3zmK-AzOcoey6dh6oHRJktgjDa-X8BJog4YnrfSkrB8l6CO8-L6p8cx0OFB9EJecoVaPXsEljHy/';}
   var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
   document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
   else
   if("summary"in entry){var postcontent=entry.summary.$t;}
   else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
   else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
   var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
   if(showcommentnum==true)
   {if(flag==1){towrite=towrite+' | ';}
   if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
   if(displaymore==true)
   {if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
   document.write(towrite);document.write('</li>');if(displayseparator==true)
   if(i!=(numposts-1))
   document.write('');}document.write('</ul>');}
   //]]>
   
   </script>

   
   



7. Click SAVE TEMPLATE.



8. Step 1 done.

Step 2

 

1. Click Page Element, if you are not yet in the position.
   
   
   



2. Click Add a Gadget to add new gadget.
   
   
   



3. A new window will pop up. Click the sign plus (+) for HTML/JavaScript
   
   
   



4. Copy the following script and then paste in the field available. Give the title as you want, but previously, you have to replace the word in red with the category name you want.
   
   
   
   
   
   <script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
   
   
   <script type="text/javascript" src="/feeds/posts/default/-/Gadget?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
   
   
   
   
   
   



5. Click SAVE



6. Step 2 done.

If you want to add another gadget for the other category, repeat the above steps.

Is above script customizable? Yes, in the above script, you can customize some parts, such as the character, thumbnail, number of posts, post date, comment, and more link.

In the script, you will find the texts as below:

var numposts = 3;


var showpostthumbnails = true;


var displaymore = false;


var showcommentnum = false;


var showcommentnum = false;


var showpostdate = false;


var showpostsummary = true;


var numchars = 80;

The red-printed code is editable. True means display, false means don’t display, 80 is number of character. Just try to edit them.

Happy trying!

Inspired by : Featured posts widget with Thumbnails using Labels

Displaying category based on label name

Commonly, to display the category or label, all the names of the category or label those are displayed. So, is there any way to display category or label based on the category or label name? The answer is yes, there is.

Displaying category or label based on the category or label name is considered to be more interesting because it’s more specific, e.g. a blog has categories of economics, politics, entertainment, and so on.

The first step to prepare is defining the categories or labels that you want to display, record or copy paste the category or label names, e.g. politics, etc. For the categories or labels consist of more than one word (have the space between) should be added with %20 (to replace the space), e.g. blogger tutorial, becomes:

blogger%20tutorial

Another thing you should know is the label names are case sensitive, e.g. blogger%20tutorial is different from Blogger%20tutorial.

The second step is preparing the feed address for category or label names to display, following the basic format as below:

 

http://yourblogname.blogspot.com/feeds/posts/default/-/label_name

 

For instance, Kang Rohman’s blog has the URL as http://www.blogspottutorial.com and label name to display is blogger%20tutorial, so the feed address for that label name is:

 

http://www.blogspottutorial.com/feeds/posts/default/-/blogger%20tutorial

 

The following is how to display category based on the label name in Blogger:

1. Login to blogger with your ID.
2. Click Design.
   
3. Click Page Element if you are not yet in this position. 
   
4. Click one of the Add a Gadget links.
   
5. A new window will pop up and click the sign plus ( + ) for Feed.
   
6. Enter the feed address you have prepared before. For instance, please enter the feed address below:
   http://www.blogspottutorial.com/feeds/posts/default/-/blogger%20tutorial

1. The options will appear. Here, you can change the title, the number of posts to display (max 5 posts), and more.
   
2. Click SAVE.
3. Done.

To display the other categories, you only need to repeat the above steps, of course, with the feed addresses of your own blog.

There is another variation you will get in above technique, i.e. the display order can be based on the latest updated posts.

http://yourblogname.blogspot.com/feeds/posts/default/-/nama_label?orderby=published

Although the posts have been very long or old, but if they are re-updated, they will be displayed in the top.

Best Blogger Meta Tag

Actually, the best Blogger meta tag that I am about to explain is not the best one because there may be other Blogger meta tags that are better than these Blogger meta tags, but for more attractive, I deliberately made the title so bombastic.

Many people say that installing Meta tags is the old SEO technique and not necessary to do anymore. That may be right, but also not. To avoid confusing, we had better see the facts in the practice.

Here Kang Rohman typed the keyword Blogspot Tutorial in google.com. Below is the screenshot of the result:

As a result, Kang Rohman’s blog was ranked first (at the time this article was written). What shown in the search result were blog title and blog description, which should be installed with description meta tag. It shows the fact that meta tag installment is still needed as the one to support SEO.

According to what most SEO experts say, which Kang Rohman has read, the good blog description or the keywords should be different in every page, because if one page and the others have the same description, it will be considered as duplication. People say, search engines dislike any duplication, for instance, Google search engine.

Referring to the case, Kang Rohman tried to create Blogger description meta tag and the keyword that can be different in every page or popular term for it is Dynamic Blogger Meta tag.

Below is the basic code of Dynamic Blogger Meta tag :

 

<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<meta expr:content='data:blog.pageTitle + &quot; - description&quot;' name='description'/> 
<meta expr:content='data:blog.pageTitle + &quot;, keywords&quot;' name='keywords'/> 
<b:else/> 
<meta expr:content='data:blog.pageName + &quot; - description&quot;' name='description'/> 
<meta expr:content='data:blog.pageName + &quot;, keywords&quot;' name='keywords'/> </b:if>

 

The real example of installing the code on Kang Rohman’s blog:

 

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta expr:content='data:blog.pageTitle + &quot; - Tips and trick to easy blogging at blogspot also free download ebook and template&quot;' name='description'/>
<meta expr:content='data:blog.pageTitle + &quot;, blog tutorial,blogger tutorial,blogspot tutorial,blog templates,blogger templates,blogspot templates,blogger templates free,free blogger templates&quot;' name='keywords'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - Tips and trick to easy blogging at blogspot also free download ebook and template&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, blog tutorial,blogger tutorial,blogspot tutorial,blog templates,blogger templates,blogspot templates,blogger templates free,free blogger templates&quot;' name='keywords'/>
</b:if>

 

The technique used is at the home page, the description consists of blog title and the description installed, while the keyword consists of blog title and the keywords installed.

 

description: Blog Tutorial - Tips and trick to easy blogging at blogspot also free download ebook and template

keywords: Blog Tutorial, Free blogger Templates and Sites Info, blog tutorial,blogger tutorial,blogspot tutorial,blog templates,blogger templates,blogspot templates,blogger templates free,free blogger templates

 

In the meanwhile, at the single post, the description is taken from blog post title and the description installed, while the keywords are taken from blog post title and the keywords installed.

For instance, if you are in the post page with the title as Fresh Revolution Premium template , the description and keywords would be like:

description: Fresh Revolution Premium template - Tips and trick to easy blogging at blogspot also free download ebook and template

keywords: Fresh Revolution Premium template, blog tutorial,blogger tutorial,blogspot tutorial,blog templates,blogger templates,blogspot templates,blogger templates free,free blogger templates

 

Remember that you will create a different title for every post you publish, so the description meta tag will also be different automatically. That’s why this meta tag is called Dynamic Blogger Meta tag

How to install it? Still ask about it?

 

If you want to use this technique, you certainly have to delete the currently-installed description meta tag or keyword meta tag to avoid duplication.

The following are the steps to install Dynamic Blogger Meta tag.

 

1. Login to Blogger with your ID.



2. Click Design.
   
   
   



3. Click Edit HTML.
   
   
   



4. Do the backup to your full blog template. Click Download Full Template.
   
   
   



5. For easier, find the code : <b:skin><![CDATA[



6. Copy and paste the code exactly above the code:
   

    

   
   
   

   <b:if cond='data:blog.pageType != &quot;item&quot;'> 
   <meta expr:content='data:blog.pageTitle + &quot; - description&quot;' name='description'/> 
   <meta expr:content='data:blog.pageTitle + &quot;, keywords&quot;' name='keywords'/> 
   <b:else/> 
   <meta expr:content='data:blog.pageName + &quot; - description&quot;' name='description'/> 
   <meta expr:content='data:blog.pageName + &quot;, keywords&quot;' name='keywords'/> 
   </b:if>

   
   
   

    

   
   



7. Remember! Replace the description texts with your own, and the keywords, as well.



8. Click SAVE TEMPLATE.



9. Done.

Has this technique been proven? The answer is yes. This blog have shown the great result for over a month with significant traffic.

Need to remember that above technique is one of many factors supporting SEO. So, don’t think it will make the traffic of your blog increase fast and significantly.

Limit the label displayed in Blogger

Long I’ve not been here answering the questions through blog posts. Below is one of the questions incoming to my email.

Excuse me, Kang Rohman...
To display number of posts in blogspot, we can do setting in SETTINGS > FORMATTING > SHOW AT MOST> and then we fill out with a number to determine the display.
Well, how about we want to display number of posts based on the specific label? In my blog, I set the number of posts to 8 posts, but when I display the number of posts based on the specific label, all post will be displayed (not 8 post)
How could I overcome this issue?
Please send the answer to my email.

A label, when clicked, it will display all posts under the label, but we can limit the number of posts to be displayed in one page, but we have to insert a few codes to the label. The code is as below:

?max-results=5

The number 5 is the number of posts of a label to be displayed in one page. Of course, the number 5 can be replaced as you desire, but only works when we display the label manually.

The basic format of label address is as below:

http://blogname.blogspot.com/search/label/labelname

 

For example, Kang Rohman has a label named blog tutorial, so the address would be like this:

http://www.blogspottutorial.com/search/label/blog%20tutorial

 

The posts labeled under “bog tutorial” would be many, so when a visitor accesses the address, all posts will be displayed. If we want to limit the number of posts under the label, we only add the code, e.g.:

http://www.blogspottutorial.com/search/label/blog%20tutorial?max-results=5

 

But to add the code that is taken from Blogger database, the code would be like this:

+ &quot;?max-results=5&quot;

For example, if:

 

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

 

The code would be like this?

 

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>

 

Ah, Kang Rohman makes us confused . Ha ha ha … that’s indeed for those who have known about Blogger template code. For those who are still confused, you can follow the instructions below. But, make sure that you have installed Label gadget or Category, either in the List form or Label Cloud.

1. Login to Blogger with your ID.



2. Click Design .
   
   
   
   
   
   



3. Click Edit HTML.
   
   
   
   
   
   
   
   
   



4. Create backup of your blog template in full by clicking on Download Full Template.
   
   
   
   
   
   



5. Click small box next to Expand Widget Templates.
   
   
   
   
   
   



6. Find the code:
   

   <ul>
   
         <b:loop values='data:labels' var='label'>
   
   
           <li>
   
   
             <b:if cond='data:blog.url == data:label.url'>
   
   
               <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
   
   
             <b:else/>
   
   
               <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
   
   
             </b:if>
   
   
             <b:if cond='data:showFreqNumbers'>
   
   
               <span dir='ltr'>(<data:label.count/>)</span>
   
   
             </b:if>
   
   
           </li>
   
   
         </b:loop>
   
   
         </ul>

   
   



7. Add the limit code so it would be like this:
   

    

   
   <ul>
   
   
         <b:loop values='data:labels' var='label'>
   
   
           <li>
   
   
             <b:if cond='data:blog.url == data:label.url'>
   
   
               <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
   
   
             <b:else/>
   
   
               <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
   
   
             </b:if>
   
   
             <b:if cond='data:showFreqNumbers'>
   
   
               <span dir='ltr'>(<data:label.count/>)</span>
   
   
             </b:if>
   
   
           </li>
   
   
         </b:loop>
   
   
         </ul>
   
   

    

   
   



8. That is for label in the list form, for label cloud, you only need to scroll down and find then code as below:
   

   <b:loop values='data:labels' var='label'>
   
           <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
   
   
             <b:if cond='data:blog.url == data:label.url'>
   
   
               <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
   
   
             <b:else/>
   
   
               <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
   
   
             </b:if>
   
   
             <b:if cond='data:showFreqNumbers'>
   
   
               <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
   
   
             </b:if>
   
   
           </span>
   
   
         </b:loop>

          



9. Add the limit code so it would be as follows:
   

   <b:loop values='data:labels' var='label'>
   
           <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
   
   
             <b:if cond='data:blog.url == data:label.url'>
   
   
               <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
   
   
             <b:else/>
   
   
               <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
   
   
             </b:if>
   
   
             <b:if cond='data:showFreqNumbers'>
   
   
               <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
   
   
             </b:if>
   
   
           </span>
   
   
         </b:loop>

   
   



10. Click SAVE TEMPLATE.



11. Done.

Happy trying!