Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «

6 komentar:

  1. keren...makasih jg knjgannya....

    BalasHapus
  2. mantabb ban get blog ya boss.....
    klo bleh tau,,Boss Biar CSS TAG CLOUD-2 jadi bergerak/animasi gimana yach....
    trms seblmnya....

    BalasHapus
  3. bos Cloud animasi udh di pasang okeh ban get ...klo ngrubah ukuran scara keseluruhannya gmana ya bos..blog sya gak muat di pasang di kolom nya..
    sebelumnya trmkasih...

    BalasHapus
  4. mas kalo bikin mouse over yang di widget gimana mas???

    BalasHapus
  5. gan aku uda pasang tag nya di blog aku kok gak begerak ya

    ditunggu balasannya

    BalasHapus

 
GR | Edited by | gubhug reyot