Bertemu lagi, kali ini saya akan menjelaskan Cara Memasang Framework CSS3 GitHub Style Button Links khususnya pada blogspot. Apa itu framework? Saya lebih sering menyebutnya kode siap pakai. CMIIW :D
Jadi kita tinggal comot saja, kemudian dipasang tanpa harus repot-repot menuliskan kodenya dari awal. Banyak yang menyediakan framework button css3 semacam ini. Tapi menurut saya "GitHub Style Button" yang paling keren. Mari langsung saja kita mulai pengerjaannya.
Langkah Pemasangan
Masuk ke HTML Template Editor : dashboard > template > edit HTML > proceed.
Cari kode
]]></b:skin>. Kemudian copy paste kode di bawah ini tepat di atas kode ]]></b:skin>./* Tombol CSS3 Gaya GitHubKlik save template. Oke, langkah pemasangan sudah selesai :)
==========================================================*/
a.button, button { display: inline-block; padding: 5px; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12px; color: #3C3C3D; text-shadow: 1px 1px 0 #FFFFFF; background: #ECECEC url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYUURLi63PvSNqy-YiucjyeocbtfEe_1fDDwAh2bVHHaa9Ceq8Js_Y7RZxpWHshY56J_B86OA1VU0Ilg3N6mshDEZonwAfR0AGUJtnHLENCd98kFOwWRt-YCYUNc6Vjy5B65DgRR6YUe74/s1600/css3buttons_backgrounds.png') 0 0 no-repeat; white-space: nowrap; overflow: visible; cursor: pointer; text-decoration: none; border: 1px solid #CACACA; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; outline: none; position: relative; zoom: 1; line-height: 1.11; *display: inline; *vertical-align: middle; }
button { margin-left: 0; margin-right: 0; *padding: 5px 5px 3px 5px; }
a.button { -moz-user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -webkit-touch-callout: none;}
button::-moz-focus-inner { border: 0; padding:0px; }
a.button.primary, button.primary { font-weight: bold }
button:focus,a.button:hover,
button:hover { color: #FFFFFF; border-color: #388AD4; text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-position: 0 -40px; background-color: #2D7DC5; }
a.button:active, button:active,
a.button.active, button.active { background-position: 0 -81px; border-color: #347BBA; background-color: #0F5EA2; color: #FFFFFF; text-shadow: none; }
a.button:active, button:active { top: 1px }
a.button.negative:hover, button.negative:hover { color: #FFFFFF; background-position: 0 -121px; background-color: #D84743; border-color: #911D1B; }
a.button.negative:active, button.negative:active,
a.button.negative.active, button.negative.active { background-position: 0 -161px; background-color: #A5211E; border-color: #911D1B; }
a.button.positive:hover, button.positive:hover { background-position: 0 -280px; background-color: #96ED89; border-color: #45BF55; }
a.button.positive:active, button.positive:active,
a.button.positive.active, button.positive.active { background-position: 0 -320px; background-color: #45BF55; }
a.button.pill, button.pill { -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px; padding: 5px 10px 4px 10px; *padding: 4px 10px; }
a.button.left, button.left { -webkit-border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topright: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; margin-right: 0px; border-right: none; }
a.button.middle, button.middle { margin-right: 0px; margin-left: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border-right: none; }
a.button.right, button.right { -webkit-border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; margin-left: 0px; }
a.button.left:active, button.left:active,
a.button.middle:active, button.middle:active,
a.button.right:active, button.right:active { top: 0px }
a.button.big, button.big { font-size: 16px; padding-left: 14px; padding-right: 17px; }
button.big { *padding: 4px 17px 2px 17px; }
a.button span.icon, button span.icon { display: inline-block; width: 14px; height: 12px; margin: auto 7px auto auto; position: relative; top: 0; *top: 0px; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8MwXny3u7N-ifv4essCpzt1ce9TX_4nZav486xI3rmYP_VUodDPND0OJtA1kbFJ0kN9zoewglNGJDkO3FSxZixd61e4TOYhm8b92XNjTXG0PKX5ZpKYZeRDiED61-JZGVytNi19IuqUbn/s1600/css3buttons_icons.png'); background-repeat: no-repeat; }
a.big.button span.icon, button.big span.icon { top: 0px }
a.button span.icon.book, button span.icon.book { background-position: 0 0 }
a.button:hover span.icon.book, button:hover span.icon.book { background-position: 0 -15px }
a.button span.icon.calendar, button span.icon.calendar { background-position: 0 -30px }
a.button:hover span.icon.calendar, button:hover span.icon.calendar { background-position: 0 -45px }
a.button span.icon.chat, button span.icon.chat { background-position: 0 -60px }
a.button:hover span.icon.chat, button:hover span.icon.chat { background-position: 0 -75px }
a.button span.icon.check, button span.icon.check { background-position: 0 -90px }
a.button:hover span.icon.check, button:hover span.icon.check { background-position: 0 -103px }
a.button span.icon.clock, button span.icon.clock { background-position: 0 -116px }
a.button:hover span.icon.clock, button:hover span.icon.clock { background-position: 0 -131px }
a.button span.icon.cog, button span.icon.cog { background-position: 0 -146px }
a.button:hover span.icon.cog, button:hover span.icon.cog { background-position: 0 -161px }
a.button span.icon.comment, button span.icon.comment { background-position: 0 -176px }
a.button:hover span.icon.comment, button:hover span.icon.comment { background-position: 0 -190px }
a.button span.icon.cross, button span.icon.cross { background-position: 0 -204px }
a.button:hover span.icon.cross, button:hover span.icon.cross { background-position: 0 -219px }
a.button span.icon.downarrow, button span.icon.downarrow { background-position: 0 -234px }
a.button:hover span.icon.downarrow, button:hover span.icon.downarrow { background-position: 0 -249px }
a.button span.icon.fork, button span.icon.fork { background-position: 0 -264px }
a.button:hover span.icon.fork, button:hover span.icon.fork { background-position: 0 -279px }
a.button span.icon.heart, button span.icon.heart { background-position: 0 -294px }
a.button:hover span.icon.heart, button:hover span.icon.heart { background-position: 0 -308px }
a.button span.icon.home, button span.icon.home { background-position: 0 -322px }
a.button:hover span.icon.home, button:hover span.icon.home { background-position: 0 -337px }
a.button span.icon.key, button span.icon.key { background-position: 0 -352px }
a.button:hover span.icon.key, button:hover span.icon.key { background-position: 0 -367px }
a.button span.icon.leftarrow, button span.icon.leftarrow { background-position: 0 -382px }
a.button:hover span.icon.leftarrow, button:hover span.icon.leftarrow { background-position: 0 -397px }
a.button span.icon.lock, button span.icon.lock { background-position: 0 -412px }
a.button:hover span.icon.lock, button:hover span.icon.lock { background-position: 0 -427px }
a.button span.icon.loop, button span.icon.loop { background-position: 0 -442px }
a.button:hover span.icon.loop, button:hover span.icon.loop { background-position: 0 -457px }
a.button span.icon.magnifier, button span.icon.magnifier { background-position: 0 -472px }
a.button:hover span.icon.magnifier, button:hover span.icon.magnifier { background-position: 0 -487px }
a.button span.icon.mail, button span.icon.mail { background-position: 0 -502px }
a.button:hover span.icon.mail, button:hover span.icon.mail { background-position: 0 -514px }
a.button span.icon.move, button span.icon.move { background-position: 0 -526px }
a.button:hover span.icon.move, button:hover span.icon.move { background-position: 0 -541px }
a.button span.icon.pen, button span.icon.pen { background-position: 0 -556px }
a.button:hover span.icon.pen, button:hover span.icon.pen { background-position: 0 -571px }
a.button span.icon.pin, button span.icon.pin { background-position: 0 -586px }
a.button:hover span.icon.pin, button:hover span.icon.pin { background-position: 0 -601px }
a.button span.icon.plus, button span.icon.plus { background-position: 0 -616px }
a.button:hover span.icon.plus, button:hover span.icon.plus { background-position: 0 -631px }
a.button span.icon.reload, button span.icon.reload { background-position: 0 -646px }
a.button:hover span.icon.reload, button:hover span.icon.reload { background-position: 0 -660px }
a.button span.icon.rightarrow, button span.icon.rightarrow { background-position: 0 -674px }
a.button:hover span.icon.rightarrow, button:hover span.icon.rightarrow { background-position: 0 -689px }
a.button span.icon.rss, button span.icon.rss { background-position: 0 -704px }
a.button:hover span.icon.rss, button:hover span.icon.rss { background-position: 0 -719px }
a.button span.icon.tag, button span.icon.tag { background-position: 0 -734px }
a.button:hover span.icon.tag, button:hover span.icon.tag { background-position: 0 -749px }
a.button span.icon.trash, button span.icon.trash { background-position: 0 -764px }
a.button:hover span.icon.trash, button:hover span.icon.trash { background-position: 0 -779px }
a.button span.icon.unlock, button span.icon.unlock { background-position: 0 -794px }
a.button:hover span.icon.unlock, button:hover span.icon.unlock { background-position: 0 -809px }
a.button span.icon.uparrow, button span.icon.uparrow { background-position: 0 -824px }
a.button:hover span.icon.uparrow, button:hover span.icon.uparrow { background-position: 0 -839px }
a.button span.icon.user, button span.icon.user { background-position: 0 -854px }
a.button:hover span.icon.user, button:hover span.icon.user { background-position: 0 -869px }
a.button:hover{text-decoration:none !important;}
Langkah Penggunaan
Lalu bagaimana menggunakannya? Caranya gambang sekali, Kamu cukup menambahkan
class="button" pada tag <a>. Contohnya, tuliskan kode ini :<a href="http://www.hsp21.com" class="button">Nama Tombol</a>Hasilnya seperti ini Nama Tombol
Untuk tombol dengan tambahan ikon, Kamu tinggal menambahkan kode
<span class="nama_ikon icon"></span> di samping Nama Tombol. Contoh :<a class="button" href="http://www.hsp21.com/"><span class="magnifier icon"></span>Nama Tombol</a>Hasilnya seperti ini Nama Tombol
Jika kamu ingin mengganti ikon kaca pembesar, tinggal ganti tulisan
magnifier dengan nama ikon yang diinginkan. Berikut nama-nama ikon yang tersedia dalam paket framework ini.| Nama Ikon | Hasilnya |
book | View Log |
calendar | Add to Calendar |
chat | Start Chat |
check | Approve Registration |
clock | Register Work Time |
cog | Settings |
comment | Add Comment |
cross | Remove Item |
downarrow | Move Down |
fork | Create Branch |
heart | Add to Favorites |
home | Back to Frontpage |
key | Password Protect |
leftarrow | Move Left |
lock | Lock Article |
loop | Resend Message |
magnifier | Search |
mail | Send Newsletter |
move | Move |
pen | Edit Post |
pin | Pin to Map |
plus | Add Post |
reload | Reload Page |
rightarrow | Move Right |
rss | Subscribe to RSS Feed |
tag | Add Tag |
trash | Delete Post |
unlock | Unlock Article |
uparrow | Move Up |
user | Add New User |
Ada banyak macem-macemnya lagi nih. Saya langsung kasi contohnya aja yah :D
<a href="#" class="pill button">Tombol Oval</a>Hasilnya Tombol Oval
<a href="#" class="negative button">Tombol Negatif</a>Hasilnya Tombol Negatif
<a href="#" class="positive button">Tombol Positif</a>Hasilnya Tombol Positif
<a href="#" class="left primary button">Home</a><a href="#" class="middle button">About</a><a href="#" class="right negative button">Delete</a>Hasilnya HomeAboutDelete
<a href="#" class="left primary pill button">Home</a><a href="#" class="middle pill button">About</a><a href="#" class="right negative pill button">Delete</a>Hasilnya HomeAboutDelete
<a href="#" class="big button">Tombol Besar</a>Hasilnya Tombol Besar
Oh iya, kamu bisa juga mendownload langsung framework CSS3 GitHub Style Button ini dalam bentuk .zip
Download CSS3 GitHub Style Button
Sekian, selamat mencoba dan semoga bermanfaat :)
Post a Comment
Post a Comment