Featured Post yaitu menampilkan artikel Top atau biasa disebut menampilkan artikel per/label. Makara yang dimaksud Featured Post yaitu menampilkan artikel anda dengan label. Widget ini cocok sekali buat anda yang ingin menampilkan artikel usang menjadi Top di bab Home Page anda. Karena artikel usang sering sekali di abaikan oleh pengunjung blog anda, maka untuk itu biar artikel usang dapat terbacakan oleh pengunjung juga maka disarankan memasang widget ini. Widget ini sangat ringan, biasa nya dikala anda melihat Featured Post niscaya berbentuk Slide atau Featured Post bergerak, namun untuk kali ini berbeda, Featured Post kali ini hanya menampilkan satu gambar dan beberapa artikel anda sesuai dengan label yang ingin anda tampilkan.
Untuk widget ini sendiri belum responsive dibagian mobile, maka dari itu aku menon-aktifkan tampilan mobile dengan memasang instruksi tag condisional diatasnya. Namun untuk tampilan desktop widget ini sangat keren. Ok, pribadi saja ke proses pembuatan.
Cara Pertama :
1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema.
3. Edit HTML.
Proses Pembuatan :
1. Temukan instruksi </head>
2. Copy & Paste instruksi berikut ini, letakkan instruksi berikut ini sempurna diatas instruksi </head>
Untuk widget ini sendiri belum responsive dibagian mobile, maka dari itu aku menon-aktifkan tampilan mobile dengan memasang instruksi tag condisional diatasnya. Namun untuk tampilan desktop widget ini sangat keren. Ok, pribadi saja ke proses pembuatan.
Cara Membuat Top Featured Post di Blogger
Cara Pertama :
1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema.
3. Edit HTML.
Proses Pembuatan :
1. Temukan instruksi </head>
2. Copy & Paste instruksi berikut ini, letakkan instruksi berikut ini sempurna diatas instruksi </head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <style type='text/css'> /* Recent Post by Label */ .featured-postlabel1 ul,.featured-postlabel2 ul{list-style:none;margin:0;padding:0} .featured-postlabel1 li,.featured-postlabel2 li{margin:0;padding:0;} .featured-postlabel1 .widget,.featured-postlabel2 .widget{margin:0;padding:0} .featured-postlabel1 .widget-content,.featured-postlabel2 .widget-content{border: 1px solid #ddd;padding: 20px;word-wrap: break-word;overflow: hidden;color: #000;background: #fff;padding: 15px;border-radius: 2px;box-shadow: none;border: 1px solid #e6e6e6;margin: 10px;width: 90%;} .featured-postlabel1 h2,.featured-postlabel2 h2,.featured-postlabel3 h2{position: relative;margin: 20px 10px;padding: 15px 20px;font-size: 16px;font-weight: 700;text-transform: uppercase;color: #fff;border:1px solid #e9e9e9;border-bottom:0;width: 89%;background: #455a64;border-radius: 4px;width: 89%;} .featured-postlabel2 h2,.featured-postlabel3 h2{margin: 20px 10px;} .featured-postlabel1 h2:before,.featured-postlabel2 h2:before,.featured-postlabel3 h2:before{content:'\f108';right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;} .featured-postlabel2 h2:before{content:'\f0c3';}.featured-postlabel3 h2:before{content:'\f143';} .featured-postlabel1 .index,.featured-postlabel2 .index{font-size:10px;float:right;font-weight:400;} .featured-postlabel1 .index a,.featured-postlabel2 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6} .featured-postlabel2 .index a{color:#ef6c00;border-color:#ffa726} .featured-postlabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent} .featured-postlabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent} .featured-postlabel1 .index a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px} .featured-postlabel2 .index a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px} .featured-postlabel2 span.featured-post_meta_comment a:hover{color:#38761d!important} .featured-postlabel2 ul.featured-post_thumbs li a:hover,.featured-postlabel2 ul.featured-post_thumbs2 li a:hover{color:#ff675c;text-decoration:none} .featured-post_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9} .featured-post_right{width:250px;width:47.5%;float:right;margin:0;padding:0} ul.featured-post_thumbs{margin:0;padding:0} ul.featured-post_thumbs li,ul.featured-post_thumbs2{margin:0;padding:0} ul.featured-post_thumbs .featured-thumbnail{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px} ul.featured-post_thumbs .featured-thumbnail img{height:auto;width:100%;transition:all 0.2s} ul.featured-post_thumbs .featured-thumbnail img:hover{opacity:.9;} ul.featured-post_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9} ul.featured-post_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0} ul.featured-post_thumbs2 .featured-thumbnail2{float:left;margin:0 10px 0 0;width:62px;height:72px;overflow:hidden} ul.featured-post_thumbs2 .featured-thumbnail2 img{height:auto;transition:all .2s} ul.featured-post_thumbs2 .featured-thumbnail2 img:hover{opacity:.9;} span.featured-post_title{font-family:'Roboto Condensed',sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none} span.featured-post_title2{font-size:16px;line-height:1.4em;margin:0 0 3px} span.featured-post_title a{color:#333} span.featured-post_title a:hover{color:#ff675c;text-decoration:none} span.featured-post_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0} span.featured-post_meta{display:block;font-family:'Roboto Condensed',sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase} span.featured-post_meta a{color:#aaa;display:inline-block} span.featured-post_meta_date,span.featured-post_meta_comment,span.featured-post_meta_more{display:inline-block;margin-right:10px} span.featured-post_meta_comment a:before{content:"\f0e6";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px} span.featured-post_meta_comment a:hover{color:#ff675c!important} span.featured-post_meta_date:before{content:"\f133";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px} ul.featured-post_thumbs2 li a:hover,ul.featured-post_thumbs li a:hover{color:#ff675c;text-decoration:none} @media screen and (max-width:1024px) { .featured-postlabel1 .widget-content, .featured-postlabel2 .widget-content {padding:20px 25px;} .featured-post_left {width:50%;float:left;margin:0;padding:0;border-right:none} .featured-post_right {width:46%;float:right;margin:0;padding:0;} ul.featured-post_thumbs .featured-thumbnail {width:100%;height:auto;} ul.featured-post_thumbs .featured-thumbnail img {width:100%;height:auto;} ul.featured-post_thumbs li {margin:0;padding:0;} span.featured-post_title2 {font-size:20px;line-height:1.2em;} span.featured-post_summary {font-size:14px;}} @media only screen and (max-width:768px){ .featured-postlabel1 .widget-content,.featured-postlabel2 .widget-content{padding:10px 20px} .featured-post_right{width:100%;float:left;margin:0;padding:0} ul.featured-post_thumbs2 li{border-bottom:0} span.featured-post_summary,.featured-post_left{display:none} span.featured-post_title{margin:0 0 5px} ul.featured-post_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0} span.featured-post_title2{font-size:18px;line-height:1.2em}} @media only screen and (max-width:480px){ #featured-postlabel1-wrapper,#featured-postlabel2-wrapper{display:none}} @media only screen and (max-width:320px){ .featured-postlabel1 .widget-content,.featured-postlabel2 .widget-content{padding:10px 20px} .featured-postlabel1 h2,.featured-postlabel2 h2{padding:10px 20px 1px 20px} .featured-post_right{width:100%;float:left;margin:0;padding:0} ul.featured-post_thumbs li{margin:0 0 10px;padding:0 0 10px;} span.featured-post_title2{font-size:18px;line-height:1.2em}} @media screen and (max-width:260px) { .featured-postlabel1 .widget-content,.featured-postlabel2 .widget-content{padding:10px} .featured-postlabel1 h2,.featured-postlabel2 h2{padding:10px 10px 1px 10px} .featured-post_right{width:100%;float:left;margin:0;padding:0} ul.featured-post_thumbs li{margin:0 0 10px;padding:0 0 10px;} span.featured-post_title2{font-size:18px;line-height:1.2em}} </style> </b:if> </b:if> </b:if> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <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="featured-post_left">'),document.write('<ul class="featured-post_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="featured-thumbnail"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt=" Featured Post yaitu menampilkan artikel Top atau biasa disebut menampilkan artikel per Cara Membuat Top Featured Post di Blogger" src="'+u+'"/></div></a>'),document.write('<span class="featured-post_title"><a href="'+n+'" sasaran ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="featured-post_meta">'),1==showpostdate&&(v=v+'<span class="featured-post_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="featured-post_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="featured-post_meta_more"><a href="'+n+'" class="url" sasaran ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="featured-post_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="featured-post_right">'),document.write('<ul class="featured-post_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="featured-thumbnail2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt=" Featured Post yaitu menampilkan artikel Top atau biasa disebut menampilkan artikel per Cara Membuat Top Featured Post di Blogger" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="featured-post_title featured-post_title2"><a href="'+n+'" sasaran ="_top">'+m+"</a></span>");var v="";document.write('<span class="featured-post_meta featured-post_meta2">'),1==showpostdate2&&(v=v+'<span class="featured-post_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="featured-post_meta_comment featured-post_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="featured-post_meta_more featured-post_meta_more2"><a href="'+n+'" class="url" sasaran ="_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=6,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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWeYpX8_SxpTwf0uVg2jR4v0BryjssqDtcbFP-ctk6Svl4DpGVusGOzgW4NCObqNDWnOSfkk3fGMuDZLT8gR08-MBTlXb3EgxP8dJ2XxEyBb8oduXju-CHPHbwwPFPlUWWf2AC0djp7kxC/s1600/featured-post_thumb.png",no_thumb2="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjNfuUoRHNXoO315zg1SpvAr9hNZqDRFp8JkugR3_fzrlL5FQkrYPox7TO4Zo3KeGVz5mqZrkKewPMaiAnVhxjI6ym4bBscNea-BQK9ASuMTC4E2OhWnT3QnRtlSpYCow0dTV6BYvY4o1/s1600/featured-postthumb_small.png"; </script> </b:if> </b:if>3. Temukan lagi kode <div class='post-container'> atau <div id='content-wrapper'>
Jika anda ingin menampilkan widget ini sempurna dibawah hidangan header anda, maka letakkan instruksi berikut ini sempurna dibawah nya, Ok!
Jika anda galau mencari kodenya, silakan cari instruksi memakai (CTRL + F) Menu Header anda yang sudah dipasang, lalu letakkan dibawahnya, simple!
<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='featured-postlabel1-wrapper'> <b:section class='featured-postlabel1' id='featured-postlabel1' maxwidgets='1' showaddelement='yes'> <b:widget id='HTML81' locked='false' title='BAHASA' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'>Bahasa Indonesia</b:widget-setting> </b:widget-settings> <b:includable id='main'> <h2><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>View All</a></span><data:content/></h2> <div class='widget-content'> <script> document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>"); </script> </div> </b:includable> </b:widget> </b:section> </div> <div id='featured-postlabel2-wrapper'> <b:section class='featured-postlabel2' id='featured-postlabel2' maxwidgets='1' showaddelement='yes'> <b:widget id='HTML80' locked='false' title='BAHASA INGGRIS' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'>Bahasa Indonesia</b:widget-setting> </b:widget-settings> <b:includable id='main'> <h2><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>View All</a></span><data:content/></h2> <div class='widget-content'> <script> document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>"); </script> </div> </b:includable> </b:widget> </b:section> </div> </b:if>6. Buka Tata Letak - Kemudian pilih gadget yang berada di atas blogpost atau posting blog.
Screenshoot :
8. Simpan Template!
Demikian Tutorial kali ini, jikalau anda mengalami kesulitan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat home page anda apakah widget tersebut udah muncul atau belum. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Top Featured Post di Blogger
