Building a List/Grid View Switcher in Blogger with Auto Read More

A list of posts in grid or list view provides a more defined canvas with which a blogger or website owner can use as a guide in creating content. This concept has extended to visitors, where they can have control on whether or not they wish to display posts in list or grid view. While custom modification codes are shared by some blogging sites, others are not. Some that are shared, however, can be complex even to bloggers themselves, such as JQuery.

The good news is there are lightweight codes available, including the Auto Read More in Blogger. Through it, a blogger can add two buttons that will enable visitors to switch between grid view and list view, depending on what they prefer. These buttons, however, are only visible on limited pages - homepage, label page and archive page. Nonetheless, it is better than not having this particular feature at all.

Unlike JQuery, the Auto Read More uses HTML, CSS and JavaScript. To view posts in a list view, two sets of CSS codes are added as one. Another set is added to view posts in grid view. Other combination of codes is used to enable easy switch between views, particularly at a click of a button.

Live Demo

How to Add a List/Grid View Switcher in Blogger

Step 1. Log into your Blogger dashboard and select your blog, then go to "Template" > press the "Edit HTML" button.

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type this tag below inside the box and hit Enter to find it:

</head>

Step 3. Just above the </head> tag, copy and paste the following CSS style and scripts:

Step 4. Next, search for the following line:

<b:section class='main' id='main' name='Main' showaddelement='no'>

...in case you can't find it, search for this one instead:

<b:section class='main' id='main' name='Main' showaddelement='yes'>

Step 5. Just above this line, add the following code:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<div id='list-view-button'><a class='grid-view-button' onclick='grid_view()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx2vHb8IH4ldDsEk-xm7x-dWgmD7Ks8QCF_pr1hokT9hbXFs67XXTVyWbsRgGgDmbCcizapJiltx1uxZZyNxmoaQ_ZIX9z_OCXnkCwJveTj28HqwkesdEjQqMkKVIcQeevhOJ1Dqz-cKp3/s1600/search-grid-icon.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> Grid View</a> <a class='list-view-button' onclick='list_view()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMxZOoj-h6a17hhOYcwU9Icj3mDwDA-lLvw_liRaw01TysNmLDbnFRfvnHFRoW45DvavAFUactg0z22pfu0DD96XvTWbP_OVtTwbUaE1JPiRFbGUjmNbTJ96qjGvFN7OP8PyxUu7a36DYb/s1600/icon-list-view.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> List View</a></div>
</b:if></b:if>

Step 6. Now, search the tag below:

<data:post.body/>

Step 7. You will find 3 occurrences of this code... replace only the second and third one with this one below:

<b:if cond='data:blog.pageType != "static_page"'>
    <b:if cond='data:blog.pageType != "item"'>
        <div expr:id='"summary" + data:post.id'>
            <data:post.body/>
        </div>
        <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script>
        <b:if cond='data:post.allowComments'>
            <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.numComments/>
            </a>
        </b:if>
    </b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
    <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
    <data:post.body/>
</b:if>

Important: if you already added the auto read more script, remove the previous one in order to make this work.

Step 8. Finally, click "Preview" to see if everything looks good and press the 'Save Template' button to save the changes...

That's it!

Adding a dynamic view switcher on a blog will make viewing content a lot easier for visitors. Whether using a list or grid view, a more compressed list of posts will eliminate the need to click on the next page, which could take time if loading takes a while to complete. For a blog archive, using the Auto Read More codes in Blogger will surely make everyone's viewing experience very convenient.

Considering the ease with which the codes can be customized, building a list/grid view switcher would be completed in no time. A real bonus is that Auto Read More works on all platforms, with cross-browser support as well.

5 comments:

ErhabenmayaMarch 12, 2015 at 2:29 PM
Hello !
Very good post ! thanks.
I have a problème with my columns, I have only one column, I have not 3 colums, do you know why ? svp.
Thanks a lot for your answer
Toute l'association Bordeaux B.C.March 13, 2015 at 1:29 AM
Hello,
I return about this comment for your great display of summaries. I applied your directives, I do not think of having made a mistake but in my blog, http: // www.erhabenmaya.com, the grid view does not display in picture board. The small summaries put some themselves below the others.
Please, you could help me. I would so much like to apply this presentation to my blog. It is so beautiful !!
Thank you a lot in advance.
Good day.
Best regards
iZumMarch 13, 2015 at 5:52 AM
Very Nice!
Blogger MarufMay 23, 2015 at 2:28 AM
2 Style in One Blog! Waw! Thanks For This Helpful Tricks