Concept How to Add List Grid Viewer for Blogger use JavaScript

Pernah melihat/mendengar tentang list/grid view? Tampilan yang bisa di rubah menjadi bentuk list ataupun grid. Untuk lebih jelasnya silahkan sobat buka halaman berikut switch list-grid view using jQuery jsfiddle.net/v57JF/embedded/result. atau make list grid view use bootstrap codepen.io/ajaypatelaj/full/zIBjJ. Gue akan berbagi tutorial, lebih tepatnya konsep bagaimana cara membuat/menanamkan kode grid/list viewer ke dalam blogger blogspot. Kode yg akan diberikan masih bersifat default, yg artinya bisa pajebret dengan kode bawaan template sobat :D Tetapi jangan khawatir, karena di sini kita akan hanya melihat bagaimana jadinya tampilan blog sobat setelah terpasang grid-list-view ;)

GRID	LIST

Jangan lupa selalu lakukan langkah backup full template!

#list-view-button {
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: 0 0 20px !important;
position: relative;
display: block;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.post-grid-view {
width: 40% !important;
height: 250px !important;
float: left;
margin: 0;
position: relative;
border-top: 0 solid transparent !important;
overflow: hidden;
}
.post-grid-view {
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: 0;
padding: 0;
}
.post-grid-view {
opacity: 1;
background: none;
width: 58%;
font-size: 120% !important;
clear: none !important;
display: inline-block !important;
padding: 80px 0 !important;
color: #666 !important;
text-shadow: none !important;
float: right !important;
text-align: left;
position: relative !important;
}
.post-grid-view .post-body {
height: 250px;
background: #f5f5f5;
}
.post-title-grid a {
font-size: 170%;
color: #777;
}
.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: 0 solid transparent !important;
font-family: '
Open Sans Condensed'
, sans-serif;
}
.post-grid-view .post-footer a {
color: #128EC9;
}

Cari kode berikut dengan memencet kombinasi tombol Ctrl + F<b:section class='main' id='main' showaddelement='no'>Jika tidak menemukan kode tersebut, cari yg seperti ini<b:section class='main' id='main' showaddelement='yes'>Kalau sudah ketemu, tepat diatasnya simpan kode ini

<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/AVvXsEg4S-emKk_DJ4ASKB_fqtb4wsCmv29-HoYzRH3ft9coqdA2Tid4McbccF-itt5zfWN9VCbzq944i9RwfpQGQ5D2NE6Et1a4DbIPQyzckvOgMOF3O8pXV7FTOUoiu-9VBDrQ89gRCn6HuDbl/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/AVvXsEiHqjOZfA-ay7L3zRWDpuxWaDKuoL6HSao3a8Pt0PXnRnmuFhQI6JDWCDHqmUCwWdy5c_HvlPdeb1i9wn0nprXMwxuUyV5FfDQHeQpOisPX7IK05t6THoMokad8VH1gskwUqMODM83z_eBg/s1600/icon-list-view.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> List View</a></div>
 </b:if>
</b:if>

Cari code </body> simpan JavaScript brikut

<script type='text/javascript'>//<![CDATA[
function list_view(){
if(document.getElementsByClassName("post")) {elementArray = document.getElementsByClassName("post"); while (elementArray.length) {elementArray[0].className = "post-grid-view";}}
if(document.getElementsByClassName("post-title")) {elementArray = document.getElementsByClassName("post-title"); while (elementArray.length) {elementArray[0].className = "post-title-grid";}}
}
function grid_view(){
if(document.getElementsByClassName("post-grid-view")) {elementArray = document.getElementsByClassName("post-grid-view"); while (elementArray.length) {elementArray[0].className = "post";}}
if(document.getElementsByClassName("post-title-grid")) {elementArray = document.getElementsByClassName("post-title-grid"); while (elementArray.length) {elementArray[0].className = "post-title";}}
}
//]]></script>

SAVE, done and look for the result :D
Sebenarnya script/coded pada sumber artikel dijadikan satu dengan auto read more. So bagi sobat yang kepengen mencoba tutorial create a list/grid view switcher in blogger with auto read more please visit www.bloggerwidgetgenerators.com/2015/03/list-grid-view-switcher-for-blogger.html