Sebuah daftar postingan grid atau tampilan daftar memperlihatkan kanvas lebih didefinisikan dengan yang blogger atau pemilik website sanggup gunakan sebagai panduan dalam membuat konten.
Konsep ini telah diperpanjang untuk pengunjung, di mana mereka sanggup mempunyai kontrol pada apakah mereka tidak atau ingin melihat postingan dalam tampilan daftar atau tampilan grid.
Sementara instruksi modifikasi kustom dibagi oleh beberapa situs blogging, yang lain tidak. Beberapa yang dibagikan, bagaimanapun sanggup menjadi kompleks bahkan untuk blogger sendiri, menyerupai JQuery.
Kabar baiknya yaitu ada instruksi ringan tersedia, termasuk Auto Read More di Blogger . Dengan itu, seorang blogger sanggup 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 yaitu hanya terlihat pada halaman homepage, halaman label dan halaman arsip. Meskipun demikian, itu lebih baik daripada tidak mempunyai fitur ini khusus sama sekali. Tidak menyerupai JQuery, Auto Read More memakai HTML, CSS dan JavaScript. Untuk melihat postingan pada tampilan daftar, dua set instruksi CSS ditambahkan sebagai salah satu.
Set ditambahkan untuk melihat postingan di tampilan grid. Kombinasi lainnya dari instruksi yang dipakai untuk mengaktifkan saklar gampang 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, lalu pergi ke "Template"> tekan "Edit HTML" tombol.
Langkah 2. Klik di mana saja di dalam area instruksi 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/j4vascript'>
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/j4vascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 350;
</script>
<script type='text/j4vascript'>
//<![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="Membuat Daftar/Grid View Switcher di Blogger dengan Auto Read More"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM2sBgmPSZOAXW7JP8u1P6k2xZkWKTh5TqPDjy_LvxYL9s938UVJVDUOBVILbCLczsDVsX3L5TcujEbLHiE5BAkoTkFfEJyhK-eOAWMQOHMucrb1bb_xLmgN4mZll98S8wDQpxEYfyvArd/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/AVvXsEhDxT8-M9FnmdubK9Ve4o9hzgkLEg_cvkELTbc4ARazouDUZSugqWWVSGQ1A-e6IdzHvZ8PvSDPfBqxAAbv6-pgI2y0mGIhpdPwqBCxC01uYNW4n3HHt7E7A4HjzKMXlkivOdVTIWxBt4sz/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 sanggup menemukannya, cari satu ini sebagai gantinya:
<b:section class='main' id='main' name='Main' showaddelement='yes'>
Langkah 5. Tepat di atas garis ini, tambahkan instruksi 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/AVvXsEirK4px0sv1SpOXYs4OyEA8eFvmTAZ2tSnTxqjos9m6jDTTUQaHaYFoHy1kiEfHtgUDwt-qSdCMFgwtlbhc6j9FRDyMliuuBGDA064iIInVpFdXt2CmkRAXb1pp3XWI6bB1I5EnDgPW6C8p/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/AVvXsEi0qkwQZ3VNMt06H7S6gzZRfxMszF73dYnfF88-YDV05R9VdGnd9KAOMLIFw5r5NV441i2HqtIlSqnWcuqY8QwnuuQO98YBIYRRWktOGzSG0e27qNsXX4rQPIOW43-Q4v4McZ5SF0GSKlmY/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 instruksi di bawah ini:
<data:post.body/>
Langkah 7. Anda akan menemukan 3 instruksi 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/j4vascript'>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: bila 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 gampang bagi pengunjung.
Apakah memakai daftar atau grid tampilan, daftar yang lebih dikompresi posting akan menghilangkan kebutuhan untuk mengklik halaman berikutnya, yang sanggup memakan waktu bila memuat perlu waktu untuk menyelesaikan.
Untuk arsip blog, memakai Auto Baca instruksi Lainnya di Blogger niscaya akan membuat pengalaman menonton semua orang sangat nyaman. Mengingat fasilitas yang instruksi sanggup disesuaikan, membangun daftar / grid lihat switcher akan selesai dalam waktu singkat. Bonus kasatmata yaitu bahwa Auto Baca karya Lebih pada semua platform, dengan tunjangan lintas-browser juga.
Sumber http://bangpels21.blogspot.comMari berteman dengan saya
Follow my Instagram _yudha58
0 Response to "Membuat Daftar/Grid View Switcher Di Blogger Dengan Auto Read More"
Posting Komentar