20 Agustus 2012

Cara Membuat Tampilan Kumpulan Label blog menjadi Indah



Sebuah kesempatan lagi untuk kali ini saya memberikan pengetahuan saya berupa Tips Memperindah Tampilan Label Pada Blog, tanpa panjang lebar lagi sobat bisa lihat contohnya pada gambar di bawah ini :

Berikut kode CSS yang harus sobat pasang sebelum kode ]]></b:skin>

#taqbox {
        background:#5d5577; 
        width:auto; 
        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:1px 1px;
        }
.taqlod a:visited{
        color:#00fc12; 
        }
.taqlod a:hover{ 
        color:#6c03fa; 
        padding:0px 0px;
        background:#d2fac6;
        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;}


Dan setelah memasangnya simpan lalu beralih ke Elemen Laman => Tambah Gadget => HTML/ JavaScript dan masukan kode di bawah ini :


<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://theant-budiana.blogspot.com">17 Januari 2011 -<i> Blog Urang Sunda</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>

  1. Ganti nama title dengan nama label sobat dan link-nya pun sobat ganti
  2. Link tidak seharusnya 30 sobat bisa tambah atau kurangi sesuai kebutuhan sobat.

Tidak ada komentar: