Cara Membuat Featured Post Gambar di Blog

Memasang Featured Post Gambar di Blog - Saat ini banyak sekali blog yang menggunakan featured post pada halaman homepage. Pada postingan sebelumnya saya juga sudah membuatkan tutorial Cara Memasang Featured Post Image Slider di Blogger dan Cara Membuat Featured Post di Blogger.

Featured Post yang saya bagikan kali ini tidak jauh berbeda dengan yang sebelumnya, hanya saja terdapat beberapa perbedaan sedikit dari segi warna dan ukuran.

Saya buatkan banyak tutorial featured post untuk memudahkan Anda mencari featured post mana yang sesuai dengan model tampilan blog Anda.

Langkah-langkah Memasang Featured Post Gambar di Blog

1. Tema > Edit HTML
2. Pasang kode CSS dan Javascript Featured Post berikut ini diatas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<style type='text/css'> 
.layout-content{position:relative;overflow:hidden;padding:0;margin:0 auto} 
.bungkus-related{padding:0;margin:0;position:relative} 
ul.bungkus-related li.content:after{content:no-close-quote;position:absolute;left:0;bottom:0;width:100%;height:150px;background:url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACXCAYAAADUKjHXAAAABHNCSVQICAgIfAhkiAAAAC1JREFUKJFjYIACRibyCSbyuGgsYiXwixErSzuCeXAopiJBejiTHquUJCTSCAApNwIpR17mugAAAABJRU5ErkJggg==) repeat-x;opacity:.5;background-size:100% 100%;overflow:hidden} 
ul.bungkus-related .random-grup{float:right;width:48%;height:100%;background:#222;padding:12px;box-sizing:border-box;position:relative;overflow-y:hidden;max-height:381px} 
.random-thub {width: 320px;height: 200px;} 
ul.bungkus-related .content .tulisan{position:relative;left:0;bottom:0;width:100%;padding:15px;z-index:2;box-sizing:border-box;font-size:17px;color:#fff;line-height:1.3em} 
ul.bungkus-related .content .tulisan a{color:white;font-weight:700;opacity:0.9} 
ul.bungkus-related .content .tulisan a:hover {color:#ff6} 
ul.bungkus-related .content .tulisan .random-desk{font-size:12px;display:none;} 
ul.bungkus-related .content .post-tag{position:absolute;top:15px;left:15px;background-color:#299680;color:#fff;font-weight:400;z-index:2;height:22px;line-height:22px;padding:0 8px;font-size:12px} 
ul.bungkus-related .content .post-tag a{color:white} 
ul.bungkus-related .content .post-tag a:nth-child(n+2),ul.bungkus-related .random-grup .content .post-tag{display:none} 
ul.bungkus-related .random-grup .content{display:block;width:100%;float:right;margin:0 0 5px;padding:0 0 5px;border-bottom:1px solid #333;height:auto;position:relative} 
ul.bungkus-related .random-grup li.content:after{content:none} 
ul.bungkus-related .random-grup .content .gambar img{width:100%;height:100%;display:table-cell;vertical-align:middle;overflow:hidden} 
ul.bungkus-related .content .gambar img{width:100%;height:auto;max-height:200px} 
ul.bungkus-related .content{float:left;width:50%;box-sizing:border-box;overflow:hidden;position:relative;height:100%;margin:0;} 
#random-post-container{width:100%;position:relative;background:#222;padding:0;max-height:280px;height:100%;border-radius:3px;overflow:hidden;margin:0 auto;margin:10px 0;} 
ul.bungkus-related .random-grup{float:right;width:48%;height:auto;background:#222;padding:5px 0;box-sizing:border-box;position:relative;overflow-y:hidden;} 
ul.bungkus-related .random-grup .content .gambar{width:25%;height:50px;position:absolute;overflow:hidden;left:5px;top:5px;bottom:5px;margin:auto;} 
ul.bungkus-related .random-grup .content .tulisan{display:table-cell;padding-right:5px;position:relative;float:right;margin:0;padding-top:5px;font-size:13px;width:75%;} 
ul.bungkus-related .random-grup .content .random-desk{font-size:10px;display:none;} 
@media screen and (max-width:500px){#random-post-container{overflow:auto}ul.bungkus-related .content{width:100%;float:none} 
ul.bungkus-related .content .gambar img{height:100%}ul.bungkus-related .random-grup{width:100%;float:none;overflow:hidden!important}} 
</style> 
<script type='text/javascript'> 
//<![CDATA[ 
// Feed configuration 
var homePage = 'https://www.solusimenarik.com/', //ganti dengan alamat blog Anda 
 maxResults = 5, //Ganti angka 5 lima untuk mengatur jumlah artikel yang akan ditampilkan 
 summaryLength = 45, // 
 noImageUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAIAAADajyQQAAAAA3NCSVQICAjb4U/gAAAAbUlEQVRoge3PAQ0AIRDAsOeNn3VUEDLSKtjWzHwv+m8HnGKsxliNsRpjNcZqjNUYqzFWY6zGWI2xGmM1xmqM1RirMVZjrMZYjbEaYzXGaozVGKsxVmOsxliNsRpjNcZqjNUYqzFWY6zGWI2xmg0/igINB8FclAAAAABJRU5ErkJggg==', 
 containerId = 'random-post-container'; 
function getRandomInt(t, e) { 
 return Math.floor(Math.random() * (e - t + 1)) + t 
} 
function shuffleArray(t) { 
 var e, a, s = t.length; 
 if (0 === s) return ! 1; 
 for (; --s;) e = Math.floor(Math.random() * (s + 1)), 
 a = t[s], 
 t[s] = t[e], 
 t[e] = a; 
 return t 
} 
function createRandomPostsStartIndex(t) { 
 var e = getRandomInt(1, t.feed.openSearch$totalResults.$t - maxResults); 
 window.console && window.console.log && console.log("Get the post feed start from " + e + " until " + (e + maxResults)), 
 add_script(homePage + "/feeds/posts/summary/-/Featured?alt=json-in-script&orderby=updated&start-index=" + e + "&max-results=" + maxResults + "&callback=randomPosts") 
} 
function randomPosts(t) { 
 for (var e, a, s, n = document.getElementById(containerId), r = shuffleArray(t.feed.entry), l = "<ul class='bungkus-related'>", o = 0, i = r.length; i > o; o++) { 
  a = "summary" in r[o] ? r[o].summary.$t.replace(/<.*?>/g, "").substring(0, summaryLength) + "&hellip;": "", 
  s = "media$thumbnail" in r[o] ? r[o].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s600") : noImageUrl; 
  for (var d = 0, m = r[o].link.length; m > d; d++) e = "alternate" == r[o].link[d].rel ? r[o].link[d].href: "#"; 
  l += "<li class='content'>", 
  l += '<div class="gambar" ><img class="random-thub" src="' + s + '" title="' + r[o].title.$t + '" alt="' + r[o].title.$t + '" width="72" height="72"></div>', 
  l += '<div class="tulisan"><a title="' + r[o].title.$t + '" class="random-title" href="' + e + '">' + r[o].title.$t + "</a><br>", 
  l += '<span class="random-desk">' + a + "</span></div>", 
  window.onload = function () { 
   for (var t = $("#random-post-container ul li"), e = 1; e < t.length; e += 4) h = e + 1, 
   t.slice(e, e + 4).wrapAll("<div id='grup" + h + "' class='random-grup'></div>") 
  }, 
  l += "<small class='post-tag'>"; 
  for (var c = r[o].category, u = [], h = 0, g = c.length; g > h; ++h) u.push('<a title="' + c[h].term + '" href="' + homePage + "/search/label/" + encodeURIComponent(c[h].term) + '?max-results=5" rel="tag">' + c[h].term + "</a>"); 
  l += u.join(" "), 
  l += "</small>",  
  l += '<span class="clear"></span></li>'  
 }  
 n.innerHTML = l + "</ul>"  
}  
function add_script(t) {  
 var e = document.createElement("script");  
 e.src = t,  
 document.getElementsByTagName("head")[0].appendChild(e)  
}  
add_script(homePage + "/feeds/posts/summary/-/Featured?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex");  
//]]>  
</script>  
</b:if>

3. Pasang kode berikut ini dibawah kode <div id='main-wrapper'> atau <div class='main-outer'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>  
<div class='layout-content'>  
<div id='random-post-container'>Memuat</div>  
</div>  
</b:if>

4. Save!

Sekian dulu ya! pembahasan saya kali ini tentang Cara Membuat Featured Post Gambar di Blog, mudah-mudahan bisa bermanfaat.