Cara Membuat Featured Post Random Di Blogger

Cara Membuat Featured Post Random Di Blogger
Mungkin jika kalian sudah lihat tampilan Homepage di blog ini paste terdapat Featured Post diatasnya berbeda dengan Featured Post bawaan pasti kurang bagus nah untuk kali ini saya akan bagikan tutorial untuk membuat Featured Post ini tentu saja kalian bisa menggunakan nya diberbegai template selain template yang mirip seperti ini.

Keunggulan Featured Post ini menurut saya untuk menarik pengunjung dan juga memperbagus tampila tentu saja ada yang harus dikorbankan yaitu speed blog yang berkurang karena kita harus memangil json untuk pemangilan postnya tapi hasilnya cukup memuaskan tampilan blog jadi sangat bagus menurut saya.

Tapi untuk beberapa Template biasanya sudah terpasang Featured Post bawaan jadi jika ingin memasang Featured Post seperti yang ada diblog ini saya harap kalian menghapus Featured Post bawaan karena akan terjadi bentrok dan akan kacau seperti itu lah jadinya jika ada dua hal yang sama.

Untuk kalian yang ingin mencoba tampilan Featured Post seperti diblog ini kalian bisa ikut tutorialnya step by step atau langkah demi langkah agar dapat dipahami dan juga tutorial ini mungkin sudah banyak diluar sana tapi saya post lagi saja barangkali ingin dengan style yang bagus.

Membuat Featured Post Random Di Blogger


1. Masuk ke dashboard blog > Tema > Edit Html > Ctrl+f untuk mempercepat pencarian

2. Temukan kode </style> atau ]]></b:skin> lalu copy kode css dibawah dan taruh tepat diatas kode tadi
/* Featured Post Homepage */ .bungkus-wrapper {padding: 0px 0px 20px 0px;width: 100%;} #featured-posts-section{max-height:380px;overflow:hidden;} .featured-post a{font-size:1em;color:#fff;font: 700 16px Roboto Slab, Times New Roman, Times, serif;} .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 0px 0 0} .featured-post .main-post{background: #D84E1A;width:41.4%;padding:0;transition:all .4s} .featured-post .secondary-post{background: #227B96;width:29%;margin:0 0 2px 2px;transition:all .4s} .featured-post .secondary-post:nth-child(4){background: #7D2DA7;} .featured-post .secondary-post:nth-child(5){background: #28943A} .featured-post .secondary-post:nth-child(7){background: #CA9215;} .featured-post span{background: #43ce8e; color:#fff;font-weight:bold;position:absolute;transition:all .4s;font-size:12px;line-height:1.2;padding:3px 6px;top:10px;left:10px;z-index:1;border-radius:1px;} .featured-post .main-post:hover span,.featured-post .secondary-post:hover span{background:rgba(64,64,64,0.05); } .featured-post img{margin-bottom:-10px;height:100%;transition:all .5s} .featured-post .main-post img{height:380px;width:100%;object-fit:cover; opacity: 0.5} .featured-post .secondary-post img{height:191.5px;object-fit:cover;width:100%;  opacity: 0.5} .featured-post .main-post:hover img,.featured-post .secondary-post:hover img{backface-visibility:hidden;} .featured-post header{position:absolute;background:rgba(0,0,0,0);bottom:0px;left:0;right:0;padding:10px;z-index:2;transition:all .4s;margin-bottom:0px} .featured-post header:hover{background:none} .featured-post .secondary-post header{padding:0px 10px;margin-bottom:0px} .featured-post header h3{font-size:18px;} .featured-post h4{font-size:18px;} .featured-post .main-post:hover{background-color:rgba(0,0,0,0.5);} .featured-post .secondary-post:hover{background-color:rgba(0,0,0,0.5);} @media only screen and (max-width:1024px){ .bungkus-wrapper {display:none;} .featured-post .secondary-post{width:197.5%;} .featured-post .main-post{width:97.5%;} }  
3. Temukan kode <div id='wrapper'> atau <div id='main-wrapper'> lalu copy kode js berikut dan taruh dibawah kode tersebut, biasanya setiap template berbeda beda coba kalian biasanya setelah kode <div id='header-wrapper> kode tersebut
 <b:if cond='data:blog.pageType != &quot;item&quot;'> 
<script type='text/javascript'> //<![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:"//3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/s66-c/no-image.png"}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]="//3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/s66-c/no-image.png",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=50,numposts1=10,featured_numposts="5"; //]]> </script>
<div class='bungkus-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 template/save template

Agar Featured Post tersebut bisa berjalan atau terpasang kalian harus mensetting Feed blog kalian menjadi penuh. Untuk caranya kalian simak dibawah ini

Setting Feed Blogger


1. Klik Setelan/Setting > Pilih lainnya > ada tulisan Feed situs > izinkan feed blog > lalu ubah menjadi penuh.

Sekarang coba lihat tampilan Featured Post diblog kalian apakah sudah tampil atau belum dan jika sudah tampil pasti seperti di tampilan homepage blog ini.

Sekian dulu untuk tutorial Cara Membuat Featured Post Random Di Blogger dengan mudah dan juga tanpa ribet banget menurut saya tapi bagi yang baru belajar pasti ribet. Jangan lupa berkomentar diblog ini bila kesusahan dalam pemasangan nya.

Berlangganan update artikel terbaru via email:

Show comments
Hide comments

3 Responses to "Cara Membuat Featured Post Random Di Blogger"

Selin said...

sudah diperbaiki, mohon maaf karena kurang teliti jadi langsung publish saja _/\_

John Holongky Sinaga said...

Kepotong itu css nya.

John Holongky Sinaga said...

Kok gak work ya.

Post a Comment

Centang kotak "NOTIFT ME" agar mendapatkan notifikasi melalui email ketika ada yang membalas komentar kamu.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Δ