10 Tampilan Red More Keren Pada Blogger

Cara membuat Red More Pada Blogger Dengan Gaya yang keren - Terkadang jika kita baru saja mengganti Template , oTomatis kita akan mengulang segalanya dari desain template tersebut. Apa lagi template tersebut tidak ada Script HTML Otomatis Red More .

Di postingan ini saya akan share tutorial caya memasang Script HTML Otomatis Red More dengan 10 Tampilan Red More Keren Pada Blogger . Jadi anda tidak akan bosan, tinggal ganti saja Scriptnya dan bergantilah pula Model Tulisan Red More pada blogger anda.

Yang pertama harus anda lakukan adalah :

1. Log In ke akun Blogger Anda

2. Edit HTML

3. Centang Pada Expand Template Widget

4. Cari Code Dibawah ( Mirip ) :

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

5. Gantilah Code yang saya tebalkan menjadi sperti ini Contoh :

<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>

6. Nah untuk yang saya beri warna kuning tersebut Gantilah Dengan code RED MORE Pilihan anda:

• 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;
}

Silahkan Pilih Red More Yang anda suka dan langsung pasang dengan sesuka anda.

Share this post