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.

Membuat Animated Download Button Dengan CSS3 Untuk Blogger

Membuat Animated Download Button Dengan CSS3 Untuk Blogger. Hari ini saya akan kongsikan cara membuat 'animated download button' dengan menggunakan CSS3. Download button ini agak unik dan mampu memberi kelainan kepada blog anda.


Demo

Download

Klik Untuk Download

1MB .rar

Langkah-langkah

1. Lojin akaun blogger anda

2. Pilih Template, seterusnya Edit Html (sebaiknya backup dulu template anda)

3. Cari kod di bawah dengan menekan CTRL+F

]]></b:skin>

4. Copy dan Paste kod di bawah tepat di atas/sebelum ]]></b:skin>

<!-- animated download button start -->.abt-button { margin: 50px auto; width: 200px;}
/* Get this button at http://alimbiz.blogspot.com */
.abt-button a { background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent; color: white; display: block; font: 17px/50px Helvetica,Verdana,sans-serif; height: 50px; text-align: center; text-decoration: none; text-transform: uppercase; width: 200px; position: relative; z-index: 2;
/*TYPE*/ color: white; font: 17px/50px Helvetica, Verdana, sans-serif; text-decoration: none; text-align: center; text-transform: uppercase;
/*GRADIENT*/ background: #00b7ea; /* Old browsers */ background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */ background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */}
.abt-button a, .abt-button p { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); box-shadow: 2px 2px 8px rgba(0,0,0,0.2);}.abt-button p { background: #222222; color: #FFFFFF; display: block; font: 12px/45px Helvetica,Verdana,sans-serif; height: 40px; margin: -40px 0 0 10px; position: absolute; text-align: center; transition: margin 0.5s ease 0s; width: 180px; z-index: 1; /*TRANSITION*/ -webkit-transition: margin 0.5s ease; -moz-transition: margin 0.5s ease; -o-transition: margin 0.5s ease; -ms-transition: margin 0.5s ease; transition: margin 0.5s ease;
}.abt-button:hover .up { margin: -5px 0 0 10px !important;}.abt-button:hover .down { line-height: 35px !important; margin: -85px 0 0 10px !important;}.abt-button a:active {
background: #00b7ea; /* Old browsers */background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */ /* Get this button at ahsancy.com */}.abt-button:active .up { margin: -20px 0 0 10px !important;}.abt-button:active .down { margin: -70px 0 0 10px !important;}<!-- animated download button stop -->

Cara Guna Dalam Posting Anda

Caranya cukup mudah. Copy dan Paste kan kod html di bawah di mana anda ingin tempatkan button ini,

<div class="abt-button">
      <a href="Link Download">Download</a>
      <p class="up">Klik Untuk Download</p>
      <p class="down">1MB .rar</p>
    </div>

• Gantikan Link Download dengan link download anda
• Klik Untuk Download dengan perkataan pilihan anda
• Saiz file anda

Selamat mencuba. Moga bermanfaat.

Sumber

Resize atau Kompress Gambar dengan RIOT

Resize atau Kompress Gambar dengan RIOT. Loading blog yang cepat amat perlu bagi sesebuah blog atau website. Di antara berbagai perkara yang membuatkan sesebuah blog lambat loadingnya ialah banyaknya gambar serta ukuran gambar (file size) yang besar. Bagi mengatasi masalah ini dengan mengoptimasikan gambar - saiz failnya harus kecil dengan kualiti gambar yang bagus. Untuk tujuan ini image optimizer atau image compresser bolehlah digunakan.

Kali ini saya akan kongsikan sebuah software iaitu RIOT (Radical Image Optimization Tool), malah bagi saya ia seharusnya digunakan oleh setiap blogger. RIOT adalah sebuah freeware. Jika dilihat daripada contoh di atas, image saya telah dikurangkan sehingga 20% tanpa menampakkan sebarang kekuragan ketara pada kualiti image.

Kepada yang inginkan software ini (portable) bolehlah DOWNLOAD di bawah.

Download

Klik Untuk Download

870KB .rar

Semoga bermanfaat.

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!