SEBAIKNYA KUNJUNGI BLOG SAYA :

BLOGBEGO CREATION




Berkreasi dengan Auto Hidden di Home Page

Tampilan Home Page
Kawan masih ingat dengan Artikel saya tentang Berkreasi pada Readmore agar Auto Hidden Sekarang saya akan mencoba Berkreasi dengan Auto Hidden di Home Page,
yang saya maksud disini adalah tampilan kawan pada Home Page [Beranda] yang akan kelihatan hanyalah Judulnya saja, tapi kalau mouse berada diatas salah satu Judul Artikel maka baru akan kelihatan isinya. :r untuk Demonya kawan bisa lihat  » disini atau »  disini 
Bagaimana sudah lihat dan coba Demonya
Kalau sudah, untuk membuatnya pada prinsipnya hampir sama dengan cara  membuat Berkreasi pada Readmore agar Auto Hidden, cuma kita perlu memindahkan <div class='hidebego'> yang posisi semula dibawah <data:post.body/> menjadi diatasnya, dan ditambahkan sedikit kode tambahan  :@ 
Selengkapnya sebagai berikut
  • Masuk ke Account Blogger dengan ID kawan
  • Pada Perancang Template pilih Edit HTML
  • Beri tanda check disamping Expand Template Widget
  • Cari kode ]]></b:skin> 
  • Copas Kode berikut diatasnya 
.post .hidebego {
display:none;
}
.post:hover .hidebego {
display:inline;
}
  • Selanjutnya cari : <data:post.body/>
Selengkapnya seperti berikut

<data:post.body/> 
<b:if cond='data:post.hasJumpLink'> <div class='jump-link'>      <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>     </div></b:if>   
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
» Teks yang berwarna merah adalah Kode Readmore atau Baca selengkapnya 
  • Hapus atau Ganti  dengan Kode berikut :

<div class='hidebego'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> 
 <b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>    
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>   
</div>
</b:if>
</b:if>
</div>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> 
<div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
Atau Seumpama Template kawan sudah dirubah / dimodifikasi dengan memakai Readmore+otomatis yang Kodenya kurang lebih seperti 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:right'><a expr:href='data:post.url'>READ MORE</a></span> 
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
» Teks yang berwarna merah adalah Kode Readmore atau Baca selengkapnya
  • Hapus atau Ganti dengan Kode berikut :

<div class='hidebego'>
<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'><a expr:href='data:post.url'>READ MORE</a></span>
</b:if></div>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
 <div style='clear: both;'/> <!-- clear for photos floats -->
</div>    
  • Seandainya ada 2[dua] atau lebih <data:post.body/> pakai yang pertama
  • Simpan Template kawan
Kalau kawan punya cara yang lain bisa disampaikan lewat Komentar dan kita sharring :D 



14 komentar pada “Berkreasi dengan Auto Hidden di Home Page”

  1. informasi yang bermanfaat sekali nih masbro, saatnya untuk dicoba di blog masing-masing, salam kenal.

    BalasHapus
  2. Nice artikel gaan.....
    Boleh dicoba nie tricknya....
    jangan lupa berkunjung ke my blog ea gan...??
    http://rizal-narutoanime.blogspot.com/

    BalasHapus
  3. semakin tambah keren ajha nih tampilanya,,, mantaf,,
    Liat kode" banyak" jadi puyeng.. saya Bookmark dulu ..

    BalasHapus
  4. @syam2222 silahkan kawan and salam kenal kembali :r

    BalasHapus
  5. @Rieezal Anime silahkan, masalah kunjungan itu pasti :z

    BalasHapus
  6. @cayun itu sih contoh readmore bawaan dan modif, pointnya sebenarnya pada :#

    BalasHapus
  7. Gan..maksud dari kta" agan yang "cuma isinya!!!" itu apa..???

    BalasHapus
  8. @Rieezal Anime maksud saya cuma isinya data/profil Kartun - maaf kalau kurang berkenan :r

    BalasHapus
  9. thanks for sharing.. keren bro untuk menambah khazanah utak atik template :)

    BalasHapus
  10. @Allien 99 ya itu hanya percobaan saya, karena saya tak pernah puas ber-Kreasi :z

    BalasHapus
  11. wah, perlu di coba nih.. mantap..

    BalasHapus
  12. Wuuuooow .. makasii banyak sangat bermanfaat niiiii

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK DAN SANTUN
BUKAN SPAM - PORNOGRAFI MAUPUN MASALAH ETHNIS / SARA

TAMBAHKAN KOMENTAR DENGAN EMOTICON :
DENGAN KODE ALFABET < :a s/d :z >

 

Copyright  ©  TIPS BLOGBEGO

site meter

Template by Blogger templates
Powered by Blogger