Membuat Posting Read More/Baca Selengkapnya untuk Blogspot
Posting Read More/Baca Selengkapnya dibuat dengan tujuan untuk meringkas artikel-artikel yang terlalu panjang. Sangat tidak menyenangkan bagi para pengunjung andaikan mereka harus menggulung layar begitu panjang hanya untuk melihat posting-posting di bawahnya. Nah, untuk mengatasi masalah itu, umumnya para penulis akan membuat sebuah sistem ringkasan posting seperti ini:
Link/tautan Baca Selengkapnya bertugas untuk mengarahkan para pengunjung menuju halaman asli dari artikel tersebut.
Cukup dua langkah perombakan saja yang kita perlukan untuk membuat sistem ini berfungsi, hanya saja di sini Saya memberikan sedikit detail kecil untuk memperindah tampilan linknya.
Pertama-tama masuklah ke tab Rancangan kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
Temukan kode ini:
</head>
Salin kode ini, kemudian letakkan tepat di atasnya:
<script type='text/javascript'>
//<![CDATA[
var thumbnail_mode = "float",
summary_noimg = 350,
summary_img = 350,
img_thumb_height = 100,
img_thumb_width = 120;
/******************************************
Script Posting Read-More versi 2.0 (blogspot)
(C)2008 oleh Anhvo
********************************************/
function createSummaryAndThumb(a) {
var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+"<div>"+removeHtmlTag(b.innerHTML,e)+"</div>";b.innerHTML=f}function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var c=a.split("<");for(var d=0;d<c.length;d++){if(c[d].indexOf(">")!=-1){c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length)}}a=c.join("")}b=b<a.length-1?b:a.length-2;while(a.charAt(b-1)!=" "&&a.indexOf(" ",b)!=-1)b++;a=a.substring(0,b-1);return a+"...";
}
//]]>
</script>
Setelah itu cari kode yang tampak seperti ini:
<data:post.body/>
TIP: Tekan CTRL + F lalu ketik data:post.body untuk mempermudah pencarian.
Ganti kode tersebut dengan ini:
<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'><a expr:href='data:post.url'>Baca Selengkapnya</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
Klik Pratinjau untuk sekedar mengecek perubahannya.
Sistem ringkasan posting ini sebenarnya sudah bisa berfungsi dengan baik, jadi kamu bisa langsung menyimpan perubahannya. Tapi jika kamu ingin memberikan sedikit kegantengan lagi dalam sistem postingmu ini, kamu bisa memberikan efek seperti tombol pada link Baca Selengkapnya.
Salin kode CSS di bawah ini, kemudian letakkan tepat di atas kode ]]></b:skin>
atau </style>
:
.rmlink a {background:#567856;color:#fff;padding:2px 15px 3px;margin:15px 0 0;border:0;float:right;text-decoration:none;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;font-weight:bold;}
.rmlink a:hover {background:#FFDD56;color:#000;}
.rmlink a:active {background:#000;color:#567856;}
Klik Simpan Template.
Sedikit Penyesuaian:
- Tentukan banyaknya huruf yang ditampilkan dalam variabel
summary_noimg
(jika postinganmu tidak terdapat gambar) dansummary_img
(jika postinganmu terdapat gambar). - Tentukan lebar dan tinggi thumbnail dalam variabel
img_thumb_width
danimg_thumb_height
.
39 Komentar
Unknown
salam sahabat
bagus cara yang praktis ini mas
oh iya makasih dan udah saya follow
Yopi Hasopa
mas, saya mau nanya. Kalau kode buat menampilkan gambarnya saja atau tulisannya saja di readmore otomatis ini apa yah? Saya coba utak-atik ternyata tidak bisa dipisah kodenya.
Mohon bantuannya, saya masih newbie :D
Terima kasih.
Taufik Nurrohman
@Yopi Hasopa Kalau mau menampilkan gambar saja ya tinggal di-nol-kan saja summarynya:
Yopi Hasopa
@Taufik Nurrohman Maksudnya gini kang.
Saya ingin menampilkan gambar dan tulisaannya di tag DIV yang berbeda. Sementara untuk kode :
gambar dan tulisannya menjadi satu kesatuan. Saya sulit memisahkannya. Kira-kira bagaimana solusinya?
Terima kasih..
Taufik Nurrohman
@Yopi Hasopa Oh, nggak perlu mengedit bagian itu kok. Di dalam script utama kan sudah ada markup HTML-nya, tinggal mengedit bagian itu saja:
Khususnya di bagian ini:
dan ini:
Baharudin Nofiandi
mas bro saya mu nanya, kalo untuk nampilin gambar + judulnya aja gimana? terus di halaman depan dibagi dua kolom, kaya toko online gitu mas, aku mau buka toko mas,
mohon bantuan terimakasih.
Taufik Nurrohman
@bahar Hapus kode ini:
Mengenai cara membelah posting menjadi dua akan Saya bahas lain kali dalam postingan.
Anonim
@Taufik Nurrohman mas bro kalo pengin posisi tulisannya di bawah gambar gimana? gambar sama tulisan di tengah2, thanks.
Taufik Nurrohman
@Puri Sefty Coba ini:
Farid Wajdi Kardbri
kalau untuk meratakan postingan auto readmorenya gimana?
kan gambar diatas terlihat cuplikan postingannya tidak rata (align:left) nah kalau buat jadi rata (align:justify) gimana yah??
Taufik Nurrohman
@Farid Wajdi Kardbri Letakkan kode ini di atas
]]></b:skin>
:Farid Wajdi Kardbri
@Taufik Nurrohman wah makasih banyak yah mas :) sekian lama ane tunggu jawaban dari mas... udah keliling nanya sana sini gak ada yang bisa akhirnya sekarang kesampean juga, skali lagi makasih yah mas :)
ane jadi terharu :'(
Bayu Handono
mas gmana caranya kalo pengen ngembaliin supaya postingan ngga pake readmore, jadi full post lagi?? :)
Unknown
kunjungan rutin mas taufik...
Pertanyaanya :
kalau artikel tidak memiliki gambar.. pengganti gambarnya pake tambahan script gimana... ??
Taufik Nurrohman
Gunakan
else
Ganti
URL-Gambar-Cadangan.jpg
dengan URL gambar cadangan.Unknown
lebih singkat ya om ... saya bisanya gak pernah pake else.. gagal mulu atur script if else nya .. hehehe .. biasanya pakai seperti ini .. jadi dobel penggunaan if
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");
if(img.length < 1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="https://css3-tutsplus.googlecode.com/svn/trunk/personal/images/css-tutsplus-no-image.jpg" width="' + img_thumb_width + 'px" width="125px" height="125px"/></span>';
var summ = summary_noimg
}
if(img.length >= 1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s200") + '" width="' + img_thumb_width + 'px" width="125px" height="125px"/></span>';
summ = summary_img
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
div.innerHTML = summary
}
makasih ach.. izin praktek buat tutorial ya om..
Taufik Nurrohman
Di tes dulu... :)
Unknown
udah di tes di blog ini om http://css-tutsplus.blogspot.com/
Unknown
hehehe.. script dari om taufik kagak berhasil.. hanya artikel pertama saja yang bisa di buat readmore.. kalau masalah gambar cadangannya sudah berhasil.. dan sebagian artikel selalu muncul duplikat judul post..
saya coba utak atik lagi dech.. mungkin ada yang salah penempatan dengan HTML nya..
Unknown
maaf sob mengganggu udah 2 hari 2 malem nyelesaikan masalah kok gak klar2... menu readmore mengganggu ditampilan page (halaman) mohon pencerahan. ini scriptnya disini http://gudang-informasi-blogging.googlecode.com/files/simple-white-infonetmu.xml
Taufik Nurrohman
Mungkin ini masalahmu: Masalah Halaman Statis Blogger yang Error
Unknown
thanks's coba saya bongkar lagi...
Unknown
Gagal sobat! @#$*)(&*&%^
Taufik Nurrohman
Tambah dua hari dua malem lagi :D
Anonim
kang bisakah script ini di rubah
kalo script ini merename sesuai nama.jpg bisa kah jika di kodisikan dalam blog itu merename blog.title, tanda tanya lain bisakah srcipt itu fokus pada post.body
ditunggu penjelsannya kang
Taufik Nurrohman
Terkait: JQuery .html(), .text() dan .val()
Anonim
apa benar begini kang
Taufik Nurrohman
Bukan sama sekali! ~x(
Anonim
wah gak etis banget serius ne kang,trus yang bener gmn yo
neylan
nambahin jumlah komentar gimana caranya
Taufik Nurrohman
Ganti kode ini:
dengan ini:
Unknown
mau nanya...
kayak mana cara nya agar auto readmore nya...
ada di halaman laman.... om.... :(
Anonim
Kalau Metode Readmore Seperti Gambar Dibawah ini Gimana Mas Taufik ...???
Abdelghafour
Thank you for this tutorial.
I have got a problem in the widget, The problem is when I add an anchor in the article it doesn't show up in home page you need to enter to the article to be able to click on it.
My question is how I can show the anchors in the home page.
Thank you.
Taufik Nurrohman
It will not work becase this script will strip out all of the HTML tags of the post content. You can use the native Blogger feature for cropping the post content using the
<!--more-->
marker.Cahya Septyanto
Permisi bang, ane kan udah ngikutin sesuai dengan tutorial di atas, tapi kenapa gak ada efek perubahan apa2 ya ?
FYI, Template ane masih dasar atau bawaan dari pertama kali buat blog, terimakasih..
Taufik Nurrohman
Mungkin bagian yang kamu ganti itu adalah kode posting untuk tampilan seluler.
Unknown
Permisi Mas, saya berhasil memasang auto read more ini, tetapi tampilan responsive untuk gambar didalam postingan saya tiba tiba hilang fungsinya. Lainnya responsif Mas, hanya gambarnya saja. Padahal kode
.post-body img
sudah saya ganti menjadi .post-body img {padding: 0;
width:auto;
max-width:100%;
height:auto;
}
Tapi setelah memasang auto readmore ini tidak berfungsi, apakah gara-gara javascript tersebut ya Mas ?
Mohon bantuannya :)
Taufik Nurrohman
Coba ganti:
menjadi: