Membuat Tombol Demo dan Download ala Kang Ismet - Banyak tutorial cara membuat tombol "Demo" dan "Download" yang sudah sahabat lain bagikan, kali ini saya akan membuat tutorial cara membuat tombol demo dan download ala blog ini.
membuat tombol download dan demo
Biasanya tombol ini digunakan untuk berbagi template, atau link download saja.

Untuk demonya, nantinya seperti ini :


Cara membuatnya :

Tambahkan kode di bawah ini sebelum ]]></b:skin>
/* -- Kang Ismet Button --*/
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
Untuk penggunaannya, buat kode seperti ini ketika membuat postingan (gunakan mode HTML)
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://blog.kangismet.net" target="_blank">Demo</a></li>
<li><a class="download" href="http://blog.kangismet.net" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

96 komentar

Kayaknya kren tuh tombol, ijin menggunakan scriptnya kang, semoga bisa saya praktekkan.
salam blogger

Balas

silahkan sob.. dengan senang hati :)

Balas

Mantap kang :) Tapi saya masih terbiasa dengan cara manual sih :D

Balas

ada efek animasinya bikin greget..

*langsung masuk ke lab praktikum

Balas

Pinjem scriptnya kang ... buat koleksi dlu ... sapa tau nanti butuh ^_^

Balas

Saya seneng dengan tombol yang pure CSS, jadinya ga ngebebanin blog....
Scriptnya saya amankan ya kang... Hatur Nuhun...

Balas

ijin nyimpan scriptnya kang,saya akan simpan buat nanti kalau saya membutuhkannya.

Balas

Saya menggunakan template buatan Kang Ismet di blog http://rotyyu.blogspot.com tapi kenapa belakangan ini thumbnail di halaman depan ga muncul ya? Padahal di artikel-artikel lama muncul

Balas

@kang Ismet, please sir i need your help i downloaded one of your templates(Kangiz Magz) and upload it on my blog but it is not displaying well. Here is my blog link www.justgoals.blogspot.com

Balas

@kang Ismet, please sir i needyour help i downloaded one ofyour templates(Kangiz Magz) and upload it on my blog but itis not displaying well. Here is my blog link www.justgoals.blogspot.com

Balas

ada warna yang lain gk kang ?

Balas

tinggal ganti warna backgroundnya pada CSS sob

Balas

Try to reupload your template

Balas

silahkan sob.. man suka :)

Balas

jangan lupa pake masker dan sarung tangan, biar safety :)

Balas

silahkan sob.. dengan senang hati

Balas

betul sob, tanpa embel2 image

Balas

nanti saya coba liat sob...

Balas

Kebetulan saya jarang demo kang hihi..
Tapi ini pasti nanti berguna buat saya kang, simpen dulu scriptnya...

Happy blogging kang..

Balas

lho.. itu yang kemaren dateng ke rumah saya siapa? yang demo masak wkwkwk..

Balas

Kalu cuma mau pasang tombol download doangan kumaha caranya, kang?

Balas

kang sekarang kayanya blogger udah ganti ya tampilan edit htmlnya?

Balas

Untuk yang blog dengan memiliki banyak template hasil karya sendiri seperti punya Kang Ismet ini pasti dibutuhkan...
Makasih atas berbagi ilmunya ini Kang

Balas

Dapat ilmu dan pengetahuan baru lagi disini

Balas

gak sia2 gw subscribe ini blog , ternyata postingan2 nya bermanfaat .. cakepp !!

Balas

kalau model box gimana mas ?? :D

Balas

klo buat table di postingan gmna kang ?

Balas

Waaah boleh juga nih , apalagi buat blog yang buat download :D mkasih mas

Balas

Ijin catet ya pak...mungkin suatu saat saya membutuhkan ini.
mksh tutorialnya

Balas

Sangat bermanfaat sekali.

Balas

Informasi yang sangat sayang kalau sampai dilewatkan. Terimakasih sudah share.

Balas

maaf kang,,pertanyaan saya sedikit melenceng dengan judul artikelnya, yg mau saya tanyakan bagaimana cara membuat menu diatas header itu, ketika halaman di scroll kebawah menunya tidak hilang. terima kasih.

Balas

Nah ini dia,yang saya cari cari.
Design tombol seperti ini saya sangat suka :)

Balas

itu sih ma Icih kang, kemarin pinjem kekenceng ke saya hehe..
mau oot kang, saya pengin nampilin gambar pensil pada komentar admin, soalnya mau saya ganti gambar pensilnya...gimana caranya ya kang?

trims jawabannya

Balas

bang...
bisa minta nomer Hp-nya gak..
penting banget.

Balas

simpan kode ini di atas ]]></b:skin>
[pre].comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}[/pre]

Balas

hilangkan saja salah satu kode di atas <li>..isi kode..</li>

Balas

ada apa ya.. ke 085723023322 aja

Balas

terimakasih kalau postingan saya bermanfaat :)

Balas

nanti saya share sob.. di tunggu aja

Balas

model box kaya gimana ya? ada contohnya ga?

Balas

panjang kodenya, banyak ko yang udah share

Balas

sama2.. semoga bermanfaat

Balas

Keren banget tombolnya kang, ber-animasi gitu! Cucok nih buat blog-blog yang berisi tutorial. :D

Balas

keren gan tombolnya,,
apakah tidak memberatkan blog?

Balas

makasih sob.. buat yang bagi2 software, mp3 juga bisa kok, pakenya tombol download aja satu :)

Balas

Setiap penambahan kode pasti ada pengaruhnya sedikit. Cuman tombol ini pure CSS3 sob, pastinya ringan.

Balas

makasih kang, tak coba ya kang

Balas

ini salah satu hasil praktek saya kang
http://jangandownload.blogspot.com/2013/04/download-film-one-piece-movie-z-2012.html

bagus juga, soalnya blog saya bertemakan tentang download.
pas banget

Balas

kang saya bloger baru nih saya mau tanya kalau script buat spoiler tapi tampilannya seperti tombol diatas gimana ya? karna kebanyakan tombol spoiler gitu gitu aja hehe.. sekalian mau nanya gimana cara membuat slider seperti tampilan di template yang punya mas http://www.gallerybloggertemplates.com/2012/10/kangis-magz.html kebetulan saya pake template yg sama. ditunggu balasannya ya mas. trims banyak

Balas

Untuk spoiler nanti saya buat tutorialnya sob, Untuk Kanismagz tutorialnya ada di sini :
http://blog.kangismet.net/2012/10/kangis-magz-blogger-template.html

Balas

makasih kang ismet. ditunggu ya untuk tutorial spoiler nya hehehe.. kalau ndak merepotkan bisa di emailkan ke bingkaiartis@gmail.com kang. matur nuwon

Balas

keren kang , tombolny keren, izin sedot ya gan ...
ini blog sya , http://masjawika.blogspot.com/ salam kenal
nama saya jawikas

Balas

Makasih kang , infonya sangaaaat bermanfaat. pas lagi perlu nih. sekali lagi makasih ya |o|

Balas

kang cara nambahin emoticon komentar kayak di blog ini gimana caranya?
kok lain dari yang lain, biasanya khan kudu pake space dulu, tapi ini kok nggak, ajarin aku donk...


he..he..he..he..

Balas

kang kalo mau ngubah ukuran tombolnya gimana yah?
terima kasih sebelumnya :)

Balas

dibungkus,kang...hatur nuhun...tampilan web-nya keren eung...

Balas

mangga kang... ah sa keren2na hehehe nuhun ah

Balas

PERTAMAX
kunjungi juga : http://kazoku48.blogspot.com/

Balas

om koq punya saya ga rapih, malah jadi Demo di Atas Download dibawah, jadi bertumpuk gtu..!!

cara agar jadi satu baris gmana yah ??

Balas

ada contoh? biar saya liat dulu sourcenya

Balas

sebelumnya terimakasih telah menanggapi Pertanyaan saya, ini adalah Contoh nya, telah saya SS[img]http://prntscr.com/1jk9yz[/img]

Balas

maksudnya bukan screenshootnya... contoh tombol pada postingannya..

Balas

Ijin gunain scriptnya di blog ini http://garuda4rt.blogspot.com

Balas

mantab www.donesiarony.blogspot.com

Balas

Sedikit masukan kode -webkit- mending di hapus aja ya mas? biar CSS valid :)
kunjungi blog saya : http://game-begog.blogspot.com

Balas

Nah artikel ini yang dulu pernah saya cari namun belum ketemu di mbah google
Kebetulan di blog Kang ismet sudah di realisasikan, ijin pakai scriptnya
Kang Ismet, terima kasih atas artikel nya Kang ?

Balas

Makasih Kang Ismet,, Ane mau coba dulu

Balas
Komentar ini telah dihapus oleh pengarang.

mantap kang , keren nih tombolnya ... Blogwalking visit blog ane ya hihihi www.tunizzz.com

Balas

blognya sangat rapi dan bagus bang.. :-bd
tulisannya juga sangat menginsprasi saya yg baru belajar blog.

kunjung balik & tinggalkan jejak ya bang. www.okebayu.com

Balas

kalau membuat tombol download pake elusive icon gimana mas

Balas

cara pembuatan kayak gini mas tolong http://2.bp.blogspot.com/-te8pqbfMfwc/Us-oGbuYJ8I/AAAAAAAAAWM/n6GzUpwuibU/s1600/Untitled.png

Balas

izin pake ya om, oh ya makasih banyak ya, saya dapet banyak pengetahuan tentang bloging disini, maksih ya om

Balas

thank untuk tutorialnya, semoga bermanfaat
http://goo.gl/j0sf8h

Balas

Saya Make Nie Script Demo Dan Download Ya min.biar tambah bagus :)

http://gameunyil.blogspot.com

Balas

kang waktu saya taroh di atas ]]></b:skin> gabisa di atas </style> juga gabisa :( gimana kang

Balas

Kalo sama bikin tulisan tulisan di postingan nya gimana kang ... template saya gallery ko jadi gak sesuai malah gak pas.

Balas

Wa makasih bro atas pemberian tutorial ini manfaat sekali

Balas

+KangIsmet
kalo dikasih font awesome gimana yah.?
tapi disimpannya di CSS

Balas
Komentar ini telah dihapus oleh pengarang.

Makasih Banget kang ismet langsung di praktekan kok :D

Balas

Kunjung Balik kang www.adarateam.com

Balas

Poskan Komentar


×
Chat