10 Cara Untuk Gaya dan Membuat "Read More" Link Pada Blogger

Menciptakan 'Read Moret' atau baca selengkapnya dapat membuat beban/loading blog anda terjaga dengan baik. dalam tutorial kali ini tanpa menggunakan gambar sama sekali. Kami akan menggunakan CSS murni untuk membuat ini terjadi. Ada 10 tombol yang saya harap anda akan menemukan menarik untuk menyesuaikan lebih lanjut.
Link ini memiliki nama yang berbeda. Anda dapat menyebutnya sebagai "Full Story" Link, "Lanjutkan" Link, "Baca seluruh cerita" dll Link. Memang pernah dijelaskan pada tutorial disini.

Untuk menyingkat waktu marilah kita ikuti langkahnya :

• Masuk ke akun Blogger Anda;


• Klik tombol Rancangan dan pilih Edit HTML;


• Beri Centang Expend Widget;


• Cari kode ]]></b:skin>


• Jika ketemu copy paste kode Read More Link diatasnya.


• Kemudian cari kode <data:post.body/>


• Carilah kode yang Read More mirip seperti kode berikut :

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="text-align: right;">Read More ->></div></a>
</b:if>

• Jika Anda menggunakan tombol pada Link Read More maka kode akan terlihat seperti ini,

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="text-align: right;">< img src=http://xyz.com border="0"/></div></a>
</b:if>

• Dalam kedua kasus diatas warna yang berwarna kuning cukup diganti dengan kode class="KOD-readmore"

Berikut : Sepuluh (10) Link Styles "Read More"

• Kode #1

/*-------------------------- Narrow black Orange-------------*/
.KOD-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;
}
.KOD-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;
}
.KOD-readmore a {
color:#fff;
text-decoration:none;
}
.KOD-readmore a:hover {
color:#fff;
text-decoration:none;
}

• Kode #2

 

/*------------Light Purple long----------------------*/
.KOD-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;
}
.KOD-readmore:hover{
color:#000800;
border-left:50px solid #6882C7;
border-right:2px solid #6882C7;
border-top:2px solid #6882C7;
border-bottom:2px solid #6882C7;
}
.KOD-readmore a {
color:#fff;
text-decoration:none;
} .KOD-readmore a:hover {
color:#fff;
text-decoration:none;
}

• Kode #3

 

/*---------------- Rectangle left border-----------*/
.KOD-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;
}
.KOD-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;
}
.KOD-readmore a {
color:#fff;
text-decoration:none;
}
.KOD-readmore a:hover {
color:#fff;
text-decoration:none;
}

• Kode #4

 

/*-------------- Pink Left right -----------*/
.KOD-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;
}
.KOD-readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#CC0099;
border-right:2px solid #CC0099;
border-left:2px solid #CC0099;
}
.KOD-readmore a {
color:#fff;
text-decoration:none;
}
.KOD-readmore a:hover {
color:#fff;
text-decoration:none;
}

• Kode #5

 

/*------------- Brown top Bottom----------*/
.KOD-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;
}
.KOD-readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#B26B00;
border-top:2px solid #B26B00;
border-bottom:2px solid #B26B00;
}
.KOD-readmore a {
color:#fff;
text-decoration:none;
}
.KOD-readmore a:hover {
color:#fff;
text-decoration:none;
}

• Kode #6

 

/*-------------- Blue Blank-----------------*/
.KOD-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;
}
.KOD-readmore:hover{
background:#FFf;
font:bold 11px sans-serif;
color:#0080ff;
border:3px dotted #ddd;
}
.KOD-readmore a {
color:#fff;
text-decoration:none;
}
.KOD-readmore a:hover {
color:#fff;
text-decoration:none;
}

• Kode #7

 

/*------------- Red + Dark Red------------*/

.KOD-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;
}
.KOD-readmore:hover{
background:#FFf;
font:bold 12px sans-serif;
color:#FF0000;
border:2px solid #FF0000;
}
.KOD-readmore a {
color:#fff;
text-decoration:none;
}

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

• Kode #8

 

/*------------ White + Green -----------*/
.KOD-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;
}
.KOD-readmore:hover{
background:#008000;
font:bold 11px sans-serif;
color:#fff;
border:2px solid #ddd;
}
.KOD-readmore a {
color:#fff;
text-decoration:none;
}
.KOD-readmore a:hover {
color:#fff;
text-decoration:none;
}

• Kode #9

 

/*---------- Black --------------*/
.KOD-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;
}
.KOD-readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#000800;
border:2px solid #000800;
}
.KOD-readmore a {
color:#fff;
text-decoration:none;
}
.KOD-readmore a:hover {
color:#fff;
text-decoration:none;
}

• Kode #10

 

/*----------Orange One 1 ----------------*/
.KOD-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;
}
.KOD-readmore:hover{
background:#FFB93C;
}
.KOD-readmore a {
color:#fff;
text-decoration:none;
}
.KOD-readmore a:hover {
color:#fff;
text-decoration:none;
}

Anda dapat dengan mudah membuat perubahan pada warna dan gaya oleh pemahaman dibawah ini.

1. Edit  .KOD-readmore : Untuk Mengubah latar belakang, perbatasan dan warna font dalam modus aktif;


2. Edit .KOD-readmore::hover : Untuk Mengubah latar belakang, perbatasan dan warna font ketika pengguna mouse kursor pada tombol;


3. Edit .KOD-readmore a : Untuk mengubah warna link


4. Edit .KOD-readmore sebuah a:hover : Untuk mengubah warna link pada mouse hover

Selamat Mencoba dan semoga berhasil.....!!!!!!!