Cara Membuat Grid View Switcher Di Blog

Cara membuat Grid view switcher di blog. Membuat Auto Read More adalah sebuah daftar postingan dalam grid atau tampilan daftar yang lebih definisi oleh pemilik website sebagai panduan menciptakan yang lebih baik berupa tombol Auto read more. Konsep ini sangat membantu isi artikel satu kali klik tombol untuk pengunjung.

Membuat Grid view switcher di blog. Kabar baiknya ada kode ringan yang tersedia, termasuk Auto Read More untuk Blogger, bila pemilik blog menambahkan auto read more ini secara cepat pengunjung untuk memilih artikel berikutnya.

Baca juga ya tentang Tampilkan juga sembunyikan google+ plus komentar

Untuk lebih lengkapnya cara memasang Grid view switcher pada blog anda sebagai berikut :

Membuat Grid View Switcher

Sebelumnya backup dahulun template blog Anda, untuk jaga-jaga bila kode error sudah tak valid.

1). Silahkan masuk ke akun blogger anda.

2). Cari menu template kemudian tombol Edit HTML

3). Cari kode di bawah ini :

</ head>

4). Isikan kode di bawah tepat di atas kode </ head>

<script type='text/javascript'>
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>
<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/AVvXsEjcpDhC8A58LVXDzn60VZg6hvxSDIq5z-Y5Ty7PtdJpESCtO9BeGL_EGqweKLXDTXrp2dPf-D5nvrKonHX4jb8AnSdpSILsPDki6C7UnVWrllDb1jXY8fbHQEWF5fwF0aRe_Ut2wbuxDLwj/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-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/AVvXsEibb6uvMq6Ow7VpysngB5Mc2SE6n2YVGkdCQY29Wr1JrgtkKiqijrQfZawes0hPOcHupEhXNnnIh_ODeCpPL99gSwTZVujsjniCRCoLuKbyn8-THamfMSYWPHjoQ2rF8Pg_n5PDu41FtE9n/s1600/heart-active.png);}
.post-header,.post-footer {display:none;}

5). Selanjutnya Cari baris berikut:

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

Jika anda tidak dapat menemukannya, mencari satu ini sebagai gantinya:

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

6). Simpan kode di bawah tepat diatas kode nomor 5

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

<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/AVvXsEjETby8ZWOHieIIzQbplEqGDUl_NICUav4Vk4ebfgx7Dr5B9Iy9RgW-uQl-F1D5NgeC8bg02_DMBeq7ysyoPxVauaq3k2Z6KE_K5pevzx_D3L7KK2SOluNwuEn1si8XJKflkn13YiSOiSPC/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/AVvXsEjLbWKFEcG0WqGUE_Q_xsug63N0jSVm5nnwFtJDAh6TkfVK8lt0xr2S3hcWHoQmchabL9NCIIrAI5inTUUc7lYD4Am8Y1kWKIFdFS8059Hs8F9vlyN9uLQ3uUHde88Y5ORqZk3iZxMIybaM/s1600/icon-list-view.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> List View</a></div>
</b:if></b:if>

7). Kemudian cari kode ini :

<Data: post.body />

8). Ada 3 kode :

<Data: post.body />

Ambil yang ke dua saja, silahkan ganti dengan kode di bawah ini :

<B: if 'Data: blog.pageType = & quot; static_page & quot;' = cond>
<B: if cond = '! Data: blog.pageType = & quot; barang & quot;'>
<Div expr: id = '& quot; summary & quot; + 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 'data: blog.pageType == & quot; item yang & quot;' = cond>
<Data: post.body />
</ B: if>
<B: if cond = 'data: blog.pageType == & quot; static_page & quot;'>
<Data: post.body />
</ B: if>

9). Silahkan klik "Preview" bila sudah baik kemudian simapan, bila tidak cancel saja mungkin ada sedikit error kode.

Itulah tips sederhana cara menambahkan Cara membuat Grid view switcher di blog sebagai auto read more. Terima kasih.

Cara Membuat Grid View Switcher Di Blog

Membuat Grid View Switcher

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel