Pagi Sobat Blogger Kali ini Saya Akan Berbagi Pengetahuan Tentang
Cara Membuat Read More Otomatis Di Blog . Sebenarnya banyak cara
pemasangan readmore otomatis pada blog, ada yang hanya menggunakan
kata-kata, gambar, dll. Tetapi kali ini saya akan share tentang Cara Membuat
Readmore Otomatis yang hanya menggunakan kata-kata agar tidak mengurangi
loading blog kita.
Read more dalam bahasa indonesia yaitu " Baca
Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis
penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more
otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa
menentukan berapa banyak huruf yang akan ditampilkan di halaman depan.
Cara Membuat Read More Otomatis
Jika Anda Berminat Silahkan Mengikuti Langkah-Langkah Berikut
:
1. Login blogger sobat Disini
2. Pilih template -> klik edit html
3. Cari kode </head> (gunakan CTRL+F atau F3 untuk mempermudah pencarian)
4. Letakkan kode dibawah ini diatas kode </head>, Angka yang bewarna merah merupakan ukuran gambar postingan, bisa anda ubah sesuai keinginan
2. Pilih template -> klik edit html
3. Cari kode </head> (gunakan CTRL+F atau F3 untuk mempermudah pencarian)
4. Letakkan kode dibawah ini diatas kode </head>, Angka yang bewarna merah merupakan ukuran gambar postingan, bisa anda ubah sesuai keinginan
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 80;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
var thumbnail_mode = "float" ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 80;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
Keterangan Kode Bewarna Merah
Summary_Noimg Adalah Banyaknya Huruf Jika Tidak Ada Gambar
Summary_Img Adalah Banyaknya Huruf Jika Ada Gambar
Img_Thumb_Height Adalah Ukuran Tinggi Gambar
Img_Thumb_Width Adalah Ukuran Lebar Gambar
Summary_Noimg Adalah Banyaknya Huruf Jika Tidak Ada Gambar
Summary_Img Adalah Banyaknya Huruf Jika Ada Gambar
Img_Thumb_Height Adalah Ukuran Tinggi Gambar
Img_Thumb_Width Adalah Ukuran Lebar Gambar
5.Selanjutnya cari kode <data:post.body/> dan Ganti kode tersebut dengan kode
dibawah 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='rmlink' style='float:left'> <a expr:href='data:post.url'><b>Readmore</b> → <data:post.title/></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>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'> <a expr:href='data:post.url'><b>Readmore</b> → <data:post.title/></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>
6. Tulisan Readmore bisa anda ganti sesuai dengan keinginan
anda.
7. Simpan template dan Lihat hasilnya.
Sekian mengenai Cara Membuat Readmore Otomatis Ringan di Blog - CaraMembuat Readmore Otomatis di Blog semoga bermanfaat dan Selamat Mencoba ...
7. Simpan template dan Lihat hasilnya.
Sekian mengenai Cara Membuat Readmore Otomatis Ringan di Blog - CaraMembuat Readmore Otomatis di Blog semoga bermanfaat dan Selamat Mencoba ...
.
BalasHapusTerimakasih atas informasinya gan, sangat bermanfaat untuk newbie seperti saya.
BalasHapusTemplatenya bagus gan, gak di share nih ... he he
haha terima kasih telah berkunjung :)
Hapusnanti juga akan saya share sante aja hahahaha
Nice gan ^^
BalasHapusUpdate yang baru2 lagi ya :-)
oke gan Terima kasih Teah Berkunjung :)
Hapusread more yang sangat menarik
BalasHapus