Beberapa waktu yang lalu, Pangeran mendapat pertanyaan bagaimana cara membuat “Baca selanjutnya / Read more / Continue Reading’ di postingan blogger ?
Memang, cara membuat “Baca selanjutnya / Read more / Continue Reading” ini boleh dibilang tidak terlalu sulit (buat yang sudah mengerti), tapi bagi blogger pemula tentunya ini kegiatan yang membingungkan.
Apalagi baru pertamakali membuat blog. Tentu ini hal yang sulit.
Tapi kalian tidak perlu khawatir, Pangeran akan memberikan panduan kepada kalian tidak hanya cara membuat “Baca selanjutnya / Read more / Continue Reading” secara manual, tapi Pangeran akan pandu kalian membuatnya secara otomatis.
Seperti apa panduannya? Mari kita mulai membahasnya.
Berikut screenshoot sebelum menggunakan panduan ini :
☰ Cara Manual Membuat Baca selanjutnya / Read more / Continue Reading di Postingan Blogger
Sebenarnya, cara membuat Baca selanjutnya / Read more / Continue Reading ini kalian bisa memanfaatkan fitur Jump Break yang sudah tersedia di blogger. Supaya lebih mudah, sekarang langsung saja kita mulai panduannya.
1. Buat Postingan baru di Entri
2. Setelah selesai membuat postingannya, jangan langsung dipublish, tapi klik Insert Jump Break Seperti gambar di bawah ini :
 |
| Penggunaan Jump Break pada kotek kecil merah |
Saran :
Sebelum klik Insert Jump Break, sesuaikan sendiri seberapa banyak teks yang ingin kalian tampilkan di HomePage / Beranda nanti.
3. Lanjutkan klik Publish dan lihat hasilnya di Home Page Blog atau Beranda Blog kalian. Seperti ini contohnya jika berhasil :
 |
| Jika panduannya kalian ikut dengan benar |
Jika sudah berhasil dan ingin mengganti teks ‘Baca selengkapnya’ dengan teks lain, begini cara menggantikanya.
1. Login ke Blogger.com > Tata letak atau Layout jika menggunakan bahasa Inggris. Seperti ini contohnya :
2. Setelah berada pada Tata Letak atau Layout, scroll ke bagian Postingan blog lalu klik Edit seperti gambar berikut :
3. Setelah kalian klik Edit, maka akan muncul pop up baru seperti gambar di bawah ini :
Ganti teks ‘Baca selengkapnya’ pada kotak merah dengan teks yang kalian suka. Contoh bisa kalian ganti menjadi :
Read More, Continue Reading, Buka Sitik Jos!! Atau Klik Aja dulu…
Semuanya terserah kalian ingin mengganti teksnya dengan kata apapun. Nah, sampai di sini sudah mengertikan? Mudah kok panduannya.
Walaupun sebenarnya cara ini memiliki kelemahan yaitu kita harus mengatur Jump Break pada setiap post baru maupun yang lama. Agak ribet jadinya.
Tapi tenang, pada panduan terakhir, Pangeran akan jelaskan cara membuatnya menjadi otomatis.
Sekarang, kita lanjut menjawab pertanyaan selanjutnya.
Pangeran, mau nanya. Gimana caranya mengganti Baca selengkapnya / Read more / Continue Reading tadi dengan gambar?
Wah… Pertanyaan bagus, nih. Caranya gampang, kok.
Oke, kita langsung mulai panduannya.
☰ Cara Mengganti Baca selengkapnya / Read more / Continue Reading di Postingan Blogger dengan Gambar
Catatan :
Jika kalian menggunakan tutorial kedua ini, artinya kalian tidak bisa menggabungkan dengan tutorial secara otomatis. Sebaiknya, jika ingin yang otomatis, langsung lanjut ke tutorialnya. Tanpa menerapkan tutorial ini. Jika kalian menerapkan keduanya, akan terjadi duplikat baca selengkapnya, readmore dll.
1. Masuk ke akun Blogger.com > Template > Edit HTML. Seperti gambar berikut :
2. Cari code
<data:post.jumpText/>. Biar mudah, klik kursor pada kotak HTML, kemudian tekan CTRL + F lalu masukkan code <data:post.jumpText/> dan tekan Enter. Begini caranya :
3. Setelah menemukan code
<data:post.jumpText/> ganti code tersebut dengan code di bawah ini :
<img src=”ISI DENGAN URL GAMBAR Kalian”/>
Ganti teks warna merah dengan URL Gambar Read more yang kalian buat. Saran Pangeran sebelum upload gambarnya, ganti ukurannya menjadi 150×43 pixel. Atau, jika kalian males ribet mendesainnya, Pangeran sudah siapkan beberapa URL gambar yang bisa kalian gunakan :
| Bentuk Gambar | URL Gambar |
|---|---|
 |
http://bit.ly/2d3uL24 |
 |
http://bit.ly/2cqO18O |
 |
http://bit.ly/2cMLYiA |
 |
http://bit.ly/2d5Xl6J |
 |
http://bit.ly/2cWQ8VM |
Setelah kalian ganti, maka susunan HTML-nya akan seperti gambar ini :
 |
Sebelum
 |
Sesudah
4. Jika kalian ingin mengganti posisi Read More, ganti code
<div class='jump-link'> menjadi <div class='jump-link' style='text-align: right;'> Lakukan seperti gambar di bawah ini :
 |
Sebelum
 |
Sesudah
Ganti posisi warna merah sesuai keinginan kalian menjadi
right, center atau left.
5. Jika sudah, klik Pratinjau Template sebelum disimpan. Jika sudah benar, Simpan Template.
 |
Begini haslinya jika benar
Bagaimana? Mudahkan cara menggantinya?
Nah, sekarang kita lanjutkan cara membuat Baca selengkapnya / Read more / Continue Reading secara otomatis supaya kalian tidak kerepotan harus klik Jump Break setiap mau publish.
Simak panduan lengkapnya di bawah ini.
☰ Cara Membuat Baca selengkapnya / Read more / Continue Reading secara otomatis di Blogger
1. Masuk ke akun Blogger.com > Template > Edit HTML. Seperti gambar berikut :
2. Cari code
</head>. Biar mudah, klik kursor pada kotak HTML, kemudian tekan CTRL + F lalu masukkan code </head> dan tekan Enter. Begini caranya :
3. Copy code di bawah ini dan pastekan di atas code
</head> yang kalian temukan tadi.
<!-- Auto Read More Body Script Start by tulisanwortel.com -->
<script type='text/javascript'>
no_thumb_sum = 300;
thumb_sum = 200;
thumb_h = 220;
thumb_w = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(t,e){if(-1!=t.indexOf("<")){for(var n=t.split("<"),i=0;i<n.length;i++)-1!=n[i].indexOf(">")&&(n[i]=n[i].substring(n[i].indexOf(">")+1,n[i].length));t=n.join("")}for(e=e<t.length-1?e:t.length-2;" "!=t.charAt(e-1)&&-1!=t.indexOf(" ",e);)e++;return t=t.substring(0,e-1),t+"..."}function createSummaryAndThumb(t,e,n){var i=document.getElementById(t),m="",r=i.getElementsByTagName("img"),s=no_thumb_sum;r.length>=1&&(m='<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+e+'" title="'+n+'"><img src="'+r[0].src+'" width="'+thumb_w+'px" height="'+thumb_h+'px" /></a></span>',s=thumb_sum);var g=m+"<div>"+removeHtmlTag(i.innerHTML,s)+"</div>";i.innerHTML=g}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display: none;}
.jump-link {float: right; }
.jump-link a {text-decoration: none; }
</style>
</b:if>
</b:if>
<!-- Auto Read More Body Script End by tulisanwortel.com-->
4. Kemudian cari code <data:post.body/> Biar mudah, klik kursor pada kotak HTML, kemudian tekan CTRL + F lalu masukkan code <data:post.body/> dan Tekan Enter 2x (biasanya ada 2-3 code yg sama) pilih code yang kedua. Ganti code <data:post.body/> dengan code di bawah ini :
<!-- Auto Read More Body Start by tulisanwortel.com --> <b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:blog.pageType == "index"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script> <span class='jump-link' style='float:right;'><a expr:href='data:post.url' expr:title='data:post.title'><img src="https://tulisanwortel.com/wp-content/uploads/2016/09/read-more-by-tulisanwortel.png"/></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> <div style='clear: both;'/> <!-- clear for photos floats --> <!-- Auto Read More in Body End by tulisanwortel.com -->
Ganti code warna merah dengan URL Gambar Readmore yang kalian suka. Jika males membuatnya, copy saja URL gambar readmore di atas tadi.
5. Klik Pratinjau Template dulu. Jika hasilnya sudah benar. Baru deh Simpan Template.Enjoy…..
Catatan :
Jika kalian menggunakan tutorial ketiga ini, hapus semua Jump Break yang sudah kalian buat pada tutorial pertama. Karena, jika kalian tetap menggunakan Jump Break, maka akan kembali terjadi double Readmore dll. Cara menghapusnya, kalian tinggal buka post kembali, lalu arahkan kursor pada garis putus-putus itu dan hapus. Selesai.
—o0o—
Begitulah tadi tutorial lengkap tentang bagaimana Cara Membuat ‘Baca Selengkapnya’ pada Postingan di Blogger mulai dari yang manual sampai yang otomatis (auto).Semua tutorial ini dijamin bekerja pada Template Default bawaan Blogger. Jika pada template selain itu, Pangeran tidak menjamin keberhasilannya. Karena, codenya sudah berbeda. Cuman, jika selain template bawaan blogger berhasil, artinya kalian hebat.
Jangan lewatkan panduan lainnya :
Okelah, jika ada tutorial yang ingin kalian request, tulis di komentar. Atau jika panduan kali ini membuat kalian bingung, tanyakan juga di komentar.
Seperti biasa. Terimakasih sudah membaca panduan ini. Semoga bermanfaat. Pangeran Wortel pamit. See you…
Yaarabb itu yang pake jump break pas aku pake template bawaan bloggernya hahaha. Tapi entah kenapa pas pake template orang tiba-tiba bisa otomatis gitu jadi nggak ngopak-ngapik jump break lagi ._.
.
Pange, aku mau nanya, kalau mau bikin halaman selanjutnya (lagi) dalam postingan itu gimana? Biasanya kan kayak hipwee gitu dalam postingan ada laman 1, 2, 3, 4 gitu…. Ngerti nggak Pange yang aku tanya? 🙁
Hehehehe, iya Riska. Ini panduan untuk yang baru buat blog. Tapi, pengen ada 'Baca selanjutnya' gitulah…
Lah, namanya juga template download Ris. Kan sekarang memang sudah ada fitur seperti itu. 🙂
Owww. yang itu. Tau. Tapi, saran Pangeran gak usah pake kek gitulah biar dapetin Pageview banyak gak perlu pake cara itu.
Kasihan pembaca. Biarkan pembaca membaca konten secara utuh tanpa harus pencet2 setiap Sub bab. ;(
Lagian, kalo di Blogger buatnya rumit. Kalo di WordPress gampang banget. 🙂
Sangat cocok digunakan di template bawaan blog ya mas.. Dulu sebelum tahu aja bingung seperti apa buatnya. Sangat membantu tampilan utama kalau ada "baca selanjutnya"..
nice post 🙂
Iya, bro Andi. Banyak yang pengen buat kek gini di template bawaan blog, tapi pada bingung caranya. Mudah-mudahan membantu, ya mas. 🙂
Wah ini nih yang aku perlu… tapi kalo didalam kotak yang berwarna terus tulisan putih gimana mas heru… mau bikin yang seperti dipostingan mas heru…
salam kenal mas…adakah tutorial cara memindahkan artikel yg udh qt buat diword lalu qt masukan k blog..kl copas lsg kdg2 jd berantakan, lalu adakah standar font dan size artikel yg qt buat hrs pake ap?mksh ats penjelasanya..salam blogger
wow ini yang saya cari nih kak, emang agak pusing yah kalo udah berurusan sama yg namanya html heuheuuu..
saya lagi nyoba bikin blog cakep ni kak,
salam kenal yah..
main juga ke blog saya kak ^^
Pengennya read more pada halaman postingan Min, seperti halnya pada situs-situs berita seperti Tribunnews, tapi untuk Blogger bisa gak ya?
Wah… Itu scriptnya berbeda lagi. Kemudian setiap blog pasti memeliki perbedaan script. Jadi, butuh perlakuan khusus.
thank you mas! great post. pas bgt lagi nyari2 gimana caranya muehhehehe
Terimakasih panduannya Kak, Semoga bertambah sukses ya 🙂
Keren… terimakasih Kak
Kak bagaimana ya buat bentuk menu responsive di blogger
Sabar, ya. Next tutorial akan aku jelasin ya.