Blogger Tips

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 view 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='http://1.bp.blogspot.com/-vjVOXJyXcC4/VP9A7twG8mI/AAAAAAAALJ8/YW0yxhvxP7A/s1600/search-grid-icon.png' -8px 1px -3px -6px;width: 16px;'/> Grid View</a> <a class='list-view-button' onclick='list_view()'><img src='http://4.bp.blogspot.com/-SrQiXEhgVmA/VP9BUnr3KkI/AAAAAAAALKE/EwVFym9YxoA/s1600/icon-list-view.png' -8px 1px -3px -6px;width: 16px;'/> List View</a></div>
</b:if></b:if>

Step 6. Now, search the code 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 Best Popular Posts Widgets For Blogger
If you're using Blogger as the platform for your personal or business blog, you're probably looking for ways to customize it and make it your own. This way, you'll make your webpages unique and eye-catching and ensure they'll stand out...

- Responsive Css Timeline With 3d Effect For Blogger
Here's another amazing way to display our Blogger posts. By applying the following Responsive CSS Timeline View with 3D Effect on Blogger Posts, we will have a responsive timeline-like structure of the most recent posts and their thumbnails, along...

- Display Blogger Posts In Grid View With Thumbnails
Grid View with Thumbnails is a script for self-hosted Blogger blogs which will display blog posts as a thumbnail grid of images in homepage and archive pages. Instead of sending your blog visitors to a page that displays all the posts in full length with...

- How To Create Magazine Style With Post Summaries And Thumbnails On Blogger
The magazine or newspaper style templates are those that display the posts summaries in the homepage by stacking the columns on top of each other. This kind of templates is very popular nowadays, and whether it is a news or technology blog, everyone needs...

- Auto Read More With Thumbnail For Blogger/blogspot Posts
How to make posts in the blog homepage to be displayed with an automatic "read more" button and a thumbnail.To be more specific, this will show the title of the post, then a short summary with a number of characters and a thumbnail, that will be the thumbnail...

Blogger Tips