Automatic Category Articles Creating with Thumbnails

Dude probably Computer Learning Through the Internet will share a little experience already applied and is also a collection of science learning and ngblog. Creating categories with automatic thumbnail is actually a development of the previous trick Showing Category By Name Label, this feature can display categories based on the category name along with a summary article thumbnail picture. Making examples of the application of automatic category with thumbnails you can see an example in the picture below :

Desired category or label will appear automatically without you having to edit it at any time.

What should be prepared? you should prepare is the name of the category you want in the show. But keep in mind that the label name is case-sensitive means that in the name of the letter pairs must be identical to the label on your blog, for example the name of different health categories health therefore make sure first that the exact same label name letter. An easy way to see the exact name of the label is trying to show the first label widget on your blog, then highlight the desired label name then look at your internet browser statusbar.

Here are the steps to build automatic category with thumbnail:
gambit

     Login to blogger with your ID.
     Click the design.
     Click the Edit HTML tab.
     It is recommended to make a backup first, just click on Download Full Template.
     Find the code]]> </ b: skin>, copy and paste the following code just 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 {}

Find the code </ head>, copy and paste the following code just above the </ 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/AVvXsEjIn3NiVNmKLaBt8us4tnpJiHRGIgAdbQWF4rewVdjc6QZJpLPjR6hTIv74ui_dP82u37vlpBwO0U6RugOijPeyQ9-C8zxSCoqiMAAVO7HW6CdX3q2KUfsbbKEaVuowqbRNLiMg3-pfLiN1/';}
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>

Click the Save Template button.
The first step is complete.

The second step

Click the tab design.
If still in the Page Elements tab position, please click the menu beforehand Page Elements tab.
Click Add Gadget to add a new gadget.
After the new window appears, click the plus sign to HTML / JavaScript
Copy the script below, then paste in the available space. You can also fit with the title you want. But first you need to change the text in red to give the desired category name.

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

Click the Save button
Finished second step.

If you want to add another widget to another category name, you just do the same thing with the steps above.
Is the above script can customize? can. In the above code there bebebrapa that can be set eg number of characters you want in the show, thumbnails, number of posts, post date, comments, and more links.
In the script is written like this:

numposts var = 3; (Number of Posts displayed)
var showpostthumbnails = true; (Featured Image)
displaymore var = false; (Showing Readmore / More)
showcommentnum var = false; (Showing Total Comments)
displayseparator var = false; (Showing Separator)
showpostdate var = false; (Showing Date Posted)
var showpostsummary = true; (Showing part this post)
NUMCHARS var = 80; (Word count displayed)

Red code is a code that you can edit, show the true meaning, false means do not be in the show, 80 is the number of characters, please try changing it.

Maybe up here first I Make automatic category with thumbnails this time, may be useful for you.

source : here

DAPATKAN ARTIKEL VIA EMAIL

Tagged as : Blogger

Author: Unknown Location: Pangkalpinang, Bangka Belitung

Article Automatic Category Articles Creating with Thumbnails, Published by Unknown on the day Sunday, June 30, 2013. Hopefully this article can add your insights. Unknown a is a writer who wants to be successful in the virtual world. Try, and keep trying. May God give consent. regards

Sunday, June 30, 2013