Senin, April 27, 2009

Cara Pasang Auto Read More Terbaru pada Blog

. Senin, April 27, 2009

 

Bloggericon

Artikel trik blog ini kebetulan memang saya sadur, gabung, dan susun kembali dari 2 (dua) sumber blogger yang patut diacungi jempol, karena memang keduanya telah memberikan “pencerahan” dan info pengetahuan (khususnya bagi saya yang pemula ini) tentang bagaimana tips dan trik blog yang bagus dan menarik. Yaitu dari blog ( tips dan tutorial blog bagi pemula ) dan blog ( o-om.com ). Terimakasih untuk keduanya atas info bermanfaatnya. 

 

Auto readmore terbaru ini sangat berbeda sekali dengan readmore versi-versi sebelumnya, dimana untuk mendapatkan readmore kita harus secara manual memasukannya kedalam postingan dan hal ini kadangkala menyulitkan kita dalam mempostingnya. Yaitu dimana kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemasangan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Sedikit ribet, bukan?!


Akan tetapi, untuk auto readmore terbaru ini, sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis, tanpa harus install code secara manual dan menempatkan postingan secara terpisah, atau dipisahkan dengan script tertentu seperti penjelasan diatas.

 

Sekedar informasi, fungsi Readmore 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. Mungkin lebih nyaman disebut saja dengan fasilitas image thumbnail. ( Sebagai contoh nyatanya, dapat anda lihat sendiri pada tampilan “home” postingan blog saya ini. Hehe !! )


readmore Tidak hanya itu saja, kita dapat juga mengatur 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.

 

 

 

 

 

Lalu, Bagaimana Cara Memasang Auto Read More Terbaru ini ?? 

 

Penting! Yang sudah memasang Read More versi lama sebaiknya kode HTML-nya dikembalikan dulu ke seperti semula. Caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja. Tapi ingat, download template terlebih dahulu untuk jaga-jaga !!)

 

<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;'/>


Setelah itu masih di Edit HTML, cari code berikut ini </head> dan pasang script berikut diatas kode </head> tadi.

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script src='http://h1.ripway.com/ooms/autoreadmore.js' type='text/javascript'/>


Jangan lupa untuk menyimpan editan tadi, setelah itu centang "Expand widget template" dan cari code berikut ini <data:post.body/>. Setelah ketemu, ganti code <data:post.body/> tersebut dengan script 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:

 

Anda bisa juga mengatur sendiri dan menyesuaikan tampilan readmore terbaru ini sesuai keinginan dengan men-setting kode-kode script tampilan yang diletakkan diatas kode </head> sebelumnya. Berikut penjelasannya :

 

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 dan Semoga Berhasil !!!

Artikel Yang Berhubungan



22 komentar:

CTA mengatakan...

thxs bozz sippppp.

http://ctakomp.blogspot.com

Khaidir muhaj mengatakan...

sangat bermanfaat! thanks!

ayoesr mengatakan...

thanks banget mas. infonya berguna sekali :D

Panca mengatakan...

mantap tutorialnya, ilmu baru buat blogger pemula seperti Panca

INSPIRE mengatakan...

bos.... kayaknya JS nya sudah expired ya....aku coba di blogku kok gak jalan. malah muncul readmorenya di akhir posting....span nya gak aktif. aku pake yang rezqi muhammad bisa tuch cuman diganti script nya aja. BTW thanks dari sini asalnya saya menemukan readmore........

Gusto Sign mengatakan...

iya, mas. saya juga udah pasang tapi muncul readmorenya di terakhir postingan. gimana ya caranya? bisa minta infonya lagi? makasih

Hery mengatakan...

thanks bgt bsa dimengerti dan dicoba..

hellboy mengatakan...

izin sedot sob.........thxs before..... ;)

kolom-infoku.blogspot.com mengatakan...

pengetahuan baru, ilmu baru. tx. salam kenal. saya coba dulu yach

intanmutiara mengatakan...

gimana koq read more nya ada di posting terakhir.gimana caranya???

informasi internet mengatakan...

gimana kug readmorenya ada d postingan terakhir...???
caranya gimana...????
mapir sekalian d blog aku y....!!! ;)

BUKAN PAHLAWAN mengatakan...

kok read morenya di akhir????

Ngabei yanto mengatakan...

bener gua udah nyobaain bagus deh ,makasih ya mass

denkhoir mengatakan...

Makasih bos....!!
Q dah coba-coba trik laen tapi gak da yang berhasil. cuma ini yang bisa... Tengyu

Nugroho mengatakan...

sama nih, read more kok di postingan terakhir??, mana updatenya nich...makasih bang...mohon di respond yah..
coba cek sendiri bang disini

khansa' batik mengatakan...

hehe...iya malah readmore di posting terakhir...
kita tidak sukses....ups

febecynthiayuningtyas mengatakan...

iya...aku juga ni...huhuhuhuu....malah di akhir mana tulisannya ngga kepotong, jadi cuman ada tambahan tulisan readmore,,dibawah :-/

empe_teri_gratis mengatakan...

kok gak bisa:(( :-o:-/

mhdon-fx mengatakan...

mantap gan auto read morenya..ane dah pasang berkat agan..tengkyu...:D;)

Nay'Lups mengatakan...

http://h1.ripway.com/ooms/autoreadmore.js
itu JS nya dah suspend kali bro

boleh minta scrypt JS-nya gak bro ?

thx

Gerakan Masyarakat Peduli Nusantara mengatakan...

Tak joba lagi.... Nggak ngaruh sama sekali. Kenapa yah...?

Niko mengatakan...

thanks infonya ditunggu kunjungan baliknya...

:f :D :) ;;) :x :$ x( :?
:@ :~ :| :)) :( :s :(( :o
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Poskan Komentar

 
Namablogkamu is proudly powered by Blogger.com | Template by o-om.com