Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

How To Change Your Blogger List Post Into a Grid or Gallery View

by Durodola Ridwan | Tuesday, August 20, 2013 | 110 Comments

Generally, all default blogger template are arrange in list style, while some bloggers (especially those who run a fashion blog) have been looking for a way to style their blogger template to a grid  or gallery style. I have receive couple of emails from different bloggers asking, if there is a way they can style their blogspot template into a grid style. Now here i come with a hack that can do the job perfectly well.




This hack will position your post thumbnail at the top, and align the post summary at the bottom with an automatic jump break or "read more" link, which will appear at the end of each summary after a specified number of characters. Bigs-up to Muhammad Hassan on these.
The hack will only work on homepage, archive,  label and search page (not with Google custom search.) Love that? Let's get it done then.


Turning List Style to Grid Style

  • Go to your blogger dashboard
  • Click on Template > Edit HTML
  • Use ctrl F to find </head> and paste the following code above/before it.

<!-- Grid Style Hack For Blogger By www.RealcomBiz.com Start-->
<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[
/*
Grid Style Hack For Blogger By www.realcombiz.com
*/
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:20px;height:20px;}
.post-labels {display:none;}
.mobile .post {width:auto;height:auto;}
.mobile .post-body {height:auto;}
</style>
</b:if>
</b:if>
<!-- Grid Style Hack For Blogger By www.RealcomBiz.com  End -->

Now search for <data:post.body/> and replace it with the following code. You may find 2-3 occurrence of this line, but don't replace the first occurrence with it.

<!-- Grid Style Hack For Blogger By www.RealcomBiz.com Start -->
<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <a class='more' expr:href='data:post.url'>Read More...</a> </b:if> </b:if>
<!-- Grid Style Hack For Blogger By www.RealcomBiz.com End -->


Customization

  • If you don't want to show post image thumbnail, change "yes" to "no"
  • "400" represent the number of characters to be displayed if a post has no image.
  • "180" represent the number of characters to be displayed if a post has an image, but only the first image within the post structure will be use as thumbnail.
  • The height of the thumbnail is "130"
  • The width of the thumbnail is "220". Both the thumbnail height and width value can be adjusted to your own preferred value.
  • You can change the word "Read More..."  to something more enticing like "Continue reading..." Better still, replacing the read more link with image button will be super-cool.

Note: You may find your Home, Newer, Older post link missing. Don't worry, here is a fix for it. Go to the Edit HTML section of your template, find <b:includable id='nextprev'> and paste the following code after/below it.

<div style='clear:both;'/>

Save your template. Taaddaaaa! You are done.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

110 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Seems like a great idea to change our blog posts into gallery view. Thanks for sharing this idea.

    Regards
    Gagan Masoun
    www.BlogsDaddy.com

    ReplyDelete
    Replies
    1. this is the message i get while trying to save the changes after pasting all the code accordingly.look it below;
      Error parsing XML, line 30, column 65: The markup in the document following the root element must be well-formed

      Delete

    2. much help after reading this article thanks | Obat Aborsi

      Delete
  2. Replies
    1. The hack is working perfectly well. Can you please explain the kind of error you are encounting?

      Delete
    2. This comment has been removed by the author.

      Delete
  3. thanks you
    regards from www.shayrikiduniya.com

    ReplyDelete
  4. sir
    how to both be same click event list view or grid view ?

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. please help me it's not working. It shows like below URL

    http://prohealths.blogspot.com

    Help me faster

    ReplyDelete
  7. I think this is a one great hack, but, how about with images in this way:

    var imageReg = /s\B\d{3,5}/;
    var thImageURL = entryContent.find('img').first().attr('src').replace(imageReg,'s250-c');
    ....................................................
    <img src='" + thImageURL +

    Or somehow?

    If somebody has 20, 30 posts on hompage with original big images 1200px or even 1600px, needs time to load. Lets left google do this job and shrink them.

    ReplyDelete
    Replies
    1. how use this code (your code) with this trick

      Delete
  8. Verry nice post well done!..i would like to ask how can we hide post summary?

    ReplyDelete
    Replies
    1. Look for the following line in the above code

      summary_noimg = 400;
      summary_img = 180;


      Change the values to zero (0).

      Delete
    2. Change the values to zero (0).
      It doens't work.. I can still see few letters in every grids.

      Delete
  9. Thanks for Sharing this article..i am looking for this article - Free Download HD Wallpaper

    ReplyDelete
  10. please is not working on my blog everything is scattered am using awesome template any solution to this...

    ReplyDelete
  11. how to i can chage grid to list type.
    plz tell bro as early as possible

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. How do I remove the summary? I want to show the thumbnail only. Can you help, Durodola?

    ReplyDelete
  14. Respectable Sir/Team;

    Is there any way to show grid view of blogger search labels (not the home page just label search as grid view)

    like given link should be displayed as grid view instead of single post or read more view

    (It should not be like) LINK: http://tricks-andstips.blogspot.com/search/label/Adobe

    (It should be like) LINK: http://paktv12.blogspot.com/search/label/Bewafa%20Poetry

    (Please help me on the given topic I am searching alote and for long time for this plzzzz)

    I need this for my blog www.mobilepricess.com
    Want LIKE these pages/ searched labels in gridview :: www.mobilepricess.com/search/label/3G

    ReplyDelete
  15. I have a newspaper style currently and would like to add this style under where my first picture is larger. Anyway we can do that?

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. I have a problem at my blog http://anime-acces.blogspot.ro ; on first page I can see only two post and the rest no, on the other pages everything is fine, if someone know how to fix this problem please contact me

    ReplyDelete
  18. Hello! I've used your step by step tutorial to achieve a grid view on my blog but it's not working... I don't understand what I've done wrong. Could you please help me with it??

    Cécile

    ReplyDelete
  19. Oh my God! Thank you very much! It works!

    ReplyDelete
  20. Thank you for the information of his article is very nice and I like to read this article I know a lot of things thanks ...

    Jual Obat Kuat, Alat bantu sex
    jual obat bius, jual obat tidur
    jual obat bius tokcer
    jual obat tidur tokcer



    ReplyDelete
  21. Thank you for this article. But I don't know if it's because i've a special template but it doesn't work for me. :-/

    http://www.mademoisellepolish.com

    ReplyDelete


  22. JUAL BONGKAHAN BATU BACAN ASLI MALUKU UTARA,BACAN DOKO DAN PALAMEA (TERNATE DAN HALMAHERA)

    Daftar harga sebagai berikut;

    ✿ BACAN DOKO DARI TERNATE (Maluku Utara)

    -Berat 1 Ons Rp 500 Ribu

    -Berat 5 Ons Rp 1 Juta 250 Ribu

    -Berat 1 Kg Rp 2 Juta 500 Ribu

    -Berat 2 Kg Rp 4 Juta 200 Ribu

    -Harga masih bisa nego dikit mass,setiap pembelian perkilo dapat bonus 1permata batu bacan.

    ✿ BACAN PALAMEA DARI HALMAHERA (Maluku Utara)

    -Berat 1 Ons Rp 500 Ribu

    -Berat 5 Ons Rp 1 Juta 200 Ribu

    -Berat 1 Kg Rp 2 Juta 200 Ribu

    -Berat 2 Kg Rp 4 Juta

    -Harga masih bisa nego dikit mass,setiap pembelian perkilo dapat bonus 1permata batu bacan.

    ✿ Kondisi bahan ;

    – Bahan / rough bacan doko asli bukan sintetis

    – Bahan tua (galian lama)

    – Hasil tambang sendiri

    – Bukan bacan rawatan,tapi murni hasil alam

    – Kualitas super kristal, sudah tembus

    – Sudah tembus

    – Beberapa titik sudah ada yang kristal

    – Bahan keras dan padat

    – Siap gosok poles

    – Daging utuh, tanpa kapur

    – Tidak rapuh, tidak mudah pecah / retak

    – Deskipsi sesuai apa adanya, harap diperhatikan dengan baik agar tidak ada dusta diantara kita

    Melayani Pembelian Per Kilo Dan Per Ons Untuk Bongkahan

    Kita Juga Melayani Pembelian Luar Daerah Dan Luar Kota

    Bagi Pecinta Bacan Yang Minat Silahkan Langsung Hubungi

    Kartu XL;081998646227

    Kartu AS;082390202837

    PIN BB: 56C06F38

    #.stock terbatas

    Siapa cepat dia dapat

    Bagi yg merasa sudah minat dan ingin transaksi pembelian dengan kami,

    Adapun cara yg kami sediakan:COD bisa silahkan datang ke alamat saya di daerah Halmahera selatan

    Alamat:Jl.Rawabadak rt 004 rw 007,desa amasing kota utara
    kec.Bacan,halmahera selatan maluku utara,dan bagi peminat batu bacan di
    luar kota bisa kami kirim melalui jasa pengiriman
    seperti:JNE/TIKI/KANTOR POS,jika barang sudah kami kirim,kami berikan
    no.resi pengiriman barang yang anda pesan

    ReplyDelete
  23. I don't know what has happened to the custom of delivering consistent good articles. I hope that the custom comes alive after this..thumbs up for your work. Jasa Seo

    ReplyDelete
  24. I enjoyed over read your blog post. Your blog have nice information, I got good ideas from this amazing blog. I am always searching like this type blog post. I hope I will see again..
    animal jam| cool games| cool math games| 8 ball pool| sudoku| yoob| stickman games| unblocked games | shooting games| friv4school|
    happy wheels| fighting games

    ReplyDelete
  25. Fantastic article post.Really looking forward to read more. Awesome.
    http://conferenceneardelhi.com/DelhiNCR

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. Thanks for every other informative site. The place else may just I get that kind of information written in such an ideal means? I have a venture that I’m just now operating on, and I have been on the look out for such information.
    Apotik jual vimax asli
    Obat Pembesar Penis
    Vimax
    Vimax Asli
    Jual Vimax Asli
    Vimax Original
    Pembesar Alat Vital
    Ciri Vimax Asli

    ReplyDelete
  28. How To Change Your Blogger List Post Into a Grid or Gallery View is my inspiration

    Thanks relating to indicating this information, fantastic suggests linked with present which intended theme in order to conversation.
    Vimax and Vimax Asli

    ReplyDelete
  29. It's perfect for those students, who want to study about this faculty. I like the news that you have written in a detail.Piano Tiles 2 game online, Score Hero, Dream League Soccer, b612 and descargar b612, Stick RPG 2. How about you?

    ReplyDelete
  30. I am impressed by the information that you have provided on this blog. It seems that you work for top five resume services online. The post shows that you understand this subject very well. I bookmarked this page, will come back for more.

    ReplyDelete
  31. PROMO CASHBACK 10% DARI NILAI KEKALAHAN ANDA GAME ONLINE TERBAIK & TEPERCAYA INDOMONOPOLY.COM
    MIN DEPOSIT 20.000IDR DAN MIN WITHDRAW 50.000IDR CHIP DAPAT DI UANGKAN KEMBALI JIKA ANDA INGIN MELAKUKAN
    PENARIKAN DANA/ATAU TIDAK INGIN LANJUT BERMAIN KEMBALI. DIJAMIN 100% PLAYER VS PLAYER.. NO BOT, NO ADMIN,
    NO PENIPUAN BOLEH DI CEK. KOMISI REFERRAL 50% BERMINAT? BISA LANGSUNG HUBUNGI LIVE CHAT KAMI SETIA MELAYANI ANDA 24JAM.
    KEMUDAHAN HANYA BERSAMA KAMI DI INDOMONOPOLY.
    1.KUNJUNGI WEB KAMI : http://bit.ly/1QULFBI

    2.BBM Pin : 5649B320

    3.contact us : LINE : hermilyrostan

    4.cara bermain game INDOMONOPOLY di pc http://bit.ly/1R1fOPQ

    5.petunjuk unduh game INDOMONOPOLY di android http://bit.ly/1SoikP4

    6.TERSEDIA JUGA DI PLAYSTORE KHUSUS DI ANDROID ANDA http://bit.ly/22ESOcV

    7.cara daftar userid di INDOMONOPOLY http://bit.ly/1mldTZz

    8.Tutorial cara bermain dan sistem potongan pada permain : http://bit.ly/1RFLt4X

    ReplyDelete
  32. Really like the dear information you offer in your articles. I’m able to bookmark your site and show the kids check out up here generally.
    Signature:
    messenger indir | messenger download |messenger indir | messenger | messenger indir | download messenger | messenger indir | messenger indir

    ReplyDelete
  33. All the best blogs that is very useful for keeping me share the ideas
    of the future as well this is really what I was looking for, and I am
    very happy to come here. Thank you very much
    earn to die
    earn to die 2
    earn to die 3
    Hi! I’ve been reading your blog for a while now and finally got the
    earn to die 4
    courage to go ahead and give youu a shout out from
    earn to die 6
    Austin Texas! Just wanted to tell
    earn to die 5
    you keep up the fantastic work!my weblog
    age of war
    Hi! I’ve been reading your blog for a while now and finally got the
    happy wheels
    strike force heroes
    slither io
    slitherio

    ReplyDelete
  34. This post will help the internet users for building up new blog or even a weblog from start to end.
    Office 2016 Activator

    ReplyDelete
  35. Thank you for sharing in this article , you may be useful and successful always .

    * klg asli
    * vimax asli
    * viagra usa
    * vimax asli
    * vimax asli

    ReplyDelete
  36. how to i can chage grid to list type.
    plz tell bro as early as possible
    Agen Sbobet | blackjack | Agen Bola | Game Poker | judi poker



    ReplyDelete
  37. thank you admin nice info

    TOKO ONLINE ALAT BANTU SEX PRIA DAN WANITA
    " AHONG SHOP "

    ALAT BANTU SEX MURAH
    ALAT BANTU SEX
    KONDOM SILIKON
    OBAT BIUS
    OBAT PERANGSANG WANITA

    ReplyDelete
  38. Really like the dear information you offer in your articles. I’m able to bookmark your site and show the kids check out up here generally. Poker Dewa

    ReplyDelete
  39. I really appreciate the kind of topics post here. Thanks for sharing us a great information that is actually helpful taruhan bola | Dewapoker

    ReplyDelete
  40. Thank you for sharing in this article , you may be useful and successful always .

    * klg asli
    * vimax asli
    * viagra asli usa
    * vimax asli
    * vimax asli

    ReplyDelete
  41. The war between humans, orcs and elves continues. Lead your race through a series of epic battles, using your crossbow to fend off foes and sending out units to destroy castles. Researching and upgrading wisely will be crucial to your success!
    age of war 3 | age of war 2 | unfair mario 2 | tank trouble 3 | tank trouble
    The game controls are shown just under . Movement mechanisms primarily include acceleration and tilting controls.
    cubefield | tank trouble | happy wheels | slitherio | gold mine

    ReplyDelete
  42. Jual Viagra Asli,Jual Viagra Asli.
    http://viagraasli.onesmablog.com/JUAL-VIAGRA-ASLI-MURAH-NO-1-DARI-USA-HARGA-GROSIRAN-1243667
    http://viagraaslimurah.onesmablog.com/Agen-Obat-Viagra-Asli-Murah-1266166
    http://viagraoriginal.onesmablog.com/Obat-Kuat-Viagra-Asli-Original-Murah-1275662
    http://viagraasli.sosblogs.com/The-first-blog-b1/Jual-Viagra-Asli-Murah-Dari-Usa-b1-p2.htm
    http://viagraasliterbaik.blogspot.com/2016/06/viagra-asli-murah-terbaik.html
    http://obatkuatkesehatan.com/obat-kuat-pria-viagra.html
    http://humanityfever.blogspot.com/2016/05/viagra-asli.html
    http://lawemas.onesmablog.com/Jual-Viagra-Asli-Murah-Obat-Kuat-Viagra-Asli-1136953
    http://cmliker.blogspot.com/2016/05/jual-obat-kuat-viagra-asli-dengan-harga.html
    http://blogianista.blogspot.com/2016/05/viagra-asli.html
    http://versinyasaya.blogspot.com/2016/05/viagra-asli.html
    http://tikusblogger.blogspot.com/2016/06/viagra-asli-murah-terbaik-dari-usa.html
    http://obatkuatpria.onesmablog.com/Jual-Viagra-Asli-Murah-1137056
    http://obatkuatpriaone.blogspot.com/2016/06/viagra-asli.html
    http://cara-kita.mwb.im/jual-viagra-asli-murah-dari-usa.xhtml
    http://iklanbaris689.mywapblog.com/jual-viagra-asli-murah.xhtml
    http://arimbionline.blogspot.com/2016/06/viagra-asli.html
    http://lawemas.indonesiaz.com/jual-viagra-asli-paling-murah.xhtml
    http://pulsasakti.yu.tl/jual-viagra-asli-usa-paling-murah.xhtml
    http://amykucintaku.blogspot.com/2016/06/viagra-asli.html
    http://nulidragon.blogspot.com/2016/06/viagra-asli.html
    http://lawemas.bloggets.net/jual-viagra-asli-murah-terbaik/
    http://jasaseomuda.blogspot.com/2016/06/viagra-asli.html
    http://obatkuatpriapriaampuh.blogspot.com/2016/06/viagra-asli.html
    http://jualcialismakassar.blogspot.com/2016/06/harga-obat-kuat-iagra-asli-murah-dari.html
    http://pemudamart.blogspot.com/2016/06/viagra-asli-murah.html
    http://dhe2-komputer.blogspot.com/2016/06/viagra-asli.html
    http://nulidragon.blogspot.com/2016/06/viagra-asli-murah.html
    http://obatkuatkesehatan.com/obat-kuat-pria-viagra.html
    http://obatkuatkesehatan.com/obat-kuat-pria-viagra.html

    ReplyDelete
  43. With a Hotmail account, you can send and receive emails quickly and easily as well as login and use all Microsoft services.
    hotmail login | login to hotmail
    This is the game so players feel very fierce , adventurous . You try to join and play this game , you will feel great like.
    happy wheels | fireboy and watergirl | goodgame empire
    learn to fly | slither io | gun mayhem | age of war
    io games | strike force heroes | strike force heroes 4

    ReplyDelete
  44. Terima kasih untuk berbagi dalam artikel ini , semoga bermanfaat dan anda sukses selalu.

    * klg asli
    * vimax asli
    * viagra asli usa
    * vimax asli
    * vimax asli
    * vagina senter
    * vakum pembesar penis

    ReplyDelete
  45. Thanks for sharing your information, its great and i appreciated about it!

    Agen Poker Online | Agen Game Poker

    ReplyDelete
  46. Hello my friend! I wish to say that this post is amazing, nicely written along
    with contain almost all significant information. I’d
    like to see more posts such as this.

    Agen Taruhan | Judi Bola

    ReplyDelete
  47. Excellent post, I agree with you 100%! I’m always scouring the Internet for new information and learning whatever I can, and in doing so I sometimes leave comments on blogs. Agen Bola Judi Bola Sbobet

    ReplyDelete
  48. Great article. Thanks a lot for sharing. Want to know the customer care numbers of some of the leading brands all over the world, just check
    Vodafone customer care number

    ReplyDelete
  49. I'm impressed, I must say. Very rarely do I come across a blog that's both informative and entertaining, and let me tell you, you've hit the nail on the head. Your blog is important; the issue is something that not enough people are talking intelligently about
    agen casino bolatangkas judi online

    ReplyDelete
  50. This is a very good post. Just wonderful. Truly, I am amazed at what informative things you've told us today. Thanks a million for that.
    poker88 dewapoker

    ReplyDelete
  51. I was more than happy to find this web site. I need to to thank you for your time due to this fantastic read!! I definitely savored every bit of it and I have you book-marked to see new things in your web site.
    pokerace 99 || pokerclub 88

    ReplyDelete
  52. The you have is very useful. The sites you have referred was good. Thanks for sharing... Cewek Bule Bugil Lagi Sange

    ReplyDelete
  53. Thanks, your articles are great. I frequently visit your blog, you can look at my website
    minecraft

    ReplyDelete
  54. seems great to me please cook some sweet dish now :) judi bola live score Bola 88

    ReplyDelete
  55. To join the free games you go here. It will have a lot of great games for you that
    gun mayhem 3 | can your pet 2
    learn to fly 3 | happywheels
    tank trouble 3

    ReplyDelete
  56. The blog or and best that is extremely useful to keep I can share the ideas
    of the future as this is really what I was looking for, I am very comfortable and pleased to come here. Thank you very much.
    gold miner|stick war 3| pokemongo
    | stick man|animal jam login

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger