Sebuah daftar postingan grid atau tampilan daftar memberikan kanvas lebih didefinisikan dengan yang blogger atau pemilik website dapat gunakan sebagai panduan dalam menciptakan konten.
Konsep ini telah diperpanjang untuk pengunjung, di mana mereka dapat memiliki kontrol pada apakah mereka tidak atau ingin melihat postingan dalam tampilan daftar atau tampilan grid.
Sementara kode modifikasi kustom dibagi oleh beberapa situs blogging, yang lain tidak. Beberapa yang dibagikan, bagaimanapun dapat menjadi kompleks bahkan untuk blogger sendiri, seperti JQuery.
Kabar baiknya adalah ada kode ringan tersedia, termasuk Auto Read More di Blogger . Dengan itu, seorang blogger dapat menambahkan dua tombol yang akan memungkinkan pengunjung untuk beralih antara tampilan kisi dan tampilan daftar, tergantung pada apa yang mereka sukai.
Tombol-tombol ini, bagaimanapun adalah hanya terlihat pada halaman homepage, halaman label dan halaman arsip. Meskipun demikian, itu lebih baik daripada tidak memiliki fitur ini khusus sama sekali. Tidak seperti JQuery, Auto Read More menggunakan HTML, CSS dan JavaScript. Untuk melihat postingan pada tampilan daftar, dua set kode CSS ditambahkan sebagai salah satu.
Set ditambahkan untuk melihat postingan di tampilan grid. Kombinasi lainnya dari kode yang digunakan untuk mengaktifkan saklar mudah antara tampilan, terutama di klik tombol.
Cara Menambahkan Daftar / Grid View Switcher di Blogger
Langkah 1. Masuk ke Anda dashboard Blogger dan pilih blog Anda, kemudian pergi ke "Template"> tekan "Edit HTML" tombol.
Langkah 2. Klik di mana saja di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian. Ketik tag di bawah ini dalam kotak dan tekan Enter untuk menemukannya:
</head>
Langkah 3. Tepat di atas </ head> tag, copy dan paste CSS dan script berikut:
<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/AVvXsEgf9dIltEiCn2yeL_IOsmLieY4KD6HpRjh15PiijfjCp5-xg8tTMWN_Zx_hySqtlt0KCAeuiFUwt_7fOLQDIaaiqd-zz2NKFQSU6WLIc9njpOjhVSRo-1ntCUkXxGMiNVBY7h_1yVFGi0sL/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/AVvXsEjf6buJ1463j2Lh9sMr5e7zPJqEi14n0CpsN5blHXcYSgCz1GQL2xLyeELj60i0akJc05IlBcS8WxNsYIVFJSiLmqUuEq41lcgEPF2nreJECCKBb0DGCjsyiQlJggocXFevRudNdmhYXpvF/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'/>
Langkah 4. Selanjutnya, cari baris berikut:
<b:section class='main' id='main' name='Main' showaddelement='no'>
... Jika anda tidak dapat menemukannya, cari satu ini sebagai gantinya:
<b:section class='main' id='main' name='Main' showaddelement='yes'>
Langkah 5. Tepat di atas garis ini, tambahkan kode berikut:
<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/AVvXsEi4HjAFUbqbu7Arklhr1XMVNiKiBoutw4-L5Z7pVE5ERrtYd7V_afQPjPQT8tEOqnpY_Odw5OURLw1LuV_sBf39TuEPSiJRDkjtJGDkmaHv16d95c0d8hsJnZ-B8c7r6rpf9-ac2l1qaQTU/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/AVvXsEg6eVW5HZdziZOisvnYPPaxo6k87om7CP1no3P5ANZ48y9jwGd1ho4k2NrLAMUJ3ueiA7DwHgKKllvA0jccDkjTSDT_WvqQlOT1DsjRtJWvfmfOO97q7pSVU_xfmW39fW9XJNdDmxwfuQNB/s1600/icon-list-view.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> List View</a></div></b:if></b:if>
Langkah 6. Sekarang, cari kode di bawah ini:
<data:post.body/>
Langkah 7. Anda akan menemukan 3 kode ini, ganti hanya yang kedua dan ketiga dengan yang 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>
Penting: jika Anda sudah menambahkan auto read more, hapus terlebih dahulu untuk membuat karya ini.
Langkah 8. Terakhir, klik "Preview" untuk melihat apakah semuanya terlihat baik dan tekan tombol 'Save Template' untuk menyimpan perubahan ...
That's It!
Menambahkan pandangan switcher dinamis pada sebuah blog akan membuat konten melihat jauh lebih mudah bagi pengunjung.
Apakah menggunakan daftar atau grid tampilan, daftar yang lebih dikompresi posting akan menghilangkan kebutuhan untuk mengklik halaman berikutnya, yang bisa memakan waktu jika memuat perlu waktu untuk menyelesaikan.
Untuk arsip blog, menggunakan Auto Baca kode Lainnya di Blogger pasti akan membuat pengalaman menonton semua orang sangat nyaman. Mengingat kemudahan yang kode dapat disesuaikan, membangun daftar / grid lihat switcher akan selesai dalam waktu singkat. Bonus nyata adalah bahwa Auto Baca karya Lebih pada semua platform, dengan dukungan lintas-browser juga.
0 komentar