Cara pasang Auto Read More Terbaru

Setelah sebelumsa saya bahas cara buat readmore pada template klasik, kali ini saya akan ulas bagaimana cara membuat ReadMore Terbaru (part !)
Mungkin Sobat blogger yang baru mulai membuat blog masih bingung apa itu readmore? Readmore adalah pemenggalan kalimat pada posting suatu halaman, Pemenggalan halaman posting biasanya ditandai dengan "Read More", "Next", "Baca Selanjutnya", "Baca berikutnya", "Selengkapnya" atau apalah namanya. Readmore biasanya digunakan untuk menandai bahwa kalimat pada posting masih mempunyai kelanjutan, dan juga berguna mempersingkat halaman posting yang panjang.
Ikuti langkah-langkah berikut ini :

1. Login terlebih dahulu ke blog Sobat.

2. Buka Template - Edit HTML - Berikan tanda centang pada "Expand widget template"

3. Jangan Lupa backup blogger dengan mengklik "dowlnoad template lengkap"

Cari kode dibawah ini :

<div class='post-header-line-1'/> <div class='post-body'>

Tips : Untuk mempermudah pencarian kode diatas sebaiknya ikuti tips berikut ini. pertama kamu buka program text editor misalnya notepad.exe ( Pada MS Windows tekan menu Start -> Proggram -> Accessories -> Notepad) kemudian kopy/paste kode HTML tadi ke notepad. kemudian pada notepad pilih Menu Edit -> Find. pada box find masukan kode ini :

<div class='post-header-line-1'/> <div class='post-body'>

kemudian klik tombol Find next. (jika masih gak ketemu terpaksa kita melakukan pencarian secara manual).

4. Copy-Paste kode dibawah ini kemudian letakan kode tersebut dibawah kode diatas.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

5. Kemudian dibawah kode diatas kita akan menemukan kode :

<p><data:post.body/></p>

6. Copy-Paste kode dibawah ini dibawah code diatas :

<a expr:href='data:post.url'>Readmore »»</a>
</b:if>

Tips : Kode Readmore diatas bisa ganti dengan kalimat sendiri (contoh "Baca Selanjutnya", "Baca berikutnya", "Selengkapnya")

Kode selengkapnya jika dilihat akan tampak sebagai berikut :

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore »»</a>
</b:if>
<div style='clear: both;'/>

7. Lalu simpan template.

Langkah selanjutnya yaitu :

Setelah kode diatas disimpan kita kembali dan masuk ke tab Pengaturan -> Format -> cari "Post Template" Kemudian pada kotak masukan kode dibawah ini :

<div class="fullpost">
</div>

Setelah selesai jangan lupa Simpan dan Selesai.

Nah Disini saya juga akan menjelaskan bagaimana cara menggunakan readmore.
Ketika kita melakukan posting pertama kali kita akan melihat kode:

<div class="fullpost">
</div>

Jangan pernah menghapus kode tersebut, itulah kode yang buat readmore-nya.
Kata/postingan yang akan sobat perlihatkan sebelum Readmore
Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalaman utama (sebelum tulisan "Redmore") sebelum kode ini <div class="fullpost">
</div> dan selebihnya letakan sesudah kode <div class="fullpost">
</div> dan sebelum kode </div>

Contoh :

Letakan postingan yang ditampilkan dihalaman utama disini (intisari nya)

<div class="fullpost">
</div>

Dan selebihnya tulis disini.

</div>


Semoga berhasil Sobat... :)

Cara buat Read More on Blogger

Cara Buat Read More di Blogger Blogspot dengan Editor Lama. Bagi yang belum memakai Read More Editor Lama direkomendasikan untuk  memakai Read More Editor Baru yang jauh lebih mudah dan simple.
[Update: tutorial ini sudah dilengkapi gambar / screenshot untuk lebih memudahkan) Sudah banyak yg tanya cara buat READ MORE atau Baca Selengkapnya atau Baca Selanjutnya di blogger beta / baru (untuk tutorial buat read more di blogspot / blogger template lama atau classic lihat di sini) dan sudah saya beritahu alamatnya. Tapi tampaknya sebagian agak kesulitan dg tutorial bahasa Inggris. Untuk Anda yg termasuk golongan ini, saya persilahkan mengikuti panduan berikut.
Ada dua cara untuk membuat read more di blogger / blogspot baru (tanda Blogger Baru adalah di admin memakai layout / tata letak dan page element / elemen halaman).
Cara Pertama:

1. Buka template -> Edit HTML -> Kasih tanda tik pada menu "expand widget tempate" (lihat gambar 1)
2. Letakkan kode berikut persis di atasnya kode </head> (lihat gambar 2)

<style>
<b:if cond='data:blog.pageType == "item"'>
  span.fullpost {display:inline;}
<b:else/>
 span.fullpost {display:none;}
</b:if>
</style>

3. Letakkan kode berikut di bawah kode

 <p><data:post.body/></p> 

(lihat gambar 3)

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>

4. Klik Simpan. Selesai.
5. Klik SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Isi kotak kosong tsb dg kode berikut:

<span class="fullpost">

</span>

Jangan lupa klik SIMPAN PENGATURAN.
Gambar 1:

Gambar 2:

Gambar 3:

Cara Memposting
Ketika memposting, klik EDIT HTML (bukan COMPOSE). Maka, secara otomatis akan tampak kode

<span class="fullpost">
</span>

Letakkan posting yg akan ditampilkan di halaman muka di atas kode sementara sisanya (yakni keseluruhan entry/artikel), letakkan di antara kode

<span class="fullpost">

dan

</span>

Masalah yang Sering Dihadapi
1. Saat mengklik "Simpan Perubahan" kita sering mendapat pesan demikian:

XML error message: The element type “style” must be terminated by the matching end-tag “”.

Jangan panik. Itu artinya tanda petik / kutip buka tutup (quote/unquote) yakni tanda ' dalam kode tidak cocok dengan font template. Yang perlu dilakukan adalah buang tanda kutip ['] itu dan kasih tanda kutip yang baru di tempat yang sama. Dan coba klik lagi SIMPAN.
2. Anda sudah berhasil memasang seluruh kode di atas, tetapi ‘read more’ gak berhasil; posting tetap panjang? Dan tulisan ‘read more’ nongol di bagian bawah artikel? Tenang. Ikuti solusi berikut: klik “Pengaturan” -> klik “Format” -> buang/delete semua tanda kutip buka/tutup (quote/unquote) di “fullpost” dan ganti dengan tanda kutip yang baru. Jangan lupa klik “Simpan”.
Selesai. Selamat ngeblog di blogger / blogspot dengan READ MORE.
Apabila Anda berhasil melakukan cara bikin READ MORE di atas tak perlu lagi mencoba cara di bawah. Cara di bawah cuma sebagai alternatif dan agak lebih rumit di banding cara yang di atas.
Cara Kedua:
1. Buka template –> edit HTML
2. Kasih tanda tik/cek menu “expand widget template”
3. Cari kode berikut di TEMPLATE blog Anda:

<div class='post-header-line-1'/>
<div class='post-body'>

4. Kalau sudah ketemu, letakkan kode berikut DI BAWAH kode html di atas:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

5. Di Bawah kode di atas ada kode html sbb:

<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

6. Nah, di antara kode

<p><data:post.body/></p>

dan kode

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

pasang kode html ini:

<a expr:href='data:post.url'>Read More .. </a>
</b:if> 

7. Jadi, susunan kode html di template setelah ditambah dg kode READ MORE akan menjadi seperti ini (yg warna biru adalah kode tambahan untuk READ MORE, sedang kode warna hitam adalah kode asli template):

<div class='post-header-line-1'/><div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

Klik Simpan Template. Selesai.
8. Klik SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Isi kotak kosong tsb dg kode berikut:

<span class="fullpost">

</span>

Jangan lupa klik SIMPAN PENGATURAN.
Cara Memposting
Ketika memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode

<span class="fullpost">
</span>

Letakkan posting yg akan ditampilkan di halaman muka di atas kode sementara sisanya (yakni keseluruhan entry), letakkan di antara kode

<span class="fullpost">

dan

</span>

Catatan Penting:
(A) Artikel yg diposting sebelum pemasangan kode READ MORE di atas akan tetap tampil penuh di halaman muka, Anda bisa mengeditnya dg cara sbb:
1. Klik menu EDIT POSTS
2. Klik EDIT di artikel yg akan diedit.
3. Pasang kode

<span class="fullpost">

di bawah paragraf yg akan ditampilkan. Dan pasang kode

</span>

di akhir artikel.
Ingat hanya ada SATU kode

 <span class="fullpost">

dan

</span>

. Apabila terdapat lebih dari satu, dan biasanya numpuk di bagian paling bawah artikel, maka dibuang saja.
Masalah yang Sering Dihadapi
1. Saat mengklik “Simpan Perubahan” kita sering mendapat pesan demikian:

XML error message: The element type “style” must be terminated by the matching end-tag “”.

Jangan panik. Itu artinya tanda petik / kutip buka tutup (quote/unquote) yakni tanda ‘ dalam kode tidak cocok dengan font template. Yang perlu dilakukan adalah buang tanda kutip ['] itu dan kasih tanda kutip yang baru di tempat yang sama. Dan coba klik lagi SIMPAN.
2. Anda sudah berhasil memasang seluruh kode di atas, tetapi ‘read more’ gak berhasil; posting tetap panjang? Solusi: klik “Pengaturan” -> klik “Format” -> buang semua tanda kutip buka/tutup di “fullpost” dan ganti dengan tanda kutip yang baru.  Jangan lupa klik “Simpan”.

Mengganti Link Read More dengan Icon Gambar

Beberapa waktu yang lalu saya telah menjelaskan cara membuat link read more atau baca selengkapnya dalam postingan blog. Ternyata ada sobat blogger yang bertanya kepada saya apakah bisa link read more diganti dengan gambar? Jawabannya tentu saja bisa dan sangat mudah.

Nah bagi sobat lain yang kebetulan juga ingin tahu bagaimana cara mengganti link read more menjadi icon gambar langsung saja ikuti tutorial berikut ini:

1. Pertama-tama, upload icon read more yang ingin anda gunakan ke situs image hosting. Setelah itu, catat alamat url gambarnya. Contoh https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNijVAEaZ_U8A-CLL9fbAoa78l_OIeGJeCxxHLLFg1FcZGKIb11qbmRhyphenhyphenibVhwuSGsrkZnSs9XK5gqLrIeTvLaAsaj-jcpgN-wiONPKPFKZWRHxsCI1GCnq5hJtu4Ptqv1PKm7-jWZgMok//

2. Login ke Blogger. Klik Design->Edit HTML
3. Beri centang pada 'Expand Widgets Templates'
4. Cari kode seperti ini

<span id='showlink'>
<a expr:href='data:post.url'>teks read more anda</a>
</span>

5. Ganti tulisan yang dicetak tebal dengan kode berikut

<img src="alamat-gambar-anda" />

Ingat, ganti teks berwarna merah dengan alamat url gambar anda yang sebenarnya.

6. Jika sudah, klik tombol Save. Selesai. Mudahkan? :)

Selamat mencoba. Semoga bermanfaat.

Cara pasang Auto Read More terbaru (Part 2)

(Revisi: Solusi tanpa hosting file .JS) Fungsi Read More kali ini emang agak berbeda denganversi Read More yang lama (part 1). Bila versi terdahulu kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span>dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas.

Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw  Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode</head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:


<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>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah 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' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

silahkan disimpan dan lihat hasilnya :)

Keterangan:

var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat mencoba..