Membuat tombol dengan efek hover keren pada postingan blog
Rabu, 01 Mei 2013
0
komentar
BAGAIMANA MENAMBAHKAN TOMBOL INI KE BLOG?
Tombol ini sangat mudah di gunakan,Sekarang saya ingin membagi cara instalasi widget ini menjadi dua bagian yaitu bagian untuk CSS dan bagian untuk HTML,Pada awalnya kita menambahkan kode CSS dulu ke tempelate kita,untuk membuat tombolnya.Silahkan ikuti caranya di bawah ini:
- Masuk ke Dasboard blogger kalian
- Menuju ke menu tempelate
- Klik edit HTML
- Sekarang tekan ctrl+f untuk mempermudah mencari kode ]]></b: skin>
- Kalau kode ]]></b: skin> sudah ketemu
- Copy CSS di bawah ini dan letakan tepat diatas kode ]]></b: skin> pada tempelate anda
Sekarang kita telah menambahkan CSS (style) di tempelate, . ..button {
-moz-border-radius:5px
5px
5px
5px;
-webkit-border-radius:5px
5px
5px
5px;
border-radius:5px
5px
5px
5px;
-moz-box-shadow:0
1px
3px
rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0
1px
3px
rgba(0, 0, 0, 0.25);
box-shadow:0
1px
3px
rgba(0, 0, 0, 0.25);
background:scroll
0
0
#222222;
border-bottom:1px
solid
rgba(0, 0, 0, 0.25);
color:#FFFFFF
!important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px
19px
9px;
position:relative;
text-decoration:none;
text-shadow:0
-1px
1px
rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:100px;
}
.demobutton:hover {
background-color:#EB7D05;
}
.downloadbutton {
background-color:#999999;
text-align:center;
width:100px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.homebutton {
background-color:#999999;
text-align:center;
width:100px;
}
.homebutton:hover {
background-color:#1666DC;
}
.button:hover {
-moz-box-shadow:0
1px
11px
rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0
1px
11px
rgba(0, 0, 0, 0.45);
box-shadow:0
1px
11px
rgba(0, 0, 0, 0.45);
}
Dan sekarang bagaimana cara menggunakanya? Silahkan pilih Kode HTML di bawah ini untuk membuat tombol di postingan anda. .!!
- Pastikan dulu anda beralih saat akan membuat postingan dari Compose ke HTML
- Pilih kode tombol di bawah ini dan pastekan dimana anda ingin menampilkan tombolnya
Kode untuk membuat tombol HOME
<
a
class
=
"button homebutton"
href
=
"YOUR LINK HERE"
rel
=
"nofollow"
style
=
"float: left;"
target
=
"_blank"
><
span
style="display:
inline-block;">Homepage</
span
></
a
>
Kode untuk membuat tombol DEMO
<a class=
"demobutton button"
href=
"YOUR DEMO LINK HERE"
rel=
"nofollow"
style=
"float: left;"
target=
"_blank"
><span style="
display
:
inline-
block
;">Live Demo</span></a>
Kode untuk membuat tombol DOWNLOAD
KETERANGAN:<a class=
"button downloadbutton"
href=
"YOUR DOWNLOAD LINK HERE"
rel=
"nofollow"
style=
"float: left;"
target=
"_blank"
><span style="
display
:
inline-
block
;">Download</span></a>
- Text yang berwarna merah adalah untuk link anda
- Dan text yang berwarna biru adalah untuk kalimat di dalam tombol
- Silahkan ganti dengan keinginan anda
Selamat mencoba dan Happy Blogging. . :)
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Membuat tombol dengan efek hover keren pada postingan blog
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke https://downloadmp3cutter.blogspot.com/2013/05/membuat-tombol-dengan-efek-hover-keren.html. Terima kasih sudah singgah membaca artikel ini.Ditulis oleh Unknown
Rating Blog 5 dari 5
0 komentar:
Posting Komentar