Cara Mengganti Tampilan Homepage Static Menjadi Grid Pada Blog

Cara Mengganti Tampilan Homepage Static Menjadi Grid Pada Blog
Cara Mengganti Tampilan Homepage Static Menjadi Grid Pada Blog - Pada umumnya tampilan homepage blog menggunakan mode static atau list, seperti template blog yang sudah di sediakan secara default. Namun, kita bisa mengganti tampilan homepage blog static menjadi mode grid atau kotak. Mengganti tampilan homepage blog dari mode static ke mode grid akan menjadikan blog mengalami perubahan diantaranya seperti dari tampilan static atau list yang memanjang kebawah dan lebar, kini menjadi kotak-kotak kecil yang akan menghemat luas pada homepage blog tersebut.

Kedua tampilan yang akan diterapkan pada blog Anda baik itu mode grid (kotak) maupun mode static (list) tergantung pada diri Anda sendiri lebih menyukai mode seperti apa. Tetapi, menurut saya lebih baik menggunakan mode grid, karena dengan menggunakan mode grid kita akan menghemat luas wilayah pada homepage blog, sedangkan dengan menggunakan mode static akan menghabiskan banyak wilayah khususnya memanjang kebawah.

Lalu bagaimana cara mengganti tampilan homepage static menjadi grid pada blog ? Itu sangat mudah sekali, Anda hanya perlu memperhatikan tutorial yang akan saya bagikan pada blog Ficri Pebriyana dibawah ini, dan yang perlu Anda ingat adalah ketika mengganti mode static menjadi mode grid pada homepage blog akan ada beberapa perubahan seperti, tampilan akan acak-acakan antara waktu/tanggal post dengan judul dan lain sebagainya, dan sosulinya adalah Anda harus mengedit juga CSS pada homepage tersebut.

DEMO => Grid
DEMO => Static

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode </head>
4. Copy kode html dibawah ini, lalu Paste diatas kode </head>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot; ;
summary_noimg = 380;
summary_img = 180;
img_thumb_height = 130;
img_thumb_width = 220;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}
//]]>
</script>
<style type='text/css'>
.post {width:45%;height:200px;float:left;margin:10px;position:relative;display: block;}
.post h3{height:32px;margin-top:60px; margin-bottom:-15px;padding:5px;font-family: Helvetica, Arial;line-height:1em;font-weight: bold;  font-size:16px;letter-spacing:-0.5px;}
.post-body {padding:5px;height:241.5px;font-family: Helvetica, Arial; font-size: 13px; margin:20px;}
.post-footer {margin-top:30px;height:20px;}
.post-labels {display:none;}
.mobile .post {width:auto;height:auto;}
.mobile .post-body {height:auto;}
.more {float:right;background:#52e052;color:#000!important;padding:5px 10px;text-decoration:none!important;transition: all 1s ease;}
.more:hover {background:#ff0000;color:#fff!important;text-decoration:none!important;}
</style>
</b:if>
</b:if>
Catatan :
- Fungsinya untuk menampilkan thumbnail post atau gambar postingan, jika di isi dengan no maka tidak akan tampil gambar post tersebut.
- 380 adalah jumlah karakter yang akan ditampilkan jika sebuah posting tidak memiliki gambar.
- 180 adalah jumlah karakter yang akan ditampilkan jika sebuah posting memiliki gambar.
- 130 adalah tinggi gambar.
- 220 adalah lebar gambar.
- 45% adalah ketinggian kotak posting pada homepage.
- 200 adalah lebar kotak posting pada homepage.
- Angka diatas bisa Anda ganti sesuai selera dan keinginan Anda sendiri.

5. Lalu cari kode <data:post.body/>, biasanya ada 1-3 kode seperti itu
6. Copy kode dibawah ini, lalu ganti kode <data:post.body/> yang ke 2
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><b:else/><b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/><b:else/><div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div><script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); </script><a class='more' expr:href='data:post.url'>Read More</a></b:if></b:if>
Catatan :
- Read More bisa Anda ganti sesuai dengan keinginan Anda, misalnya dengan Lanjutkan Membaca, Baca Selengkapnya, atau Lihat Selengkapnya.

7. Klik Simpan Template

Catatan :
Jika setelah menggunakan mode grid pada homepage blog seperti diatas, lalu ada masalah dengan tombol Beranda, Posting Lama, Posting Baru, atau tombol Home, Newer Post, Older Post, pada homepage blog Anda hilang solusinya adalah cari kode <b:includable id='nextprev'> pada bagian Edit HTML, lalu simpan kode ini <div style='clear:both;'/> dibawahnya.

Sekian artikel mengenai Cara Mengganti Tampilan Homepage Static Menjadi Grid Pada Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

49 Komentar untuk "Cara Mengganti Tampilan Homepage Static Menjadi Grid Pada Blog"

  1. sekali kali merubah tampilan homepage menjadi grid agar tidak bosan ya mas

    BalasHapus
  2. Simpen Dulu ah.. Siapa Tau Nanti Guna... Nice Share bro..

    BalasHapus
  3. thanks buat ilmunya gan, tapi kalo ane lebih suka yang kotak hehe

    BalasHapus
  4. Makasih Gan Tutorialnya.

    http://utility-share.blogspot.com/

    BalasHapus
  5. makasih gan infonya

    http://www.0p1ck.com/2013/09/daftar-ubcpoker-judi-poker-online.html

    BalasHapus
  6. wah... boleh juga tuh, biar kelihatan menarik, ijin kopi kode dan mempraktekannya yia bos...

    BalasHapus
  7. mas tolong pencerahannya nih mas...
    waktu saya coba, hompage saya jadi terhambur mas....
    terimakasih sebelumnya mas....

    BalasHapus
    Balasan
    1. pasti begitu mas, karena masing-masing template berbeda...
      coba di edit bagian cssnya seperti
      padding, margin, width dan height nya...

      Hapus
  8. Maaf, mas. Saya sudah coba.
    Ternyata tampilannya jadi acak.
    Apakah ini pengaruh dari template 'awesome'?
    atau penempatan layout?

    BalasHapus
  9. mas mau tanya kalo tampilan kotaknya bisa ganti2 gimana caranya defaultnya kan yang ada di home itu adalah postingan terbaru. saya mau merubahya jadi rendom gimana ya? tolong bantuanya terima kasih

    BalasHapus
  10. gan itu yg data baris ke berapa ya gan? mata ane kagak awas nih bingung liat html

    BalasHapus
  11. kagak bisa postingan malah jadi double 3

    BalasHapus
  12. mas kok tampilannya jadi berantakan dan linknya mati semua itu gmana fix,kan ny ?

    BalasHapus
  13. kalo merubah dari grid ke list gimana ya mas? saya cari di google gak ada sama sekali tutorialnya. mohon bantuannya

    BalasHapus
  14. kalo cara menempatkan judul artikel biar ada di bawah thumbnail gambar gmn gan?

    BalasHapus
  15. Mantap mas, mau ane coba dulu hehe

    BalasHapus
  16. ok mas bro ane mw coba juga yah ,,,

    BalasHapus
  17. gagal bro ,,hehe
    tulisan jad pada tertpmpuk ,,heh

    BalasHapus
  18. Thankz atas tips diatas gan...! (Y)

    BalasHapus
  19. keren bang tapi engga responsive

    BalasHapus
  20. Pas mau coba jadi ragu ketika lihat demonya baik yang grid maupun static sama saja tampilannya. Belum lagi menyimak komentar2 yang mengaku gagal ketika mempratekkannya. Padahal butuh banget saya tutorial tentang bikin tampilan hompage jadi bentuk grid...supaya cocok buat galeri. Mudah2an ada perbaikan tuk tutorial diatas...sayang kalau gak kepakai :)

    BalasHapus
  21. mau nanya gimana ya cara nyelesain masalah tombol like&share nya di bawah recent post yang menggunakan thematerwidget(ngga ada di tataletak)

    BalasHapus
  22. mas, punya saya malah jadi berantakan -_-
    gimana ya ini??

    BalasHapus
  23. gan ane sudah berhasil cara dari agn, tp tulisan beranda masih muncul di tengah2 postingan, sudah gunakan cara hilangkan dr agan tapi masih tetap ada, gimna solusinya

    BalasHapus
  24. terima kasih gan atas informasinya. mau tanya gimana caranya merubah tampilan beberapa postingan di home menjadi 1 pos saja. untuk wordpress gan.
    terima kasih.

    BalasHapus
    Balasan
    1. Untuk menampilkan 1 posting di homepage wordpress caranya :
      1. Klik Settings > Reading
      2. Ubah "Blog pages show at most" dan "Syndication feeds show the most recent" menjadi 1

      Hapus
  25. Makasih mas akan saya coba di blog saya healdia.com ..

    BalasHapus
  26. um buatkan yang untuk blogponsel dong lagi butuh ni soalnya blogponsel tidak mendukung JS di template

    BalasHapus
    Balasan
    1. maksudnya blogponsel ? amp atau tampilan untuk di ponsel

      Hapus
  27. kalau jadi list gimana bg ..

    BalasHapus
  28. Bos bikinin tutorial yang menjadi list/static

    BalasHapus
  29. kok di tempat ane agak berantakan om

    BalasHapus

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting