Cara Membuat Featured Post Grid Responsive di Blog

Menambah featured post di blog merupakan salah satu hal yang dapat dilakukan untuk mempercantik tampilan blog. Untuk kita pada kali ini kita akan membahas cara membuat featured post responsive model grid di blog.
Cara Membuat Featured Post Grid Responive di Blog

Pada tips sebelumnya kita telah membahas mempercantik tampilan blog dengan cara membuat navigasi kecil seperti pada jalantikus. Dimana kita dapat membuatnya dengan menggunakan HTML dan CSS saja, Namun pada kali ini kita aka membuat featured post grid responsive menggunakan HTML, CSS dan Javascript.

Untuk menghindari hal-hal yang tidak diinginkan, sebaiknya kalian mem back-up terlebih dahulu template blog kalian, agar nantinya jika ada kesalahan dapat kembali digunakan seperti biasanya.

Cara Membuat Featured Post Grid Responsive di Blog

Baiklah sobat migimagz, ini dia langkah-langkah membuat featured post grid responsive di blog kalian, simak baik-baik langkahnya agar mudah diterapkan di blog kalian.

Langkah 1, Seperti biasa, login terlebih dahulu ke blogger lalu masuk ke dashboard blog yang akan dubuatkan featured post grid ini.

Langkah 2, Pilih menu template atau theme, lalu pilih edit HTML

Langkah 3, Cari kode <div id='wrapper'> lalu letakkan kode dibawah ini tepat dibawah kode <div id='wrapper'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- Featured Post Start -->
  <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>")};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>
  <!-- Featured Post End -->
</b:if>
Langkah 4, Cari kode </style> lalu lettakkan kode dibawah ini diatas kode </style> tersebut

/* Featured Post Homepage MigiMagz */
.bungkus-wrapper{padding:15px 0px 20px 0px;width:100%}#featured-posts-section{min-height:380px;overflow:hidden}.featured-post a{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 0px 0 0}.featured-post .main-post{background:#D84E1A;width:41.4%;padding:0}.featured-post .secondary-post{background:#227B96;width:29%;margin:0 0 2px 2px}.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:#1565c0;color:#fff;font-weight:bold;position:absolute;transition:all .4s;font-size:12px;line-height:1.0;padding:3px 6px;top:10px;right:10px;z-index:1;border-radius:1px}.featured-post img{margin-bottom:-10px;height:100%;opacity:0.4}.featured-post .main-post img{height:380px;width:100%;object-fit:cover;transition:all 0.4s}.featured-post .secondary-post img{height:191.5px;object-fit:cover;width:100%;transition:all 0.4s}.featured-post .main-post:hover img, .featured-post .secondary-post:hover img{background-color:transparent;backface-visibility:hidden;opacity:1}.featured-post header{position:absolute;background:transparent;bottom:0px;left:0;right:0;padding:10px;z-index:2;margin-bottom:0px}.featured-post header:hover{background:transparent;opacity:1}.featured-post .secondary-post header{padding:0px 10px;margin-bottom:0px}.featured-post header h3{font-size:12px;line-height:1.0;font:700 16px Noto Sans, sans-serif}.featured-post h4{font-size:12px;line-height:1.0;font:700 16px Noto Sans, sans-serif}.featured-post .main-post:hover img{background:transparent;opacity:1;transition:all 0.4s;transform:scale(1.2)}.featured-post .secondary-post:hover img{background:transparent;opacity:1;transition:all 0.4s;transform:scale(1.2)}@media only screen and (max-width:700px){.featured-post .main-post{width:39%}.featured-post .secondary-post{width:30%}.featured-post .main-post img{height:320px;width:100%;object-fit:cover}.featured-post .secondary-post img{height:161px;object-fit:cover;width:100%}.featured-post header h3{font:700 12px Noto Sans, sans-serif}.featured-post h4{font:700 12px Noto Sans, sans-serif}}@media only screen and (max-width:640px){.featured-post .secondary-post{margin:0;width:50%}.featured-post .main-post{width:100%}.featured-post .main-post img{height:200px;width:100%;object-fit:cover}.featured-post .secondary-post img{height:150px;object-fit:cover;width:100%}.featured-post header h3{font:700 14px Noto Sans, sans-serif;text-align:center}.featured-post h4{font:700 12px Noto Sans, sans-serif}.featured-post span{display:none}}
Langkah 5, Setelah itu kalian simpan template

Silahkan kalian cek apakah featured postnya muncul atau belom, jika sudah muncul tapi tidak ada gambar/thumbnailnya silahkan kalian ikuti langkah berikut, namun jika semuanya sudah muncul dengan baik , kalian tidak perlu melakukan langkah berikut:
  • Pada dashboard blogger, pilih menu setelan lalu klik lainnya
  • Pada Feed situs, silahkan ubah dari penuh menjadi sampai batas postingan
  • Lalu klik simpan setelan
Untuk melihat Demonya, kalian bisa lihat disini > DEMO

Baca Juga: Safelinkblogger.com , Shorthener URL Terbaik di Indonesia
Demikianlah cara membuat featured post grid responsive pada blog, semoga dapat diterapkan dengan baik di blog kalian. Featured post ini sudah dicoba di beberapa template misalnya Viomagz, mostheme, berminat template dan lain-lain.
Tampilkan Komentar
Sembunyikan Komentar

29 Diskusi Seru!

  1. Terimakasih mas. Sangat bermanfaat.

    ReplyDelete
  2. Sama sama sob,terima kasih telah berkunjung.

    ReplyDelete
  3. di template saya ko gak muncul ya gak? ngeblank doang

    ReplyDelete
  4. Pake template apa sob? Coba cek kembali peletakan scriptnya.

    ReplyDelete
  5. Jika peletekan kodenya sudah sesuai dengan langkah diatas, coba atur di setelan > lainnya > feed situs > sampai batas postingan > simpan..

    ReplyDelete
  6. tetep ga bisa gan, kalo boleh saya bisa minta template http://migimagz4experiment.blogspot,com/

    bisa di kirim ke email saya gan:

    katamastah@gmail.com

    ReplyDelete
  7. Jika sobat memang benar benar minat nanti saya kirim...

    ReplyDelete
  8. Mas apa saya boleh minta juga?
    soalnya punya saya juga sama pake tmplate vio, malah g rapi. tampilannya kebawah & acak2an.
    dhazta037@gmail.com

    ReplyDelete
  9. saya aplikasikan di inimadrasah,com dan sukses.
    terima kasih sudah berbagi ilmu.

    ReplyDelete
    Replies
    1. Sama sama sob, kami senang jika itu dapat bermanfaat untuk blog sobat.

      Delete
  10. gan cara mengatur agar tampilan slidenya sesuai label gimana ya?

    ReplyDelete
    Replies
    1. Maksudnya gimana ya gan?

      Delete
    2. owh, edit bagian ini gan /feeds/posts/default/ ganti jadi /feeds/posts/default/-/namalabelnya

      Delete
  11. gan ada gak script biar tampilan gambar ada efek hovernya?

    ReplyDelete
    Replies
    1. Itu sudah ada hovernya (zoom) pada gambar thumbnailnya gan .

      Delete
  12. Request dong cara buat home page jadi grid, rencana blog ensikology.blogspot.com mau diubah ke mode grid / kotak 2,3 sampe 4 gitu.

    ReplyDelete
    Replies
    1. Insyaallah kalau ada waktu saya bikin artikelnya, sekarang masih ada di kampung halaman, untuk sementara sobat bisa coba cari di google sepertinya banyak blog yang membahas cara mengubah tampilan hompage menjadi grid.

      Delete
    2. berhasil..mantep..
      kalau ini kan yang tampil sesuai post terbaru, misalnya kalau mau yang tampil random post gitu gimana ya?

      Delete
  13. berhasil sob... makasih banyak ya :)

    ReplyDelete
    Replies
    1. request artikel cara membuat header seperti arikadnyana.com dong sob hehehe... sama cara menghapus fitur first images di template viral go versi kabar sehat dari arlina... udah capek cari sana sini belum ada di google...

      Delete
    2. Coba cek artikel mengenai "cara membuat navigasi kecil seperti jalantikus.com" di blog ini.

      Mungkin header yang dimaksud sobat sama seperti pada pembahasan artikel di atas

      Delete
    3. itu 100% mirip header migimagz4experiment.blogspot.com kah sob ???

      Delete
    4. Iya sob,, silahkan di coba Semoga bermanfaat

      Delete
    5. ok sob... makasih banyak ya :)

      Delete

1.Silahkan tinggalkan komentar sobat jika ada yang ingin ditanyakan
2. Gunakan bahasa yang sopan
3. Komentar dengan pengguna tanpa nama akan dihapus karena demi kemudahan menjawab dan kesehatan blog
4. Mohon tidak komentar spam link

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel