07 Januari 2021
Cara Baru Membuat ‘Baca Selanjutnya’ pada Postingan di Blogger
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.
sumber : https://tulisanwortel.com/cara-membuat-baca-selanjutnya-read-more-di-blogger/
Langganan:
Postingan (Atom)
