Search JavaScript Kit:

This free script provided by
JavaScript Kit

10 Variasi Cantik Tombol Read More Di Blog

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

1 komentar:

  1. *JUAL BONGKAHAN BATU BACAN ASLI DARI MALUKU UTARA*
    (Chrysocolla chalcedony,Living Stone,Gem silica)
    galian tanjung gulau (pulau kasiruta) halmahera selatan,maluku utara

    No Hp : 082347225054 ==###== PIN BB : 2A846D86

    *BACAN DOKO SUPER*
    ================
    *Berat 1 ons Rp 500.000
    *Berat 5 ons Rp 1.250.000
    *Berat 1 kg Rp 2.500.000
    *Berat 2 kG Rp 4.250,000
    setiap pembelian perkilo dapat bonus 1 permata batu bacan.

    *BACAN PALAMEA*
    ==============
    *Berat 1 ons Rp 500.000
    *Berat 5 ons Rp 1.000.000
    *Berat 1 kg Rp 2.000,000
    *Berat 2 Kg Rp 4.000,000
    setiap pembelian perkilo dapat bonus 1 permata batu bacan.

    KONDISI BATU
    ============

    * Natural (no treatment) asli bukan sintetis
    * Bahan tua galian tambang sendiri
    * Keras & Padat
    * Siap Gosok
    * Full daging tanpa kapur
    * Kualitas super krystal
    * Mineral (chysocolla chalcedony)

    Melayani pembelian per kilo dan per ons untuk bongkahan
    Kami juga melayani pembelian luar daerah dan luar kota
    Bagi pecinta bacan yang minat silahkan langsung hubungi/sms

    No Hp : 082347225054 ==###== PIN BB : 2A846D86


    #.stock terbatas
    Siapa cepat dia dapat
    Bagi yg merasa sudah minat dan ingin transaksi pembelian dengan kami,
    Adapun cara yg kami sediakan:COD bisa silahkan datang ke alamat saya di daerah Halmahera selatan
    Alamat:Jl.Buana Seli No.76 Rt 016 / Rw 002,Desa Labuha,Kecamatan Bacan,halmahera selatan maluku utara,dan bagi peminat batu bacan di luar kota bisa kami kirim melalui jasa pengiriman seperti:JNE/TIKI/KANTOR POS,
    *Bagi peminat luar kota silahkan dikirim fotmat pemesanang sebagai berikut:
    -Nama Lengkap
    -Alamat lengkap
    -No HP(Hendpoon) yang selalu aktif
    -Jika sudah di isi formatnya silahkan CALL/SMS di nmr sebagai berikut:

    No Hp : 082347225054 ==###== PIN BB : 2A846D86

    jika barang sudah kami kirim,kami berikan no.resi pengiriman barang yang anda pesan.

    ReplyDelete

No spam...