Memasang Readmore di Template Blogger dengan Button

Ada beberapa model 'readmore' yang dikembangkan oleh para blogger, baik itu model standar ataupun menggunakan javascript.

Berikut ini readmore yang saya kembangkan dari help google, yang menurut saya lebih mudah diterapkan:

1. Buka Edit HTML
2. Masukan script berikut di diatas </head> :

untuk template klasilk :

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

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

untuk template baru (XML) :

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style><!-- end readmore -->


3. Kode link readmore

Memasukan kode link readmore berikut ini persis dibawah kode <$BlogItemBody$> atau <data:post.body/> :

untuk template klasilk:

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

untuk template baru (XML):

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more!</a>
</b:if>

4. Modifikasi readmore dengan button, versi blog saya (tahapan ini bisa anda abaikan langsung ketahapan 6):

ubah kode link readmore diatas dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'><div class='readmore'>
<a expr:href='data:post.url' target='_parent' title='Readmore'>Read more!</a></div>
</b:if>

kemudian masukan kode CSS berikut diatas kode ]]></b:skin> :

/* readmore */
.readmore a {
float : right;
font-family: "Lucida Grande", Arial, Helvetica, Sans-Serif;
font-size: 12px;
color: #fff;
background : #505050;
margin-top: 10px;
padding : 2px 15px; }

.readmore a:hover {
color:#fff;
background: #B13E2C; }

.readmore a:link { border-bottom:none; }

background : #505050; bisa anda rubah warnanya atau juga anda dapat ganti dengan menggunakan image.

5. Klik save template, tahapan di Edit HTML selesai.

6. Selanjutnya modifikasi readmore, saat melakukan posting:

Disini bagian awal postingan...........
<span class="fullpost">
dan ini penggalan postingan............
</span>

---
Berikut ini alamat artikel Readmore versi lain dengan menggunakan javascript:
- Cara pasang Auto Read More terbaru (Part 2)
- Read More Versi baru
- How can I make show/hide links for my posts?

Contoh Penerapan Button yang menarik:

5 Techniques to Style Buttons using Images and CSS

Posted in: Blogger,Tutorial