HOW TO MAKE A WIDGET OF RECENT POST BY LABEL TAG

How to Make a Widget Recent Post By Label Tag - the purpose of this widget is to display a list of recent posts based on each label. This widget is usually used on magazine template to display the latest articles on the homepage post by label used, or it can be applied to the sidebar to display recent post by a particular label.Even can also be used to display a list of recent posts that publish recent post just like ordinary or common use, it all depends on the arrangements necessary for the needs of the blog. For those who are still confused application, the following description of the tutorial to install the widget recent post by tag label either on the sidebar or at the bottom of the list post homepage. 1. First, copy the following code then put on top of the code </ head>

 

 ' && Strx.indexOf ( ' style = "float: left; padding: 10px 0px 0px 5px;"> <img src = " ' + img [ 0 ] .src + '" width = " ' + img_thumb_width + ' px ' class = "clearfix"> ' ); if (showpostthumbnails == true ) document.write ( ' <a href="' +posturl+'"> <img alt = " ' + posttitle + '" title = " ' + posttitle + '" class = "label_thumb" src = " ' + thumburl + ' '/> </a>' ); document.write ( '<a href ="' + posturl + ' " | ' } If (commenttext == ' 1 Comments ' ) commenttext = ' 1 Comment ' ; if (commenttext == ' 0 Comments ' ) commenttext = ' No. | ' ; Towrite towrite + = ' <a href="' +posturl+'" class="url" title="' +posttitle+'"> More    

2. Then again copy the code below and place it on the code ]]> </ b: skin>

img .label_thumb { float : left; border : 1 px solid #aaa ; margin-right : 5 px; height : 55 px; width : 55 px; padding : 5 px}
 .taglabel { float : left; width : 100 %; padding : 0 ; margin : 0 }
 ul .taglabel  li { padding : 5 px 0 ; min-height : 73 px}

3. Then attach the following code to the Widget HTML / Javascript.

< Script  type = 'text / javascript " > 
    var numposts = 5 ; // Number of Posts in the show 
    var showpostthumbnails = true ; // Change" false "to not display [Thumbnail] 
    var displaymore = false ; // Replace" true " to display links [More] 
    var displayseparator = false ;
     var showcommentnum = false ; // Replace "true" to show [Comment] 
    var showpostdate = false ; // Replace "true" to show [Date] 
    var showpostsummary = true ; // Change "false" to not display [Description Post] 
    var NUMCHARS = 60 ; // Character description in tampilkan </ script > 
< script  type = "text/javascript"  src = "/feeds/posts/default/-/ NAMA_LABEL ?orderby=updated&alt=json-in-script&callback=labelthumbs" ></ Script >

Notice in this line:

< script  type = "text/javascript"  src = "/feeds/posts/default/-/ NAMA_LABEL ?orderby=updated&alt=json-in-script&callback=labelthumbs" ></ Script >

If you want to change the default recent post (not by a label), replace the line of code with the following code:

< script  type = "text/javascript"  src = "/feeds/posts/default?orderby=updated&alt=json-in-script&callback=labelthumbs" ></ Script >

If you want to put at the bottom of the homepage post but yet there are elements of widget columns, the first column create widgets for storage of the code, the steps made ​​as follows. To be more simple then I divide it into two columns widget parallel or side by side and one column widget below. For CSSnya the same as last, put the above ]]> </ b: skin>

#label-left  .widget  ul , #label-right  .widget  ul , #label-bottom  .widget  ul { margin-top : - 10 px !important }
 #label-left  .widget , #label-right  .widget , #label-bottom  .widget { position : relative; display : block; border : 1 px solid #aaa ; float : left; padding : 1 %}
 #label-left  .widget , #label-right  .widget { width : 47 %}
 #label-bottom  .widget { width : 97.3 %}
 #label-left  .widget  li , #label-right  .widget  li , #label-bottom  .widget  li { font-family : Electrolize,sans-serif !important }
 #label-left  h2 , #label-right  h2 , #label-bottom  h2 { border-bottom : 2 px solid # 63C4F1 ; background : # 111 ; font : bold 18 px Electrolize,sans-serif; color : #63C4F1 ; position : relative; display : block; top : - 17 px; right : - 7 px; padding : 5 px}
 #label-left  .widget { margin-right : 5 px}
 #label-bottom  .widget { margin-top : 20 px}
 #label-left  h2 :before , #label-right  h2 :before , #label-bottom  h2 :before { content : & #39 ; ' ; position : absolute; top : 0 ; left : - 12 px; width : 0 ; height : 0 ; border-color : transparent transparent #111 ; border-style : solid; border-width : 0  0  10 px 12 px}
 #label-left  .widget  ul , #label-right  .widget  ul , #label-bottom  .widget  ul { list-style : none; margin : 0 ; padding : 0 }
 #label-left  .widget  ul  li , #label-right  .widget  ul  li , #label-bottom  .widget  ul  li { font-size : 13 px; font-family : Oswald,sans-serif; border-bottom : 1 px solid #aaa ; margin : 0 auto; padding : 5 px}
 #label-left  .widget  li :last-child , #label-right  .widget  li :last-child , #label-bottom  .widget  li :last-child { border-bottom : none}

Notice in this line if you want to adjust the width of the widget

# label-left  .widget , # label-right  .widget { width : 47 %}
 # label-bottom  .widget { width : 97.3 %}

Then look up the following code:

< B: section  class = 'main'  id = 'main'  showaddelement = 'no' >
Bla bla bla .................... ...................
</ B: section >

When viewed as a whole to see the complete structure of the code is as follows:Note the code </ b: section> , if you have found copy and paste the following code right below the code.

< B: if  cond = 'data: blog.url == data:blog.homepageUrl' >  
< b:section  class = 'label-left'  id = 'label-left'  preferred = 'yes' /> 
< b:section  class = 'label-right'  id = 'label-right'  preferred = 'yes' /> 
< b:section  class = 'label-bottom'  id = 'label-bottom'  preferred = 'yes' /> 
</ b:if >

Now look at the page layout of the blog, there already are three elements widget. Then just plug the code contained in point 3 widget into HTML / Javascript. The last step Save and finish.