Search JavaScript Kit:

This free script provided by
JavaScript Kit

Dian motor cell

Placed AD here !!

Pop Cash

Pop Cash

Pop Cash

Home » Tips trik Blogger » Tutorial Blogger » 10 Variasi Cantik Tombol Read More Di Blog

10 Variasi Cantik Tombol Read More Di Blog

Posted by Dian Motor Cell on Saturday, March 16, 2013 Label: ,
Rasanya belum lengkap apabila tampilan weblog/situs tanpa di sisipi widget " Read More " seperti yang telah di posting beberapa waktu lalu Cara mudah membuat auto readmore di Blog  hanya untuk satu jenis tombol umum auto read more.Mengingat fungsi dari widget yang tak kalah pentingnya dengan isi dari artikel dalam Blog itu sendiri. Fungsi dari " Read More " yang paling utama yakni meringkas isi dari keseluruhan artikel pada Weblog, maka saya coba kembali memberikan artikel serupa tapi lebih kepada variasi dari tombol auto readmorenya. Sehingga postingan artikel yang ditampilkan satu frame screen per pencarian bisa lebih dari satu artikel tiap label.
Berikut ini saya akan ketengahkan 10 Variasi Cantik Tombol Read More untuk Blog.

 Caranya :
1. Masuk ke akun Blogger >> Desain >> Edit HTML
2. Backup template sobat
3. Centang (V) kotak " Advance Template Widget "
4. Cari kode ]]> </ B: skin>]]>
5. Copy dan Paste kode- kode untuk 10 Variasi Cantik Tombol Tautan Auto Read More di bawah tepat di atasnya
6. Kemudian cari kode <data:post.body/>
7. Lantas kemudian tepat dibawah kode di atas sobat akan menemukan mungkin 2 kode yang sama tapi berbeda untuk kode image nya:
     A. Tanpa kode image ( img )

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

     B. Pake kode image ( img )

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

8. Untuk kedua jenis di atas cukup mengganti kode yang berwarna latar Kuning dengan class = "MBT-readmore" , maka akan berubah menjadi :
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<Div class = "MBT-readmore"> <img src = http://xyz.com border = "0" /> </ div> </ a> 
</ b: if>

9. Save/ Simpan Template dan lihat hasilnya

-----------------------------------------------------------------------------------------------------------------------------------------------------------
10 Variasi Cantik Tombol Tautan Auto Read More
-----------------------------------------------------------------------------------------------------------------------------------------------------------
Sekarang tinggal pilih salah satu kode Auto Read More untuk langkah No. 5

Model #1



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


Model#2

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

Model#3


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


Model#4

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

Model#5

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

Model#6

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

Model#7

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

Model#8

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

Model#9

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

Model#10

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


----------------------------------------------------------------------------------------------------------------------------------------------------------
Kode- kode yang dapat di rubah untuk warna Text, Pembatas dan Background
----------------------------------------------------------------------------------------------------------------------------------------------------------
- .MBT-readmore : mengubah warna Latar, Pembatas dan Font dalam mode aktif
- .MBT-readmore:hover : mengubah warna Latar, Pembatas dan Font ketika mouse pada posisi tombol
- .MBT-readmore a : mengubah warna Link/ tautan
- .MBT-readmore:hover a : mengubah warna Link/ Tautan ketika mouse pada posisi tombol


Demikianlah uraian singkatnya tentang 10 variasi Cantik Tombol Auto Readmore di Blog, semoga bermanfaat.


Terinspirasi oleh : Mohammad Mustafa Ahmedzai, pemilik http://www.mybloggertricks.com/


.: h72 :.


Related Posts:



0 komentar:

Post a Comment

No spam...

Copyright © 2017 Dian Motor Cell. All rights reserved. New Super Seo modified by CB Blogger. Powered by Blogger