10 Button "Read More" Cantik ~ White Horse

10 Button / Tombol Read More Cantik untuk Blogger akan jadi tutorial Desain Blog saat ini, dengan hanya menggunakan kode CSS saja, Anda dapat memasang Button / Tombol Read More yang menarik dan keren pada blog Anda. Proses pemasangan dan menempatan tombol read more ini akan dibuat semudah dan se-simple mungkin agar mudah diikuti dan dipelajari kembali oleh Anda. Ikuti saja panduanya dibawah ini, Sobat.

Membuat ringkasan/summary 'After the jump' menggunakan Read More Link dapat mempercepat loading homepage sobat dan juga membuat tampilan blog lebih terorganisir. Ada banyak blogger yang berbagi tutorial membuat button / tombol "Read More", "Baca Selengkapnya" dan "Continue Reading Links", kali saya ingin mengajak sobat blogger untuk memasang button/tombol Read More yang cantik/keren. Ada 10 tombol/button Read More cantik dibawah dengan tanpa menggunakan gambar/image sama sekali. Saya akan hanya menggunakan kode CSS murni (pure CSS) yang tentu tanpa perlu terbebani loading gambar apapun.

Dalam penerapannya di Blog/ Web, tombol link "Read More" ini dapat memiliki nama yang berbeda-beda. Anda bisa menulis "Full Story", "Lanjutkan", "Baca Selengkapnya" dan seterusnya. Jika Anda belum tahu apa itu link Read More atau belum menambahkannya pada template Anda silakan baca tutorialnya cara membuat read more link pada tutorial proBlogiz selanjutnya.

Memasang Tombol/Button Read More Cantik di Blogger

Saya akan membagi banyak kode CSS di bawah ini yang akan mengubah tampilan dari link post summary (ringkasan artikel) pada blog Anda tapi pertama-tama Anda harus menambahkan kode CSS tersebut pada
template Anda.

Menambah kode CSS Tombol/Button Read More di Template

Masuk Blogger > Template > Edit HTML
Backup template Anda dahulu
Click "Expand widget Templates" Box
Cari kode ]]></b:skin>
Kemudian pastekan/letakkan kode CSS button Read More pilihan Anda tepat diatas kode ]]></b:skin>

10 Tombol / Button Read More Cantik

Button Read More #01

( Black Style)

/*---------- Black --------------*/ .pB-readmore{ background:#000800; text-align:right; cursor:pointer; color:#fff; margin:5px 0; float:right; border:2px solid #ddd; padding:5px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; } .pB-readmore:hover{ background:#fff; font:bold 11px sans-serif; color:#000800; border:2px solid #000800; } .pB-readmore a { color:#fff; text-decoration:none; } .pB-readmore a:hover { color:#fff; text-decoration:none; }

Button Read More #02

( Orange Style)

/*---------- Orange ------------*/ .pB-readmore{ background:#EB7F17; text-align:right; cursor:pointer; color:#fff; margin:5px 0; float:right; border:none; padding:5px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; } .pB-readmore:hover{ background:#FFB93C; } .pB-readmore a { color:#fff; text-decoration:none; } .pB-readmore a:hover { color:#fff; text-decoration:none; }

Button Read More #03

(White and Green Style)

/*------------ White + Green -----------*/ .pB-readmore{ background:#fffff; text-align:right; cursor:pointer; color:#008000; margin:5px 0; float:right; border:2px solid #ddd; padding:5px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; } .pB-readmore:hover{ background:#008000; font:bold 11px sans-serif; color:#fff; border:2px solid #ddd; } .pB-readmore a { color:#fff; text-decoration:none; } .pB-readmore a:hover { color:#fff; text-decoration:none; }

Button Read More #04

( Blue Blank Style)

/*-------------- Blue Blank-----------------*/ .pB-readmore{ background:#0080ff; text-align:right; cursor:pointer; color:#Fff; margin:5px 0; float:right; border:2px solid #ddd; padding:5px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; } .pB-readmore:hover{ background:#FFf; font:bold 11px sans-serif; color:#0080ff; border:3px dotted #ddd; } .pB-readmore a { color:#fff; text-decoration:none; } .pB-readmore a:hover { color:#fff; text-decoration:none; }

Button Read More #05

( Red White Style )

/*------------- Red + White------------*/ .pB-readmore{ background:#fffff; text-align:right; cursor:pointer; color:#FE8080; margin:5px 0; float:right; border:2px solid #FE8080; padding:5px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; } .pB-readmore:hover{ background:#FFf; font:bold 12px sans-serif; color:#FF0000; border:2px solid #FF0000; } .pB-readmore a { color:#fff; text-decoration:none; } .pB-readmore a:hover { color:#fff; text-decoration:none; }

Button Read More #06

( Brown top Bottom Style)

/*------------- Brown top Bottom----------*/ .pB-readmore{ background:#fff; text-align:right; cursor:pointer; color:#B26B00; margin:5px 0; float:right; border-top:2px solid #ddd; border-bottom:2px solid #ddd; padding:5px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; } .pB-readmore:hover{ background:#fff; font:bold 11px sans-serif; color:#B26B00; border-top:2px solid #B26B00; border-bottom:2px solid #B26B00; } .pB-readmore a { color:#fff; text-decoration:none; } .pB-readmore a:hover { color:#fff; text-decoration:none; }

Button Read More #07

( Pink Left-right Style )

/*-------------- Pink Left right -----------*/ .pB-readmore{ background:#fff; text-align:right; cursor:pointer; color:#FE80DF; margin:5px 0; float:right; border-right:2px solid #FE80DF; border-left:2px solid #FE80DF; padding:5px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; } .pB-readmore:hover{ background:#fff; font:bold 11px sans-serif; color:#CC0099; border-right:2px solid #CC0099; border-left:2px solid #CC0099; } .pB-readmore a { color:#fff; text-decoration:none; } .pB-readmore a:hover { color:#fff; text-decoration:none; }

Button Read More #08

( Rectangle left border Style)

/*---------------- Rectangle left border-----------*/ .pB-readmore{ background:#fff; text-align:right; cursor:pointer; color:#009999; margin:5px 0; float:right; border-right:2px solid #009999; border-left:10px solid #009999; border-bottom:2px solid #009999; border-top:2px solid #009999; padding:5px; font:bold 11px sans-serif; } .pB-readmore:hover{ background:#fff; font:bold 11px sans-serif; color:#006B6B; border-right:2px dotted #009999; border-left:10px solid #006B6B; border-bottom:2px dotted #009999; border-top:2px dotted #009999; } .pB-readmore a { color:#fff; text-decoration:none; } .pB-readmore a:hover { color:#fff; text-decoration:none; }

Button Read More #09

( Light Purple long Style)

/*------------Light Purple long----------------------*/ .pB-readmore{ background:#fff; text-align:right; cursor:pointer; color:#6882C7; margin:5px 0; border-left:400px solid #6882C7; border-right:2px solid #6882C7; border-top:2px solid #6882C7; border-bottom:2px solid #6882C7; padding:1px 5px 1px 1px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; } .pB-readmore:hover{ color:#000800; border-left:50px solid #6882C7; border-right:2px solid #6882C7; border-top:2px solid #6882C7; border-bottom:2px solid #6882C7; } .pB-readmore a { color:#fff; text-decoration:none; } .pB-readmore a:hover { color:#fff; text-decoration:none; }

Button Read More #10

( Narrow black Orange Style)

/*-------------------------- Narrow black Orange-------------*/ .pB-readmore{ background:#fff; text-align:right; cursor:pointer; color:#EB7F17; margin:5px 0; border-left:400px dashed #474747; border-right:2px solid #474747; border-top:2px solid #474747; border-bottom:2px solid #474747; padding:2px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; } .pB-readmore:hover{ background:#EB7F17; color:#fff; border-left:400px dashed #474747; border-right:2px solid #EB7F17; border-top:2px solid #EB7F17; border-bottom:2px solid #EB7F17; } .pB-readmore a { color:#fff; text-decoration:none; } .pB-readmore a:hover { color:#fff; text-decoration:none; }

==========================================================================

Setelah Anda memilih salah satu style Button Read More diatas, maka langkah selanjutnya adalah :

Masuk ke akun blogger sobat.
Pilih Template > Edit HTML.
Cari kode ]]></b:skin> , gunakan fungsi Find dengan menekan tombol (Ctrl + F) pada keyboard.
Kalau sudah ketemu, letakkan kode style button yg sobat pilih tepat di atas tag ]]></b:skin>
Selanjutnya cari kode <data:post.body/> , (Ctrl + F)
Sobat akan menemukan code dibawahnya mirip seperti ini :

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<span class='readmore'>
<a expr:href='data:post.url'>READ MORE</a></span></b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

Gantilah kode yang diberi warna biru dengan kode baru, seperti dibawah ini :

<span class="pB-readmore">

# atau ada juga yang seperti 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>

Gantilah kode yang diberi warna biru dengan kode yang baru, seperti dibawah ini :

<div class="pB-readmore">

Kemudian Save Template! dan lihat hasil nya di homepage blog sobat

#Keterangan button Read More

Anda juga dapat merubah atau memberi sentuhan style button Read More sesuai selara dengan langkah berikut :

    .pB readmore >> merubah background, border, font color pada aktif mode
    .pB readmore:hover >> merubah background, border, dan font color pada mouse hover
    .pB readmore a >> merubah warna link
    .pB readmore a:hover >> merubah warna link pada mouse hover

Untuk merubah warna-warna tersebut gunakan >>> Kode WARNA HTML

>>referensi<<

White Horse

Dunia ini luas dan yg membuatnya sempit adalah PEMIKIRANMU. Jika dunia ini sempit maka yg membuatnya luas adalah PEMIKIRANMU.

Flash news:

Sabtu, 05 Oktober 2013