10 Button / Tombol Read More Cantik

proBlogiz

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 Anda 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 inipun tutorial proBlogiz ingin mengajak Anda 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.

Untuk melihat tampilan preview / demo live semua Button Read More dibawah gunakan >>> proBlogiz Preview Design

Cara menggunakanya :

copy ( Control + C ) salah satu code CSS dibawah dan pastekan ( Control + V ) pada "Add CSS Code Here" atau diantara <style>....</style>, dan letakan code HTML dibawahnya atau pada "Add HTML Code Here" gunakan kode HTML seperti ini :

<div class="pB-readmore"> Read More ->></div></a>

kemudian klik Preview untuk melihat tampilan button

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 memutuskan untuk memilih salah satu style Button Read More diatas maka letakkan codenya diatas tag ]]></b:skin> pada template.

Langkah selanjutnya cari kode <data:post.body/> di template , Anda 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'>READMORE</a></span></b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

Gantilah kode yang diberi warna merah 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 merah dengan kode yang baru, seperti dibawah ini :

<div class="pB-readmore">

Kemudian Save Template dan Selesai!!

Coba lihat hasil Button Read More baru Anda pada Homepage Blog

Kostumisasi button Read More

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

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

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

Semoga Anda menyukainya salah satu dari 10 Button / Tombol Read More Cantik diatas, yang khusus saya sharing bagi mereka yang membutuhkannya para blogger. Dan jika ada sesuatu yang perlu ditanyakan, jangan sungkan untuk dipublis di form komentar dibawah kawan.

Lihat juga cara membuat tombol / button dengan CSS :

Cara Buat Tombol / Button Keren Dengan Kode CSS

Salaam

10 komentar

elevaku

18 Oktober 2012 pukul 18.18

gan, cara buat templat toolbar iframe gimana?

Unknown Author

18 Oktober 2012 pukul 18.33

tunggu saja
saya memang berniat sharing artikel tentang iframe toolbar template
dlm waktu dekat....

nym_artopraph

3 Februari 2013 pukul 10.56

Makasih gan infonya

Mencoba

30 Maret 2013 pukul 12.47

makasih gan atas infonya

31 Maret 2013 pukul 14.33

berhasil gan ! sukses :)

http://aldofahreza.blogspot.com

Deden Hilman Abdurahman

2 April 2013 pukul 00.03

thank gan atas info nya,,,, gan jangan lupa kunjungi ke alamat link ini http://softwarepsr.com/dessta, nanti anda akan mendapat ilmu bisnis online yang dapat menanmbah pnghasilan anda,

terima kasih

2 April 2013 pukul 00.15

thank gan atas infonya,, jngan lupa gan kunjungi link ini http://softwarepsr.com/dessta, silahkan kunjungi link di atas, dan anda akan menemukan ilmu yang sangat berguna, khususnya untuk ilmu menambah penghasilan anda lewat internet.

terima kasih

ivisyalala

16 Juni 2013 pukul 14.23

aku ga bisa nih gan, kode dibawah data post body, beda sama yg ditunjukkin dua kode di atas, aku udah cari dua2nya. tapi ga ketemu.

ferdiyanto

31 Oktober 2014 pukul 01.14

terima kasih udah saya coba n berhasil..
hasil nya ada di web ane http://dreview.net/ situs social bookmark backlink...

Admin 01

10 November 2014 pukul 10.08

Makasih banyak, gan...wat tutorialnya.
Ane udah puyeng nyoba banyak cara bikin tombol Auto Read More di blog, tapi kagak ada yang mempan.
Baru yang punya agan manjur bin cespleng !.

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

ProBlogiz

Home

Tutorial

SEO

Basic

Template

10 Button / Tombol Read More Cantik

Memasang Tombol/Button Read More Cantik di Blogger

Menambah kode CSS Tombol/Button Read More di Template

10 Tombol / Button Read More Cantik

Kostumisasi button Read More

Artikel Terkait Lainnya:

10 komentar

Google+ Followers

Like Me

Blog Arsip

Kategori

Artikel Popular

Artikel Terbaru

Support

Usefull Tools

Pages