Concept How to Add List Grid Viewer for Blogger use JavaScript - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Concept How to Add List Grid Viewer for Blogger use JavaScript, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Blogger, Article CSS, Article Javascript, Article Snippet, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Concept How to Add List Grid Viewer for Blogger use JavaScript
link : Concept How to Add List Grid Viewer for Blogger use JavaScript

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/AVvXsEiNO7xUEECmaCkhtjLA3Re1ZBK_C06vIJ-m4b9UrNjXvWm6tlIGr1ESKA1rNCmTQq9eACQ4fouZdEolyv-bph4Ab_0n0MfqAatcn9JL5PxKZ_3aVG708WKPBM5KrJ8mDVxxpuES6gG94EIE/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/AVvXsEjrxiWCwUH7kGP4Eb7UyGzXyopP2yl5Svj7HFBlIojl5HTGodkhnW5hwxdaudGO8vSWMnk9YkH5-9PJ76S_X8iEwY16rN0LHE3d5Tyqf5GUhMNeHtneRw3grY0IZQkqeXHaFQop56NpJ1ey/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

Thus articles Concept How to Add List Grid Viewer for Blogger use JavaScript

that is all articles Concept How to Add List Grid Viewer for Blogger use JavaScript This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Concept How to Add List Grid Viewer for Blogger use JavaScript with the link address https://autopostingblogspot.blogspot.com/2015/10/concept-how-to-add-list-grid-viewer-for.html