Menu

Lovely Cute
  • More Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Dream Fun Product

    Drop Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Home
  • About
  • Contact
  • Sitemap
  • Others
    • Gambar Lucu
    • Infografis
    • Inspirasi
    • Motivasi
    • Photoshop
    • Teka-teki
    • Tips
    • Ucapan

Quicker BD

  • Menu
  • Home
  • Blogger
    • SEO
      • SEO 1
      • SEO 2
    • CSS
      • CSS 1
      • CSS 2
      • CSS 3
      • CSS 4
      • CSS 5
    • Jquery
      • Jquery 1
      • Jquery 2
  • Music
    • Product 1
      • Sub Item
      • Sub Item
    • Product 2
      • Sub Item
      • Sub Item
  • Flat UI
  • Features
Home » Blogger CSS » Blogger HTML » Blogger Tutorial » How-to » Create a List/Grid View Switcher in Blogger with Auto Read More

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

You might noticed a list/grid view switcher in many blogs/website. List/Grid view switcher is a cool feature that allows users to choose whether they want to see posts in a list view with read more option or a grid view depending what the prefer. However, it is visible to the index pages only like Homepage, Label pages, Archive pages.

Also see: How to Add Blogger and Google+ Comments System With Toggle



How to create a list/grid view switcher in blogger?

Go to Blogger dashboard>Template>Edit HTML
Press CTRL + F to enable search box, Search for the following code

</head>

Just above the </head> tag, copy and paste the following CSS style and scripts:

<script type='text/javascript'>
function list_view(){
if(document.getElementsByClassName(&quot;post&quot;)) {elementArray = document.getElementsByClassName(&quot;post&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-grid-view&quot;;}}
if(document.getElementsByClassName(&quot;post-title&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title-grid&quot;;}}
}
function grid_view(){
if(document.getElementsByClassName(&quot;post-grid-view&quot;)) {elementArray = document.getElementsByClassName(&quot;post-grid-view&quot;); while (elementArray.length) {elementArray[0].className = &quot;post&quot;;}}
if(document.getElementsByClassName(&quot;post-title-grid&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title-grid&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title&quot;;}}
}
</script>
 <script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 350;
</script>

<script type='text/javascript'>
//<![CDATA[
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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>';
summ = posts_thumb_sum;
}

else {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfjPzBX9ICSFT3dqf1e5m8eZQqmp-INy8NrhI7RA-hLwK2duUgBgJu6F5sDH3XOnfT-RBfV0T4ZQ5utfW_krcYeZTcA4YOh8bxRMyPPDWuq88Kjlrdpw_XIkemn8PEf0vHk6slXdHuqSYr/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#list-view-button {font-family: Verdana; text-align:left;cursor:pointer;font-size: 14px;border-bottom: 5px solid #eaeaea;text-decoration: none;}
#list-view-button a{text-decoration: none; color: #666;}
.grid-view-button {background-color:#efefef;color:#666;padding:5px 10px;border-radius: 5px;font-size: 12px;}
.list-view-button {background-color:#efefef;color:#000;padding:5px 10px;border-radius: 5px;font-size: 12px;}
.post-grid-view {width:100%;height:250px;overflow: hidden;float:left;margin:0px 0px 20px !important;position:relative;display: block; -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s; }
.post-grid-view .posts-thumb {width:40% !important;height:250px !important;float:left;margin:0px;position:relative;border-top: 0px solid transparent !important;overflow: hidden;}
.post-grid-view .post-header {display: none;}
.post-grid-view .post-body img {min-width: 300px !important; min-height: 250px !important;display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}
.post-grid-view .post-summary-text {opacity: 1; background: none; width: 58%;font-size: 120% !important;clear: none !important; display: inline-block !important; padding: 80px 0px !important; color: #666 !important; text-shadow: none !important; float: right !important; text-align: left; position: relative !important; font-family: &#39;Open Sans Condensed&#39;, sans-serif;}
.post-grid-view .post-body {height: 250px;background:#f5f5f5; box-shadow: none !important;}
.post-title-grid a { font-size:170%;color: #777;font-family: &#39;Open Sans Condensed&#39;, sans-serif;}
.post-title-grid { position: absolute; left: 42%; top: 5%; z-index: 1;}
.post-grid-view .post-footer {left: 41%; display:block;position: absolute; bottom: 2%;font-size: 120%; background: transparent !important; border: 0px solid transparent !important;font-family: &#39;Open Sans Condensed&#39;, sans-serif;}
.post-grid-view .post-footer a{color: #128EC9;}
.post-grid-view a.comment-bubble {display: none;}
.main-inner .column-center-inner .section {margin: 0px !important;}
.post { -webkit-transition:all 0.5s ease 0s; -moz-transition:all 0.5s ease 0s; -o-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;}

#blog-pager {clear:both;}
.post {height:auto;width:32.2%;display:inline-block;text-decoration:none;float:left;margin:0 1% 1% 0%;overflow: hidden;padding:0!important;}
.date-header {display: none;}
h3.post-title a {font-size:90%;font-family: &#39;Open Sans Condensed&#39;, sans-serif;text-transform:uppercase;color:#fff;text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);font-weight: bold;}
h3.post-title {text-align: center; position:absolute;top:0;width:100%;overflow:hidden;margin:0px !important;padding-top: 30%; background-color: rgba(50, 126, 213, 0.8);transform: scale(1);opacity: 0;z-index: 10;height: 100%;transition: all 300ms ease-out 0s;}
h3.post-title:hover {opacity: 1;}
.posts-thumb {width:100%!important;height:200px!important;overflow:hidden;clear:both;}
.post-body {border-radius:2px;box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);position:relative;overflow: hidden;}
.post-body a {text-decoration: none;}
.post-body img {display:block;width:100%!important;height:auto!important;max-width:800px!important;max-height:400px!important;min-width:200px!important;min-height:200px!important;border:none;outline:none;position:relative;margin: 0px;padding:0;}
.post-summary-text {display: none;}
a.comment-bubble {color:#fff;text-decoration:none;font-size:100%;width: 100%;text-align: center;position:absolute;top:175px;left: 0px;text-shadow:1px 2px 1px #333;font-family: &#39;Pacifico&#39;, cursive;z-index: 122;}
a.comment-bubble:before { content: &quot;Comments: &quot; url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif0-jZ5VcZwmAXxlMhUKq5bRynLfquG0xkdlkH4PTXzq1umyuBDeZf28y9crP5Q0g9K9LyHxr4rh0n8NSPjyTA0PDNY_ekx8r7MABw-xldHdKneO-xWh_BDdrpXMk4YrVmJUuoSOtX2JWl/s1600/heart-active.png);}
.post-header,.post-footer {display:none;}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

Next, search for the following line:

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

...in case you can't find it, search for this one instead:

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

Now, Just above this line, add the following code:

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType!= &quot;item&quot;'>
    <div id='list-view-button'><a class='grid-view-button' onclick='grid_view()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlG3UK5eDRlAlWjMMJ7SbF1h0o6cfR5oCRGR3n10c_n-IQLAzhHLVn16i_dOexhvwhYyJCgOdEXQCT2ktPcqtZscPHQolO_eriZxztUYsNE9_yWvKbIr8MfllfpZdNZmzStFHB6fdaHcQw/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/AVvXsEihEWQxY3Kdu4CeQ_oDiTmrchW_skACmo-1bAnYwsRU5YgVBPDIHKqCa7Cxk2BOpXdg2LnGyx-V88-VnCQmEY_FHfn7sUMyxAPl5Kywivq2LD_khMPW9e8A6FtWfGHz_bgezXyG0LDzQogw/s1600/icon-list-view.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> List View</a></div>
    </b:if></b:if>

Now, search the code below:

    <data:post.body/>

You will find 3 occurrences of this code, replace only the second and third one with this one below:

     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <div expr:id='&quot;summary&quot; + data:post.id'>
                <data:post.body/>
            </div>
            <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</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 == &quot;item&quot;'>
        <data:post.body/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <data:post.body/>
    </b:if>

Important: if you already added the auto read more script, remove the previous one in order to make this work.

Finally, click "Preview" to see if everything looks good and press the 'Save Template' button to save the changes...

That's it.

Drop your comments and questions below.
Add Comment
Blogger CSS Blogger HTML Blogger Tutorial How-to

Share

Like

G+

Tweet

Tweet
Related Posts

Show Conversion CodesHide Conversion Codes
Show EmoticonHide Emoticon
Newer Older Home
Powered by Blogger.

Weekly Posts

  • How to Add A Transparent Notification Bar To Blogger
    How to Add A Transparent Notification Bar To Blogger
  • Xmas "Flying Santa Claus" Widget for Blogger
    Xmas "Flying Santa Claus" Widget for Blogger
  • Supreme V2 ( Version 2) Responsive Blogger Template Download for free
    Supreme V2 ( Version 2) Responsive Blogger Template Download for free
  • How to Add Animated Flying Android Man Widget to Blogger
    How to Add Animated Flying Android Man Widget to Blogger
  • Create a Free Blog with Blogspot.com
    Create a Free Blog with Blogspot.com
  • How to Embed YouTube Videos In Blogger Posts
    How to Embed YouTube Videos In Blogger Posts
  • Use A Drop Cap Large First Letter In Posts On Blogger
    Use A Drop Cap Large First Letter In Posts On Blogger
  • Simple Recent Posts Widget for Blogger / Blogspot
    Simple Recent Posts Widget for Blogger / Blogspot
  • Flipper Social Sharing Widget for Blogger
    Flipper Social Sharing Widget for Blogger
  • Download Best and SEO Friendly Blogger Templates for your Blog
    Download Best and SEO Friendly Blogger Templates for your Blog

Blog Archive

  • ►  2017 (2)
    • ►  October (1)
    • ►  May (1)
  • ►  2016 (5)
    • ►  October (1)
    • ►  September (1)
    • ►  March (1)
    • ►  February (2)
  • ▼  2015 (28)
    • ►  November (1)
    • ►  September (7)
    • ►  August (2)
    • ►  July (1)
    • ►  June (1)
    • ►  April (3)
    • ▼  March (3)
      • How to Divide/Break Blogger post into different Pages
      • Create a List/Grid View Switcher in Blogger with A...
      • Add Meta Description Tags to Blogger Homepage and ...
    • ►  February (5)
    • ►  January (5)
  • ►  2014 (105)
    • ►  December (4)
    • ►  November (6)
    • ►  October (1)
    • ►  September (8)
    • ►  August (12)
    • ►  July (14)
    • ►  June (5)
    • ►  May (11)
    • ►  April (5)
    • ►  March (15)
    • ►  February (24)

Labels

  • Facebook
  • twitter
  • googleplus
  • linkedin
  • youtube
  • flickr
  • vimeo
  • deviantart

Copyright Quicker BD 2018

Published By Gooyaabi Templates