Monday, December 12, 2011

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>

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


Theant Budiana

About the Guest Author:
Saya bukanlah orang yang ahli dalam dunia blogger tapi saya mencoba untuk berbagi ilmu dari apa yang saya ketahui dari paman saya, saya sangat suka blogging dan berbagi ilmu, tapi bukan berarti saya master blog salah besar jika sobat anggap saya hebat saya hanya seorang anak kampung yang mencoba untuk tidak kampungan dan tertinggal informasi alias GAPTEK, banyak artikel yang saya tulis di Blog Urang Sunda dan lihat juga blog saya satu lagi di Dunia Maya Saya dan klik disini untuk mengetahui lebih lanjut tentang saya


Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter
warning

Anda bingung?
Jangan ragu untuk bertanya kepada saya lewat komentar di bawah, saya akan mencoba menjawabnya sesegera mungkin, bahkan jika sobat ada saran untuk saya silahkan jangan ragu untuk memberi saran kepada saya asalkan komentar no spam. Komentar anda, adalah bekal untuk kemajuan blog saya, saya akan kunjungi balik blog sobat jika sobat meninggalkan jejak sobat disini.

0 comments:

Comments
0 Comments
Facebook Comments Post by Blog Urang Sunda

Post a Comment

Sponsor BUS

Dapatkan juga sponsor untuk Blog anda dengan klik gambar di bawah, untuk mengetahui caranya KLIK DISINI. Kalo mau yang lebih tinggi penghasilannya KLIK DISINI Adsense Indonesia

Buat Blog

Alexa Rank

 

Info My Blog

cobi?
Yahoo bot last visit powered by MyPagerank.NetMsn bot last visit powered by MyPagerank.Net
Google PageRank Checker Powered by  MyPagerank.Net
SEO Stats powered by MyPagerank.Net
web log free

Recent Comment

| BLOG URANG SUNDA © 2009. All Rights Reserved | Template Style by My Blogger Tricks .com | Design by Brian Gardner | Back To Top |