Berikut ini cara menciptakan Widget Featured Recent Post Per Kategori (Label) ala Template Magazine Style. Maksudnya, menampilkan posting terbaru menurut label, dengan tampilan featured post seakan-akan desain template magazine style atau situs berita, di halaman depan blog.

Ini penampakannya.

Berikut ini cara menciptakan Widget Featured Recent Post Per Kategori  Cara buat blog itu- Cara Membuat Widget Featured Recent Post Per Kategori ala Template Magazine Style


Dengan memasang arahan berikut ini, template blog simple Anda akan menjadi magazine style, dengan menyembunyikan posting terbaru blog style di halaman depan.

Cara Membuat Widget Featured Recent Post Per Kategori

1. Klik Tema > Edit HTML
2. Copas arahan Featured Recent Post Per Kategori (Label) berikut ini di atas arahan </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#Blog1,.latest-post-title {display:none}#label1-wrapper {width:100%;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:10px 0;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:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px;}
.label1 h2 {margin:5px 0;padding:0;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:normal;color:#666;}
#label2-wrapper {width:100%;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:10px 0;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:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;}
.label2 h2 {margin:5px 0;padding:0;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:46.5%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #f1f1f1;}
.cat_right {width:46.5%;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:15px;line-height:normal;margin:0 0 3px;}
span.cat_title a {color:#666;}
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:&quot;\f0e6&quot;;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:&quot;\f073&quot;;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>
<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 = &#39;http://2.bp.blogspot.com/-oOJ3avtW_6M/VK4XLkhFUyI/AAAAAAAAAwo/Jq6J61f8GrY/s1600/cat_thumb.png&#39;;
var no_thumb2 = &#39;http://3.bp.blogspot.com/-H17OhbrA4gU/VKJmgnXF9dI/AAAAAAAAAp8/ZPt_FdZTRcw/s1600/thumb_small.png&#39;;
</script>
  </b:if>

Kode warna merah yaitu untuk menyembunyikan postingan normal di halaman depan. Jika mau menampilkannya, hapus arahan tersebut.

3. Copas arahan HTML Featured Recent Post Per Kategori (Label) berikut ini di atas  kode <b:section class='main' id='main' showaddelement='no'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='label1-wrapper'>
        <b:section class='label1' id='label1' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML11' locked='true' title='News' type='HTML' version='1'>
            <b:widget-settings>
              <b:widget-setting name='content'>News</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=6&#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>
      <div id='label2-wrapper'>
        <b:section class='label2' id='label2' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML12' locked='true' title='Sports' type='HTML' version='1'>
            <b:widget-settings>
              <b:widget-setting name='content'>Sports</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=6&#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>

Kode di atas menampilkan label News dan Sports. Anda dapat menggantinya dengan langkah keempat berikut ini.

4. Klik Layout > Edit widget yang ada di atas Blog Post
5. Masukkan nama Label yang akan ditampilkan
6. Save!

Beres. Demikian Cara Membuat Widget Featured Recent Post Per Kategori (Label) ala Template Magazine Style.

Good Luck & Happy Blogging! (carabuatblogitu.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours