Cara Membuat Featured Post di Blog

Cara Membuat Feature Post di Blog

Codepelajar.com - Selamat pagi sobat codepelajar, Setelah beberapa hari yang lalu saya membagikan Tutorial Membuat Random Redirect untuk Blog , pada kesempatan saya akan berbagi Tutorial Membuat Featured Post yang tentunya bisa diterapkan di blogger. Featute post yang akan di buat kali ini adalah gayanya dari template infinite dari Arlina seperti yang codepelajar.com sekarang pakai.

Pada sebelumnya juga ada yang merequest dibuatkannya tutorial ini. Selain dari featured post banyak juga yang request tutorial yang bisa kamu lihat di halaman project kami.


Membuat Featured Post di Blog


Cara Membuat Featured Post di Blog

Mari kita langsung ke tutorial saja, seperti biasa sobat masuk dulu ke Blogger.com dan login dengan akun blog masing-masingnya. Setelah itu, pada dasboard, pilih menu tata letak dan masukan semua kode CSS berikut ini tepat di atas </b:skin>.

/* Featured Post */
#feature-posts-section{max-height:350px;overflow:hidden;margin:0 auto 20px auto}
.feature-post a{font-size:1em;color:#fff;}
.feature-post a:hover{color:#fff;}
.main-post.feature-post a{margin:0;font-size:17px}
.feature-post .col-post{float:left;position:relative;overflow:hidden;margin:0 20px 0 0}
.feature-post .secondary-post{background:#dadada;width:32%;margin:0 0 20px 0;transition:all .4s}
.feature-post .main-post{background:#dadada;width:65.8%;padding:0;transition:all .4s}
.feature-post span{background:#95a5a6;color:#fff;font-style:normal;position:absolute;font-size:11px;font-weight:700;text-transform:uppercase;line-height:1.4;padding:6px 8px;top:0;left:0;z-index:2}
.feature-post img{height:100%;transition:all .5s}
.feature-post .main-post img{height:350px;width:100%;object-fit:cover;}
.feature-post .secondary-post img{height:165px;object-fit:cover;width:100%;}
.feature-post .main-post:hover img,.feature-post .secondary-post:hover img{backface-visibility:hidden;transform-style:preserve-3d;}
.feature-post header{position:absolute;background:rgba(0,0,0,0.3);bottom:-40px;left:0;right:0;padding:20px;opacity:0;visibility:hidden;transition:all .4s}
.feature-post .main-post:hover header,.feature-post .secondary-post:hover header{opacity:1;visibility:visible;bottom:0;z-index:2;}
.feature-post header:hover{background:rgba(0,0,0,0.6)}
.feature-post .secondary-post header{padding:15px}
.feature-post header h3{font-size:18px;}
.feature-post h4{font-size:14px;}
@media screen and (max-width:768px) {
#feature-posts-section{display:none}}

Selanjutnya untuk menyimpan html featured post di blog, sobat harus menyimpannya di atas main-wrapper atau tepat di bawah Header/Navigasi blog sobat. Jangan lupa untuk menambahkan tag kondisi blogger menampilkan untuk hanya di bagian homepage saja.


<b:if cond='data:view.isHomepage'>
<div class='ct-wrapper' id='feature-posts-section'>
<script>/*<![CDATA[*/
function labelthumbs(t){document.write('<ul class="'+outerclass+'">');for(var e=0;e<numposts;e++){var r,i=t.feed.entry[e],n=i.title.$t,l=i.category[0].term;if(e==t.feed.entry.length)break;for(var o=0;o<i.link.length;o++)if("alternate"==i.link[o].rel){r=i.link[o].href;break}var u;try{u=i.media$thumbnail.url}catch(m){s=i.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:"http://2.bp.blogspot.com/-mmjt8mh87bQ/VQ6ltMr8GxI/AAAAAAAAEfo/93SmjxkwmO0/s500-c/no-image-found.jpg"}var p=i.published.$t,v=p.substring(0,4),h=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";var A=g[parseInt(h,10)]+" "+f+", "+v;document.write(starttag+"<"+intag+' class="post">'),document.write('<div class="post-media"><div class="image-wrap"><img src="'+u.replace("/s72-c/","/s400-p/")+'" alt="'+n+'"/></div></div><div class="post-body">'),"featured-slider"==outerclass&&document.write('<span class="cat"><a href="/search/label/'+l+'">'+l+'</a></span><div class="post-title"><h4><a href="'+r+'">'+n+'</a></h4></div><div class="post-meta"><span class="post-date">'+A+"</span></div></div>"),"sub-menu"==outerclass&&document.write('<div class="post-title"><h2><a href="'+r+'">'+n+'</a></h2></div><span class="post-date">'+A+"</span></div>"),document.write("</"+intag+">"+endtag)}document.write("</ul>")};
// Featured
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>
<div class='feature-post padding clearfix'>
<script type='text/javaScript'>
/*-- Featured Post sesuai postngan terbaru --*/
document.write("<script src=\"/feeds/posts/default/?max-results="+featured_numposts+"&orderby=published&alt=json-in-script&callback=sliderposts\"><\/script>");
</script>
</div>
</div>
</b:if>


Pada Featured Post ini akan muncul dan berganti setiap ada postingan terbaru, Namun jika ingin menampilkan featured post sesuai kategori/label bisa dengan merubah kode yang ditandai komen diatas menjadi seperti berikut ini:


<script type='text/javaScript'>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/LABELKAMU?max-results=&quot;+featured_numpost+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=sliderpost\&quot;&gt;&lt;\/script&gt;&quot;);
</script>

Jika kode diatas berhasil maka fiturpost akan tampil seperti demonstrasi berikut ini:

Itulah Cara membuat Featured post di blog yang bisa sobat terapkan di blog kesayangan sobat. Memasang widget ini mungkin akan memberatkan loading blog kamu, namun apa salahnya demi kenyamanan pengunjung? jika tidak berhasil atau ada eror. Jangan sungkan untuk bertanya pada kolom komentar di bawah setealah artikel ini selesai. Nantikan Tutorial Anti Mainstream Lainnya di Codepelajar!.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel