8.2.15
29

Cara Membuat Widget Tombol Klik Diblog

Tombol Klik Show Info - Tombol klik biasanya dibuat untuk menampilkan halaman tersembunyi dengan sistem pemanggil new tab (jumping link), seperti link tombol DEMO misalnya, yang apabila kita KLIK maka halaman akan diarahkan pada tab baru untuk menampilkan info yang sudah termuat didalam halaman tersebut. Cara membuat tombol KLIK seperti ini juga terbilang mudah, hanya dengan menyisipkan atribut a:href pada teks link, lalu area teks kita bentuk dengan memberi border pada semua sisi, maka link akan terbentuk seperti tombol perintah KLIK Show Info, simple dengan element CSS seperti ini:



<style type='text/css'>
.klik {
  background:#39f;
  font:bold 15px/40px Verdana,serif;
  width:200px;
  color:#fff;
  text-shadow:1px 2px 1px #111;
  border:solid 2px blue;
  border-radius:8px;
text-transform: uppercase;
}
.klik:hover {background:#e06666}
</style>
<a class="klik">Klik Saya</a>


Untuk memanggil perintah halaman yang tersembunyi pada tombol klik seperti ini banyak ragam variasi yang dapat kita bentuk, misalnya dengan menambahkan beberapa efek seperti transition-delay. Membuat Pesan Teks Melayang Saat Halaman Terbuka adalah salah satu model yang pernah saya desain dengan bentuk Tombol KLIK, untuk tampilan disana saya menyisipkan perintah animation untuk menampilkan info teks dengan nilai delay-top:200px saat tombol di KLIK.


Button Click



Desain tombol klik kali ini akan saya buat dengan efek transfer input, memanggil elemen perintah hash (lompatan) untuk menampilkan info yang sudah Anda sembunyikan pada halaman berbeda, namun efek tampil hanya berada dalam satu area halaman. Singkatnya, saat tombol di klik, maka info yang sudah Anda tuliskan disana akan ditampilkan dalam 1 area seperti ini:




DEMO SHOW




Menggantikan fungsi atribut a:link pada tombol dengan elemen kode button, tujuannya agar saat tombol di klik tidak akan mengarah pada sebuah link tautan, CSS lengkapnya seperti ini:



<style type='text/css'>
.click {
  display: block !important;height: 80px;width: 300px;
  position: absolute;top: calc(50% - 40px);left: calc(50% - 150px);
  background: #39f;text-transform: uppercase;
  color: #fff;border-radius: 6px;top:120px;
  font:bold 20px Verdana,serif;text-shadow:1px 2px 1px #111}

.click:focus {outline: none}
.click:hover {background: #e06666}
.click:active {background: #1b000f}
.info {
  position: absolute;width: 100%;height:430px;
  top: calc(50% - 40px);left: calc(50% - 300px);
  z-index: 1000;background: #333;
  color: button;padding: 10px;
  box-sizing: border-box;border:3px double #fff;
  -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 0}

.info.active {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
  opacity: 1}

.exit:focus {outline: none}
.exit:hover {background: #e8967b}
.exit:active {background: #ca4c22}
.exit {
  position:absolute;display: block!important;
  height: 25px;width: 70px;background: #e68a6c;
  text-transform: uppercase;color: #fff;
  border-radius: 6px;visibility:visible!important;
  opacity:1!important;bottom:10px;right:14px;
  font:normal bold 9px Arial,Sans-Serif!important}
</style>


Kita tambahkan sedikit kode script untuk perintah tombol exit (close) saat Anda berada pada halaman info, namun sebelum itu efek ini hanya akan bekerja jika Template blog Anda sudah dilengkapi dengan script-jQuery. Abaikan script yang saya beri warna MERAH jika template Anda sudah memasang jQuery ini, lalu letakkan script berikut dibawah tag penutup </style> pada CSS diatas, lengkapnya seperti ini:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript'>
(function() {
  $(function() {
    $("button").click(function(event) {
      event.stopPropagation();
      $(".info").addClass("active");
    });
    $(".info").click(function(event) {
      event.stopPropagation();
    });
    $(document).add(".exit").click(function() {
      $(".info").removeClass("active");
    });
  });
}).call(this);
</script>


Semua pekerjaan Anda sudah selesai, tinggal menyusun info apa yang akan Anda tampilkan saat tombol di klik pada pengaturan HTML dibawah ini:


<button class="click">Click me in here!</button>
<div class="info">
....
Letakkan Info Anda Disini
....

<button class="exit">Close</button>
</div>

Sebagai tambahan buat sahabat semua pecinta SAHABAT BLOGGER 77, untuk tampilan Anda jangan terfokus hanya menampilkan sebuah teks informasi disana, beberapa gambar atau widget juga bisa Anda letakkan didalamnya, Anda bisa pilih beberapa efek gambar dan widget blog dibawah ini sebagai referensi, silahkan tinggal dipilih disini:

» Membuat Artikel Terbaru Auto Slide Di Sidebar Blog
» Membuat Tombol Share Terbaru Efek Transisi
» Desain Gallery Photo Efek Tumpukan
» Katakan Cinta Dengan Tampilan Gambar Efek Rotate

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Tombol Klik Show Info
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

29 komentar

  1. walaupun sudah baca berkali-kali tapi masih saja ga mudeng-mudeng nixh mbak.
    kayaknya harus disamping mbak devy nich ngebacanya biar cepet mudeng :d

    BalasHapus
    Balasan
    1. padahal kode dan hasilnya secara komplit loh kang Devy jabarkan, masa sih gak mudeng-mudeng, kang jum sih bacanya terbalik, inikan bukan tulisan arab kang, bahasa indonesia ASLI, cuma kodenya doang yang bahasa sunda, hehe..

      Hapus
    2. pgi2 dh ngebca tulisan bernuansa modus nih .... [-(

      Hapus
    3. mas Fiu juga pengen dekat kan disamping Devy, katanya mau sama-sama belajar HTML, hehe..!!

      Hapus
    4. Pengetahuan mbak devy ini memang saya akui masih dalam ranah ahli, tapi walaupun demikian, saya terus saja termotivasi jika sudah berjalan ke sini :D gimana kang jum, benarkan?

      Hapus
    5. tepatnya bukan seperti itu mas, Devy hanya tahu sedikit saja tentang CSS dan HTML, karena ada tantangan jika bermain coding, merangkai kode ini, hasilnya apa ya.?
      jadi, kelihatan unik setelah selesai, Devy tampilkan dech, hanya itu, bukan ahli apalagi sampai dibilang master,

      Hapus
    6. hehehehe, ih devy tau aja sih ,,, iyah kapan hayooo ? :)

      Hapus
    7. MODUS lah..!!! sama saja seperti kang jum, sarua bae..!!

      Hapus
    8. hhahahahahaha, tuh kn kang jum sy jadi disamakan sama devy .... @-)

      Hapus
  2. di klik tombolnya eh muncul penampakan ,,,,heheh

    BalasHapus
    Balasan
    1. jadi seperti diatas mas, jangan terfokus hanya menampilkan teks info saja, pada tombol demo saya menampilkan Menu Navigasi Flower Dengan animation-rotate

      Hapus
    2. iya animation-rotate nyag bgus dan trs berputar pelan ,,,hehehe ... cakep ih ,,

      Hapus
    3. yang cakep menu atau Devynya mas, hehe..!!

      Hapus
    4. Menunya cakep tapi klo devy nya lebih cakep lg tauuuuu .... hehehe bkin deg degan liatnyab... :)

      Hapus
  3. Makasih infonya mbak :)

    BalasHapus
  4. waduh kapok deh baca artikel ginian saya ga ngerti mas :D
    hihihi

    BalasHapus
    Balasan
    1. gimana mau ngerti, adminnya saja dipanggil mas, hehe..salah masuk ruangan kayaknya tuh

      Hapus
  5. Awalnya saya kira hanya tampilan di atasnya saja mbak, tapi saya terkejut ketika ada puteran cantik ketika wajah mbak devy saya klik (h)

    BalasHapus
    Balasan
    1. biar yang melihat ikutan juga mas muter-muter, hehe..!!

      Hapus
    2. Muter-muter sambil belajar mbak, :D

      Hapus
  6. ngga salah lagi jika beberapa bulan terakhir blog ini jadi referensi saya dalam mempercantik blog,kali ini ajah kita bisa pasang tombol klik show info di blog kesayangan..sruput dulu ah (c)

    BalasHapus
  7. (function() {
    $(function() {

    harus 2x ya mba ?

    BalasHapus
  8. Boleh juga dicoba untuk buat tombol download.
    Masakasih sblmnya gan

    BalasHapus
  9. weh keren sangat, saya nak coba pelajari lah, mantap nie

    BalasHapus
  10. kirain ada apanya, setelah saya klik, ternyata muncul foto yang empunya blog, kaget saya.hehe.
    kalau buat file js sendiri caranya gimana ya mbk? dulu saya dibuatkan file js sama kaskuser, katanya dengan memasang js tersebut di blog, pengunjungnya meningkat 2x lipat dan sepertinya benar krn pengunjung saya dengan blog baru sekitar 7 artikel, pengunjungnya bnyk sekali, posisi paling atas adalah dari google. sekarang file js sudah dimatikan sama yang buat, tapi masih ngefek sampai sekarang. Kalau mbk sudah bisa, saya diajari ya?

    BalasHapus
    Balasan
    1. bukan sekedar gambar Devy doang kok mas, itu sebuah widget menu navigasi dengan flower efek rotasi, coba HOVER foto itu.?

      kalau buat file js sendiri, maksudnya gimana ya mas,.?
      file js adalah sebuah script untuk memerintahkan efek untuk ditampilkan, atau untuk mengambil event secara nyata dan terjadi, maksudnya mau buat file js untuk mengatur apa.?

      Hapus
    2. iya ding mbk,udah tak coba waktu baca komentar blogger lain, bagus bgt, keren, saya ikut kirimi plus :)
      nah, saya juga bingung mbk, kayaknya sih buat menambah visitor. saya cuma diminta kirimkan file site map, trus saya dibuatkan file java script, trus suruh pasang di template blog. Dan kayaknya memang berhasil, tapi saya gak tahu pengunjungnya asli atau bukan, kebanyakan dari google.com, dulu dibikinkannya gratis buat teman2 kaskus, sekarang dianya gak buka lagi.
      jd mungkin js nya buat mendorong google bwt lihat blog kita mbk.

      Hapus
  11. puyeng......maksudnya puyeng lihat foto kamu (k)

    BalasHapus
  12. best banget tutorial gini..terima kasih kerana berkongsi

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK