Pertanyaan di atas kelihatan panjang ya, sebenarnya kalau di per singkat bisa, begini kira-kira jika pertanyaan di atas tersebut di singkat
Bagaimana Cara Bikin Read More Di Blogger?
Sebenarnya ada dua cara membuat read more di bloggger, namun kali ini saya akan mengangkat satu cara saja, yaitu cara membuat auto read more di blogger yang ada thumbnail (Gambarnya).
Ok Mari Kita mulai belajar membuat Read More sendiri...
Panduan Cara Bikin Read More Pada Blogger
1. Klik menu seperti ini
Sebagai jaga-jaga jangan lupa backup dahulu template yang kamu gunakan.Letakkan Script Auto Read More di atas kode </head> (agar lebih mudah menemukan kode tersebut silakan baca : Cara Mudah + Cepat Mencari Kode Html di Blogger)
Berikut Script Read More yang harus di letakkan tersebut
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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(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>
Keterangan:
summary_noimg = 250 adalah jumlah ringkasan tulisan jika tidak ada gambarnya
summary_img = 250 adalah jumlah ringkasan tulisan jika ada gambarnya
img_thumb_height = 120 adalah tinggi gambar
img_thumb_width = 120 adalah lebar gambar
Temukan kode <data:post.body/> kemudian ganti kode tersebut dengan kode di bawah 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 style='float:right'><a expr:href='data:post.url'>Baca Selengkapnya... </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>
Sekarang coba preview dulu hasilnya, jika sudah ada tulisan Baca Selengkapnya... dan tulisannya sudah di tampilakan sebagian saja itu artinya anda sudah berhasil membuat read more sendiri.Update tanggal 18/06/2011
Jika teman ingin membuat read more tanpa menggunakan script (biar tidak repot) silakan baca panduan Membuat Read More Tanpa Script
Script sudah saya update pada tanggal 19/12/2011 silakan gunakan script Read More yang baru ini
Update 11 Mei 2012 (Update Gambar Tutorial) + baca juga Cara Membuat Read More Di Blogger Tanpa JavaScript
August 3, 2010 at 9:33 AM
halo bang lam kenal ,izinkan saya buat belajar bikin blog di blognya abang,bolehkan?
August 10, 2010 at 12:17 AM
@mul:Silahkan saja mas mul, semua yang saya tulis di sini memang sengaja saya persembahkan untuk siapa saja yang ingin mempelajari blog (khususnya blogger).
Walaupun demikian bukan berarti saya berniat menggurui, karena saya juga masih belajar.
August 25, 2010 at 9:03 PM
bang,kok saya buat readmore selalu gagal terus ya,abang bsa gag buatin readmore blog saya,nnti saya kasi e-mal ama passny?
August 25, 2010 at 9:04 PM
kirim e-mail ke sinii ya bang klo mw:
IrOn_MEmO@yahoo.co.id
tx bang
September 2, 2010 at 3:48 PM
makasieh infonya....boleh tukeran link di daftar blogroll ? ditunggu kunjungan baliknya
September 3, 2010 at 6:24 AM
@2eAzy4mE Mungkin ada kesalahan, coba di cek lagi siapa tau salah meletakkan kode.
September 3, 2010 at 6:34 AM
@alfaris Ok mas, linknya sudah saya pasang di daftar Blog Teman
October 27, 2010 at 11:09 AM
mantaf... dari sekian tutorial ini yang paling jos... makasih kawan...
November 1, 2010 at 5:09 PM
thx browww.....ini sangat berguna bagi blog saya....jangan lupa follow ye????
November 14, 2010 at 12:58 PM
Mantab bana bang.... :D
November 18, 2010 at 12:56 PM
saya dah coba tp koq ga bisa nemuin tag ? dah pake Ctrl+F tp ga bisa jg. ada solusi ga bg? kalo bisa ke email sy aja oscar80online@gmail.com
tq
November 18, 2010 at 1:07 PM
pak...
ini saya coba kok g` bisa...
baca selengkapnya ...bisa, tapi kok g` di summary...
coba d ketik ulang mas htmlnya...?cz ane msih awam...
December 12, 2010 at 3:36 PM
yes..!!akhirnya sukses bikin read more..thx ya..:)
December 21, 2010 at 8:01 AM
God Om Rifai..
ThX ya..!!
December 28, 2010 at 8:54 AM
thanks banget tutorialnya bos.....
January 4, 2011 at 8:02 AM
Thanks banget bang.......!!! sangat membantu. Semoga blog semakin jaya. Enjoy ;-)
January 4, 2011 at 1:07 PM
Thanks dah bagi-bagi info,
read morenya sudah bisa dipakai. Tapi yang jadi masalah sekarang ni laman mandiri yang saya buat ikut-ikutan kena read more gimana cara menghilangkan read more di laman baru yang kita buat?
Thanks sebelumnya.
April 21, 2011 at 12:12 AM
Kenapa setelah saya coba tulisan yang keluar kok seperti ini;
Normal 0 false false false EN-US X-NONE TH MicrosoftInternetExplorer4 .
April 21, 2011 at 10:14 PM
@GMPN ... Di coba lagi bos. Atau coba kopi dulu kodenya ke notepad, kemudian tanda semua petiknya ketik/tulis ulang, baru pasang ke blogger, mungkin itu permasalahannya. Biasanya itu permasalahannya.
June 18, 2011 at 1:19 PM
siang bang....saya mau tanya juga kenapa saya buat read more selalu gagal juga ya....please help....dah cari artikel kemana - mana dari dua alternatif udah saya coba tapi kok belum bisa - bisa juga. kenapa ya...
June 18, 2011 at 1:29 PM
bingung.....dah dari kemaren belum bisa - bisa juga pasang read more.
June 18, 2011 at 2:44 PM
@suparto.fabiyansah : Kalau boleh saya beri saran, sebaiknya template mas ganti dulu dengan template yang lain.
Setelah di ganti baru gunakan lagi template yang mas gunakan sekarang, sehingga templatenya masih asli.
Setelah itu baru mas lakukan langkah-langkah cara membuat read more yang ada di halaman ini.
Atau mas bisa juga menggunakan cara membuat read more tanpa script yang sudah saya sertakan link nya di akhir artikel.
Terimakasih atas kunjungannya.
Jangan lupa berkunjung lagi ya ...
June 20, 2011 at 1:02 AM
2 x mantabs bos :)
June 20, 2011 at 2:34 AM
mas mau nanya nih .. udah berhasil nih pasang read more di posting blog ... tapi muncul satu masalah ... pas masuk ke laman saya kok gak bisa di buka ya tu read more nya??? terima kasih pencerahannya
June 23, 2011 at 6:42 AM
Makasih mas, oya mw nanya tmplate yg smple bsa donlod dmna ya? masih baru bwt juni kmrin jd msh agak bngung
June 23, 2011 at 9:05 AM
@Gilang_Hokage : Ada banyak situs kok yang menyediakan template blogger, silakan cari di Google dengan keyword Blogger Template, Free Blogger Template, dsb.
Terimakasih.
@All : Terimakasih ya atas kunjungannya.
August 10, 2011 at 10:54 PM
terimakasih mas
setelah mencari lamanya
hanya di sini saya bisa paham
August 19, 2011 at 2:11 PM
August 19, 2011 at 2:18 PM
Gan, script tempalte saya ga da tag data post body nya,,,
gmn solusinya???? makasih atas pencerahannya...
August 27, 2011 at 12:52 AM
@trie
Makasih atas komentarnya. Silakan mas baca dulu artikel Mengenal Fungsi Label Di Blogger.
Maksud label di sana sama dengan tag mas.
Jika emang tag/labelnya sudah mas masukkan di posting silakan tulis komentar lagi, ntar biar saya tuliskan kode yang akan menampilkan label/tag di blogger.
Terimakasih
September 14, 2011 at 10:05 AM
trimakasih pencerahannya mas.... ditunggu kunjungannya...
September 28, 2011 at 8:55 AM
maksih kang infonya, nih masih pemula, jai masih cari" yau...
October 31, 2011 at 8:35 AM
trimaksih :D
November 2, 2011 at 6:01 PM
Nice blog, up terus blognya
November 3, 2011 at 10:46 AM
okre bro.....
MANTAP...
November 10, 2011 at 7:39 PM
keren bang.. aing cari di beberapa website tuh gk ad yang sukses.. tp di blog ini lgsung bisa.. mungkin disini aing bisa mendapatkan ilmu yg teruji kebenarannya.. hehehe.. thanks bang..
November 12, 2011 at 5:00 PM
Assalamualaikum.
Mau nanya mas, setelah mengedit tamplate kok gk ada kode data post bodynya mas ? Jadi bingung ne.., hehe..
November 27, 2011 at 10:20 PM
Assalamu'alaikum!
Begini Bang! Ane mo nanya gimana sic cara bikin menu tab yang ada daftar isinya! saya udah nyari muter2 trus dicoba slalu gagal.sebenernya udah hampir berhasil, tapi begitu di klik tabnya ko gak bisa masuk (tampil).Contoh diblog abang ni yang punya titel "Blogger Tutorial".
Tolong Email Bang yauw!!
Thank;s Sebelumnya...!!!
November 28, 2011 at 10:06 PM
waaah thanks a lot buat infonya yaaa...
sangat bermanfaat..
skrng udah bsa bikin readmore deeeh.. \(´▽`)/
December 4, 2011 at 11:16 AM
bang boleh kan aku copas di blog abang
December 16, 2011 at 12:04 PM
sii ...
kunjungi jga blog gue ya ...
http://akademi-ningrat.blogspot.com/
December 17, 2011 at 3:03 PM
om, di LAMAN nya kok ngikut,,,, nggak bisa kebuka jadinya..
mohon pencerahanya
http://kakiteng.web.id
December 19, 2011 at 9:10 AM
@Admin Kakiteng : Kode sudah saya update dan sudah saya coba, silakan gunakan kode yang baru.
January 11, 2012 at 12:13 AM
ni sih cara yg ribet gan, di postingan agan ad yg jauh lbh gmpang
January 11, 2012 at 11:39 PM
Silakan baca di http://blog.ahmadrifai.net/2011/04/membuat-read-more-tanpa-script.html
January 19, 2012 at 1:26 AM
salam kenal..
saya kan download templete gamming..
gambar gambar slidenya bisa diganti ke gambar kita gak Mas??
mohon balasannya ya mas
January 19, 2012 at 3:07 PM
maksih gan buat postingnya...
Sangat bermanfaat.
January 20, 2012 at 7:52 PM
@Alhafizh_rezky Bisa mas.
January 27, 2012 at 6:35 AM
makasih masbro
March 3, 2012 at 2:10 PM
tQ gan....
March 24, 2012 at 5:14 PM
gan...bingung...aku kok gak pernah jumpa ..yg tulisan ...
March 25, 2012 at 11:35 AM
duh malah semua postingan gw jadi Normal 0 false false false EN-US X-NONE X-NONE
May 8, 2012 at 8:32 AM
tengkyuu,.^^
skrang blog ku uda ada read more nya,.
May 14, 2012 at 10:32 PM
mau tanya kok ada 2 yaitu baca selengkapnya dan read more?
May 15, 2012 at 7:32 PM
@Kaisar Abdullah tujuannya sama kok, cuma caranya saja yang berbeda
May 16, 2012 at 1:59 PM
tutorial tentang cara pembuatan auto read more yang sangat bermanfaat, Sob
tapi kalau saya biasanya masih pakai yang manual alias pakai isert jump break, he he..
July 4, 2012 at 9:29 PM
bermanfaat sekali gan bagi pemula seperti saya....trima kasih...sekali
August 18, 2012 at 11:47 PM
mantep tutorialnya...gan. tks.
August 28, 2012 at 12:35 PM
Gan...blog sya muncul tulisan Normal 0 false false false EN-US X-NONE X-NONE ... sdh kemna2 cba metode/cara yang diberikan oleh para bloger tp in blm berubah juga, tolong ya gan...trims ats balasanya.
August 29, 2012 at 4:05 PM
bagus banget tutorial cara-caranya yg tidak di punyai di blog-blog lain... \m/
August 31, 2012 at 6:38 AM
@Widjaja Kalau ingin membuat read more tanpa edit template + mudah coba baca tutorial yang saya tulis di http://blog.ahmadrifai.net/2011/04/membuat-read-more-tanpa-script.html
Mudah-mudahan cara itu bisa jadi solusi dan membantu. Tx