» » » Cara Membuat Top Featured Post di Blogger

Cara Membuat Top Featured Post di Blogger

0 Viewers ,
Featured Post adalah menampilkan artikel Top atau biasa disebut menampilkan artikel per/label. Jadi yang dimaksud Featured Post adalah menampilkan artikel anda dengan label. Widget ini cocok sekali buat anda yang ingin menampilkan artikel lama menjadi Top di bagian Home Page anda. Karena artikel lama sering sekali di abaikan oleh pengunjung blog anda, maka untuk itu agar artikel lama bisa terbacakan oleh pengunjung juga maka disarankan memasang widget ini. Widget ini sangat ringan, biasa nya ketika anda melihat Featured Post pasti 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 saya menon-aktifkan tampilan mobile dengan memasang kode tag condisional diatasnya. Namun untuk tampilan desktop widget ini sangat keren. Ok, langsung 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 kode </head>
2. Copy & Paste kode berikut ini, letakkan kode berikut ini tepat diatas kode </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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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:&#39;\f108&#39;;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:&#39;\f0c3&#39;;}.featured-postlabel3 h2:before{content:&#39;\f143&#39;;}
.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:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
.featured-postlabel2 .index a:after{content:&quot;\f105&quot;;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:&#39;Roboto Condensed&#39;,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:&#39;Roboto Condensed&#39;,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:&quot;\f0e6&quot;;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:&quot;\f133&quot;;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 != &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="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="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="featured-post_title"><a href="'+n+'" target ="_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" target ="_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="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="featured-post_title featured-post_title2"><a href="'+n+'" target ="_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" 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=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=&quot;http://3.bp.blogspot.com/-PHzN2A92GHE/Vmim2TTkAII/AAAAAAAADZU/X42ioeFiyBo/s1600/featured-post_thumb.png&quot;,no_thumb2=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizAfpxap5H00nolnzcxFFuNoPXIpRKdS6MuNisTQJqG0_FJJ8vJllBdywfA0e_beWrkKLXtiHpeWRTHUjw-P7DPNc4KdrqxF8-SWKqWFPtFYSxSBvivAHMilPiB4LGA5Nmg8o3IlKJTsiX/s1600/featured-postthumb_small.png&quot;;
</script>
</b:if>
</b:if>

3. Temukan lagi kode <div class='post-container'> atau  <div id='content-wrapper'>
Jika anda ingin menampilkan widget ini tepat dibawah menu header anda, maka letakkan kode berikut ini tepat dibawah nya, Ok!
4. Copy & Paste kode berikut ini, kemudian letakkan di atas kode <div class='post-container'>
Jika anda bingung mencari kodenya, silakan cari kode menggunakan (CTRL + F) Menu Header anda yang sudah dipasang, kemudian 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'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&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='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'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&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. Simpan Template.
6. Buka Tata Letak - Kemudian pilih gadget yang berada di atas blogpost atau posting blog.

Screenshoot :
7. Pilih Edit - kemudian ubah tulisan "Bahasa Indonesia" menjadi Label yang ingin anda tampilan, misalkan label nya "Internet" tulis nya pada bagian konten bukan dibagian judul.
8. Simpan Template!


Demikian Tutorial kali ini, bila 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

Related Post

0 Response to "Cara Membuat Top Featured Post di Blogger"

Post a Comment

Subscribe to: Post Comments (Atom)