LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Tricks » List View/Grid View Switcher Post With Auto Read More Via Button In Blogger

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

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.

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

Recommended For You:
Awesome CSS Mega DropDown Menu With Links And Thumbnail

Table of Contents

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-->

 

7.) After That, Find This Below Code Using "CTRL+F.
<data:post.body/>
8.) You Will Find Three Of Them, Replace The Third One With The Following Code.

<!--  Auto List/Grid Post Switcher By Button Script By EXEIdeas Start -->
<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <a class='more' expr:href='data:post.url'>Read More...</a> </b:if> </b:if>
<!--  Auto List/Grid Post Switcher By Button Script By EXEIdeas End-->

 

9.) Now Click "CTRL+F" Again And Find The Below Code In Your Template.
<b:section id='main' showaddelement='yes'>
10.) After Finding The Above Line, Copy The Below Code And Paste It Above This Line.

<!--  Auto List/Grid Post Switcher By Button Script By EXEIdeas Start -->
<div id='exe_list_grid_button'>See Our Articles In Different Styles... <a class="exe_grid_button" onclick='exe_gridview()'><img style="margin: -6px 1px -6px -6px;width: 21px;" src='https://i.imgur.com/2Co5Gi4.png' /> Grid View</a> <a class="exe_list_button" onclick='exe_listview()'><img style="margin: -6px 1px -6px -6px;width: 21px;" src='https://i.imgur.com/LD1BHTv.png' /> List View</a></div><hr />
<!--  Auto List/Grid Post Switcher By Button Script By EXEIdeas End  -->

 

11.) Click "Save Template" And Done.
12.) Don't Forget To Keep Your Template Backup Always.

Customization:

1.) Change yes To no If You Don't Want To Show Image Thumbnail.
2.) If Your Post Have No Images Then The Words On Main Pages (On Home, Labels And Archive Pages) Are 1000 You Can Change It With Your Desire.
3.) If Your Post Have Images Then The Words On Main Pages (On Home, Labels And Archive Pages) Are 500 You Can Change It With Your Desire.
4.) Height Of Thumbnail Of Your Image On The Page (On Home, Labels And Archive Pages) Is 250 You Can Change It With Your Desire.(It Is Calculated In Pixels)
5.) Width Of Thumbnail Of Your Image On The Page (On Home, Labels And Archive Pages) Is 300 You Can Change It With Your Desire.(It Is Calculated In Pixels)
6.) You Can Change The Words “Read More..." With Your Desire, If You Want To Show An Image Instead Of  Text Then Change It With

<img  src="https://1.bp.blogspot.com/-Tp2IeCY8rwY/TpvG0uIwGUI/AAAAAAAAAfE/T2e0SlO1E5I/s1600/Read-More-Button.png" style="float: right; margin: 0 10px 0 5px;" title="Read The Full Awesome Article" alt="Read More"  />

 

Next/Prev/Home Buttons Bugs Fixed:

If You Have A Custom Template Or Blogger Official Template, There May Be A Bug After Adding The Above Code That Will Hide Your Next/Prev/Home Buttons Which Are At The Near Of End Of Blog And Move Them Anywhere Else. If You Are Watching This Bug Then Don't Feel Horriable Because Here IS The Fix For You.
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 <b:includable id='nextprev'> Code.
6.) Now Copy The Below Code And Paste It Just After The Above Code.

<div style='clear:both;'/>

 

7.) Click Save template.

Note:

If You Have Already Inserted -The Jump Break- Option In Your Previous Post, After Applying This Code You Will See The Two “Read More..." Link Below Every Old Post. Then Please Contact Me Or Comment Here, I Will Set It For You.

Last Words:

Thanks for adding this awesome code in your blog and now your blog will look more awesome then it is as now its looking professional with easy codes. If you have any quires or stuck at any step, feel free to ask us  in comments and if you liked it then share it with your friends and dont forget to leave your feedback in comments.


Note: This Code Is Highly Copyrighted  Code/ScriptVia DMCA And Other Registered Copyright Laws And Services, You Are Free To Use For (Personal And Commercial), Edit And Share But With The HTML Design Code That Will Not Appear In Your View Mode. If Anybody Is Found To Be Thefting Or Without HTML Design Code Is Under Legal Action And If He Is Sharing Via There Site Or Bio Will Be Got Banned By DMCA With Prior Notice Because We Are Telling Yo In Advance...

You Like It, Please Share This Recipe With Your Friends Using...

Pin It

26 Responses to “List View/Grid View Switcher Post With Auto Read More Via Button In Blogger”

  1. Anonymous says:

    Awesome bro. I was waiting for it. Thanks for sharing, will use it in my template too. 🙂

  2. Anonymous says:

    thank you but cant find <b:section id=’main’ any help?

  3. iliyas shaikh says:

    Thanks dear you are great

  4. Rey Malhotra says:

    hey can you help me please i am using this code at my blog rankwash.blogspot.com

    but there is problem only image thumbnails i want text with image and post title is very small 🙁 help me soon

  5. Rey Malhotra says:

    now i pasted whole code but problem is still happening

  6. iliyas shaikh says:

    dear brother
    Thanks now completed work on my tested blog
    great thanks of you SEE PLEASE…. http://eiliyas.blogspot.in/

    ALSO REGARDS FROM http://WWW.SHAYRIKIDUNIYA.COM

  7. Rey Malhotra says:

    please send me css codes and thank you exeideas

  8. beast_boy says:

    Great Post bro , if possible can you add one more functionality in this as the images on the blogpost appears non responsive , i feel it should redirected to the post even if we click on the image shown for the post as well as the Topic of the post , is it possible for you to add this functionality , i have seen it here http://24work.blogspot.com/

    • EXEIdeas says:

      Ok, Be With Us So We Will Add These Function In Version2 Of This Code. Thanks For Liking This.

    • beast_boy says:

      Thanks bro, when you will be releasing the version2 of this code and what are the changes you will be making i am very excited and want to put the new code so i can start my new blog.

    • EXEIdeas says:

      We Will Add List Style V2 And Grid Style V2 In Switcher V@2. Be With Us To Get This…

  9. Hansel Tabara says:

    I cant find the # 9 instruction

  10. Ali raza afzal says:

    yr hello………..
    Please tell me now now now that where do i paste the last code from #9………..Any where means where……….. <3

  11. Jashim says:

    I have tested the code it is working fine. but Grid and List option still displaying in content page. how to hide from content page?

Leave a Reply

Your email address will not be published. Required fields are marked *