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