Cara Membuat Recent Post Berdasarkan Label Seperti EvoMagz Template

Posted on 2 views

Recent post adalah widget yang berfungsi untuk menampilkan sejumlah postingan terbaru dari sebuah blog. Recent post juga bisa diartikan dengan kata artikel terbaru/terhangat. Nah melalui artikel ini saya akan memberikan tutorial cara membuat widget recent post by label seperti ala evomagz template blogger buatan mas sugeng.

Cara Membuat Recent Post Berdasarkan Label Seperti EvoMagz Template
Recent post pada dasarnya bisa kita gunakan dimana saja, baik disidebar wrapper template, di bawah postingan template homepage maupun diatas postingan template homepage. Pada tutorial kali ini kita akan membuat artikel terbaru berdasarkan label yang terletak di bawah postingan homepage blog. 
Biasanya widget recent post yang diletakan di bawah atau diatas artikel halaman utama (homepage) ini digunakan pada template yang berkaitan dengan tema magazine (berita/majalah). Dan tujuannya recent post ini dibuat, alasannya tak lain lagi yakni membuat tampilan template agar lebih menarik dan kaya akan informasi karena dengan menggunakan widget artikel terbaru by label ini akan tampil perkategori disetiap widget. 
Desain widget recent post ini sangat lengkap dan keren pastinya yang dimana widget ini sudah dilengkap dengan banyak fitur mulai dari fitur gambar/thumbnail, snippet dan info mengenai komentar, tanggal publikasikan serta nama admin dari sipembuat postingan. Lalu bagaimana cara membuat widget recent post by label di blog? silahkan anda simak langkah-langkahnya pada berikut ini. 

Cara Memasang Widget Recent Post Berdasarkan Label ala EvoMagz Template

Seperti biasanya kalau kita membuat sebuah widget di blog maka masuklah terlebih dahulu ke dashboard blog anda. Karena widget artikel terbaru ini membutuhkan beberapa script agar widget bisa tampil maka kita harus memilih menu template > edit html.
Langkah pertama, Silahkan anda salin kode script css dibawah ini tepat diatas kode </style> atau ]]></b:skin>.

/* Recent Post */
.recent-post-title {
background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAaCAYAAACzdqxAAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAABiwAAAYsB4dDSvAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAATySURBVEiJbZV9jFRnFYef887szrpi2qXazUp3mfe9Y20xIaHYhETj8iVGaKCBUC0tVoQoGvwgITRKiGCU+hGxwaCGRE0gUtLSFlCIQHddmsa0icSmJhuWzL13d9yATSMbTAu7Ozv3+MeeC8PH/DVvTs7z/s457z0/UVUBFCCO450i8iOmf4NZli2sVCrvASRJ8mngNeAeYBx4LITQBzA0NPSRYrF4RkQWWO7PRVWxxGeBn1pgSER6vffvAlSr1XnOuT6gA5hwzq0ql8unAQYHB2e0tbX9FfiM5T4fQthaNOjWJmi1paVlcXd397sAaZrOdc69ZtBJYE0OvXz5cnupVPpLE3R/CGErgEvTdAuwF0BEkizLFnV3d18ypZ9S1T5gJlDPsuyJEMJJgNHR0Q9dv379zyLSa7kHQgjftguQOI4zQIARK38EYGRk5OFGozEA3A9MiciT3vujdmHJOXcCWGacP4YQNjbN6jvOoKOFQmFRDk2S5MFGo9Fn0Iaqrs+hg4ODrc65V3Koqh4KIWzKoUmSfFNEfuVU9ZKqLpo9e3ZqaiKgH+gCMhHZEEXREYDz58+3lEqll4DlpvRIFEUbgMzmsQnYD9Sdc25xFEVVK9875/4GzDIFm7z3hwAGBgaKHR0dR0RkpUGP1mq19UDDyv+qqh7IO9D83HqA14HZ0xXq5iiKDhikEMfxYRF5wgZ1/MqVK2vnz59ft9yngIOAs7Z+TlSVarX6QKFQOKeqwRK3eO/3G9QlSXIIWGfnk+Pj46vnzJkzaUq/JCJ/AgqqegnojaKoKrVa7eP1en0A+IQlbg0hPJ9D0zT9g6o+Y4M6raqrKpXKhCldAxwBisB/RGSh934IwNXr9f4cqqrbm6CSJMmBHAr0FQqFx3NotVpdBbxg0PeyLFuSQy9evDirCHzSyt8RQvhFE/Q3wEa78Fx7e/vKrq6ucVO6wjn3ItAiIv9V1SWVSmXQHkBXsVjsLxpol/d+j/0njuN9IrLZjm/MmDFjRWdn5zWA4eHhLwAvA63AmIgs9d7/CyBN005V7Qe8U9U9IYTdOTRJkr0issWUvlmv15d3dnZ+YLElWZYdA0rAVWBZuVx+21rzMfv8HwKyG8/NEn8GbLfjP4ClIYSrprQ3y7JTQDvwP+fcsnK5/BbAhQsX7mttbe0H5uZtzVtBHMc/FpHtFvhnoVBY1tPTc9Uu/Cxw0qDvq+oXc2itVusolUpnVXWuoXZ77/c4S/yhiOywwDsTExOf7+npGTOlC4BTwIeBayKyIoqiv1vePVNTU6dVdZ7lPhdC2JVP/weq+hML3O4ajwJnmXaN66r6WBRF/XCna6jqL6Mo2pZ3QOI4zpt8u2s8Yq5xLzAhIiu992fgTtcQkX3e++82tXVn3uO7ucZZg04Cq3PoXVzjd83QJEm+LyK7iiKSNBqNW1zDlM4E6iKy1nt/CqZdY3Jy8oZrAL8PIXwrh6Zpug3YA0wUgcWVSmXUBvWQQT8KTAFf9t6fsAtLzrljwGIr/6D3/uvcXPDfA/Ivd7h5bT4IDDC94Bsiss57/6L1tLWtre1Vbi74F0IIT3NzwW9R1V/nwlW115maW1wD+EoOvYtrHA0hrM+hcRx/Q1X3WaxmxvFvNzw8XHbO9TPtGpmqfi2EcBjudA0ROT42NrYOc400TTeKyG8x12g0GovK5fIwwP8B3DF1BfTENDEAAAAASUVORK5CYII=) repeat-x;
margin:0 0 15px;
padding:0;
position:relative;
}
.recent-post-title h2 {
font:normal bold 14px Arial, sans-serif;
height:26px;
line-height:26px;
margin:0 0;
padding:0 10px;
background:#FF4F4F;
color:#ffffff;
display:inline-block;
border-right:5px solid #fff;
transition:all 0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s;
}
.recent-post-title h2:hover {
background:#333333;
}
.recent-post-title h2 a {
color:#ffffff;
}
.recent-post-title h2 a:after {
content: "f18e";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-left:6px;
}
.sidebar .recent-post-title h2:after {
display:none;
}
.recent-post-one-thumb {
float:left;
width:50%;
margin:0 0;
}
.recent-post-one-thumb .widget {
padding:0 15px 15px 0;
}
.recent-post-one-thumb .widget-content {
background:#ffffff;
border:1px solid #f0f0f0;
padding:15px;
}
.recent-post-one-thumb ul {
list-style-type:none;
margin:0 0 0 0;
padding:0 0 0 0;
}
/* Recent Post */
ul.rp_thumbs {
margin:0 0 0 0;
}
ul.rp_thumbs li {
font-size:12px;
min-height:68px;
margin:0 0 8px;
padding:0 0 8px;
border-bottom:1px dotted #f0f0f0;
}
ul.rp_thumbs .rp_thumb {
position:relative;
background:#fbfbfb;
margin:3px 0 10px 0;
width:100%;
height:0;
padding-bottom:46%;
overflow:hidden;
}
ul.rp_thumbs .rp_thumb img {
height:auto;
width:100%;
}
ul.rp_thumbs2 {
font-size:13px;
}
ul.rp_thumbs2 li {
padding:0 0;
min-height:66px;
font-size:11px;
margin: 0 0 8px;
padding: 0 0 8px;
border-bottom:1px dotted #f0f0f0;
}
ul.rp_thumbs2 .rp_thumb2 {
background:#fbfbfb;
float:left;
margin:3px 8px 0 0;
height:60px;
width:60px;
}
ul.rp_thumbs2 li:last-child {
border-bottom:none;
padding-bottom:0px;
margin-bottom:0px;
}
ul.rp_thumbs2 .rp_thumb2 img {
height:60px;
width:60px;
}
.sidebar ul.rp_thumbs li:before, .sidebar ul.rp_thumbs2 li:before, #bottombar ul.rp_thumbs li:before, #bottombar ul.rp_thumbs2 li:before {
display:none;
}
span.rp_title {
font:normal normal 18px Open Sans Condensed, Helvetica, Arial, sans-serif;
display:block;
margin:0 0 5px;
line-height:1.4em;
}
span.rp_title a {
color:#EE4B3D;
}
span.rp_title a:hover {
color:#0072C6;
}
span.rp_title2 {
font-size:14px;
}
span.rp_summary {
display:block;
margin:6px 0 0;
}
span.rp_meta {
background:transparent;
display:block;
font-size:11px;
font-weight:bold;
color:#8D8D8D;
text-transform:uppercase;
}
span.rp_meta a {
color:#8D8D8D !important;
display:inline-block;
}
span.rp_meta_date, span.rp_meta_comment, span.rp_meta_more {
display:inline-block;
margin-right:8px;
}
span.rp_meta_date:before {
content: "f073";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-right:4px;
}
span.rp_meta_comment:before {
content: "f086";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-right:4px;
}
span.rp_meta_more:before {
content: "f0a9";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-right:4px;
}
ul.rp_thumbs2 li a:hover, ul.rp_thumbs li a:hover {
color:#0072C6;
}

Langkah kedua, silahkan tambahkan juga kode javascript dibawah ini tepat diatas kode </head>


<script type="text/javascript">
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var r,n=t.feed.entry[e],m=n.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<n.link.length;i++){if("replies"==n.link[i].rel&&"text/html"==n.link[i].type)var l=n.link[i].title,o=n.link[i].href;if("alternate"==n.link[i].rel){r=n.link[i].href;break}}var u;try{u=n.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=n.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);document.write('<ul class="rp_thumbs">'),document.write("
<li>"),1==showpostthumbnails&&document.write('<a href="'+r+'"><div class="rp_thumb">
<span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div>
</a>'),document.write('<span class="rp_title"><a href="'+r+'" target ="_top">'+m+"</a></span>");var g="";if(document.write('<span class="rp_meta">'),1==showpostdate&&(g=g+'<span class="rp_meta_date">'+f+"/"+_+"/"+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),showcomment='<span class="rp_meta_comment"><a href="'+o+'">'+l+"</a></span>",g+=showcomment),1==displaymore&&(g=g+'<span class="rp_meta_more"><a href="'+r+'" class="url" target ="_top">Read More...</a></span>'),document.write(g),document.write("</span>"),document.write('<span class="rp_summary">'),"content"in n)var v=n.content.$t;else if("summary"in n)var v=n.summary.$t;else var v="";var k=/<S[^>]*>/g;if(v=v.replace(k,""),1==showpostsummary)if(v.length<numchars)document.write(""),document.write(v),document.write("");else{document.write(""),v=v.substring(0,numchars);var y=v.lastIndexOf(" ");v=v.substring(0,y),document.write(v+"..."),document.write("")}document.write("</span>"),document.write("</li>
"),document.write("</ul>
")}document.write('<ul class="rp_thumbs2">');for(var e=1;e<numposts2;e++){var r,n=t.feed.entry[e],m=n.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<n.link.length;i++){if("replies"==n.link[i].rel&&"text/html"==n.link[i].type)var l=n.link[i].title,o=n.link[i].href;if("alternate"==n.link[i].rel){r=n.link[i].href;break}}var $;try{$=n.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),$=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=n.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+r+'"><div class="rp_thumb2">
<img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+$+'"/></div>
</a>'),document.write("
<li>"),document.write('<span class="rp_title rp_title2"><a href="'+r+'" target ="_top">'+m+"</a></span>");var g="";document.write('<span class="rp_meta rp_meta2">'),1==showpostdate2&&(g=g+'<span class="rp_meta_date rp_meta_date2">'+f+"/"+_+"/"+w+"</span>"),1==showcommentnum2&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),showcomment='<span class="rp_meta_comment rp_meta_comment2"><a href="'+o+'">'+l+"</a></span>",g+=showcomment),1==displaymore2&&(g=g+'<span class="rp_meta_more rp_meta_more2"><a href="'+r+'" class="url" target ="_top">Read More...</a></span>'),document.write(g),document.write("</span>"),document.write("</li>
")}document.write("</ul>
")}
//]]>
</script>
<script type="text/javascript">
var numposts = 1;
var numposts2 = 4;
var showpostthumbnails = true;
var showpostthumbnails2 = true;
var displaymore = true;
var displaymore2 = false;
var showcommentnum = true;
var showcommentnum2 = true;
var showpostdate = true;
var showpostdate2 = true;
var showpostsummary = true;
var numchars = 100;
var thumb_width = 300;
var thumb_height = 140;
var thumb_width2 = 60;
var thumb_height2 = 60;
var no_thumb = 'http://1.bp.blogspot.com/-7vDs5hMaDho/U268E2ecF4I/AAAAAAAADY8/RBHVTTuJrxc/w300-h140-c/no-image.png'
var no_thumb2 = 'http://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/s60-c/no-image.png'
</script>

Langkah ketiga, agar kita bisa menampilkannya dihalaman homepage blog maka kita perlu menambahkan kode tag conditional pada template blog. Silahkan anda tambahkan kode dibawah ini tepat diatas kode sidebar-wrapper atau di akhir penutug tag main-wrapper.

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<b:if cond='data:blog.searchLabel'><b:else/>

<b:section class='recent-post-one-thumb' id='recent-post-one-thumb-1' maxwidgets='1' preferred='yes' showaddelement='no'>

  <b:widget id='HTML80' locked='false' mobile='yes' title='Label 1' type='HTML' version='1' visible='true'>

    <b:includable id='main'>

<div class='widget-content recent-posts'>

 <script>

 document.write(&#39;&lt;div class=&quot;recent-post-title&quot;&gt;&lt;h2&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=10&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h2&gt;&lt;/div&gt;&#39;);

 document.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/<data:content/>?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs&quot;&gt;&lt;/script&gt;&quot;);

 </script>



</div>

</b:includable>

  </b:widget>

</b:section>

 

<b:section class='recent-post-one-thumb' id='recent-post-one-thumb-2' maxwidgets='1' preferred='yes' showaddelement='no'>

  <b:widget id='HTML81' locked='false' mobile='yes' title='Label 2' type='HTML' version='1' visible='true'>

    <b:includable id='main'>

<div class='widget-content recent-posts'>

 <script>

 document.write(&#39;&lt;div class=&quot;recent-post-title&quot;&gt;&lt;h2&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=10&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h2&gt;&lt;/div&gt;&#39;);

 document.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/<data:content/>?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs&quot;&gt;&lt;/script&gt;&quot;);

 </script>



</div>

</b:includable>

  </b:widget>

</b:section>



<div class='clear'/>



<b:section class='recent-post-one-thumb' id='recent-post-one-thumb-3' maxwidgets='1' preferred='yes' showaddelement='no'>

  <b:widget id='HTML82' locked='false' mobile='yes' title='Label 3' type='HTML' version='1' visible='true'>

    <b:includable id='main'>

<div class='widget-content recent-posts'>

 <script>

 document.write(&#39;&lt;div class=&quot;recent-post-title&quot;&gt;&lt;h2&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=10&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h2&gt;&lt;/div&gt;&#39;);

 document.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/<data:content/>?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs&quot;&gt;&lt;/script&gt;&quot;);

 </script>



</div>

</b:includable>

  </b:widget>

</b:section>

 

<b:section class='recent-post-one-thumb' id='recent-post-one-thumb-4' maxwidgets='1' preferred='yes' showaddelement='no'>

  <b:widget id='HTML83' locked='false' mobile='yes' title='Label 4' type='HTML' version='1' visible='true'>

    <b:includable id='main'>

<div class='widget-content recent-posts'>

 <script>

 document.write(&#39;&lt;div class=&quot;recent-post-title&quot;&gt;&lt;h2&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=10&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h2&gt;&lt;/div&gt;&#39;);

 document.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/<data:content/>?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs&quot;&gt;&lt;/script&gt;&quot;);

 </script>



</div>

</b:includable>

  </b:widget>

</b:section>

<div class='clear'/>



<b:section class='recent-post-one-thumb' id='recent-post-one-thumb-5' maxwidgets='1' preferred='yes' showaddelement='no'>

  <b:widget id='HTML84' locked='false' mobile='yes' title='Label 5' type='HTML' version='1' visible='true'>

    <b:includable id='main'>

<div class='widget-content recent-posts'>

 <script>

 document.write(&#39;&lt;div class=&quot;recent-post-title&quot;&gt;&lt;h2&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=10&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h2&gt;&lt;/div&gt;&#39;);

 document.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/<data:content/>?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs&quot;&gt;&lt;/script&gt;&quot;);

 </script>



</div>

</b:includable>

  </b:widget>

</b:section>

 

<b:section class='recent-post-one-thumb' id='recent-post-one-thumb-6' maxwidgets='1' preferred='yes' showaddelement='no'>

  <b:widget id='HTML85' locked='false' mobile='yes' title='Label 6' type='HTML' version='1' visible='true'>

    <b:includable id='main'>

<div class='widget-content recent-posts'>

 <script>

 document.write(&#39;&lt;div class=&quot;recent-post-title&quot;&gt;&lt;h2&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=10&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h2&gt;&lt;/div&gt;&#39;);

 document.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/<data:content/>?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs&quot;&gt;&lt;/script&gt;&quot;);
 </script>
</div>
</b:includable>
  </b:widget>
</b:section>
</b:if>
</b:if>

Pada langkah ini anda sudah bisa menampilkan recent post berdasarkan label di blog, namun untuk memasikannya silahkan anda simpan template anda kemudian buka menu tata letak tambahkan widget html/javascirpt pada widget dibawah postingan lalu isikan nama label dibagian judul dan isi html seperti gambar yang ada dibawah ini.

Semoga bermanfaat.


Leave a Reply

Your email address will not be published.