List View/Grid View Switcher Post With Auto Read More Via Button In Blogger

Since a long time, I am seeing Blogger custom modification by many codes/bloggers. But some of them share it and some not. I checked Grid Style Blogger Posts and also List Style Blogger Post that I also share but now in the new era, everyone wants to give there control to there visitor so he can do itself what he want. I saw in many temples that there is a button through which a visitor can change the blog post style in which he want it Grid/Style but they used JQuery for it that I hate as you know. But I liked it and think to avoid JQuery and use lightweight code to do this and I Found that that is shared below.

In this code, Your post on Blog load will be in list style with Auto ReadMore button and your visitor will be able to see two buttons in which one will convert your blog posts n Grid View and other will make it as List View again. So your visitor can change it again and again through one click only. These button will be on the top or Blog posts and will be visible on HomePage, LablePage, SearchPage only.

Now if you comes on coding then here we only used HTML, CSS and JavaScript. We added two set of CSS as one is for list view of blogger posts and other is for grid view of post. Now on load, list view CSS will be loaded now its comes to change the CSS to grid view on click via JavaScript only. So here we change CSS from one to other from JavaScript CSS Changer Code that was quit difficult to do with class and very easy with ID but still we make it and make the code short as it will become with ID and it will start conflicting with your other codes. Now on click, whole CSS of list view will be change to grid view CSS and on click on other button, It will comes to its default one.

This code is fully customizable with a lot of features and works on all platform with cross browser support too. Here you can change List View CSS and Grid View CSS easily with also change AutoRead More Post test count and image size with Button CSS too. So without any more preface, here first see our live demo then see our features list below then proceed to the tutorial added below.

Features:

1.) All Post Becomes List View Styled On Default.
2.) Post Will Be Untouched While Editing.
3.) Length Of The Post Summary Can Be Changed, But It Affects All The Posts At Home, Labels And Archive Pages.
4.) Auto Read More Will Applied On All Posts(Home, Labels And Archive Pages), No Exception.
5.) The First Picture In Each Post Will Be Automatically Used As A Thumbnail (On Home, Labels And Archive Pages). You Can Also Choose Not To Show Thumbnail.
5.) Only Loads The Snippet At Home, Labels And Archive Pages.
6.) It’s Will Make Professional Looking Blog.
7.) Visitors Have To Click Read More To View The Full Post That Will Increases Your Page Views.
8.) Will Decrease Your Page (On Home, Labels And Archive Pages) Loading Time.
9.) Perfect For Better SEO.
10.) You Don’t Have To Add -The Jump Break- In Every Post.
11.) It Will Effect All Of Your Post In Your Blog (New To Old).
12.) 99% Of Blogger Are Using This Code.
13.) Uses HTML-Javascript Code.
14.) Quick To Load And Easy To Install.
15.) No Any External File Added.
16.) List View To Grid View Switcher Is Also Added.
17.) Your Visit Can Change Between Them Via Buttons On Top Of Posts.
18.) These Button Will Only Be Displayed Where The AutoReadMore Will Work Means Home, Labels And Archive Pages.
19.) You Can Change CSS Of List View And Grid View From Buttons.
20.) You Can Change Unlimited CSS Of List View And Grid View.
21.)Fully Customizable.
22.) You Can Change Posts CSS Too.
23.) It Will Not Conflict With Your Pre Added CSS To Posts.
24.) No JQuery Added To Conflict Or Increasing Load Time, Will Work With Pure JavaScript.
25.) This Code Will Work On Plain Blogger Template. Also Can Work On Pre AutoReadMore Code Added Blog. (Contact For This Type Of Blog)

How To Add In Your Blog:

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Click “CTRL+F” Inside The Template Box To Find </head> Code.
6.) Now Copy The Below Code And Paste It Before The Above Code.

<!-- Auto List/Grid Post Switcher By Button Script By EXEIdeas Start -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* List/Grid Post Buttons
----------------------------------------------- */
#exe_list_grid_button {text-align:right;cursor:pointer;margin-bottom:10px;font-size: 14px;font-style: italic;}
.exe_grid_button {background-color:#efefef;color:#000;padding:5px 10px;border:1px solid #000;border-radius: 5px;font-size: 12px;}
.exe_list_button {background-color:#efefef;color:#000;padding:5px 10px;border:1px solid #000;border-radius: 5px;font-size: 12px;}
/* List/Grid Post CSS
----------------------------------------------- */
.post{position:relative;width:100%;}
.post-title {font-size:40px;}
.exe_post_grid {width:46.7%;height:690px;float:left;margin:10px;position:relative;display: block;}
.exe-post-title-grid { font-size:25px;}
</style>
<script type='text/javascript'>
function exe_gridview(){
if(document.getElementsByClassName(&quot;post&quot;)) {elementArray = document.getElementsByClassName(&quot;post&quot;); while (elementArray.length) {elementArray[0].className = &quot;exe_post_grid&quot;;}}
if(document.getElementsByClassName(&quot;post-title&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title&quot;); while (elementArray.length) {elementArray[0].className = &quot;exe-post-title-grid&quot;;}}
}
</script>
<script type='text/javascript'>
function exe_listview(){
if(document.getElementsByClassName(&quot;exe_post_grid&quot;)) {elementArray = document.getElementsByClassName(&quot;exe_post_grid&quot;); while (elementArray.length) {elementArray[0].className = &quot;post&quot;;}}
if(document.getElementsByClassName(&quot;exe-post-title-grid&quot;)) {elementArray = document.getElementsByClassName(&quot;exe-post-title-grid&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title&quot;;}}
}
</script>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot; ;
summary_noimg = 1000;
summary_img = 500;
img_thumb_height = 250;
img_thumb_width = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
/*
 Auto List/Grid Post Switcher By Button Script And Blogger Posts Thumbnail & ReadMore (Dec 25, 2013)
Copyright (c) 2013 EXEIdeas From www.exeideas.com
*/
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}
//]]>
</script>
</b:if>
</b:if>
<!--  Auto List/Grid Post Switcher By Button Script By EXEIdeas End-->