Home » » Cara Membuat Widget Tersembunyi di Blog

Cara Membuat Widget Tersembunyi di Blog


Script HTML Untuk Menyembunyikan Widget - Widget atau java script atau kode html di dalam blog, adakalanya kita ingin menyembunyikannya dari pengunjung blog, tapi sayang kalau kita menghapus script atau widget tersebut.

Nah pada kesempatan kali ini saya akan sharing artikel tentang bagaimana cara menyembunyikan widget blog.

Caranya simple dan tidak ribet, kita hanya akan menambahkan script diantara kode script widget yg akan kita sembunyikan. Caranya sebagai berikut :

Pertama, Login ke akun blogger anda.
Kedua, Pilih Tata Letak >> Tambahkan Gadget >> HTML/JavaScript.
Ketiga, Copy paste script berikut.

<style type='text/css'>
.fwidget{
  background:#000;
  border-radius:5px;

  bottom:-5px;
  box-shadow:0 0 5px #fff;
  color:#fff;
  float:left;
  height:25px;
  margin-left:95px;
  opacity:.8;
  overflow:hidden;
  padding:auto;
  position:fixed;
  text-shadow:0 0 5px #000;
  width:90px;z-index:9;-o-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -webkit-transition:all 2s ease-in-out
}
.fwidget:hover{
  background:transparent;
  border:2px solid #000;
  box-shadow:0 0 15px #000;
  color:#000;
  height:450px;
  margin-left:20px;
  opacity:1;width:240px
}
.fwidget-body{
  -o-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out
}
.fwidget h3{
  cursor:point;
  font-size:13px;
  text-align:center
}
</style>
<div class='fwidget'>
<h3>NAMA WIDGET</h3>
<div class='fwidget-body'>
<center>MASUKAN SCRIPT WIDGETNYA DISINI</ceenter>
</div>
</div>


Keempat, Klik Simpan.

Lihat hasilnya widget yg sobat buat tadi hanya kelihatan nama widgetnya saja. Sebagai contoh silahkan anda lihat di bagian bawah posting ini.

Catatan :
  • background:#000; = adalah warna background widget sebelum di buka, disini memakai warna hitam #000
  • background:transparent; = adalah warna background ketika widget di buka.
  • bottom:-5px; = adalah posisi widget yg disembunyikan pada bagian bawah blog,  anda juga bisa merubah posisi tersebut ke bagian yg anda inginkan, contoh bottom ganti dengan top jika anda ingin posisi widget di sembunyikan pada bagian atas blog.
  • float:left; = adalah posisi widget kita sembunyikan di bagian kiri blog, ini juga bisa anda rubah posisinya, contoh left ganti dengan right jika anda ingin widget tersebut di sembunyikan di bagian kanan blog, dan jangan lupa margin-left juga harus anda ganti menjadi margin-right.
  • height:25px; dan width:90px; = adalah tinggi dan lebar widget sebelum dibuka, anda bisa merubahnya sesuai dengan keinginan anda.
  • height:450px; dan width:240px; = adalah tinggi dan lebar widget setelah dibuka.
  • Tulisan "NAMA WIDGET" = ganti dengan judul widget yg anda buat.
  • Tulisan "MASUKAN SCRIPT WIDGETNYA DISINI" = ganti dengan kode script yg akan anda buat.
  • <center> dan </ceenter> = hilangkan jika widget tidak rata tengah.
Sekian artikel tentang Cara Membuat Widget Tersembunyi di Blog, semoga bermanfaat...