Tutorial BloGGeR Edisi Khusus: Buat Perbedaan dengan CSS Tag Cloud with Rounded Corners

Untuk menggunakan CSS Tag Cloud with Rounded Corners ini langkah pembuatanya silahkan lihat di posting sebelummya atau bisa klik di sini. Tag Cloud ini juga sudah dicoba dan ternyata hasilnya sama bagusnya dengan yang sebelumnya. Bentuk tag cloud seperti gambar di bawah :



KODE CSS :

#taqbox {
        background:#5d5577; 
        width:400px; 
        margin:20px 5px 5px;
        padding:4px; 
        font-family:Arial;
}
.tboxcontent {
        display:block; 
        background:#969bfd url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgBlueFadeH1V588.png);
        border:3px solid #a490fa; 
        border-width:0 3px;
        padding:6px 8px;
        text-align:center;
}
.TB1, .TB2, .TB3, .TB4, .TB5, .TB6, .TB7 {
        display:block; 
        overflow:hidden;
        font-size:0;
}
.TB1, .TB2, .TB3, .TB4, .TB5, .TB6 {
        height:1px;
}
.TB4, .TB5, .TB6, .TB7 {
        background:#ccc; 
        border-left:1px solid #a490fa;
        border-right:1px solid #a490fa;
}   
.TB1 {margin:0 8px;background:#a490fa;}
.TB2 {margin:0 6px;background:#a490fa;}
.TB3 {margin:0 4px;background:#a490fa;}
.TB4 {margin:0 3px;background:#c0c2fa;border-width:0 5px;}
.TB5 {margin:0 2px;background:#c0c2fa;border-width:0 4px;}
.TB6 {margin:0 2px;background:#c0c2fa;border-width:0 3px;}
.TB7 {margin:0 1px;background:#c0c2fa;border-width:0 3px;height:2px;}
.taqlod{ 
        padding:0;
        margin:0; 
        text-decoration: none; 
}
.taqlod h2{
        margin:0;
        font-family:Times New Roman; 
        font-size:26px; 
        color: #ddd; 
        text-align:center;
        border-bottom:4px double #449bfa;
}
.taqlod a:link{ 
        color:#fe9e37; 
        font-family:sans-serif;
        padding:0 4px;
        border:1px solid transparent;
        transition:0.8s;
        -o-transition:0.8s;
        -moz-transition:0.8s;
        -webkit-transition:0.8s;
}
.taqlod a:visited{
        color:#00fc12; 
}
.taqlod a:hover{ 
        color:#930;
        text-shadow:1px 1px 1px #000;
        padding:0 4px;
        background:#d2fac6;
        box-shadow:0 0 10px #000;
        border:1px solid red;
}
.taqlod a:active { 
        color: #ffffff;
        background:red; 
}
#tagidentitas{
        background:#222055; 
        height: 25px;
        border-left:3px solid #a490fa; 
        border-right:3px solid #a490fa;
        font-size:11px; 
        position:relative;
}
#tagidentitas a{ 
        float:right;
        color:#66FFFF;
        font-weight:bold;
        padding:4px 6px;
        text-decoration:none;
        font-family:Sans-serif;
}
#tagidentitas a:hover{
        color:#FFCC00;
        border:none;
        background:transparent;
}

xHTML :

<div id="taqbox">
<div class="taqlod">
<b class="TB1"></b><b class="TB2"></b>
<b class="TB3"></b><b class="TB4"></b>
<b class="TB5"></b><b class="TB6"></b>
<b class="TB7"></b>
<div class="tboxcontent">
<h2>CSS Tag Cloud-2</h2>
<a style="font-size: 14px" class="taqlod" href="Link-1" title="Title-1">Nama Link-1</a>
<a style="font-size: 22px" class="taqlod" href="Link-2" title="Title-2">Nama Link-2</a>
<a style="font-size: 26px" class="taqlod" href="Link-3" title="Title-3">Nama Link-3</a>
<a style="font-size: 24px" class="taqlod" href="Link-4" title="Title-4">Nama Link-4</a>
<a style="font-size: 16px" class="taqlod" href="Link-5" title="Title-5">Nama Link-5</a>
<a style="font-size: 18px" class="taqlod" href="Link-6" title="Title-6">Nama Link-6</a>
<a style="font-size: 12px" class="taqlod" href="Link-7" title="Title-7">Nama Link-7</a>
<a style="font-size: 15px" class="taqlod" href="Link-8" title="Title-8">Nama Link-8</a>
<a style="font-size: 26px" class="taqlod" href="Link-9" title="Title-9">Nama Link-9</a>
<a style="font-size: 14px" class="taqlod" href="Link-10" title="Title-10">Nama Link-10</a>
<a style="font-size: 23px" class="taqlod" href="Link-11" title="Title-11">Nama Link-11</a>
<a style="font-size: 12px" class="taqlod" href="Link-12" title="Title-12">Nama Link-12</a>
<a style="font-size: 13px" class="taqlod" href="Link-13" title="Title-13">Nama Link-13</a>
<a style="font-size: 21px" class="taqlod" href="Link-14" title="Title-14">Nama Link-14</a>
<a style="font-size: 20px" class="taqlod" href="Link-15" title="Title-15">Nama Link-15</a>
<a style="font-size: 26px" class="taqlod" href="Link-16" title="Title-16">Nama Link-16</a>
<a style="font-size: 22px" class="taqlod" href="Link-17" title="Title-17">Nama Link-17</a>
<a style="font-size: 16px" class="taqlod" href="Link-18" title="Title-18">Nama Link-18</a>
<a style="font-size: 27px" class="taqlod" href="Link-19" title="Title-19">Nama Link-19</a>
<a style="font-size: 26px" class="taqlod" href="Link-20" title="Title-20">Nama Link-20</a>
<a style="font-size: 23px" class="taqlod" href="Link-21" title="Title-21">Nama Link-21</a>
<a style="font-size: 22px" class="taqlod" href="Link-22" title="Title-22">Nama Link-22</a>
<a style="font-size: 12px" class="taqlod" href="Link-23" title="Title-23">Nama Link-23</a>
<a style="font-size: 13px" class="taqlod" href="Link-24" title="Title-24">Nama Link-24</a>
<a style="font-size: 28px" class="taqlod" href="Link-25" title="Title-25">Nama Link-25</a>
<a style="font-size: 15px" class="taqlod" href="Link-26" title="Title-26">Nama Link-26</a>
<a style="font-size: 16px" class="taqlod" href="Link-27" title="Title-27">Nama Link-27</a>
<a style="font-size: 20px" class="taqlod" href="Link-28" title="Title-28">Nama Link-28</a>
<a style="font-size: 21px" class="taqlod" href="Link-29" title="Title-29">Nama Link-29</a>
<a style="font-size: 12px" class="taqlod" href="Link-30" title="Title-30">Nama Link-30</a>
</div>
<div  id="tagidentitas">
<a href="http://gubhugreyot.blogspot.com">12 Maret 2010 -<i> gubhugreyot</i></a></div>
<b class="TB7"></b><b class="TB6"></b>
<b class="TB5"></b><b class="TB4"></b>
<b class="TB3"></b><b class="TB2"></b>
<b class="TB1"></b>
</div>
</div>

Keterangan/Catatan :

1. Jumlah link tidak harus 30 Link. Bisa ditambah atau dikurangi.
2. href="Link-1" diisi seperti :http://gubhugreyot.blogspot.com/Tutorial Blogger.html
3. Nama Link seperti misalnya Tutorial Blogger, Tips Trik Blogger, dll.
   Title berupa teks singkat yang berkaitan dengan Link yang di gunakan.
4. Lebar box tag cloud bisa disesuaikan dengan ruang blog, atau diganti dengan --> width:auto; (KODE CSS paling atas).

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

» Happy Blogging - gubhugreyot «