Wellcome To My Blog

Showing posts with label Read More/ show hide. Show all posts
Showing posts with label Read More/ show hide. Show all posts

Thursday, September 4

Show or Hide Your Full Post in Blogger

Thursday, September 04, 2008 by Joe Spyder · 6 comments

Begini kalau postingan di bawah tadi tentang read more sekarang kita coba modiv read morenya dengan auto hide, caranya mudah,

1. Masuk kehalaman Dasboard yang pasti anda harus login dahulu ke blog anda.
2. Pilih Tab layout dan pilih Edit HTML
3. Ingat jangan lupa membackup dahulu blog anda.
4. Setelah itu cek list Expand Widget Templates.
5. Cari kode </head> dan tambahkan code dibawah ini :

<script src='http://blogoholic.info/files/Readmore.js' type='text/javascript'/>

6. Setelah itu cari kode beriku <div class='post-header-line-1'/> .
7. Jika anda tidak menemukan kode tadi coba cari code berikut :
<div class='post-body entry-content'>

Atau
<div class='post body'>

8. Jika anda sudah menemukan kode di atas maka ganti kodenya dengan code berikut :
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

9. Selanjutnya anda cari kode <p><data:post.body/></p> dan masukan kode dibawah ini pas tepat dibawahnya.
<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);'>[+/-] Show Full Post...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-]Hide Full Post...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

10. Simpan Perubahan yang sudah anda lakukan tadi, kalau anda perhatikan jadi code yang kita masukan tadi tampilannya 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);'>[+/-] Show Full Post...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Hide Full Post...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>


Adapun Pemakaiannya di dalam postingan kita sebagai berikut:

1. Pilih Tab Setting -> Formating pada bagian Post Template masukan kode berikut :
<span id="fullpost">

</span>

2. Setiap Postingan kita tambahkan kode tadi untuk penambahannya sama seperti penggunaan read more.

Note :
Jika ingin menggunakan trik-tips diatas jangan berbarangan dengan read more yang sudah ada di blog kita, karna dampaknya akan membuat blog kita codenya tabrakan. tampilannya juga jadi aneh. jadi harus pilih salah satu read more atau show hide.
Selamat Mencoba deh semoga terus berjaya oke

Cara Pemasangan Read More for classic templates

Thursday, September 04, 2008 by Joe Spyder · 2 comments

Oy untuk teman-teman yang blognya pakai template clasic berikut cara pemasangan read more nya atau baca selengkapnya.
Pertama dari halaman dashboard pilih layout dan edit HTML, sebelumnya lebih baik di backup dahulu.

Oke anda cek list bagian Expand Widget Templates, cari kode ]]></b:skin> setelah itu anda tambahkan dibawahnya kode dibawah ini:

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

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


Selanjutnya anda cari lagi kode berikut, <$BlogItemBody$> dan tambahkan code dibawah ini :

<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>


Setelah itu anda simpan perubahan yang sudah anda lakukan tadi. adapun untuk penggunaannya di dalam postingan anda silahkan baca di artikle saya yang sebelumnya tentang cara pemasangan read more untuk blog yang menggunakan template layout oke.

Selamat mencoba ya. kalau ada kesulitan silahkan tinggalkan pesan di comment oke.

Salam Oprek Blogger

Monday, August 18

Cara Pasang Read More Atau Baca Selengkapnya di blogspot dengan Template Layout

Monday, August 18, 2008 by Joe Spyder · 2 comments

Saya sudah sering ganti-ganti layout di blogspot kadang setelah ganti layout blog, sering melihat postingan kita itu memanjang kebawah alahasil ya paling cuman 2 atau juga 1 postingan yang kita tampilin di blog kita nah oleh sebab itu mengapa perlunya ada headline atau read more di blog kita.



Berikut cara pemasangannya di blog kita :
  • Langkah Pertama Backup Template Blog anda.
  • Dari halaman Dashboard Klik Layout pilih Edit HTML anda klik Expand Widget Templates untuk menampilkan semua element yang ada di blog anda.
  • Kemudian anda masukkan kode berikut sebelum tag </head> atau tepat sesudah kode } ]]></b:skin> seperti ini:
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
  • Selanjutnya mengatur supaya postingan terpotong, cari kode <p><data:post.body/></p> dalam template kamu dan tambahkan kode berikut tepat dibawahnya:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>
Adapun cara Read more didalam blog anda ada dua cara :

  1. Cara pertama setiap anda memposting artikle baru anda harus dalam mode Edit HTML bukan Compose, setelah itu anda tambahkan <span class="fullpost"> dimana anda ini memunculkan tulisan Read more di postingan anda. dan di akhir postingan jangan lupa anda tambahkan </span> sebagai penutup kode tadi.
  2. Cara kedua dari halaman Dashboard anda pilih setting terus klik Tab Formatting, seterusnya anda cari kata-kata Post Template dan anda masukan code berikut .
Head Line artikel anda
<span class="fullpost">
Isi artikel anda
</span>
Jadi setiap kali anda mau posting artikle maka code diatas akan langsung muncul dan anda akan langsung di mode Edit HTML.

Catatan :
Untuk kata-kata Read More boleh anda rubah sesuai keinginan anda.