Cara Membuat Featured Recent Post di Halaman Depan Blog

Cara Membuat Featured Recent Post di Halaman Depan Blog

Cara Membuat Featured Recent Post di Halaman Depan Blog


Featured Recent Post adalah posting terbaru yang ditampilkan di Halaman Depan Blog secara berbeda. Desainnya seperti gambar di atas. Demonya seperti template blog Mini Magz.

Langsung saja ke cara pemasangannya.

Cara Membuat Featured Recent Post di Halaman Depan Blog

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

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
<style>
.ct-wrapper {margin: 20px;width: 97%;}
#featured-posts-section{max-height:350px;overflow:hidden;}
.featured-post a{font-size:1em;color:#fff;}
.featured-post a:hover{color:#fff;}
.main-post.featured-post a{margin:0;font-size:17px}
.featured-post .col-post{float:left;position:relative;overflow:hidden;margin:0 20px 0 0}
.featured-post .main-post{background:#dadada;width:64.5%;padding:0;transition:all .4s}
.featured-post .secondary-post{background:#dadada;width:32.5%;margin:0 0 20px 0;transition:all .4s}
.featured-post span{background:rgba(0,0,0,0.3);display:none;color:#fff;font-style:normal;position:absolute;transition:all .4s;font-size:11px;line-height:1.4;padding:3px 6px;top:10px;left:10px;z-index:2}
.featured-post .main-post:hover span,.featured-post .secondary-post:hover span{background:#34495e;}
.featured-post img{height:100%;transition:all .5s}
.featured-post .main-post img{height:350px;width:100%;object-fit:cover;}
.featured-post .secondary-post img{height:165px;object-fit:cover;width:100%;}
.featured-post .main-post:hover img,.featured-post .secondary-post:hover img{backface-visibility:hidden;transform-style:preserve-3d;}
.featured-post header{position:absolute;background:rgba(0,0,0,0.5);bottom:0;left:0;right:0;padding:20px;z-index:2;transition:all .4s}
.featured-post header:hover{background:#38b7ee}
.featured-post .secondary-post header{padding:15px}
.featured-post header h3{font-size:18px;}
.featured-post h4{font-size:14px;}
@media only screen and (max-width:600px){
.featured-post .secondary-post{width:100%;}
.featured-post .main-post{width:100%;}
}
</style>
</style>
</b:if>

3. Simpan kode berikut ini di bawah kode <div id='content-wrapper'> atau <div id='main-wrapper'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='ct-wrapper' id='featured-posts-section'>
<div class='featured-post padding clearfix'> <script type='text/javaScript'>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/?max-results=&quot;+featured_numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=sliderposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</b:if>

4. Simpan kode berikut ini di atas kode </head> atau </body>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(e,t){for(var s=e.split("<"),r=0;r<s.length;r++)-1!=s[r].indexOf(">")&&(s[r]=s[r].substring(s[r].indexOf(">")+1,s[r].length));return s=s.join(""),s=s.substring(0,t-1)}function sliderposts(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;for(var t=0;t<maxpost;t++){var r,i,n=e.feed.entry[t],l=n.category[0].term,o=n.title.$t;if(t==e.feed.entry.length)break;for(var m=0;m<n.link.length;m++)if("alternate"==n.link[m].rel){i=n.link[m].href;break}for(var m=0;m<n.link.length;m++)if("replies"==n.link[m].rel&&"text/html"==n.link[m].type){r=n.link[m].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)var g=n.summary.$t;else var 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 h=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<h.length;u++)if(parseInt(f)==h[u]){f=p[u];break}if(0==t){var v='<div class="main-post col-post"><a href="'+i+'"><span class="blue">'+l+'</span><img src="'+img[t]+'" height="350" width="640" alt=""></img></a><header><h3 class="entry-title"><a href="'+i+'" title="">'+o+"</a></h3></header></div>";document.write(v)}else{var v='<div class="secondary-post col-post" style="margin-right:0"><span class="blue">'+l+'</span><a class="hover_play_small" href="'+i+'"><img src="'+img[t]+'" height="200" width="320"></img></a><header><h4><a href="'+i+'">'+o+"</a></h4></header></div>";document.write(v)}j++}}imgr=new Array,imgr[0]="http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=50,numposts1=10,featured_numposts="3";
//]]>
</script>
</b:if>

4. Save Template!

Demikian Cara Membuat Featured Recent Post di Halaman Depan Blog. (bloggerbandung.net).*

Thanks for reading Cara Membuat Featured Recent Post di Halaman Depan Blog

Related Posts

Next Article
« Prev Post
Previous Article
Next Post »
Your Comments

No SPAM, Please...!