[+/-] Read More... dan [+/-] Summary only... ini disebut Super Peek-A-Boo Posts , ini pertama kali di hack oleh Ramani tanpa: [+/-] Summary only..., kemudian oleh Hans dikembangkan dengan menambahkan [+/-] Summary only...
Jadi, Super Peek-A-Boo Posts ini kelebihannya dibanding dengan Read More versi yang lama, dia tidak perlu me-loading ulang.
Adapun cara untuk meng-instalnya:
Step 1:
Sign In, masuk ke dashboard, kemudian klik layout tab-edit html, Back-up terlebih dahulu template kita dan jangan lupa kasih centang pada expand widget templates, lalu Tambahkan kode javascript dibawah ini , letakan persis sebelum </head>-tag.
<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />
Step 2:
Cari kode 'post' di dalam template, dan ubah sehingga seperti dibawah ini. (Tulisan berwarna merah harus ditambahkan ke dalamnya)
<b:includable id='post' var='post'>
<div class='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body' 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);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
.... rest of template code ....
kemudian Save template.
Step 3:
Klik Settings tab lalu masuk ke Formatting tab , pada bagian paling bawah pada Post Template ada kotak kosong, copy paste kode di bawah ini ke dalam kotak kosong tersebut.
Type your summary here.
<span id="fullpost">
Type the rest of your post here.
</span>
kemudian Save Settings. Selesai.
Pada saat mau posting summary/ringkasan yang mau ditampilkan di muka ditaruh di Type your summary here. atau di atas <span id="fullpost"> kemudian untuk lanjutannya letakkan di Type the rest of your post here. atau diantara <span id="fullpost"> dan </span>
Untuk postingan yang pendek, anda bisa menghapus kode nya pada saat posting, dan seluruh posting akan tampil penuh tanpa [+/-] Read More... dan [+/-]
Tuesday, October 9, 2007
Membuat Read More pada Template Baru
Monday, October 8, 2007
Membuat Read More pada Template Classic
Setiap artikel yang Anda masukkan ke dalam blog, selalu akan ditampilkan seluruhnya di dalam content secara berurutan. Mulai dari artikel terbaru sampai dengan artikel-artikel sebelumnya. Jika setiap artikel yang Anda masukkan hanya beberapa kalimat pendek saja, maka tidak ada masalah. Nah, bagaimana kalau artikel yang Anda masukkan sangat panjang sampai ada beberapa halaman? Tentunya akan memenuhi content blog Anda. (1) Login di blogger.com Langkah pertama adalah buka blogger.com melalui browser Anda. Setelah tampil halaman depan blogger.com, isi e-mail dan password Anda kemudian klik Sign In. (2) Membuka template Jika proses login berhasil, Anda akan memasuki halaman Panel Kontrol pada blogger.com. Di sini ada beberapa informasi tentang blog Anda mulai dari judul blog Anda, jumlah posting, dan ada beberapa link yang berguna untuk mengatur konfigurasi blog. Pada bagian ini kita klik pada Template. Tunggu beberapa saat, setelah masuk ke halaman Template, klik Edit HTML (3) Mencari kode Sekarang cari kode seperti di bawah ini pada template blogger. <$BlogItemBody$> (4) Menyisipkan kode Jika sudah ketemu, di bawah kode tersebut sisipkan kode html sebagai berikut : (5) Susunan html Susunan kode html di template setelah ditambah dengan kode READ MORE akan menjadi seperti di bawah ini. Kode yang berwarna biru adalah kode template asli sedangkan yang berwarna merah adalah kode tambahan. <$BlogItemBody$> (6) Menyisipkan CSS Langkah berikutnya setelah Anda mengganti kode html-nya, kini giliran menyisipkan kode CSS pada template. Di bagian paling atas terdapat kode-kode yang diawali dengan . Sisipkan kode berikut persis di atas kode . (7) Menyimpan template Jika proses penyisipan kode selesai, klik SIMPAN PERUBAHAN TEMPLATE untuk menyimpan perubahan yang Anda lakukan. (8) Mengatur setting Setelah proses penyisipan kode selesai, Klik PENGATURAN, , kemudian klik FORMAT. Di bagian paling bawah ada kotak kosong pada TEMPLATE POSTING. Isi kotak kosong tersebut dengan kode berikut : (9) Menyimpan setting Setelah pengetikan kode selesai, klik SAVE PENGATURAN untuk menyimpan setting. Proses pembuatan Read More telah selesai. (10) Cara memposting Sekarang bagaimana cara memposting? Ada sedikit perbedaan cara memposting menggunakan Read more ini. Pada saat memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode sebagai berikut : (11) Mengedit posting Letakkan posting yang akan ditampilkan di halaman muka di atas kode sedangkan sisanya letakkan di antara kode dan . (12) Mempublish posting Klik MEMPUBLIKASIKAN POSTING untuk mempublish posting Anda. Jika sudah selesai, buka blog Anda atau jika sudah terbuka klik Refresh dan lihat hasilnya.
Untuk mengatasi masalah tersebut, sebaiknya Anda membuat penggalan di dalam artikel yang Anda kirim dengan cara memberi link Read more seperti yang ada di beberapa website. Artikel yang ditampilkan di content hanyalah sebagian dari artikel saja sedangkan artikel secara keseluruhan akan ditampilkan jika sudah di klik pada Read more.
Sebenarnya sudah ada banyak panduan tentang pembuatan Read more ini dan banyak juga yang sudah mencobanya tapi banyak juga yang gagal. Beberapa orang yang gagal mengusulkan agar memuat artikel Read more di blog saya. Jika Anda tertarik dengan artikel ini silakan mengikuti panduan berikut.
”>Read more…
span.fullpost {display:none;}
span.fullpost {display:inline;}
