Create a Widget with a single Thumbnail Label Specified

Wah the title less fit I think Yes ...? Bodo very, important contents. This time I will give one more blogger tutorial about making widgets per label with only one thumbnail at the top and below display titles only, for more details please see the screenshot image below. Usually these widgets is widely used by blog news content, one of the functions of this widget to make it easy for readers to explore each category and can also to summarise the space on a template. In fact this tutorial is long but since many are asked in the comment box or in the email, there is no harm if I clear again in this article. How to create a widget per label that I use here is really easy and only merge between tutorial create labels or categories with thumbnails and create a widget that displays only the title of the label only.

DEMO

If you look at the template Mas Paper or Johny Portal 2, in specific parts of the template that there is a widget that displays labels with the arrangement of one title with thumbnails and summary, and below the list of the same label but only displays the title only. How to make it are as follows:

1. First You have to do is log into your blogger account with You
2. After that select the blog that you want to add this widget.
3. Go to template >> Edit HTML, then tick the expand widget templates
4. Just in case that doesn't happen error in editing later, first backup your template.
5. After all the above steps you do, place the following code above the code ]] > </b:skin> :
   
   img. label_thumb {float: left; border: "1px" solid # 8f8f8f; background: # D2D0D0; margin-right: 10px; height:60px; width:60px; padding: 2px}
   . label_thumb: hover img {background: # f7f6f6}
   . label_with_thumbs {float: left; width: 100%; min-height: 70px; margin: 0 5px 2px 0}
   ul. label_with_thumbs li {min-height: 65px; margin: 0; padding: 2px 4px 0}
   Note the color Blue writing above, it is a thumbnail image width and height.
6. Next up is still in a position to Edit HTML, insert the following code 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/AVvXsEjtksmocskCJIscQaoZ1LIQbe4oufgCzlovye0OSuo18gQXCPESU6IkhVol1jF2nA5-YPxnZZnpmLlHAUQmyfGSyT_ewcKSVh4yDiJdxUl0bxqAz0cuq_iyfaK59NQa5uirU3YJNS5djNyR/';}
   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>

   If the above script code is too long, you can save in the repository of Google Code , or use your own script code below that I have concisely on Google Code.

   < script src = ' https://masolis-javascript.googlecode.com/svn/trunk/label.js ' type = ' text/javascript '/>

7. After that save templates, then proceed to select the layout you want to add this widget. Click add gadgets >> HTML/Javascript code to the following maximum:
   < script type = "text/javascript" > var numposts = 1; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = true; var numchars = 60; </script>
   
   < script type = "text/javascript" src = "/feeds/posts/default/-/news? orderby = updated & alt = json-in-script & callback = labelthumbs" > </script>
   
   < script type = "text/javascript" >
   function recentpostslist (json) {
   document.write (' <ul> ');
   for (var i = 1; i < json. feed. entry. length; i ++)
    {
   for (var j = 1; j < json.feed.entry [i]. j++ link s.length;) {
   if (json.feed.entry [i] [j] link. = ' rel = alternate ') {
   break;
         }
       }
   var entryUrl = "'" + json.feed.entry [i] [j]. link href + "'";//bs
   var entryTitle = json.feed.entry [i]. title. $ t;
   var item = "<li>" + "< a href =" + entryUrl + "" target = "_blank" > ' + </a> + "entryTitle </li>";
   document.write (item);
    }
   document.write (' </ul> ');
    }
   </script>
   < script src = "http://johnyportal2.blogspot.com/feeds/posts/summary/-/news? max-results = 6 & alt = json-in-script & callback = recentpostslist" > </script>
   < a href = "http://johnyportal2.blogspot.com/search/label/news" style = "float: right; font: normal an 11px Arial; padding: 5px 0;"> More on this category & # 187; </a>
   Description:
   The color Blue : is a category label or ditampikan, you can replace it with a label you customize to your needs.
   The color Red : replace the URL with the URL of your blog.
   
   Then save and see the result.

The look of this widget to follow the CSS code to the sidebar (if you put in the sidebar) on which template you use. The CSS code used in the making of this widget is used only to manage the display of thumbnails.

This last tutorial about creating widgets per jadul label this time, if there is something unclear please leave a message in the comment box, good luck and may be useful.