Building A List/Grid Sentiment Switcher Inward Blogger Amongst Car Read More

A listing of posts inward grid or listing sentiment provides a to a greater extent than defined sheet amongst which a blogger or website possessor tin forcefulness out role every bit a guide inward creating content. This concept has extended to visitors, where they tin forcefulness out stimulate got command on whether or non they wishing to display posts inward listing or grid view. While custom modification codes are shared past times around blogging sites, others are not. Some that are shared, however, tin forcefulness out last complex fifty-fifty to bloggers themselves, such every bit JQuery.

The proficient tidings is at that spot are lightweight codes available, including the Auto Read More inward Blogger. Through it, a blogger tin forcefulness out add together 2 buttons that volition enable visitors to switch betwixt grid sentiment in addition to listing view, depending on what they prefer. These buttons, however, are exclusively visible on express pages - homepage, label page in addition to archive page. Nonetheless, it is improve than non having this item characteristic at all.

Unlike JQuery, the Auto Read More uses HTML, CSS in addition to JavaScript. To sentiment posts inward a listing view, 2 sets of CSS codes are added every bit one. Another laid is added to sentiment posts inward grid view. Other combination of codes is used to enable slow switch betwixt views, peculiarly at a click of a button.

Live Demo

How to Add a List/Grid View Switcher inward Blogger

Step 1. Log into your Blogger dashboard in addition to select your blog, in addition to thus larn to "Template" > press the "Edit HTML" button.

Step 2. Click anywhere within the code expanse in addition to press the CTRL + F keys to opened upwards the search box. Type this tag below within the box in addition to hitting Enter to notice it:

</head>

Step 3. Just inward a higher identify the </head> tag, re-create in addition to glue the next CSS mode in addition to scripts:

Step 4. Next, search for the next line:

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

...in illustration y'all can't notice it, search for this ane instead:

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

Step 5. Just inward a higher identify this line, add together the next 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/AVvXsEjvptuJKZYd_29Xm_sP9SW7x3xFEJNbhbTVftbusP0TfANPe9w0UBHCv0iVCXsrdmKS3zog0DADsqd5KxOpmG-Fq4KxwH8WTdrvZpgLLWuOSGKlSfNw4h_G4XcE-DFfg7nSW0aZYdU9rMFs/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/AVvXsEjnBRASw58B7HosckUf9Fd-SEYVelYvGrqtBqX5DF6Rzv8w-2MrW2UxTh-fY-o9PzwaVmH6Yq6bU_9W2ZpaeSOumPjAQ4DoO0WR-UfKhSKNdoAKRmXCNNU_NHTWXfpDx2HSz32EPt6ldOdd/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 volition notice three occurrences of this code... supersede exclusively the instant in addition to 3rd ane amongst this ane 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 y'all already added the automobile read to a greater extent than script, take away the previous ane inward lodge to brand this work.

Step 8. Finally, click "Preview" to come across if everything looks proficient in addition to press the 'Save Template' push clit to salve the changes...

That's it!

Adding a dynamic sentiment switcher on a weblog volition brand viewing content a lot easier for visitors. Whether using a listing or grid view, a to a greater extent than compressed listing of posts volition eliminate the take to click on the adjacent page, which could accept fourth dimension if loading takes a piece to complete. For a weblog archive, using the Auto Read More codes inward Blogger volition sure enough brand everyone's viewing sense real convenient.

Considering the remain amongst which the codes tin forcefulness out last customized, edifice a list/grid sentiment switcher would last completed inward no time. Influenza A virus subtype H5N1 existent bonus is that Auto Read More industrial plant on all platforms, amongst cross-browser back upwards every bit well.