Memasang Readmore di Template Blogger dengan Button

Bagikan

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>

Sumber : http://deconstructioncode.blogspot.com

Created By....

Share This

Lihat Postingan Lainnya