Cara Membuat Daftar / Grid View Switcher di Blogger

Grid and Statis dalam tampilan postnya pasti keren kan kali ini saya akan membagikannya disini jadilangsung saja ke intinya

1. Cari kode  </head> lalu copy pastekan diatas kode tersebut

<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/AVvXsEhXi9LJfP1Cjb6FYRTYZKGEpO1dX29hABCEj0R497o11pjCMvFXJovFt58YlVEtSnoWQemh_bia_3_i0ju7NwvwNrIAhdZ3mLL4EdsLgCyKYzPfeDjc5Zii2QTs3UrD_NddUD3wpkfYeIrr/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 != "static_page"'> <b:if cond='data:blog.pageType!= "item"'> <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: 'Open Sans Condensed', 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: 'Open Sans Condensed', 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: 'Open Sans Condensed', 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: 'Open Sans Condensed', 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: 'Pacifico', cursive;z-index: 122;} a.comment-bubble:before { content: "Comments: " url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRPxQknrS649952jEO6WaIjq0v8RclAcKa7ClI3q8-UVgGiWETFYCMW3Dwfgewx5GtMnLSl9VzCdyh3Tpz5aq9kyN1bBk3Y-epQa6QV8XKhNRBuBTJNEBOZSdZIElHTJIJ-nA8VeksWRDQ/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'/>

2. Lalu cari kode ini 

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

3. Jika tidak ketemu kode langkah ke 2 coba cari yang ini

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

4. Tepat di atas kode tersebut masukan kode ini 

<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/AVvXsEhS2C3v57DHFBIoCXg6sUivSpVnE7veIE8dwPlyAC5NFLurnUFdkTjdw3VWu1ewWz9nw2d6FEg3bdBv2mjha1NNMPOwOsD0bnJoRHiFz9iYcgJJ-Sb0WJeVv5BlX5Ab9fo2Y1ZyvZNwvdOW/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/AVvXsEgr3vzxjB8WGboCBwrlGL0t1pL5DWSGiD3u3btvuH-eR3mSUyVTNAH16zCkFx3jE_hiWxadibE-tsS3CLJN9-NgEjdn2OvYDuenWHEsRwLDkE0nc_vRqH_trrpiDzJlLjXKHjOIUZgZ0WwU/s1600/icon-list-view.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> List View</a></div> </b:if></b:if>

5.  Selanjutnya cari kode di bawah ini

<data:post.body/>

6. Anda akan menemukan 3, ganti yang ke 2 dan 3 dengan code di bawah ini

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>

Setelah Itu save template anda dan lihat bagaimana hasilnya

Demo tampilan bisa dilihat DEMO

Baca Juga : Tutorial Bongkat Boot img Android

Sumber