Cara Membuat Read More Kreasi Sendiri Dengan CSS

Lagi-lagi hasil pengalaman pribadi tadi siang, pengen otak atik blog cuma bingung yang mana kira-kira mau dibenahin. Di lihat-lihat, di cek satu-satu kayaknya ada yang ganjil di penglihatan saya. Saya melihat di Home page blog saya ada tulisan read more yang kurang menarik. Waktu itu saya hanya menggantinya dengan gambar saja.

Jadi saya ingin merubah sedikit lebih menarik, sedikit juga gak apa-apa lagian saya ngerti CSSnya juga sedikit. Oya, yang saya modifikasi bukan blog yang ini, tapi yang satu lagi. anda bisa melihat contohnya melalui link ini http://ertigo.blogspot.com sekalian promosi..hahahah. Maklum saya gak punya blog untuk contoh.

Oke, langsung aja ya.
Yang pertama anda lakukan login dulu ke blogger, kalau sudah klik rancangan, pilih tab edit HTML, centang "Expand Template Widget". Jangan lupa back up dulu blog anda.

Jika semua yang di atas sudah anda lakukan. sekarang kita masuk ke tahap berikutnya.
1. Cari kode ]]></b:skin>, copy kode di bawah ini kemudian letakan di atasnya.

.readmore {width:100px;height:27px;
background:url(URL Image Anda1) no-repeat right;
padding-top:9px;
font-family:arial; ( jenis font )
font-size:0px; ( ukuran link read more / dalam satuan pixel )
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
padding-right:34px;
text-align:right; ( posisi link read more - left,center, ... )
color:#b2b2b2;
}
.readmore:hover {width:100px;height:27px;background:url(URL Image Anda2) no-repeat right;color:#0072ff;
}

Ket: Tulisan yang saya beri warna merah anda masukan alamt gambar anda, jika anda ingin menggunakan punya saya bisa anda masukan alamat gambar di bawah.

Untuk Image 1:

https://lh4.googleusercontent.com/-bH6u8tzN2bg/T_-uTkAyO9I/AAAAAAAABE4/AmOvuxkh7l8/s100/Readmore.png

Untuk Image 2:

https://lh4.googleusercontent.com/-K88F3ZF6Tmo/T_-uTofu1iI/AAAAAAAABE0/IbQgh_S5TsY/s100/aReadmore.png

2. Kemudian anda cari kode </head> letakan kode dibawah ini tepat dibawahnya

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 95; img_thumb_width = 95; </script> <script src='http://readmoreertigo.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

3. Setelah itu, anda cari lagi kode berikut:

<a expr:href='data:post.url'></a>

Jika sudah ketemu, sisipkan kode ini <p class='readmore'>Read More</p> diantara kode diatas:
Jadinya akan seperti dibawah:

<a expr:href='data:post.url'><p class='readmore'>Read More</p></a>

Bagi yang belum memiliki fitur read more di blognya bisa anda tambahkan kode dibawah ini, kemudian letakan setelah kode <div class='post-content'>

<div class='post-content'>
<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;padding-top:10px;'>
<a expr:href='data:post.url'><p class='readmore'>Read More</p></a></span>
</b:if> 

4. Terakhir simpan template Anda, dan lihat hasilnya.

Selamat mencoba. Jika ada yang perlu ditanyakan koment aja di kotak komentar dibawah atau ada yang sudah mahir dengan CSS dan pada kode CSS di atas ada yang salah tolong dikasih tahu. Bukan Tempe ya..hehe..Canda gan, (keluar bahasa gaulnya)