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 klasik :

<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>

Created By….
viets jeremy

2 thoughts on “Memasang Readmore di Template Blogger dengan Button

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s