Membuat Auto Read More di Halaman Depan Blog
Cara ini sudah diterapkan dalam banyak modifikasi template blog.
Tips ini untuk Anda yang menggunakan template blog yang belum menampilkan ringkasan posting di halaman depan alias tampilannya sama dengan single post/single page.
Umumnya, template blog sekarang sudah otomatis menggunakan auto read more atau menampilkan ringkasan posting di halaman depan blog.
Auto Readmore Pake JavaScript & Tanpa JS
Ada dua cara membuat Auto Read More di Halaman Depan Blog, yaitu Menggunakan JavaScript dan Tanpa JavaScript (JS).- Kelebihan menggunakan JS adalah kita bisa mengatur ukuran foto dan panjang-pendek ringkasan tulisan. Kekurangannya: "sedikit" mengganggu kecepatan loading blog.
- Kelebihan Auto Readmore Tanpa JS adalah loading blog tetap kenceng (fast loading) atau tidak mengganggu loading time blog. Kekurangannya: ukuran gambar thumbnail distandar ke 72x72 pixel dan panjang-pendek ringkasan tulisan gak bisa diubah. Kalaupun mau diubah, tetap... akhirnya..... menggunakan javascript juga!
Membuat Auto Read More di Halaman Depan Blog #1 (JavaScript)
Ini cara Membuat Auto Read More di Halaman Depan Blog mengunakan JavaScript (JS). Tips, kode, atau script Membuat Auto Read More di Halaman Depan Blog menggunanakan JS ini CB kutip dari Help Blogger.1. Klik "Template" > "Edit HTML"
2. Cari (CTRL+F) kode <data:post.body/>.
Jika ada lebih dari dua <data:post.body/>, pilih yang kedua. Jika gagal, pilih yang ketiga atau pertama dst. Coba saja satu-satu hingga berhasil.
3. Replace atau ganti kode <data:post.body/> tersebut dengan kode di bawah ini:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='readmore' style='float:right'><a expr:href='data:post.url'>Read More »</a></span></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>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='readmore' style='float:right'><a expr:href='data:post.url'>Read More »</a></span></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>
4. Cari kode </head> dan COPAS kode berikut ini tepat di atasnya!
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 120;
</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){
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: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 120;
</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){
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: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
5. SAVE Template!
CATATAN:
1. Anda bisa mengganti ukuran gambar/thumbnail dengan mengubah angka 120 menjadi lebih kecil atau lebih besar.
2. Anda juga bisa mengubah jumlah/panjang karakter dengan mengganti angka 490 (jika postingnya tanpa foto) dan angka 400 (jika postingnya ada foto).
Membuat Auto Read More di Halaman Depan Blog #2 (Tanpa JavaScript)
Cara kedua ini tanpa skrip, hanya menggunakan CSS/HTML sehingga disebut "Fast Loading Auto Readmore", meski cuma beda dikit sama yang JS.1. Template > Edit HTML
2. Copy & Paste kode berikut ini di atas kode ]]</b:skin>
.thumbnail-post {width:140px;height:80px;float:left;margin:0px 10px 0px 0px;padding-right:15px}
3. Ganti kode <data:post.body/> dengan kode berikut ini:
<!-- Auto Readmore Start -->
<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.firstImageUrl'> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a> <b:else/> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgufK5vYO-wPQPeQ8l6dJh-_8013Ki2y1LsI-D1PlKjhYwckKoMB8tYOTgK-0A3-f5GJFI2HYhSvykQpx5S8hnzzNifBwgpczCqq5weoqodI1ItKeOLXVVqnKnHRnkBfxX8YhXwzINywsqG/s220-Ic42/noimage.png'/></a> </b:if> <div class='post-snippet'> <data:post.snippet/> </div>
<div class='rm-button-wrap'> <a class='button' expr:href='data:post.url'>Read More</a> </div> </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>
<!--Auto Readmore Codes End-->
<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.firstImageUrl'> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a> <b:else/> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgufK5vYO-wPQPeQ8l6dJh-_8013Ki2y1LsI-D1PlKjhYwckKoMB8tYOTgK-0A3-f5GJFI2HYhSvykQpx5S8hnzzNifBwgpczCqq5weoqodI1ItKeOLXVVqnKnHRnkBfxX8YhXwzINywsqG/s220-Ic42/noimage.png'/></a> </b:if> <div class='post-snippet'> <data:post.snippet/> </div>
<div class='rm-button-wrap'> <a class='button' expr:href='data:post.url'>Read More</a> </div> </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>
<!--Auto Readmore Codes End-->
Keterangan:
- Jika ada dua kode <data:post.body/> di template blog Anda, ganti kode yang kedua.
- Ukuran gambar thumbnail (140px/80px) bisa diubah menjadi lebih besar atau kecil
- Kode warna Orange adalah URL Gambar Thumbail Default. Bisa diganti dengan gambar sendiri.
- Kode yang warna biru adalah teks Read More yang bisa diubah menjadi Baca Selengkapnya atau bisa juga dihapus saja jika tidak ingin ada tulisan Readmore.
Bagaimana jika mau tanpa gambar dan tanpa tombol "readmore" dsb? Tutorial lebih lengkap, bisa disimak di blog "wong" Vietnam, Duypham. Pake saja Google Translate!
Auto Read More adalah istilah bagi tampilan halaman depan blog (Homepage) berupa judul tulisan, gambar thumbnail, dan kutipan bagian awal tulisan.
Contohnya seperti gambar di samping kiri ini.
Auto Read More ini sebenarnya sudah disediakan oleh Blogger, jika kita menggunakan template bawaan blogger, yaitu dengan cara klik menu/link "Insert jump break" saat kita posting. Klik bagian akhir alinea pertama atau kedua, lalu klik Insert jump break.
Namun, template bawaan blogger terbaru, sudah semuanya auto readmore.
Desain halaman depan berupa judul dan ringkasan posting ini sangat user friendly (ramah pengguna), memenuhi kaidah pengalaman pengguna (user experience, UX), karena halaman hasil pencarian Google juga menampilkan judul dan ringkasan posting.
Demikian Cara Membuat Auto Read More (Ringkasan Posting) di Halaman Depan Blog Blogger/Blogspot dengan & Tanpa JavaScript.
sumber : (http://www.contohblog.com).*
Apa itu Auto Readmore?
Contohnya seperti gambar di samping kiri ini.
Auto Read More ini sebenarnya sudah disediakan oleh Blogger, jika kita menggunakan template bawaan blogger, yaitu dengan cara klik menu/link "Insert jump break" saat kita posting. Klik bagian akhir alinea pertama atau kedua, lalu klik Insert jump break.
Namun, template bawaan blogger terbaru, sudah semuanya auto readmore.
Desain halaman depan berupa judul dan ringkasan posting ini sangat user friendly (ramah pengguna), memenuhi kaidah pengalaman pengguna (user experience, UX), karena halaman hasil pencarian Google juga menampilkan judul dan ringkasan posting.
Sebaiknya, hapus tulisn "Read more" atau "Baca selengkapnya", karena Google juga tidak mencantumkan hal itu, juga hanya menambah banyak link di halaman depan yang bisa memberatkan loading blog.
Demikian Cara Membuat Auto Read More (Ringkasan Posting) di Halaman Depan Blog Blogger/Blogspot dengan & Tanpa JavaScript.
sumber : (http://www.contohblog.com).*
Komentar
Posting Komentar