Pages

Membuat tombol dengan efek hover keren pada postingan blog

Pada postingan saya kali ini saya akan share tutorial,tentang cara membuat tombol CSS keren dengan efek hover pada postingan blog.Tombol ini dibuat menggunakan CSS dengan efek hover yang keren mewakili dari warna yang berbeda,tombol yang akan kita buat ini untuk tombol Home,Demo dan Download. .Tapi anda juga bisa mengubah teksnya sesuai kebutuhan anda. .Langsung saja lihat demo gambarnya:

tombol, css, effect, hover, blogger

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


.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);
}

Sekarang kita telah menambahkan CSS (style) di tempelate, . .
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

<a class="button downloadbutton" href="YOUR DOWNLOAD LINK HERE"
rel="nofollow" style="float: left;" target="_blank"><span style="display:
inline-block;">Download</span></a>
KETERANGAN:
  • Text yang berwarna merah adalah untuk link anda
  • Dan text yang berwarna biru adalah untuk kalimat di dalam tombol
  • Silahkan ganti dengan keinginan anda
Nah begitulah cara membuat tombol menggunakan css pada postingan blog,sekian tutorial ini,semoga bermanfaat untuk kita semua.
Selamat mencoba dan Happy Blogging

Share it:
Sobat sedang membaca artikel tentang Membuat tombol dengan efek hover keren pada postingan blog . Silahkan baca artikel bloger sejati Tentang yang lainnya.
Anda baru saja membaca artikel yang berjudul Membuat tombol dengan efek hover keren pada postingan blog .Anda boleh copy paste artikel ini dengan menyertakan link http://lisaariyansyah.blogspot.com/2013/07/membuat-tombol-dengan-efek-hover-keren.html sebagai sumbernya.Dan Jika Anda ingin berlangganan Artikel dari blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel terbaru setiap ada artikel yang terbit di blog ini.

1 comments:

Arie Adie said...

http://3.bp.blogspot.com/-_-f2HKRWDnE/UZmH7Fr59aI/AAAAAAAAAjk/Kyeg3Lh_Gvg/s1600/a.gif

Kode Smiley Untuk Komentar


:a :b :c :d :e :f :g :h :i :j :k :l :m :n :o :p :q :r :s :t

Post a Comment

 

bloger sejati Copyright © 2008-2009 | Edited By : arieadie