Cara Memasang Featured Post Berdasarkan Label
Featured post atau banyak yang bilang recent post berdasarkan label di blog merupakan postingan artikel berdasarkan label.
Featured post ini sangat penting berada didalam blog, selain untuk melengkapi tampilan blog, featured post juga berfungsu untuk mempermudah pengunjung untuk mencari informasi yang ingin dicari. Jadii para pengunjung tidak perlu untuk mencari dengan ribet, sedangkan featured post label sudah tertera postingan blog.
Oke jadi, untuk itu mari simak apa aja yang harus dilakukan sobat
Cara Membuat Featured Post Berdasarkan Label
Tahap Pertama :
1. Login ke Blogger
2. Klik ke Tema > Edit HTML
3. Masukkan CSS dibawah ini, Tepat diatas kode </head>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
#label1-wrapper {width: 670px;float: left;word-wrap: break-word;overflow: hidden;}
.label1 {color:#666;line-height: 1.5em;}
.label1 ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.label1 li {margin:0;padding:0;line-height:1.5em;}
.label1 .widget {margin:0;padding:0;}
.label1 .widget-content {border-bottom:1px solid #ddd;padding:20px;margin:0;word-wrap:break-word;overflow:hidden;}
.label1 .index {font-size:12px;float:right;font-weight:700;letter-spacing:normal;}
.label1 .index a {color:#fff;background:#666;padding:3px 10px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-khtml-border-radius:2px;}
.label1 .index a:hover {background:#333;text-decoration:none;}
.label1 .index a:after {content:"f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px;}
.label1 h2 {margin:0;padding:20px 20px 1px 20px;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:normal;color:#666;}
#label2-wrapper {width: 670px;float: left;word-wrap: break-word;overflow: hidden;}
.label2 {color:#666;line-height:1.5em;}
.label2 ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.label2 li {margin:0;padding:0;line-height:1.5em;}
.label2 .widget {margin:0;padding:0;}
.label2 .widget-content {border-bottom:1px solid #ddd;padding:20px;margin:0;word-wrap:break-word;overflow:hidden;}
.label2 .index {font-size:12px;float:right;font-weight:700;letter-spacing:normal;}
.label2 .index a {color:#fff;background:#666;padding:4px 10px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-khtml-border-radius:2px;}
.label2 .index a:hover {background:#333;text-decoration:none;}
.label2 .index a:after {content:"f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;}
.label2 h2 {margin:0;padding:20px 20px 1px 20px;font:Arial;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:normal;color:#666;}
.label2 span.cat_meta_comment a:hover {color:c00!important;}
.label2 ul.cat_thumbs li a:hover, .label2 ul.cat_thumbs2 li a:hover {color:#c00;text-decoration:none;}
.cat_left {width:300px;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #ddd;}
.cat_right {width:290px;float:right;margin:0;padding:0;}
ul.cat_thumbs {margin:0;padding:0;}
ul.cat_thumbs li {margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {position:relative;margin:0 0 15px;padding:0;width:300px;height:220px;}
ul.cat_thumbs .cat_thumb img {height:auto;width:100%;-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;transition: all 0.2s ease-in;}
ul.cat_thumbs .cat_thumb img:hover {opacity: 0.7;filter: alpha(opacity=70);}
ul.cat_thumbs2 {margin:0;padding:0;}
ul.cat_thumbs2 li {margin:0 0 10px;padding:0 0 10px;border-bottom:1px dotted #ddd;min-height:70px;}
ul.cat_thumbs2 li:last-child {border-bottom:none;margin:0 0 0;padding:0 0 0;}
ul.cat_thumbs2 .cat_thumb2 {float:left;margin:0 15px 10px 0;width:100px;height:75px;}
ul.cat_thumbs2 .cat_thumb2 img {width:100px;height:75px;-webkit-transition: all 0.2s ease-in;-moz-transition: all 0.2s ease-in;-o-transition: all 0.2s ease-in;transition: all 0.2s ease-in;}
ul.cat_thumbs2 .cat_thumb2 img:hover {opacity: 0.7;filter: alpha(opacity=70);}
span.cat_title {font:Arial;font-size:22px;font-weight:700;display:block;margin:0 0 5px;line-height:1.2em;text-transform:none;}
span.cat_title2 {font-size:16px;line-height:1.4em;margin:0 0 3px;}
span.cat_title a {color:#333;}
span.cat_title a:hover {color:#c00;text-decoration:none;}
span.cat_summary {line-height:1.6em;display:block;margin:5px 0 0;color:#333;font-size:12px;font-weight:400;}
span.cat_meta {display:block;font:#ddd;font-size:11px;font-weight:400;color:#888;text-transform:uppercase;}
span.cat_meta a {color:#666!important;display:inline-block;}
span.cat_meta_date, span.cat_meta_comment, span.cat_meta_more {display:inline-block;margin-right:10px;}
span.cat_meta_comment a:before {content:"f0e6";font-family: FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px;}
span.cat_meta_comment a:hover {color:#ddd!important;}
span.cat_meta_date:before {content:"f073";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px;}
ul.cat_thumbs2 li a:hover, ul.cat_thumbs li a:hover {color:#c00;text-decoration:none;}
@media screen and (max-width:1024px) {
#label1-wrapper, #label2-wrapper {width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:20px 25px;}
.label1 h2, .label2 h2 {padding:20px 25px 1px 25px;}
.cat_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:46%;float:right;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {width:100%;height:auto;}
ul.cat_thumbs .cat_thumb img {width:100%;height:auto;}
ul.cat_thumbs li {margin:0;padding:0;}
span.cat_title2 {font-size:20px;line-height:1.2em;}
span.cat_summary {font-size:14px;}
}
@media screen and (max-width:768px) {
#label1-wrapper, #label2-wrapper {width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:10px 20px;}
.label1 h2, .label2 h2 {padding:10px 20px 1px 20px;}
.cat_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:46%;float:right;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {width:100%;height:auto;}
ul.cat_thumbs .cat_thumb img {width:100%;height:auto;}
ul.cat_thumbs li {margin:0;padding:0;}
span.cat_title2 {font-size:18px;line-height:1.2em;}
}
@media screen and (max-width:640px) {
#label1-wrapper, #label2-wrapper {width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:10px 20px;}
.label1 h2, .label2 h2 {padding:10px 20px 1px 20px;}
.cat_left {width:100%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:100%;float:left;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {float:right;margin:0 0 0 15px;width:200px;height:auto;}
ul.cat_thumbs .cat_thumb img {height:auto;width:200px;}
ul.cat_thumbs li {margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #ccc;}
span.cat_title2 {font-size:18px;line-height:1.2em;}
}
@media screen and (max-width:480px) {
#label1-wrapper, #label2-wrapper {width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:10px 20px;}
.label1 h2, .label2 h2 {padding:10px 20px 1px 20px;}
.cat_left {width:100%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:100%;float:left;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {margin:0 0 10px;width:100%;height:auto;}
ul.cat_thumbs .cat_thumb img {height:auto;width:100%;}
ul.cat_thumbs li {margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #ccc;}
span.cat_title2 {font-size:18px;line-height:1.2em;}
}
@media screen and (max-width:320px) {
#label1-wrapper, #label2-wrapper {width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:10px 20px;}
.label1 h2, .label2 h2 {padding:10px 20px 1px 20px;}
.cat_left {width:100%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:100%;float:left;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {margin:0 0 10px;width:100%;height:auto;}
ul.cat_thumbs .cat_thumb img {height:auto;width:100%;}
ul.cat_thumbs li {margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #ccc;}
span.cat_title2 {font-size:18px;line-height:1.2em;}
}
@media screen and (max-width:260px) {
#label1-wrapper, #label2-wrapper{width:100%;margin:0;padding:0;border:none;background:none;}
.label1 .widget-content, .label2 .widget-content {padding:10px;}
.label1 h2, .label2 h2 {padding:10px 10px 1px 10px;}
.cat_left {width:100%;float:left;margin:0;padding:0;border-right:none}
.cat_right {width:100%;float:left;margin:0;padding:0;}
ul.cat_thumbs .cat_thumb {margin:0 0 10px;width:100%;height:auto;}
ul.cat_thumbs .cat_thumb img {height:auto;width:100%;}
ul.cat_thumbs li {margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #ccc;}
span.cat_title2 {font-size:18px;line-height:1.2em;}
}
</style>
</b:if>
</b:if>
Tahap Kedua :
1. Cari kode <div id='main-wrapper'> dan semisalnya
2. Letakkan kode dibawah ini, Tepat diatas kode <div id='main-wrapper'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='label1-wrapper'>
<b:section class='label1' id='Chayaeducation Label 1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML35' locked='true' title='Blogging' type='HTML' version='1' visible='true'>
<b:includable id='main'>
<h2><span class='index'><a href='/search/label/<data:content/>?&max-results=6'>Index</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='label2-wrapper'>
<b:section class='label2' id='Chayaeducation label 2' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML36' locked='true' title='Tips' type='HTML' version='1' visible='true'>
<b:includable id='main'>
<h2><span class='index'><a href='/search/label/<data:content/>?&max-results=6'>Index</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>
Tahap Ketiga :
1. Cari kode </head>
2. Masukkan Javascript dibawah ini, Tepat diatas kode </head>
SAVE TEMPLATE<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('b'+e(c)+'b','g'),k[c]);return p}('1D 1E(w){N(i v=0;v<1F;v++){i f=w.O.P[v];i g=f.Q.$t;i z;D(v==w.O.P.L){R}N(i t=0;t<f.F.L;t++){D(f.F[t].T=="18"&&f.F[t].19=="1a/1b"){i n=f.F[t].Q;i o=f.F[t].G}D(f.F[t].T=="1c"){z=f.F[t].G;R}}i j;1d{j=f.1e$1f.U;j=j.17("/1g-c/","/w"+1h+"-h"+1i+"-c/")}1j(r){s=f.V.$t;a=s.J("<W");b=s.J('X="',a);c=s.J('"',b+5);d=s.1k(b+5,c-b-5);D((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){j=d}M{j=1G}}i x=f.1l.$t;i m=x.I(0,4);i l=x.I(5,7);i u=x.I(8,10);i h=1H 1I();h[1]="1J";h[2]="1K";h[3]="1L";h[4]="1M";h[5]="1N";h[6]="1O";h[7]="1P";h[8]="1Q";h[9]="1R";h[10]="1S";h[11]="1T";h[12]="1U";k.B('<C E="1V">');k.B('<Y E="1W">');k.B("<Z>");D(1X==H){k.B('<a G="'+z+'"><13 E="1Y"><C E="1Z"></C><W 1m="'+1h+'" 1n="'+1i+'" 1o="'+g+'" X="'+j+'"/></13></a>')}k.B('<C E="1p"><a G="'+z+'" 14 ="15">'+g+"</a></C>");i A="";k.B('<C E="1q">');D(20==H){A=A+'<C E="1r">'+h[1s(l)]+" "+u+", "+m+"</C>"}D(21==H){D(n=="1 K"){n="1 K"}D(n=="0 K"){n="0 K"}16='<C E="1t"><a G="'+o+'">'+n+"</a></C>";A=A+16}D(22==H){A=A+'<C E="1u"><a G="'+z+'" E="U" 14 ="15">1v 1w...</a></C>'}k.B(A);k.B("</C>");k.B('<C E="23">');D("V"1x f){i y=f.V.$t}M{D("1y"1x f){i y=f.1y.$t}M{i y=""}}i p=/<S[^>]*>/g;y=y.17(p,"");D(24==H){D(y.L<1z){k.B("");k.B(y);k.B("")}M{k.B("");y=y.I(0,1z);i e=y.25(" ");y=y.I(0,e);k.B(y+"...");k.B("")}}k.B("</C>");k.B("</Z>");k.B("</Y>");k.B("</C>")}k.B('<C E="26">');k.B('<Y E="27">');N(i v=1;v<28;v++){i f=w.O.P[v];i g=f.Q.$t;i z;D(v==w.O.P.L){R}N(i t=1;t<f.F.L;t++){D(f.F[t].T=="18"&&f.F[t].19=="1a/1b"){i n=f.F[t].Q;i o=f.F[t].G}D(f.F[t].T=="1c"){z=f.F[t].G;R}}i q;1d{q=f.1e$1f.U.17("/1g-c/","/w"+1A+"-h"+1B+"-c/")}1j(r){s=f.V.$t;a=s.J("<W");b=s.J('X="',a);c=s.J('"',b+5);d=s.1k(b+5,c-b-5);D((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){q=d}M{q=29}}i x=f.1l.$t;i m=x.I(0,4);i l=x.I(5,7);i u=x.I(8,10);D(2a==H){k.B('<a G="'+z+'"><13 E="2b"><W 1m="'+1A+'" 1n="'+1B+'" 1o="'+g+'" X="'+q+'"/></13></a>')}k.B("<Z>");k.B('<C E="1p 2c"><a G="'+z+'" 14 ="15">'+g+"</a></C>");i A="";k.B('<C E="1q 2d">');D(2e==H){A=A+'<C E="1r">'+h[1s(l)]+" "+u+", "+m+"</C>"}D(2f==H){D(n=="1 1C"){n="1 K"}D(n=="0 1C"){n="0 K"}16='<C E="1t 2g"><a G="'+o+'">'+n+"</a></C>";A=A+16}D(2h==H){A=A+'<C E="1u 2i"><a G="'+z+'" E="U" 14 ="15">1v 1w...</a></C>'}k.B(A);k.B("</C>");k.B("</Z>")}k.B("</Y>");k.B("</C>")};',62,143,'||||||||||||||||||var||document|||||||||||||||||write|span|if|class|link|href|true|substring|indexOf|Comments|length|else|for|feed|entry|title|break||rel|url|content|img|src|ul|li||||div|target|_top|showcomment|replace|replies|type|text|html|alternate|try|media|thumbnail|s72|thumb_width|thumb_height|catch|substr|published|width|height|alt|cat_title|cat_meta|cat_meta_date|parseInt|cat_meta_comment|cat_meta_more|Read|More|in|summary|numchars|thumb_width2|thumb_height2|Comment|function|labelthumbs|numposts|no_thumb|new|Array|January|February|March|April|May|June|July|August|September|October|November|December|cat_left|cat_thumbs|showpostthumbnails|cat_thumb|rollover|showpostdate|showcommentnum|displaymore|cat_summary|showpostsummary|lastIndexOf|cat_right|cat_thumbs2|numposts2|no_thumb2|showpostthumbnails2|cat_thumb2|cat_title2|cat_meta2|showpostdate2|showcommentnum2|cat_meta_comment2|displaymore2|cat_meta_more2'.split('|'),0,{}))
//]]>
</script>
<script type='text/javascript'>
var numposts = 1;
var numposts2 = 5;
var showpostthumbnails = true;
var showpostthumbnails2 = true;
var displaymore = false;
var displaymore2 = false;
var showcommentnum = false;
var showcommentnum2 = false;
var showpostdate = false;
var showpostdate2 = false;
var showpostsummary = true;
var numchars = 150;
var thumb_width = 300;
var thumb_height = 220;
var thumb_width2 = 100;
var thumb_height2 = 75;
var no_thumb = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgtjz-ljgLhOXEm1VrddMHFAI66erxySK73Tre_dWPprI2kXgqcZAzt49Kn8F62F6cfj9-oe3ZqTz1UN8qEZvZl8jIGYE71KM3bZk0kyOsE_DiEFG8X7r99_mEiJ66yS7aSsAkArObjJk/s1600/cat_thumb.png';
var no_thumb2 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR3BETpD74jdLRNh0AxlI648BFhHATxq_1ytODe4vVW3uQzih_nH9wSc1M1dPovAlJ39tYNKqL7eG62zPFhkhae5AYf2ZLoUEhyZ9PRJpwIYCYNDi-c2fdXJZciIUoFCym-ZuEenGviwM/s1600/thumb_small.png';
</script>
Tahap Selanjutnya :
1. Lihat ke Tata letak > Edit Labelnya > Masukkan Nama Label
Atau Lihat Gambar dibawah ini
Dah Selesai Sobat.
Okee kemungkinan itu saja yang bisa admin bagikan pada saat ini, sampai bertemu dibanyak tutorial lainnya sobat, Semoga bisa bermanfaat.
Komentar
Posting Komentar