Tag Cloud Rounded Corners

Copy Paste Kode CSS di bawah ini:

#taglodbox{
        width:272px;
        height:370px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        background: #67687b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkWz5Wb9YUcGpMYaIhENMVUm4UMHdovQuIWhxEbqwiSpEUBDOkE-IOt30sCmCOojhLR9LHZCT4GM8bh3ZeBkt6jxSk2I7pecLpRK9kID84MgHMuXxQ8ZVZeBXi0i0iQy-cp2X2EF4waAU/s400/blacktoblue.gif) repeat-x;
        border: solid #99CC33 4px;
        margin:30px 5px 10px;;
        }
#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;
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        border:solid #FFFF99 1px;
        cursor:pointer;
        list-style:none;
        }
#taglod li:hover {
        float:left;
        border:solid white 1px;
        list-style:none;
        color:#FF0000;
        }
#taglod li a{font-family:Arial;font-weight:normal;text-decoration:none;padding:0;margin:0;}
#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;}

Tag Cloud Rounded Corners,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

Dan Untuk Kode xHTML Sobat Bisa Copy Paste Yang Ada di Kolom Paling Bawah:

negrionta community

Copy Paste Kode xHTML di bawah ini:

KODE xHTML

<div id="taglodbox">

<h3 style="display:block;background:#666;color:white;margin:5px 5px 0;;border-top:2px solid orange;border-bottom:2px solid orange;padding:3px 8px; text-align:center; width:auto;">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://rizkymakkah.blogspot.com" target="_blank">rizkymakkah</a></li> 

</ul>

</div>

http://www.negrionta.co.tv

Semoga bermanfaat...