 |
| tampilan bergaris beralih di bloger |
Daftar postingan dalam tampilan bergaris atau tampilan daftar memberikan definisikan dengan blogger atau pemilik website dapat digunakan sebagai panduan dalam menciptakan konten. Konsep ini telah diberikan untuk pengunjung, di mana mereka dapat memiliki kontrol pada apakah atau tidak mereka ingin melihat posting dalam daftar atau tampilan bergaris. Sementara kode modifikasi kustom dibagi oleh beberapa situs blogging, dan yang lain tidak. Beberapa yang dibagikan, bagaimanapun, dapat menjadi kompleks bahkan untuk blogger sendiri, seperti JQuery.
Kabar baiknya adalah ada kode ini tersedia, Baca Auto Read More di Blogger . Melalui itu, seorang blogger dapat menambahkan dua tombol yang akan memungkinkan pengunjung untuk beralih antara tampilan kisi-kisi dan tampilan daftar, tergantung pada apa yang mereka sukai. Tombol-tombol ini, hanya terlihat pada halaman terbatas (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 posting di tampilan daftar, dua set kode CSS ditambahkan sebagai salah satu. set ditambahkan untuk melihat posting di tampilan grid. Kombinasi lainnya dari kode yang digunakan untuk mengaktifkan dengan mudah antara tampilan, terutama di klik tombolnya.
 |
| tampilan bergaris beralih di bloger |
Cara Menambahkan Tampilan Bergaris Yang Beralih di Blogger
Langkah 1. Masuk ke dashboard Blogger Anda 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 gaya CSS berikut dan script:
<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/AVvXsEgv0OkwhYnZrK-C-b7IkqRiIykQy7UKDl50DTuuvU0Xa8kxE4OWTI8caDtYtRr3sBVqHxd18ozpl1N2yQev0skm4UcyTHuj4DPVae7EBW4eClmxTpMEziGsWnoPYlxkH7U0U7nfiDv9hGkR/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/AVvXsEgoFWvsybdNOl4LYxlzpVAl_yFHj4dWJ6InG2QzfzSPS0rOln_oMQRrZg8bgo-JKMv-Q95s2OHOdyQ8kjq5RbuUFrYeBc9MJGTum0rKfRB7XpCtZzon3e9MYDnZFiQw0VyMcZ_yHZHjaVio/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, mencari 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/AVvXsEgaU8gLFkJ-SglzJlm5EWSzZW-uSAEmS6AvtoDWwyXw0DP_1_YU9c4pi5FcMlOhqvBYFyM61zA4UfIyvJKtlzB_Q2Aa9klEkRaASi9fVZzqmBB0RVjvMC0skWXIMRQvmNtuXdlxMOYRzxdb/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/AVvXsEidUGVJnrgPnhGL_8XKSIkOnLQdIEqafyc2ozVtcECtcS0w-RRNageTNoeskSgTS12pxKtEf6OmpuD07dxv9IaKLqZv7oG8gXU_d5Iv-B0BjC4rhkYWP8MxyFRbLegNrsJGAWU4FMIdM6iH/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 kejadian kode ini, ganti hanya yang kedua dan ketiga dengan satu 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 dalam naskah, menghapus sebelumnya untuk membuat karya ini.
Langkah 8. Terakhir, klik "Preview" untuk melihat apakah semuanya terlihat baik dan tekan tombol 'Save Template' untuk menyimpan perubahan ...
Itu dia! 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 / tampilan bergaris yang beralih ke bloger akan selesai dalam waktu singkat.
EmoticonEmoticon