Cara Membuat Stylish Readmore Pada Blog

Sobat reader setia kinghtmlcode dimanapun sobat berada. Kali ini saya akan mengupas tentang sedikit cara bagaimana membuat styleish "Readmore" pada postingan suatu blog. Sebelumnya sobat harus paham dulu dimana letak Readmore pada blog bawaan sobat. Sebenarnya, feature readmore sudah tersedia di menubar penulisan blog. Dan sedikit sentuhan click sobat akan dengan mudah membuat readmore yang stylish pada blog sobat. Untuk cara membuat readmore pada postingan blog tidaklah sulit sob.

Membuat Read More

 Sobat bisa perhatikan gambar diatas... kalau readore diatas sudah secara otomatis sob, tinggal di tambah dan di edit css dan htmlnya. Untuk pemasangan readmore standar dengan thema bawaan di blogger saya akan berikan contoh di bawah ini.

Pada menubar penulisan postingan, ada Bold, Italic. dan lain-lain. Di situ ada gambar seperti ini. Monggo silahkan dilihat perbesar. "Letakkan krusor pointer penulisan di akhir kalimat mana yang akan dipotong" Lalu >> Klik Jumpbreak, pada postingan tersebut. Perhatikan gambar dibawah ini....

Contoh Readmore [Jump Break]

Cara Membuat Stylish Readmore pada postingan blog:

Mungkin sobat sudah pahan tentang cara membuat readmore, kali ini tidak hanya membuat namun kita sambil belajar bersama-sama ya sob, untuk menggunakan stylish readmorenya dibawah ini.

Langakah Membuat Sylish Readmore Pada postingan:

1. Masuk ke Blogger >> Design >> Pilih Edit HTML.
2. Usahakan selalu backup template sobat.
3. Cari Kode Seperti ini ]]></b:skin>
4. Paste Model CSS Styled Readmore, di atas kode tersebut.
5. Sekarang kita mengganti style dari Readmore standar atau deffault setingnya. Perhatikan

• HTML : <data:post.body/>

Biasanya dibawah kode diatas sobat akan menemukan html dibawah ini.

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

<div style="text-align: right;">Read More ->></div></a>
</b:if>

Atau biasanya jika blogsobat sudah menggunakan readmore link button nanti akan terlihat seperti yang dibawah ini sob.

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

<div style="text-align: right;">< img src=http://www.kinghtmlcode.com border="0"/></div></a>
</b:if>

Sekarang cara mudahnya sobat hanya mengganti code yang saya tandai warna hijau itu dengan nama dibawah ini ya sob.

class="kinghtmlcode-readmore"

Okay sekarang sudah siap, ini dia  CSS Code readmore yang saya bicarakan seperti yang diatas yang diletakkan di atas code HTML : ]]></b:skin> (*atau sobat bisa juga melalui costume advance)

Stylish Readmore by KingHtmlCode

 

/*----------- Green White Blue------------*/

.kinghtmlcode-readmore{
background:#00FF00;
text-align:;
color:#Fff;
margin:5px 0;
float:right;
border:2px solid #a1a1a1;
padding:5px;
border-radius:25px;
font:bold 11px sans-serif;
box-shadow: 5px 5px 5px #888888;
transition:width 4s;
-webkit-transition:width 4s; /* Safari */}

.kinghtmlcode-readmore:hover{
width:61px;
background:#FFf;
font:bold 11px sans-serif;
color:#a1a1a1;
border:2px solid #0080ff;
}
.kinghtmlcode-readmore a {
color:#fff;
text-decoration:none;
}

.kinghtmlcode-readmore a:hover {
color:#fff;
text-decoration:none;
}

 Note : Semua yang berwarna kurning bisa sobat ganti-ganti sesuai selera sobat. Kalu model readmore design saya seperti itu sob. Monggo, silahakan kembangkan kreasi soba. Semoga bermanfaat. Termikasi sudah berkunjung.