Membuat Tag Cloud Flat Yang Cantik

Fungsi label sangat berguna ditampilkan dalam sesebuah blog. Ianya memudahkan pelawat mencari konten yang ingin mereka lihat. Untuk mencantikkkan blog label boleh dicantikkan dengan memasang tag cloud atau label cloud seperti gambar di bawah. Untuk demonya klik DISINI

Cara membuatnya mudah, iaitu :-

• Pergi ke Blogger >> Layout >> Add a Gadget.
• Tambahkan Labels.
• Pilih Cloud

• Kemudian klik Save .
• Sekarang masuk ke Template >> Edit HTML
• Cari kode     ]]></b:skin>

Copy dan pastekan kod di bawah ini tepat di atas ]]></b:skin>

.sidebar .label-size {

  position:relative;

  text-transform: uppercase;

  text-decoration:none;

  font-size:13px;

  font-family:Open Sans;

  color:#fff!important;

  }

.sidebar .label-size a {

  color:#fff!important;

  font-weight:bold;

  padding:8px 10px;

  margin:0 6px 6px 0;

  float:left;

  display:block;

  -moz-transition: all 0.4s ;

  -o-transition: all 0.4s;

  -webkit-transition: all 0.4s ;

  -ms-transition: all 0.4s ;

  transition: all 0.4s ;

}

.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}

.sidebar .label-size-1 a:hover {background:#16a085;}

.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}

.sidebar .label-size-2 a:hover {background:#2980b9;}

.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}

.sidebar .label-size-3 a:hover {background:#27ae60}

.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}

.sidebar .label-size-4 a:hover {background:#8e44ad}

.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}

.sidebar .label-size-5 a:hover {background:#c0392b}

Simpan template dan lihat hasilnya.

Cara Membuat Buku Tamu Melayang Pada Blog

Cara Membuat Buku Tamu Melayang Pada Blog. Alhamdulillah, kali ini saya akan berkongsikan Cara Membuat Buku Tamu Melayang Pada Blog seperti yang digunakan pada blog ini. Selain blogspot ianya juga boleh digunakan untuk penyedia blog lain seperti wordpress. Caranya cukup mudah.

1. Sila kunjungi www.cbox.ws (kalau sudah punya buku tamu abaikan saja), lalu mendaftar dengan mengklik sign up, ikuti saja petunjuknya sampai mendapatkan kod buku tamunya
2. Buka akaun blog anda, seperti biasa pilih tambah gadget -  html/java script
3. Silakan copy - paste kode berikut ini: 
4. Copy-paste kode cbox anda pada tulisan berwarnah merah.
5. Save dan lihat hasilnya.

 <style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:150px; width:35px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNoD19AzyRPIRrb55jG93LoErYVG-BlTNwu94D92NI0931t4o_QUMLYBYpbDd1liBuvX_EqokGJl3YaGLs_5V-hC-bJz12aKDvaky_9doLs_7ORlb1Jyxn1AiMT7cjscUCb_Sonu_sjV_e/s1600/BTM.png') no-repeat; } .gbcontent{ float:left; border:1px solid #3399FF; background:#3399FF; padding:5px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent">

COPY DAN PASTE KOD C.BOX ANDA DI SINI 

<a href="http://alimbiz.blogspot.com/2015/05/cara-membuat-buku-tamu-melayang-pada.html"target="_blank">GET THIS WIDGET</a> <div style="text-align:right"> <a href="javascript:showHideGB()"></a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

** Bagi blog wordpress Appearance - Widget - Text (Copy-paste kod pada Text).

Semoga bermanfaat!