Bismillahirrohmanirrohim..............................
Asslamualaikum wr wb
Met Pagi sobat yang setia di seluruh dunia................Marhaban Ya Ramadhan ?
Sekarang saya mau berbagi info perihal tutorial tampilan Read More Otomatis pada blog anda, sob ?
Insyallah mudah kok so pelan-pelan aja ya, awas ada orang tua gi lewat...hehehe, Just Kidding ?
Tetep Fokus and To The Point aj ya, Cek This Out :
Sobat Blogger pastinya merasa beruntung karena, Di Blogger telah memberikan tata cara yang mudah sepenuhnya untuk merubah Template Edit HTML, termasuk edit latar belakang, gadget dll. Membuat Read More menggunakan image ini melalui edit HTML. langkah-langkahnya sbb :
1. Masuk ke Blogger yang sudah anda buat, klik Dashboard
2. Klik tombol Template Edit HTML
3. Klik f3 biar cepat Cari code </head> untuk mengedit code HTML
4. Adapun code nya seperti ini: Apabila sudah ketemu dan simpan sebelum tanda code </head>
5. CoPas Script dibawah ini :
<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; 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 = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
keterangan:
-summary_noimg = 430; adalah banyaknya karakter yang akan ditampilkan ketika tidak ada gambar di dalam posting anda, anda bisa mengubah jumlahnya.
-summary_img = 340; adalah banyaknya karakter yang akan ditampilkan ketika terdapat gambar di dalam posting anda, anda bisa mengubah jumlahnya.
-img_thumb_height = 120; adalah tinggi gambar thumbnail, anda dapat mengubah nilainya.
-img_thumb_width = 120; adalah lebar gambar thumbnail, anda dapat mengubah nilainya.
Tapi untuk amannya tinggalkan begitu saja.
6. Lanjutkan dengan mencari <data:post.body/> (seperti biasa, gunakan senjata Ctrl+F)
7. Lalu GANTI <data:post.body/> dengan script berikut:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/><span style='padding-top
:5px;;float:
right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>
Read more >></b></a></span>
</b:if>
atau bisa juga coba contoh script dibawah ini kalau yang diatas tak bisa ;
<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/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b> readmore</b> »»   </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
keterangan:
-padding-top:5px, ganti nilainya untuk membuat jarak dengan tulisan di atas readmore.
-Pada tulisan float:right, ganti right dengan left jika ingin readmore muncul di sebelah kiri.
-Sobat bisa mengganti Read more dengan kata-kata lain misalnya "baca selanjutnya", "Read the rest of this entry", "Silahkan Lanjut...", "Selanjutnya Disini Gan!", atau apa saja sesuka hatimu sobat...
Tapi untuk amannya tinggalkan begitu saja.
8. Untuk memastikan hasilnya, jangan di-save dulu. Gunakan preview untuk mengeceknya x aja ada yang keliru so sobat harus teliti ya ?.
9. Setelah sudah OK sesuai apa yang sobat harapkan, silahkan di-save.
10. Finished
Dan mungkin sobat pernah melihat hompage suatu blog yang menampilkan beberapa halaman posting tetapi hanya ringkasannya saja dan di sekat oleh tulisan seperti ini: read more..., baca selengkapnya..., continue reading... dan apabila kita ingin membaca kelanjutan dari artikel tersebut, maka kita harus mengklik tulisan read more... atau sejenisnya itu.
Menampilkan hanya beberapa paragraf awal dari posting kita di blog sangatlah penting, tujuannya agar halaman hompage dari blog yang kita miliki dapat menampilkan beberapa posting sekaligus dalam satu halaman sehingga tidak merusak pemandangan halaman hompage blog kita.
Mari kita pergi ke pelajarannya:
1. Jika Anda belum login ke silakan login terlebih dahulu.
2. Setelah masuk halaman dasbor/dashboard, klik "Edit Entri atau Edit Posts". Pilih dan klik edit pada posting yang ingin Anda sisipkan tulisan read more...
3. Letakan kursor diakhir kalimat atau paragraf yang ingin sobat sekat dengan 'read more'. Klik icon "insert jump break". Lihat gambar ini :
Catatan: Kalau anda biasa menulis pada posisi EDIT HTML, sebaiknya anda kembali pada posisi COMPOSE (lihat gambar di atas).Lalu Klik tanda INSERT JUMP BREAK (kertas terpotong (1)) kemudian akan muncul garis pemotong lihat no 2 gambar dibawah :
4. Klik Publish atau Terbitkan Entri
Ada baiknya sobat coba Preview dulu x aja ada eror atau apa jadi teliti dulu sebelum publish your Blog, sob ?
Read more sekarang sudah ada pada postingan di blog sobat. Untuk melihatnya klik saja view blog atau lihat blog jika sudah yakin benar....hehehe
Gimana mudah bukan sobat, Disini juga ada banyak versi lain jika kalian ingin mendapatkan sumber infonya klik aja di link sobat lain dengan berbagai sumber yang TOP Abiz dari sobat blogger lainnya yang memberikan info lengkap dan mudahnya, x aja sobat merasa ada wacana baru dan beda untuk lebih memberikan tampilan menarik pada blog sobat.
Ikuti sumbernya dari berbagai blogger : SINI, bisa SINI, atau SANA One dan SANA serta KLIK dll seabrek info lainnya bisa lihat di pencarian Google sobat Cara Mudah membuat tampilan Read More pada blogger?
Selamat ber experimen dan share informasi biar pemula blogger tahu juga dan bisa mempelajari tutorial apa saja agar tampilan di blog sobat baru bisa lebih menarik dan kerenzz.....trims.
Wasslamualaikum wr wb
