Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Mode Grid Pada Post Homepage Blogger

Grid Post Homepage Blogger Membuat Mode Grid Pada Post Homepage Blogger - Secara umum semua template blogger yang masih standar (default) pada post homepage menggunakan struktur list post. Walaupun sekarang sudah banyak penyedia template blogger yang gratis dengan fitur-fitur yang menarik, namun beberapa blogger terutama yang masih belajar dalam desain blog mungkin tidak menghalangi niat untuk mencari cara sendiri agar gaya template blognya memiliki tampilan grid atau bergaya galeri. Saya telah menerima beberapa email dari blogger yang berbeda bertanya, apakah ada cara untuk membuat template default blogspot bisa menampilkan post grid. Tentu saja bisa, cara ini tidak luput dengan adanya fungsi jQuery. Sekarang akan saya bahas disini bagaimana agar homepage blog dapat menampilkan pola grid dan bisa berfungsi dengan baik sekaligus kita lengkapi dengan tombol auto read more. jQuery ini yang nanti akan memposisikan posting thumbnail di bagian atas dan menyelaraskan ringkasan post di bagian bawahnya dengan disertai jump break atau read more secara otomatis yang akan muncul di akhir setiap ringkasan setelah jumlah karakter tertentu. Fungsi jQuery Hack hanya akan bekerja pada homepage, arsip, label dan mencari halaman (tidak dengan pencarian Google custom). Untuk lebih detailnya, berikut penjelasan cara Membuat Mode Grid Pada Post Homepage Blogger.
Demo
1. Pada bagian dashbord blog pilih menu Template kemudian Edit HTML.
2. Selanjutnya copy kode berikut ini, lalu pasang di atas 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 = 400;
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:44%;height:370px;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>
Jika tidak ingin menampilkan thumbnail post, ubah "yes" menjadi "no".
Angka "400" merupakan jumlah karakter yang akan ditampilkan jika ada sebuah post tidak memiliki gambar.
Angka "180" merupakan jumlah karakter yang akan ditampilkan jika sebuah post memiliki gambar, tapi hanya gambar pertama dalam struktur post yang akan digunakan sebagai thumbnail.
Ketinggian thumbnail adalah "130" dan Lebar thumbnail adalah "220". Kedua ketinggian thumbnail dan nilai lebar dapat disesuaikan dengan nilai pilihan anda sendiri.
3. Kemudian cari kode <data:post.body/> kemungkinan terdapat 2-3 kode, lalu replace salah satu kode tersebut dengan kode berikut ini untuk memasang auto read more. Pada template yang saya gunakan, replace pada kode <data:post.body/> yang kedua.
<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>
Anda dapat mengubah kata "Read More" agar menjadi lebih menarik seperti "Lanjutkan membaca" atau lainnya, bisa juga mengganti read more dengan tombol gambar.
4. Jika sudah, Simpan template.

Apabila mengalami masalah seperti tombol Home, Newer post, maupun Older post yang hilang. Caranya di perbaiki dengan masuk ke Edit HTML lagi lalu cari kode <b:includable id='nextprev'> kemudian paste kode berikut ini di bawahnya.
<div style='clear:both;'/>
Sekian dasar dari cara Membuat Mode Grid Pada Post Homepage Blogger, nanti anda bisa mengembangkannya dengan memberi background dan border atau lainnya agar lebih serasi dengan template blog yang di gunakan.

Berlangganan artikel via email

68 Response to "Membuat Mode Grid Pada Post Homepage Blogger"

Kunjungan Dini Hari sambil menikmati, Segelas Coffe di dinginya udara pagi
Sambil nyimak Artikel Mas Andes yang menarik entang membuat tampilan
Grid pada blog, Menarik Artikelnya Mas? perlu di coba ijin bookmark ya Mas

Balas

Duh maaf Mas, sampai lupa gak bilang Terima kasih Mas Andes..:)
Wah dapet Pertamax nih dari Mas Andes rupanya saya, mari ngopi Mas?

Oot : Mas kalau gak keberatan bagaiman cara membuat artikel terkait
Seperti punya Mas Andes, diats ini, yang jelas bisa ada thumbsnail
Yang sudah valid Html5 punya Mas Andes mah yah, terima kasih.

Balas

tidak saya praktekan mas, tapi saya udah ngeliat demonya. hehe. ^_^

Balas

tampilan bergaya galeri keliatan lebih profesional, tapi tetap harus diimbangi dengan konten menarik juga ^^ terimakasih sharingnya mas semoga bermanfaat bagi blogger yang hobi mendesain blog :)

Balas

gitu ya mas.., nyimak dlu., mencoba memahami.., makasih *smile

Balas

ijin nyimak artikel yang keren ini sob, mudah mudahan dapat saya terapkan

Balas

diblog saya sepertinya sudah seperti itu, jadi gk perlu nerapin, hehe

Balas

saya cuman bisa geleng2 kepala, super sekali mas Andes, 4 jempol saya kasih :D

Balas

Wohoho mantap mas euy .. saya coba ya , boleh gak nih ?? hhe

Balas

banyak tapi kang kodenya..

Balas

Nah yang ini mudah diterapkan udah dijadikan satu untuk js dan css tinggal pasang langsung jadi..mantab mas bro

Balas

keren banget nih mas tampilan grid post homepage blognya, pengen nyoba cuman belum sempet hehe...

Balas

Script post home page yang sebelumnya sudah ada di hapus apa langsung saja mas?
Biasanya kan template sudah ada Post Homepagenya.

Balas

monggo mas jangan sungkan-sungkan hehe...

Balas

Bagus Memang kalau, Tampilan Homepage nya
Nanti di coba, kapan kapan mas

Balas

tergantung templatenya juga mas

Balas

Trik yang mantab sob.
Kebetulan punyak saya sudah ada grid nya.
Nyimak bro

Balas

wah terima kasih mas triks nya :D makin mantep deh

oh iya mas cara buat related post kayak mas andes gimana yah :?

Balas

apa gak takut berat mas ntar blognya..

Balas

Mantabs.. pilihan grid ini sedang ngetrend di template2 responsive... ternyata begini bikinnya...

Balas

tampilan grid post cocok untuk blog bisnis. akan tampak lebih rapi.

Balas

tampilan demo grid postnya keren sekali.

Balas

Cocok banget blog dengan model grid kotak-kotak ini untuk blog tentang game, template, atau toko online. Untuk blog biasa juga cocok ya mas, tapi harus buat sendiri hehehe :D
Kalau saya biasanya cari template yag sudah jadi mas, soalnya pusing juga kalau utak-atik template ^^

Balas

emang yang paling asik dari ng'blog itu adalah ngutak ngatik daleman blog selain bw tentunya, tapi karena ngerasa udah tuwa, jadirada mumet dan kliyengan kalau ngutak ngatik kaya dulu gituh..

Balas

kkebetulan ditempalte blog saya sudah dari bawaannya tampilannnya grid..
jadi, saya nyimak aja dah...

Balas

memang lebih menarik dan prof...
trims triknya mas

Balas

nggak mas :D ngapain takut :p

Balas

wah asik nih membuat tampilan grid post homepage blog, tapi sayah sekarang gak bisa utak atik daleman blog mas, dari semenjak sayah utak atik blog dan scripnya tidak tersimpan terus jadi puyeng hehehe...

saya simpan dulu deh scripnya... siapa tau nanti utak atik daleman blog mudah tersimpan

Balas

Keren banget yah cara mas andes ini :D
Kapan-kapan saya cobain deh :)

Balas

Wah sepertinya mas karis sedang ikut ronda ya hehehehe ^^
atau jangan-jangan malah nginep di rumah nya mas andes. Begdang getu ^^

Balas

Gak apa-apa Mas yang penting valid html5 pasti top markotop
Kelihatanya keren simple dan Dynamis, jadi kesanya kaya
Gimana giiituu hh,. mudah-mudah di expose yah Mas thanks :)

Balas

Bener Mbak Rin, tiap ada waktu malam tugas kerja sip siang
Pasti saya ngaronda, dan pas dapet Parcel Pertamx dari
Mas Andes, di Rumah Mbak Rin, saya belum pernah dapet th :)

Balas

Neteh - neteh balurungsit datang lagi di blog Mas Andes yang kasep ini
Mau ngedalemin cara membuat tampilan grid di homepage blog saya
Di simak lagi Mas, kaya sudah mantep deh ni hari mah. hatur nuhun :))

Balas

Selamat sore mas andes. Izin ikut belajar disini mas tentang cara membuat tampilan grid post. Salam hormat buat mas andes dan sahabat blogger semuanya :D

Balas

mantap beut...

Balas

saya tadi sempat coba mas tapi gak ajlan karena saya lupa menghapus link otomatis punya mas yang baca selengkapnya itu :D..

Balas

kalau tanpa slider bisa nggak mas ?

Balas

kan itu emang tanpa slider kang, cuma buat mode gridnya saja..
itu yang ada di blog demo juga demo slider bukan dari script di atas

Balas

mas, kalau mau menghilangkan tulisan postnya gimana mas? Jadi yang tampil tinggal gambar sama judulnya doang..

Balas

nice tips sob:) membuat tampilan homepage lebih pro..
kenapa ga skalian dibuat responsive-nya?

Balas

punya saya masih ada yang error mas, kayaknya ada yang nyangkut tolong bantu mas ini blog saya mas, www.nyantai.us dan setiap saya edit htmlnya pasti witget yang di bawah post hilang sendiri :( itu knapa ya?

Balas

Gan Punyak Gwe Pos nYA tambah Acak'' kan gak rata...Gimana tUh

Balas

Mas, kenapa saat mode grid ini diterapkan di template punya mas andes " blues dark for you " malah menjadi acak acakan ? mohon bantuannya mas, sebelumnya terimakasih

Balas

di blog saya malah jadi acak-acakan cakar ayam... sudah coba ubah ukuran posting, gambar dan lain-lain... tetap saja acak acakan

Balas

aku gagaaaal hiksss jadi acak-acakan..
tapi btw terimakasih infonya yaaa

Balas

Mas Opick : sebenarnya cuman masalah css doank seperti { Margin,Padding,Overflow:hidden} dan mudah2n bisa membantu.

Balas

Saran : Coba cek satu persatu fungsi css berikut { Margin,Padding dan Over flow } mudah2n bisa jadi rapi.

Balas

Hehe... Sama, saya juga berantakan hasilnya.
Kurang ngerti Margin, Padding dan Over flow-nya harus sebesar apa...

Balas

Maaf Mas Anton silahkan gati css post diatas dengan ini :

.post {width: 265px;margin-right: 4px;height:250px;float:left;position:relative;display: block;margin-top: 5px;overflow: hidden}
.post h3{margin-bottom:-15px;padding:5px;font-family: Helvetica, Arial}
.post-body {padding:5px;height:241.5px;font-family: Helvetica, Arial; font-size: 13px; margin:20px;}

.post-labels {display:none;}
.mobile .post {width:auto;height:auto;}
.mobile .post-body {height:auto;}
.more {float:right;background:#CADAEF;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;}

Mudah2n bisa membantu

Balas

jika mas anton pengen lihat hasil css yang saya kasih silahkan kunjungi blog saya chordto.blogspot.com

Balas

thanks mas...
kinjung balik http://blog-medianet.blogspot.com/

Balas

ko saya berantakan ya ?

Balas

min, kok punya ane jadi acak acak kan yah

Balas

makasih min, dah jadi

Balas

permisi gan mint sarannya dong buat blog saya, kenapa tampilan order dan view detailnya ada yang tumpang tindih ya gan? mohon pencerahannya. ini blog saya gan, tokoherbalbanten.blogspot.com, tks

Balas

cara mengilangkan tulisan nya kok ngk bisa iy? padahal aku hanya ingin pasang foto tanpa tulisan....mohon pencerahannya,

Balas

Ini yg saya cari, terima kasih Mas

Balas

kunjungi blog saya mas, dan jangan lupa berikan koment dan saran

Balas
avatar
Anonymous

Kalau di template saya jadinya 1 kolom aja mas...
Cuma di sebelah kiri. Kenapa ya itu?

Balas

coba ubah lebarnya di perkecil .post {width:44% sesuaikan ukuran template

Balas

di http://posbakumadintanjungredeb.blogspot.co.id/, kenapa post nya tidak tersusun grid ya ? malah ke bawah terus. Mohon bantuannnya. Thanks

Balas

tampilan gagal dikarenakan javascript tidak jalan

Balas

punya ku kox nggak bisa yahhhh
nggak ada perubahan sama sekali

Balas

punyaku cm muncul satu gridnya,apanya ya yg dirubah.. hatur nuhun klo ad yang mw berbagi... heheh

Balas
avatar
Anonymous

lagi cari yang beginian tapi itu karena css nya sudah rombakan jadi susah mau cari css nya hehe

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Mode Grid Pada Post Homepage Blogger" ini bermanfaat, share ke jejaring sosial.
Konversi Kode