Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Trik dan Tutorial Blog

Cara Mengganti Tampilan Homepage Static Menjadi Grid Pada Blog


tags: cara merubah tampilan home menjadi 4 kolom, cara merubah tampilan home menjadi 3 kolom, cara merubah kotak postingan menjadi kotak-kotak, cara mengatur homepage menjadi magazine

Cara Mengganti Tampilan Homepage Static Menjadi Grid Pada Blog - Pada template biasa, pada umumnya tampilan homepage di blog memakai mode static atau list. Tampilan homepage yang mode grid/ kotak biasanya dipakai untuk template sejenis Magazines, Movie, atau Gallery.

cara merubah kotak postingan menjadi kotak Cara Mengganti Tampilan Homepage Static Menjadi Grid Pada Blog

Nah, kali ini saya akan membuatkan cara atau tips mengubah tampilan hompage blog yang static menjadi grid/ kotak. Namun tentunya blog tersebut akan mengalami sedikit perubahan pada tampilannya, yaitu static atau listnya akan memanjang ke bawah dan lebar, namun akan menjadi kotak-kotak kecil yang akan menghemat luas pada homepage blog tersebut.

cara merubah kotak postingan menjadi kotak Cara Mengganti Tampilan Homepage Static Menjadi Grid Pada Blog

cara merubah kotak postingan menjadi kotak Cara Mengganti Tampilan Homepage Static Menjadi Grid Pada Blog
ini pola blog saya dengan tampilan homepage grid via http://diamonita.blogspot.com

Lalu bagaimana cara mengganti tampilan homepage static menjadi grid pada blog ? Itu sangat gampang sekali. Yang perlu Anda perhatikan hanya tutorial yang akan saya bagikan pada blog Endolita ini. Perlu diingat, saya disini hanya akan merubah tampilan dasarnya saja. Untuk duduk masalah penempatan waktu/ tanggal post dengan judul dan lain sebagainya, solusinya harus Anda edit sendiri CSS di template blog Anda. Saya yakin Anda bisa.

  1. Login ke akun Blogger
  2. Klik Template > Edit HTML
  3. Cari aba-aba </head> , kemudian letakkan script di bawah ini di atasnya.
    4. <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>
  4. Klik Simpan Template

Catatan :

  • 380 ialah jumlah aksara yang akan ditampilkan jikalau sebuah posting tidak mempunyai gambar.
  • 180 ialah jumlah aksara yang akan ditampilkan jikalau sebuah posting mempunyai gambar.
  • 130 ialah tinggi gambar.
  • 220 ialah lebar gambar.
  • 45% ialah ketinggian kotak posting pada homepage.
  • 200 ialah lebar kotak posting pada homepage.
  • Angka diatas dapat Anda ganti sesuai selera dan harapan Anda sendiri.


Jika Anda menginginkan ada fitur Readmore di tampilan grid anda, Anda gunakan metode berikut,

  1. Cari aba-aba <data:post.body/>, biasanya ada 1-3 aba-aba menyerupai itu
  2. Copy aba-aba dibawah ini, kemudian ganti aba-aba <data:post.body/> yang ke 2 dengan script di bawah ini:


    3. <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 :

    • Tulisan Read More dapat Anda ganti sesuai dengan harapan Anda, contohnya dengan Lanjutkan Membaca, Baca Selengkapnya, atau Lihat Selengkapnya.

  3. Klik Simpan Template


Catatan :

Jika sesudah memakai metode grid diatas ada hambatan dengan tombol Beranda, Posting Lama, Posting Baru, atau tombol Home, Newer Post, Older Post, pada homepage blog Anda hilang, solusinya ialah cari aba-aba <b:includable id='nextprev'> pada bab Edit HTML, kemudian simpan aba-aba ini <div style='clear:both;'/> dibawahnya.

Udah gitu aja. Thanks :)

Anda mungkin menyukai postingan ini :