komputerdia.com - Pentingkah sebuah Read more atau baca selengkapnya pada suatu blogger ? Fitur ini sanggup dikatakan tidak terlalu wajib dipasang pada sebuah blogger, hal semacam ini hanya mewakilkan sebuah style dan keperluan aksesori saja. Biasanya seorang blogger ingin memasang fitur "baca selengkapnya" dilandasi hanya alasannya yaitu problem kerapihan blog yang mereka miliki.
Terlepas dari segala apa yang menjadi latar belakangnya, pada artikel ini saya akan sedikit menjelaskan bagaimana cara menciptakan "baca selengkapnya atau Read More" di template atau theme bawaan blogger.
Baca juga :
- Jangan Salah Langkah, Memecahkan Kinerja Tools Riset Keywords .
- 8 Cara Membuat Kotak Pencarian (Search Box) Keren Untuk Blog .
- Cara Mengganti Gambar Icon Blogger (Favicon) Di Address Bar .
Cara Praktis Membuat "Baca Selengkapnya"
A. Menggunakan Insert Jump Break
- Cara ini sanggup kalian aplikasikan dikala kalian masih memakai template atau theme bawaan dari blogger
- Pertama silahkan kalian buat postingan atau entri gres pada akun blogger kalian.
- Buat sedikitnya beberapa ratus kata pembukaan pada artikel yang kalian buat, kemudian kalian tekan tombol "insert jump break" .
- Setelah itu kalian akan melihat garis lurus dibawah kata pembukaan tadi.
- Garis lurus itulah yang nantinya akan menjadi fitur "baca selengkapnya" pada tema bawaan blogger
- Silahkan kalian lanjutkan penulisan artikel tersebut hingga dengan selesai.
- Jika sudah, coba kalian publikasikan artikel kalian tersebut dan lihatlah perbedaan yang terdapat pada beranda blog kalian.
- Cara pertama ini tidak akan merubah semua artikel kalian memiliki fitur read more, alasannya yaitu cara ini merupakan cara yang manual.
- Jika kalian ingin memakai fitur "read more" otomatis, silahkan kalian baca panduan selanjutnya
B. Menggunakan Fitur Edit Html
- Silahkan kalian kalin login ke akun blogger kalian
- Masuk ke sajian Tema / Theme dan silahkan kalian tekan tombol Edit Html .
- Setelah masuk di halaman edit html, silahkan kalian cari arahan </head> dengan cara menekan tombol ctrl + f dan ketikan perintah </head> kemudian tekan enter .
- Setelah arahan </head> ketemu, letakkan arahan dibawah ini sempurna dibawah arahan </head> tersebut.
<!-- Auto read more script Start --> <script type='text/j4vascript'> var thumbnail_mode = "yes"; summary_noimg = 430; summary_img = 340; img_thumb_height = 150; img_thumb_width = 150; </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){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(thumbnail_mode == "yes") { 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> <!-- Auto read more script End --> Keterangan : Kalimat yang saya berikan warna Merah , sanggup kalian sesuaikan dengan selera kalian masing-masing.
summary_noimg = 430 merupakan Jumlah Huruf dengan gambar
summary_img = 340 merupakan Jumlah Huruf Tanpa gambar
img_thumb_height = 150 merupakan Tinggi gambar
img_thumb_width = 150 merupakan Lebar Gambar
- Sekarang cari kode <data:post.body/>, biasanya didalam tema blog akan terdapat 3 arahan ibarat itu, maka kalian ganti ketiga arahan tersebut dengan arahan dibawah ini
<!-- Auto read more Start --> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div style='text-align:justify;' expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/j4vascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <a class='more' expr:href='data:post.url'>Baca Selengkapnya</a> </b:if> </b:if> <!-- Auto read more End --> - Tulisan Baca Selengkapnya diatas, sanggup kalian ganti sesuai selera kalian masing-masing
- Selesai, agar bermanfaat buat kalian semuanya