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

A list of grid or menu items provides a clearer picture that a blogger or website owner can use as a guide when creating content. This concept extends to visitors, as they can control whether they want to view posts in detail or grid view . Some blog sites use custom conversion codes, some don't. However, some of them can be tricky even for bloggers like jQuery.

The good news is that lightweight code is available on Blogger, including autoplay . With this, a blogger can add two buttons that allow visitors to switch between grid view and detailed view. However, these buttons only appear on certain pages: the home page, the favorites page and the archives page. However, it is better if it does not have this feature.

Like jQuery, AutoRead uses additional HTML, CSS, and JavaScript. To display articles as a list, two sets of CSS code are added into one. Added another group to display messages in grid mode. Another set of icons is used to make switching between views easier, especially when clicking a button.

Live show

How to add list/table view toggle in blogger

Step 1: Log in to your Blogger dashboard and select your blog, then navigate to the Form button > Edit HTML.

Step 2 Click anywhere in the code box and press CTRL+F to open the search box. Type this account in the box below and press enter to access it.

Step 3: A little higher Select, copy and paste the following CSS styles and scripts:

Step 4. Then find the following line:

... If you can't find it, look for it instead.

Step 5 Add the following code above this line.

Retina display Show menu

Step 6: Now find the account below.

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

It is important. If you have already added an AutoRead script, delete the previous script to run it.

Step 8: Finally, click Preview to make sure everything is correct and click Save Template button to save your changes…

that's it.

Adding a dynamic display selector to your blog will make it easier for your visitors to view your content. Whether you use a list or a grid, a shorter list of posts will save you from having to click to the next page, which takes a while to load. Using Blogger's additional autoplay codes for the blog archive will definitely make the browsing experience more convenient for everyone.

Because of the code's ease of customization, you'll be creating a list/table view selector in no time. The real bonus is that AutoRead works on all platforms and is compatible with other browsers.