Gunakan Tagcloud Istimewa Rounded Corners Tag Cloud: Panduan Blogger Kreatif

Tag cloud yang satu ini sangat jauh berbeda dari tag cloud yang selama ini ada dan dipakai oleh seluruh blogger. Dari pengamatan yang aku lakukan, bahkan belum ada satupun blogger yang memakainya. Seluruh komponen dalam tag cloud spesial ini dibungkus dalam bingkai berbentuk lengkung. Dari box hingga setiap linknya. Dan yang lebih penting dari itu semua adalah : Berfungsi dengan amat sempurna di semua browser atau istilah kerennya "compatible with all browsers" ! Kita masih akan menggunakan KODE CSS sebagai pilar desainnya pertimbangan karena pengisian ulang link pada tag cloud tidak terlalu sering dilakukan (bisa dikatakan jarang sekali!) sehingga penggunaan javascript tidaklah mutlak diperlukan. Penggunaan javascript dalam tag cloud ini justru terasakan penting pada desain rounded cornersnya karena bila kita menggunakan KODE CSS murni maka KODE CSS yang diperlukan menjadi terlalu banyak dan sangat tidak praktis serta membuat bingung. Rounded Corners Tag Cloud ini saya postingkan setelah melalui pengujian penuh di ketiga browser yang paling sering digunakan. Mozzila, Opera dan IE. Untuk melihat bagaimana bentuk sesungguhnya dari Rounded Corners Tag Cloud, silahkan kamu buka DEMO yang telah tersedia.

D E M O

D E M O

Langkah membuat Rounded Corners Tag Cloud :

1. Lakukan pengamanan terhadap template. Caranya lihat di sini !
2. Login ke Blogger kemudian masuk ke Tata Letak, Elemen Laman, Tambah Gadget (bagian sidebar), HTML/Javascript, Masukkan KODE Lengkap dan terakhir KLIK SIMPAN.
3. Lihat hasilnya dengan membuka blog.

Javascript dan kode CSS - Rounded Corners Tag Cloud :

<script type="text/javascript" src="http://tagcloud-rounded-corners.googlecode.com/files/curvycorners.js"></script>
<style type="text/css">
/* CSS Document round-corn-tagcloud.css*/
/* gubhugreyot.blogspot.com * gubhugreyot.blogdetik.com * bloggerstuars.blogspot.com */
#taglodbox{
        width:272px;
        height:370px;
        border-radius: 15px;
        background: #5b719e;
        background: -moz-linear-gradient(top, #5b719e 0%, #110021 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5b719e), color-stop(100%,#110021));
        background: -webkit-linear-gradient(top, #5b719e 0%,#110021 100%); 
        background: -o-linear-gradient(top, #5b719e 0%,#110021 100%);
        background: -ms-linear-gradient(top, #5b719e 0%,#110021 100%);
        background: linear-gradient(top, #5b719e 0%,#110021 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b719e', endColorstr='#110021',GradientType=0 ); 
        border: solid #930 4px;
        margin:30px 5px 10px;
        box-shadow:0 0 12px #555;
}
#taglod {
        margin:0;
        padding:10px 6px;
}
#taglod ul{
        margin:10px 6px;
        padding-left:5px;
        list-style:none;
}
#taglod li {
        float:left;
        background-color: #330066;
        color: #333366;
        margin:2px 3px;
        padding:1px 6px;
        border-radius:10px;
        border:solid #FFFF99 1px;
        cursor:pointer;
        list-style:none;
        transition:0.8s;
        -o-transition:0.8s;
        -moz-transition:0.8s;
        -webkit-transition:0.8s; 
}
#taglod li:hover {
        float:left;
        background:#999;
        border:solid white 1px;
        list-style:none;
        color:#FF0000;
        transform:scale(1.1);
        -o-transform:scale(1.1);
        -moz-transform:scale(1.1);
        -webkit-transform:scale(1.1);
} 
#taglod li a{
        font-family:Arial;
        font-weight:normal;
        text-decoration:none;
        padding:0;
        margin:0;
        transition:ease-in-out 0.8s;
        -o-transition:ease-in-out 0.8s;
        -moz-transition:ease-in-out 0.8s;
        -webkit-transition:ease-in-out 0.8s; 
}
#taglod li a:hover{text-decoration:none;color:#FF0000;}
/*#taglod li a:visited{color:red;} */
a.GRn12{font-size:12px;color: #00FF00;}
a.GRn14{font-size:14px;color: #00FF33;}
a.GRn18{font-size:16px;color: #FFFFFF;}
a.GRn18{font-size:18px;color: #FFCC33;}
a.GRn20{font-size:20px;color: #FFCC33;}
a.GRn22{font-size:22px;color: #FFCC33;}
a.GRb12{font-size:12px;color: #FF00FF;font-weight:bold;}
a.GRb14{font-size:14px;color: #33FFFF;font-weight:bold;}
a.GRb16{font-size:16px;color: #CCCC66;font-weight:bold;}
a.GRb18{font-size:18px;color: #CCCC66;font-weight:bold;}
a.GRb20{font-size:20px;color: #FFCC00;font-weight:bold;}
a.GRb22{font-size:22px;color: #6699FF;font-weight:bold;}
#taglodbox h3.cloud-title{font-size:22px;display:block;background:#666;color:white;margin:5px 5px 0;;border:1px dotted orange;padding:3px 8px;text-align:center;text-shadow:1px 1px 1px #000;border-radius:6px;}
</style>

xHTML - Rounded Corners Tag Cloud :

<div id="taglodbox">
<h3 class="cloud-title">Judul Tag Cloud</h3>
<ul id="taglod">
<li><a class="GRn14" href="Link-1" target="_blank">Nama Link-1</a></li>
<li><a class="GRb18" href="Link-2" target="_blank">Nama Link-2</a></li>
<li><a class="GRb20" href="Link-3" target="_blank">Nama Link-3</a></li>
<li><a class="GRb14" href="Link-4" target="_blank">Nama Link-4</a></li>
<li><a class="GRn12" href="Link-5" target="_blank">Nama Link-5</a></li>
<li><a class="GRb22" href="Link-6" target="_blank">Nama Link-6</a></li>
<li><a class="GRn14" href="Link-7" target="_blank">Nama Link-7</a></li>
<li><a class="GRn18" href="Link-8" target="_blank">Nama Link-8</a></li>
<li><a class="GRb12" href="Link-9" target="_blank">Nama Link-9</a></li>
<li><a class="GRb14" href="Link-10" target="_blank">Nama Link-10</a></li>
<li><a class="GRn12" href="Link-11" target="_blank">Nama Link-11</a></li>
<li><a class="GRb22" href="Link-12" target="_blank">Nama Link-12</a></li>
<li><a class="GRb12" href="Link-13" target="_blank">Nama Link-13</a></li>
<li><a class="GRb18" href="Link-14" target="_blank">Nama Link-14</a></li>
<li><a class="GRb12" href="Link-15" target="_blank">Nama Link-15</a></li>
<li><a class="GRb20" href="Link-16" target="_blank">Nama Link-16</a></li>
<li><a class="GRb16" href="http://gubhugreyot.blogspot.com" target="_blank">GubhugreyoT</a></li> 
</ul>
</div>

Keterangan/Catatan :

1. Akan lebih baik bila Javascript Rounded Corners.js di upload terlebih dahulu di file hosting agar hanya digunakan sendiri.
2. Jumlah link bisa ditambah atau dikurangi tergantung jumlah dan nama link yang akan dipasang.
3. Nama Link dengan jumlah kata lebih dari satu, misalnya Tutorial Blogger dituliskan : Tutorial <br />Blogger supaya bentuknya "meninggi" bukan "memanjang".

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

» Happy Blogging - gubhugreyot «