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.

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