jika kalian suka silahkan pasang pada blog anda.
Lihat Demo
Pertama Pasang CSS dulu pada template anda dengan mencari code
]]</skin>
dan Simpan CSS di atasnya.jika sudah simpan template anda.
body { background: url("https://lh6.googleusercontent.com/-e0_3IuBZwgs/TyvWQEKqSzI/AAAAAAAAF_w/fuoTc-tNh2Y/d/refreshbg.png") repeat scroll 0 0 #EBEBEB; padding: 20px; word-wrap: break-word; } #button .icon { background:#E3E3E3 url('https://lh3.googleusercontent.com/--e_YVckfUbg/TyvWSQ-Sa3I/AAAAAAAAF_4/A6xydsmRC6E/d/refreshcode.png') 3px 0 no-repeat; -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; border-radius:10px; display:block; color:#212121; float:none; height:80px; width: 80px; line-height:80px; margin:10px auto 0; padding-top:1px; position:relative; text-shadow:0 1px 0 #FAFAFA; text-align:center; text-decoration:none; white-space:nowrap; -webkit-transition:width .25s ease-in-out, background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out, background-color .25s ease-in-out; -o-transition:width .25s ease-in-out, background-color .25s ease-in-out; transition:width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px; } #button a span { display:none; } #button:hover a span { display:inline; } #button a span { font-size:1.4em; } #button:hover .icon { width:420px; } #button .demo { background-position:0 -80px; } #button .info { background-position:0 -160px; } #button .download { background-position:0 0; }Pemanggilan CSS ke HTML.
buat sebuah postingan dan sisipkan code HTML berikut sesuai kegunaannya.
pergantian class dengan demo,download dan info.
Untuk DEMO
<div id="button"> <a href="#" class="icon demo"><span>Lihat Demo</span></a> </div>Untuk Download
<div id="button"> <a href="#" class="icon download"><span>Lihat Demo</span></a> </div>Untuk Informasi
<div id="button"> <a href="#" class="icon info"><span>Lihat Demo</span></a> </div>
Post By : Ana Silvana
Button Generator : 3 Tool CSS
Na aku pernah lihat di blog tune-up.. <3
ReplyDelete:D iia ka emang inspirasinya dari situ hehehe.. gak apa ya,, \o/
Deleteseep.. tak apa.. inspirasi bisa di mana saja.. :-d
Deleteudah saya coba di belog saiiah.... mantep..
ReplyDeletemakasih yakk kang
hehe.. sanes saya nu share.. tapi author yang satu lagi.. !! :D
Deleteowhh... nya sama wae meureun xixixix....
ReplyDeletekang, saiiah serius yeuh pengen kursus masalah css dan sebagainya sama akang... gmn cara na tah? :D
wak kank.. saya belum masternya.. akang tinggal komentari saja tutorial yang di share.. nanti saya akan jelaskan jika ada yang belum di mengerti.. saya sendiri pelajari dasar css hampir semua dari W3school.org
Deletehehehe saiiah juga sering kesana,, gada bahasa sunda euy xixix..
ReplyDeleteokelah kalau begeto...
ngemeng2... pasang banner boleh kang? :D
hahaha... bahasa jawa adanya.. :D
Deleteboleh... tinggal kirim link gambarnya
terawehan woy... ~x(
Deletewaduhh ada neng author..... kaburrr ahh.... xixixi
ReplyDeletekirim na kamana kang? email aja?
kemana saja asal ke konatk saya..
Deletekang, mau nanya...
ReplyDeletekalo ngerapetin header sampe mentok gimana sih? udah utak atik ko ga bisa juga? :(
mentok gimana maksdunya..??
Deletemaksud nya biar gak ada jarak kang...
ReplyDeletehttp://i45.tinypic.com/2j1wznn.png
ouh itu pengaturannya pada css body dan #outer-wrapper bukan pada headernya . jangan gunakan margin top dan bottom.. atau cari #outer-wrapper - margin: 10px auto; . hapus jadi 0 .
Deleteuntuk body padding dan margin pakai 0 saja.
jika masih gagal gunakan css reset dari CSS Eric Meyer.
di coba dolo ya kang... :)
ReplyDeletesudah di bikin 0 padding margin nya, tapi hanya bergeser sedikit saja...
ReplyDelete#kalo css meyer cara kerja na gmn ya gan?
hadeuhhh oon yeuh kang.. :(
kayanya saya harus lihat xml templatenya.. biasanya kalau edit css gagal,harus utak atik pada HTML juga..
Deletecss mayer untuk mengubah default dari blogger.. banyak kok pengertian css reset di google selain dari eric meyer
mangga kang..
Deletehttps://www.box.com/s/ba16b34c02f0a0bc910f
ok kank saya akan check ,, nanti saya coba edit templatenya.. nanti malam saya kirim kembali.. sekarang malam mingguan dulu ach.. :D
Deletesiap grak...hatur nuhun sebelum \m/
ReplyDeletekang saya sudah edit remplatenya.. kesalahannya di bagian meta tag di bawah head.. kalau mau lihat hasilnya http://under-premium.blogspot.com/
Deleteteu ngarti kang....... :( @@,
Deletehehhehehe..
Deleteedit ulang meta tagnya.. kembalikan dulu ke standar.. atau ganti dengan ini..
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta expr:content='data:blog.metaDescription' name='description'/>
cara hapusnya.. pada bagian seperti ini
<head>
...ganti semua meta tag yang ada di sini..
<b:skin>
NB : saya belum check satu-persatu jadi saya hapus semuanya.. :D
kalau gak mau kembali ke standar coba hapus bagian ini saja.. itu kalau saya gak salah kang.
tag ini :
<head>
<!-- hapus script yang ini -->
<script src='//use.typekit.net/uwo0iso.js' type='text/javascript'/>
<script type='text/javascript'>try{Typekit.load();}catch(e){}</script>
<!-- meta tag lainnya -->
...meta tag jangan di hapus..
<b:skin>
NB : kank pindah tanya jawab ke Fun Page FB saya ya..
ouh ya satu lagi css pada template body atur seperti ini :
Deletebody {
background:url("https://lh6.googleusercontent.com/-e0_3IuBZwgs/TyvWQEKqSzI/AAAAAAAAF_w/fuoTc-tNh2Y/d/refreshbg.png") repeat #EBEBEB;
padding:0 20px;
margin:0;
word-wrap:break-word;
}
http://www.facebook.com/csstutsplus?ref=ts
Deleteini bukan kang fb fan page na? udah hadir :D
https://www.facebook.com/GTandUnder88 ini sob.. kan udah sering di like.. yang itu belum bisa buat di share.
Deleteok kang, saya coba cari dolo kesalahannya yah...
ReplyDeleteGan, ane mau ngedit gambar & ukuran button ini Gan. Ane udah nyoba ngutak-ngatik scriptnya, tapi hasilnya belum maksimal juga.
ReplyDeleteJadi, boleh saya tahu keterangan fungsi dari masing-masing script di atas ndak Gan? :D
ukuran gambar 80x80 .. untuk posisi gambar harus mengerti dulu tentang penggunaan css sprite gambar... DISINI
DeleteIron Man, Thor and the Ring - Titanium vs Stainless Steel
ReplyDeleteThis is one of the titanium wood stoves original Iron Man: The Wily Wars titanium trimmer of Thunder movie, designed to make guy tang titanium toner the titanium engine block original titanium bolt Iron Man (Iron Man) his own