Building A List/Grid Sentiment Switcher Inwards Blogger Amongst Automobile Read More

A listing of posts inwards grid or listing sentiment provides a to a greater extent than defined sail amongst which a blogger or website possessor tin role equally a guide inwards creating content. This concept has extended to visitors, where they tin direct maintain command on whether or non they wishing to display posts inwards listing or grid view. While custom modification codes are shared yesteryear roughly blogging sites, others are not. Some that are shared, however, tin live on complex fifty-fifty to bloggers themselves, such equally JQuery.

The practiced tidings is at that spot are lightweight codes available, including the Auto Read More inwards Blogger. Through it, a blogger tin 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 amend than non having this item characteristic at all.

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

Live Demo

How to Add a List/Grid View Switcher inwards Blogger

Step 1. Log into your Blogger dashboard in addition to select your blog, in addition to then become 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 upward the search box. Type this tag below within the box in addition to hitting Enter to discovery it:

</head>

Step 3. Just higher upward the </head> tag, re-create in addition to glue the next CSS agency in addition to scripts:

Step 4. Next, search for the next line:

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

...in example you lot can't discovery it, search for this i instead:

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

Step 5. Just higher upward 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/AVvXsEgGbrFYYAnFKUP67DBDcswFdkOJoTdcey6KsD1gg8m0t4jqfQAyna-Ht5KKhwzrWk8xjK67mI6gW-CxDktSxS_qTRjr4G9QyG8YUA8TdpHpBpPc8GbMcZtYR0fSAmbDhwO6rDqKAwHhLM69/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/AVvXsEh9zmufs2njRmdivbhVc22-zkqWY0LmKklfiptEukTcsdZwNPT5v2AdEvTTraLv_Xj61mJpPLLVsFJbaJI7-7duEJy8GhZ8be8jAkOxq2BNB6SZ13K6u625pUTXWDtgy0mIlYapJwmKCS5M/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 discovery iii occurrences of this code... supplant exclusively the minute in addition to tertiary i amongst this i 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 lot already added the car read to a greater extent than script, take the previous i inwards guild to brand this work.

Step 8. Finally, click "Preview" to meet if everything looks practiced in addition to press the 'Save Template' push to relieve the changes...

That's it!

Adding a dynamic sentiment switcher on a spider web log 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 involve to click on the side yesteryear side page, which could accept fourth dimension if loading takes a piece to complete. For a spider web log archive, using the Auto Read More codes inwards Blogger volition for sure brand everyone's viewing sense rattling convenient.

Considering the relaxation amongst which the codes tin live on customized, edifice a list/grid sentiment switcher would live on completed inwards no time. Influenza A virus subtype H5N1 existent bonus is that Auto Read More plant on all platforms, amongst cross-browser back upward equally well.

Search This Blog

sf