Cara Pasang Featured Post 4 Kolom di Bawah Menu Blogger

Baca Juga

Cara Pasang Featured Post 4 Kolom di Bawah Menu Blogger

Featured Post adalah widget yang menampilkan posting atau konten unggulan. Biasanya dipasang di halaman depan blog.

Cukup banyak pilihan Featured Posts seperti sudah sering CB share di blog ini, mulai dari Featured Post by Label, Featured Post Bawaan Blogger, Featured Post Responsive, hingga Featured Post Content Slider.

Kali ini CB share kode dan cara memasang Featured Post empat Kolom di Bawah Menu Blogger, seperti gambar di bawah ini. Demonya bisa dilihat di template blog Zippo, namun sudah dimodifikasi menjadi empat kolom.

Anda bisa menjadikannya 5 kolom seperti yang CB pasang di template DetikStyle V3

DEMO | ORDER

Cara Pasang Featured Post 4 Kolom di Bawah Menu Blogger

1. Tema > Edit HTML
2. Copas kode CSS berikut ini di atas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
 body#layout .brick{display:none;}
.brick {margin: 0 auto;overflow: hidden;display: block;max-width: 1100px;border-bottom:1px solid #eee;}
.brick h2 {background:#f1f1f1; font-size: 18px; text-transform: uppercase; padding:6px 10px; border-left:3px solid #29958d; color:#000; margin:0 0 12px; opacity:.7;}
.brick p {display:none;}
.brick li {list-style:none; overflow:hidden; margin: 0 2.6% 12px 0; float:left; width:23%; position: relative;}
.bring{background:#eeeeee; border:1px solid #e2e2e2; padding:7px; position:relative;}
.brick li img {height: 100%; width: 100%; display:block;}
.brick h3{ font-size: 14px; line-height:normal; margin-top:8px;}
.brick .tenant a {font-size: 12.5px; left: 8px; line-height: 18px; padding: 6px 10px; top: 8px;display:none}
.brick li:last-child{margin-right:0;}
.brick h3 a, .tizi h3 a{color:#444;}
.brick h3 a:hover, .tizi h3 a:hover{color:#339999;}
.brick li img, .bukshan img, .btf-thumb img, .tizi li img, .PopularPosts img, #related-article img{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out; -webkit-backface-visibility:hidden;}
.brick li img:hover, .bukshan img:hover, .btf-thumb img:hover, .tizi li img:hover, .PopularPosts img:hover, #related-article img:hover{opacity:.7;}
.z-date {display:none}
@media (max-width: 600px) {
.brick li{width:47.4%;}}
@media (max-width: 420px) {
.brick li{width:99%; height:auto;margin-right:0px;}}
</style>
</b:if>

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

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
var mag_news = (function ($) {
"use strict";
var hasTouch = false;
return {
init: function () {
$('.ct-wrapper img').addClass('hick');
$('.ct-wrapper img').one('inview', function () {
$(this).addClass('being');
});
},
};
})(jQuery);
jQuery(function ($) {
mag_news.init();
});
function postshow(c) {
for (var a = 0; a < c.feed.entry.length; a++) {
for (var b = 0; b < c.feed.entry[a].link.length; b++) if ("alternate" == c.feed.entry[a].link[b].rel) {
var e = c.feed.entry[a].link[b].href;
break
}
b = "thr$total" in c.feed.entry[a] ? c.feed.entry[a].thr$total.$t + " Comments": "Comments Disable";
"1 Comments" == b && (b = "1 Comment");
"0 Comments" == b && (b = "No Comments");
var d = c.feed.entry[a].published.$t,
h = d.substring(0, 4),
k = d.substring(5, 7),
d = d.substring(8, 10),
l = c.feed.entry[a].title.$t,
g = c.feed.entry[a].category[0].term,
f = c.feed.entry[a].media$thumbnail.url; - 1 != f.indexOf("img.youtube.com") && (f = c.feed.entry[a].media$thumbnail.url.replace("default", "0"));
b = '<li><a href=' + e + '><div class="bring"><span class="beex"><img src="' + f.replace("/s72-c/", "/w220-h190-c/") + '"/><span class="overlay-icon"></span></span></div></a><div class="tenant"><a href="/search/label/' + g + '?&max-results=8">' + g + "</a></div><h3><a href=" + e + ">" + l + '</h3></a><font class="z-date"> ' + [, "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][parseInt(k, 10)] + " " + d + ", " + h + " - <i class='fa fa-comments-o'></i> <a href=" + e + "#comments>" + b + "</a></font></li>";
document.write(b)
}
};
//]]>
</script>
</b:if>

4. Pastikan ada link ke kode jQuery di template blog Anda. Jika belum ada, tambahkan kode ini di atas kode nomor 3 di atas.

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

5. Copas kode HTML berikut ini, simpan di bawah kode penutup menu atau di bawah kode <div class='main-wrapper'> atau semisalnya

     <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='brick'>
<h2>Featured Posts</h2>
  <script src='/feeds/posts/summary/-/Featured?published&amp;alt=json-in-script&amp;start-index=1&amp;max-results=4&amp;callback=postshow'/>
</div>
</b:if>

Catatan: 

- Kode di atas menampilkan postingan dengan label Featured di Featured Post. Pastikan minimal empat postingan Anda berlabel Featured. 
- Nama label bisa diubah menjadi label apa saja.
- Jika ingin menampilkan posting terbaru, ubah kodenya dengan menghapus kode /-/Featured

6. Simpan Template!

Demikian cara memasang wodget Featured Post 4 kolom di Bawah Menu Blogger atau di posisi mana saja yang dikehendaki.

Good Luck & Happy Blogging! (www.contohblog.com).*