Featured Post Posting Terbaru Per Label dengan Gambar Thumbnail V2

Baca Juga

Cara Membuat Widget Featured Post Posting Terbaru Per Label dengan Gambar Thumbnail V2

WIDGET ini mirip dengan Featured Post Posting Terbaru Per Label dengan Gambar Thumbnail yang sudah dishare sebelumnya.

Bedanya, Versi 2 ini hanya satu thumnbail besar, sisanya hanya berupa judul posting seperti penampakan berikut ini:

Widget Featured Posts ini berdasarkan Label. Artinya, posting yang mau ditampilkan di sana, tinggal ditambahkan label baru Featured.

Cara Membuat Featured Post Posting Terbaru V2

1. Template > Edit HTML JS
2. Pastikan di template Anda sudah ada kode jQuery mins seperti ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

Jika belum ada, pasang kode tersebut di atas kode </head>

** Pastikan juga di template Anda sudah terpasang link ke CSS Font Awesome.

3. Copas kode berikut ini di atas </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.featuredpost ul{list-style:none;margin:0;padding:0}
.featuredpost li{margin:0;padding:0;}
.featuredpost .widget{margin:0;padding:0}
.featuredpost .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden}
.featuredpost h2{position:relative;margin:0;padding:15px 20px;font-size:16px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0;background: #fafafc;}
.featuredpost h2:before{content:&#39;\f115&#39;;right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#333;}
.featuredpost .index{font-size:10px;float:right;font-weight:400;}
.featuredpost .index a{flex;
    color: #181818;
    padding: 3px 8px;
    border-radius: 2px;
    font-weight: 400;
    font-size: 14px;}
.featuredpost .index a:hover{background:#039be5;color:#fff;border-color:transparent}
.featuredpost .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
.new_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9}
.new_right{width:250px;width:47.5%;float:right;margin:0;padding:0}
ul.new_thumbs{margin:0;padding:0}
ul.new_thumbs li,ul.new_thumbs2{margin:0;padding:0}
ul.new_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:250px;height:200px}
ul.new_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s}
ul.new_thumbs .cat_thumb img:hover{opacity:.9;}
ul.new_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9}
ul.new_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.new_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;width:62px;height:72px;overflow:hidden}
ul.new_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s}
ul.new_thumbs2 .cat_thumb2 img:hover{opacity:.9;}
span.new_title{font-family:&#39;Oswald&#39;,sans-serif;font-size:20px;font-weight:500;display:block;margin:0 0 10px;line-height:normal;text-transform:none}
span.new_title2{font-size:15px;line-height:1.4em;margin:0 0 3px;font-family:inherit;}
span.new_title a{color:#555}
span.new_title a:hover{color:#ff675c;text-decoration:none}
span.new_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}
span.new_meta{display:none;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.new_meta a{color:#aaa;display:inline-block}
span.new_meta_date,span.new_meta_comment,span.new_meta_more{display:inline-block;margin-right:10px}
span.new_meta_comment a:before{content:&quot;\f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
span.new_meta_comment a:hover{color:#ff675c!important}
span.new_meta_date:before{content:&quot;\f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
ul.new_thumbs2 li a:hover,ul.new_thumbs li a:hover{color:#ff675c;text-decoration:none}
@media screen and (max-width:1024px) {
.featuredpost .widget-content {padding:20px 25px;}
.new_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.new_right {width:46%;float:right;margin:0;padding:0;}
ul.new_thumbs .cat_thumb {width:100%;height:auto;}
ul.new_thumbs .cat_thumb img {width:100%;height:auto;}
ul.new_thumbs li {margin:0;padding:0;}
span.new_title2 {font-size:20px;line-height:1.2em;}
span.new_summary {font-size:14px;}}
@media only screen and (max-width:768px){
.featuredpost .widget-content {padding:10px 20px}
.new_right{width:100%;float:left;margin:0;padding:0}
ul.new_thumbs2 li{border-bottom:0}
span.new_summary,.new_left{display:none}
span.new_title{margin:0 0 5px}
ul.new_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}
span.new_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:480px){
#featuredpost-wrapper {display:none}}
@media only screen and (max-width:320px){
.featuredpost .widget-content {padding:10px 20px}
.featuredpost h2 {padding:10px 20px 1px 20px}
.new_right{width:100%;float:left;margin:0;padding:0}
ul.new_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.new_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px) {
.featuredpost .widget-content {padding:10px}
.featuredpost h2 {padding:10px 10px 1px 10px}
.new_right{width:100%;float:left;margin:0;padding:0}
ul.new_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.new_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.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=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December",document.write('<span class="new_left">'),document.write('<ul class="new_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="new_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="new_meta">'),1==showpostdate&&(v=v+'<span class="new_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="new_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="new_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="new_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="new_right">'),document.write('<ul class="new_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="new_title new_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="new_meta new_meta2">'),1==showpostdate2&&(v=v+'<span class="new_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="new_meta_comment new_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="new_meta_more new_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")}
//]]>
</script>
<script type='text/javascript'>
var numposts=1,numposts2=7,showpostthumbnails=!0,showpostthumbnails2=!1,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=280,thumb_height=200,thumb_width2=62,thumb_height2=62,no_thumb=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMcAg4d65Iy3JsnnShoa27-XVCPr3e4sT69yCADrYbWTFMyHYdtm2WW7Gzu7A0KiINlXieBUGe2kVX8ZJVWmogFe66lDJvmGieI7eHIQfoWP2oag-5IC3gIQ6Li60YycqOL5v3s69SBG6K/s220-Ic42/noimage.png&quot;,no_thumb2=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjozA-how8AQS8P7yKSonuzGpptv1n3ccWk6hhdPhH-EvHUexfsfUyxfdBD9Fkqq7FpiQkV-FWnkG8GcI1E_RXhWirnyZFEZf0KgDLPKE31lA0sYkIiPALNpKCjkXEQzzpqcpEYCAiXMeLk/s110-Ic42/no-image-small.jpg&quot;;
</script>
</b:if>
</b:if>

4. Copas kode berikut ini di bawah kode <div id='main-wrapper'> atau yang semisalnya:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='featuredpost-wrapper' style='margin-bottom: 15px;'>
        <b:section class='featuredpost' id='Featured Posts' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML80' locked='true' title='Featured Posts' type='HTML'>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;Index&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
</b:if>

5. Save Template!
6. Klik "Layout" dan Refresh (Tekan F5). Akan muncul gadget baru seperti ini:

7. Klik "Edit" widget  Featured Post
8. Masukkan Nama Label: Featured

9. Save!

Beres. Good Luck! (http://www.contohblog.com).*