Cara Membuat Featured Post Responsive

Cara Membuat Featured Post Responsive - Halaman depan pada sebuah blog merupakan tampilan produk-produk terbaik, unggulan, dan terbaru. Posting unggulan atau terbaik di blog bisa ditampilkan di Featured Post

Selain untuk menampilkan produk-produk terbaik dan unggulan, Featured Post juga salah satu hal yang dapat mempercantik tampilan sebuah blog. Pada umum nya Featured Post ini ditempatkan di atas daftar postingan blog.

Berikut ini langkah-langkah membuat Featured Post Responsive di tampilan PC maupun mobile

Cara Membuat Featured Post Responsive

1. Login ke Blogger> Klik menu Tema dan Edit HTML > kemudian cari kode </head> lalu tambahkan kode di bawah ini sebelum kode </head>

<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Featured Post by rakinformasi.com */
*, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.featured_namiwrap {
display:inline-block;
width:100%;
max-width:1020px;
margin:0 auto 5px auto;
overflow:hidden;
max-height:390px
}
.featured_namina {
display:block;
position:relative;
float:left;
overflow:hidden;
height:390px
}
.featured_namina.first { 
width:69%;
margin-right:5px
}
.featured_namina.third,.featured_namina.fourth {
width:30%;
height:190px;
float:right
}
.featured_namina.third {
margin-bottom:10px
}
.featured_namina a {
display:block;
color:rgb(255,255,255);
position:relative;
vertical-align:bottom;
z-index:1;height:100% 
}
.featured_namina a:before {
width:100%;
height:100%;
position:absolute;
content:&#39;&#39;;
background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%);
opacity:.7;z-index:2;
transition:all .6s
}
.featured_namina:hover a:before{opacity:1}.featured_namina a .blog_contents {
display:block;
position:absolute;
z-index:5;
bottom:15px;
left:15px;
right:15px;
letter-spacing:-1px;
text-transform:uppercase;
line-height:120%;
transition:all 0.2s
}
.featured_namiwrap span {
color:#fff;
padding:3px 6px;
letter-spacing:0;
font-size:12px;
line-height:1;
border-radius:3px;
text-transform:capitalize;
box-shadow:0 2px 5px rgba(0,0,0,0.2)
}
.featured_namina.first span{
background:#679e37
}
.featured_namina.second span{
background:#f8a724
}
.featured_namina.third span{
background:#029ae4
}
.featured_namina.fourth span{
background:#e53935
}
.featured_namina a .blog_contents h3{
color:#fff;
margin-top:15px;
font-size:18px;
line-height:normal;
font-weight:600;
letter-spacing:-0.4px;
text-transform:none;
text-shadow:none
}
.featured_namina a .blog_contents .featured_namina.first a .blog_contents h3{
font-size:22px
}
.featured_namina .feat-img{
width:100%;
height:100%;
background-size:cover;
background-position:50%;-webkit-backface-visibility:hidden;
transition:all .3s
}
.featured_namina:hover .feat-img{transform:rotate(-3deg) scale(1.2);-webkit-filter:blur(2px);filter:blur(2px)
}
@media only screen and (max-width:768px){
.featured_namiwrap{max-height:initial}.featured_namina.first,.featured_namina.third,.featured_namina.fourth{width:100%;margin:0;margin-bottom:10px}.featured_namina a .blog_contents{left:15px;right:15px;bottom:10px}.featured_namina.first a .blog_contents h3,.featured_namina a .blog_contents h3{font-size:20px}}
</style>
<script type='text/javascript'>
//<![CDATA[
// Featured post by rakinformasi.com
function recentposts1(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length,document.write('<div class="featured_namiwrap">');for(var t=0;t<maxpost;t++){var i,n=e.feed.entry[t],r=n.title.$t,l=n.category[0].term;newsize;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){i=n.link[o].href;break}for(o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){n.link[o].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)g=n.summary.$t;else g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var m=[1,2,3,4,5,6,7,8,9,10,11,12],f=["Oca","Şub","Mar","Nis","May","Haz","Tem","Ağu","Eyl","Eki","Kas","Ara"],p=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<m.length;u++)if(parseInt(p)==m[u]){p=f[u];break}if(0==t){var v='<div class="featured_namina first"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(1==t){v='<div class="featured_namina second"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(2==t){v='<div class="featured_namina third"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(3==t){v='<div class="featured_namina fourth"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}j++}document.write("</div>")}imgr=new Array,imgr[0]="data:image/gif;base64,R0lGODlhAQABAIAAAPHx8AAAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==",showRandomImg=!0,aBold=!0,numposts1=4,numposts11=1,newsize=400;
//]]>
</script>
</b:if>

Perhatikan kode yang ditandai merah, sesuaikan max-width:1020px dengan lebar template Anda dan pastikan di dalam template sudah terdapat jQuery Library.

2. Cari kode <div id='wrapper'> atau <div id='post-container> selanjutnya tambahkan kode di bawah ini sebeleum kode tersebut.

<b:if cond='data:view.isHomepage'>
<div class='featured_naminaz' id='featured_namiwrap'>
<div class='ct-wrapper'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</b:if>

Featured Post ini akan menampilkan postingan terbaru, jika ingin menggantinya dengan postingan tertentu, cukup mengganti format feed yang ada dalam script trigger ini