Read More tanpa reload halaman Blog

Pujangga Blogs

31 May 2009

Read More tanpa reload halaman Blog

Dikesempatan kali ini saya mencoba untuk berbagi kepada sobat semua mengenai Tip's trik Blogger tentang bagaimana cara meletakan "ReadMore tanpa Mereload Halam Blog sobat.Maksudnya begini,Setiap kita meng"klik" Readmore pada suatu artikel yang ada pada blog.Otomatis halaman tersebut akan membuka kembali ke halaman baru untuk menyajikan satu halaman penuh artikel tersebut.Bagi sobat yang lebih mengutamakan waktu,mungkin ini menjadi sesuatu yang menjengkelkan untuk menunggu reload halaman tersebut.Apalagi disaat koneksi Internet yang terasa lemot...wuih,sangat menyebalkan bukan?
Nah...dari tip's trik kali ini saya akan mencoba berbagi bagaimana readmore tidak perlu melakukan loading ulang ketika di klik. Dengan kata lain, Sobat hanya menyembunyikan artikel berikutnya di bawah tulisan readmore.

Kalau sobat berminat, mari bersama-sama kita mengulas readmore tanpa reloading halaman blog. Adapun langkah-langkahnya adalah sebagai berikut :

Lakukan proses login account di blog sobat terlebih dahulu.

Pilih tab Tata Letak ---> Edit HTML ---> Centang "Expand Template Widget".Sebelum melakukan edit template, sebaiknya simpan dulu template sobat yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan sobat sudah memiliki back-up untuk mengembalikannya seperti semula.

Copy kode berikut ini.
<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />

Letakan posisinya diatas kode </head> dan cari kode :
<div class='post-header-line-1'/>
<div class='post-body entry-content'>

Ganti semua kode yang berwarna merah dengan kode berikut :
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

Di bawah kode tersebut terdapat kode <p><data:post.body/></p> atau kode sejenisnya, seperti : <data:post.body/>
Atau jika kamu telah memodifikasi seperti pada readmore sebelumnya jadi seperti ini :
<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/>
<a expr:href='data:post.url'><strong>Readmore...</strong></a></p> </b:if>
Ganti dulu semua modifikasi readmore sebelumnya dengan kode :
<p><data:post.body/></p>

Selanjutnya tambahkan kode berikut di bawah kode :<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull("post-" + data:post.id + "");"' href='javascript:void(0);'>[+/-] Readmore...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull("post-" + data:post.id + "");"' href='javascript:void(0);'>[+/-] Hide Reedmore...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

Jadi seluruh kodenya akan menjadi seperti berikut :
<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull("post-" + data:post.id + "");"' href='javascript:void(0);'>[+/-] Readmore...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull("post-" + data:post.id + "");"' href='javascript:void(0);'>[+/-] Hide Readmore...</a</p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

Arti kode HTML di atas adalah menyembunyikan posting setelah kode
<div id="fullpost">
[+/-] Readmore...

jika di klik akan menampilkan seluruh posting yang diakhiri dengan
</div>
Kemudian jika "
[+/-] Hide Readmore...
" diklik, maka akan mengembalikan posting dalam bentuk semula (posting singkat).

Untuk kode yang berwarna hijau dapat kamu ganti dengan kata yang kamu kehendaki, seperti ; Selengkapnya... dan Ringkasan..., Baca Lanjutannya... dan Post Singkat..., serta kata-kata lainnya.

Jangan lupa disimpanSekarang Klik tab Pengaturan --> Format
Di layar paling bawah, ada text area kosong disamping tulisan "Template Posting", isi area kosong tersebut dengan kode di bawah ini :
<span id="fullpost">
</span>
Jika blog kamu masih menyimpan residu trik blogger membuat readmore sebelumnya, maka kotak area template posting berisi kode seperti berikut :
<span class="fullpost">
</span>
Ganti kode yang berwarna merah "class" dengan kode "id", sehingga menjadi :
<span id="fullpost">
</span>
Simpan pengaturan format
Selamat membuat readmore tanpa reloading halaman blog...

4 comments:

MUXLIMO on December 6, 2010 at 10:05 AM said...

gak ada simulasinya ya? :36

Ryo Jeo on April 19, 2011 at 11:52 PM said...

manteb sob... thx infonya...

Anonymous said...

Unquestionably consider that which you stated. Your favourite justification seemed to be on the web the simplest factor to be mindful of.
I say to you, I certainly get irked whilst folks consider issues that they
just don't understand about. You controlled to hit the nail upon the highest and also defined out the whole thing without having side-effects , folks could take a signal. Will probably be back to get more. Thanks
Also see my page - van nelle halfzware

sherlina halim on September 15, 2015 at 8:27 PM said...

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

Untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : melasian77cs@gmail.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
asianbet77.com

Download Disini


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman.
Membuat Headline Post widget tooltipsHeadline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Membuat Number Page Navigation jQueryUmumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment