◄ Min  Size Fonts: + | - | ± Color: Max ►

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 ;)
GRIDLIST
grid-list-view0
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='http://1.bp.blogspot.com/-vjVOXJyXcC4/VP9A7twG8mI/AAAAAAAALJ8/YW0yxhvxP7A/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='http://4.bp.blogspot.com/-SrQiXEhgVmA/VP9BUnr3KkI/AAAAAAAALKE/EwVFym9YxoA/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
Loading...
XConcept How to Add List Grid Viewer for Blogger use JavaScript
Cara membuat list atau grid view untuk blogger menggunakan javascript
Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE