Cara Membuat Read More / Auto Read More di Blogger




Cara Membuat Read More / Auto Read More di Blogger


read more

     Beberapa waktu lalu saya pernah posting cara membuat read more.. secara manual,namun kendalanya bagi blog yang terlanjur sudah memiliki banyak artikel tentu akan banyak makan waktu dan tenaga untuk mengedit satu persatu.Betul gan,ini kaitannya 'membuat read more atau tulisan baca selengkapnya' versi kedua.

Nah,dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali. sama seperti blog saya ini, Lalu bagaimana jika saya telah menggunakan read more secara manual? Tidak perlu cemas gan,karena tinggal ganti kodenya dan jrenk lihat hasil !!! :D

Langkah Cara Membuat Read More Otomatis pada Blogger dengan Bahasa Javascript

Ada dua pilihan membuat read more otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Langkah awal membuatnya seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.

Setelah itu, cari kode </head>,setelah ketemu tepat dibawahnya letakkan kode javascript berikut:


<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://projectloss.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>


Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Selanjutnya untuk Cara 1.Read More Button Otomatis menggunakan gambar, hapus kode tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img alt='Read More..' src='http://www.arcsolutions.com/north_america/images/news-item-read-more.jpg'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/>
</b:if>


Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text, hapus kode <data:post.body/> atau <p><data:post.body/></p>
tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>[Read More..]</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/>

</b:if>


Lalu Simpan Template, dan Jrenkkk lihat hasilnya :D
Bagi sobat yang udah terlanjur menggunakan Read More seperti disini, tinggal hapus kode :

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



Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2 ,Semoga berhasil dan selamat ngutak-atik template ya gan :D bila ada kesulitan jangan sungkan untuk bertanya,,,

Cara Membuat Read More / Auto Read More di Blogger



Share this to:
Anda sedang membaca artikel : Cara Membuat Read More / Auto Read More di Blogger dengan url http://arifpoetrayunar.blogspot.com/2011/08/cara-membuat-read-more-auto-read-more.html

Artikel Terkait: Cara Membuat Read More / Auto Read More di Blogger

{ 10 komentar to : Cara Membuat Read More / Auto Read More di Blogger | Skip to Comment }

light yagami mengatakan...

mantap,seep bisa gan thanks :D

Arif mengatakan...

@light yagami Oke gan :D

Reynata Saraswati mengatakan...

thk gan...
dari tadi nyobain di blog tetangga gak ada yang sukses ..
eeh di sini yang sukses ..
thk gan ... sadap ...

fitrakhoerulumam mengatakan...

mantep gan sukses di blog ane.. terimakasih banyak

Nug Rebell√¨√łn's mengatakan...

Trima Kasih Kakak

Abu Zaky ( Muh Juanda) mengatakan...

nga dapat kode nya gan emang semua template blog ada gitunya gan?

DjDipo mengatakan...

Thanks untuk tutorialnya, perlu dicoba dulu sebelum komentar banyak. I'll be back and nice job to you.

Wendy Liga mengatakan...

gmana kalau sudah pakai readmore sudah saya cari kode di atas tidak ada gan

ursya fahmi mengatakan...

postingan yg bagus ..
salam blogwalking

mampir juga
djarumnews.blogspot.com

rizky selvian mengatakan...

gan kenapa ga sukses saya mah

Poskan Komentar

 
Back To Top