Sunday, July 29, 2012

Menambahkan Kotak Pada Label Blog Berbentuk Cloud dengan CSS3


Di tutorial kali ini saya akan membagikan sebuah trik lagi untuk mempercantik label blog kamu. Jika biasanya label blog terlihat standar dan kurang menarik, dengan menggunakan trik ini label akan terbagi ke dalam kotak-kotak dan terlihat cantik tentunya.

Cara membuatnya pun mudah, kita hanya perlu menambahkan sedikit kode CSS dan widget label kita pun akan terlihat "Wah". Dan jika kamu benar-benar tertarik untuk membuatnya, bisa kamu lihat tutorialnya di bawah ini. Untuk hasilnya seperti gambar di atas yah :)

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> Label. Untuk pengaturan labelnya bisa kamu pilih sesuka kamu. iya, pilihnya yang cloud yah jangan yang daftar. Kemudian klik simpan.



3. Setelah itu, kamu klik Template --> Edit HTML --> Klik Lanjutkan --> Centang Expand Widget Template. Jangan lupa juga untuk mem-backup template kamu terlebih dahulu.

4. Cari kode ]]></b:skin>, dan salin kode di bawah ini dan letakkan di bawah kode ]]></b:skin>.

/*CSS3 Bricks Style Labels By http://www.hzndi.blogspot.com/ */
#textwidget {
    color: #666;
    font-size: 0.925em;
    font-style: italic;
    line-height: 1.6em
}

a.tag {
    color: #777;
    font: 9px verdana;
    text-transform: uppercase;
    transition: border-color .218s;
    background: #f4f4f4;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    border: solid 1px #ccc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin: 0 4px 4px 0;
    padding: 3px 5px;
    text-decoration: none
}

a.tag:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15)
}

a.tag:active {
    color: #000;
    border-color: #444
}

.slides {
    font-size: 85%;
    line-height: 130%;
    overflow: hidden;
    padding: 0;
    margin: 30px 0 10px;
    border-bottom: 1px solid #000
}
/*CSS3 Bricks Style Labels By http://www.hzndi.blogspot.com/ */

5. Cari kode yang kira-kira tampilannya seperti ini,

<b:widget id='Label1' locked='false'

.... (hingga)

</b:widget>

Kamu hapus semua kode dari


<b:widget id='Label1' locked='false'

.... (hingga)

</b:widget>

dan kamu ganti dengan kode di bawah ini.

<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>
    <b:includable id='main'>
        <b:if cond='data:title'>
            <h2>
                <data:title/>
            </h2>
        </b:if>
        <div class='textwidget'>
            <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
                <b:if cond='data:display == &quot;list&quot;'>
                    <ul>
                        <b:loop values='data:labels' var='label'>
                            <li>
                                <b:if cond='data:blog.url == data:label.url'>
                                    <span expr:dir='data:blog.languageDirection'>
                                        <data:label.name/>
                                    </span>
                                    <b:else/>
                                    <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                                </b:if>
                                <b:if cond='data:showFreqNumbers'>
                                    <span dir='ltr'>(
                                        <data:label.count/>)</span>
                                </b:if>
                            </li>
                        </b:loop>
                    </ul>
                    <b:else/>
                    <b:loop values='data:labels' var='label'>
                        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
                            <b:if cond='data:blog.url == data:label.url'>
                                <span expr:dir='data:blog.languageDirection'>
                                    <data:label.name/>
                                </span>
                                <b:else/>
                                <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
                            </b:if>
                            <b:if cond='data:showFreqNumbers'>
                                <span class='label-count' dir='ltr'>(
                                    <data:label.count/>)</span>
                            </b:if>
                        </span>
                    </b:loop>
                </b:if>
                <b:include name='quickedit' />
            </div>
        </div>
    </b:includable>
</b:widget>

6. Simpan template dan lihat hasilnya, jangan takut untuk mencoba :)

Postingan Terkait:

21 comments:

  1. hhmmm ,,, ada caranya ya, gw sering lia blog2 tmn2 ,, jdi gni toh caranya...

    ReplyDelete
  2. wah.. :D

    jadi menarik tampilannya, tapi saya masih urung untuk mencoba.. :)

    ReplyDelete
    Replies
    1. heheh gpp gan yang penting udah datang di blog ane :D

      Delete
  3. keduax gan . .
    keren gan . .hehehe

    ReplyDelete
  4. hehe... ilmunya banyak banget ya situ, saya hanya manggut2 aja.

    ReplyDelete
    Replies
    1. hehe om zach merendah saja nih, ilmu ssaya mah ga seberapa :)

      Delete
  5. Mantap Cara nya Sobat. Jadi bagus tampilannya. Makasih

    ReplyDelete
  6. mantap sekali sob.. :)
    Insya Allah akan kucoba yah..
    mudah2an berhasil...
    terima kasih yah..

    ReplyDelete
  7. Thanks tutorialnya gan, mampir juga di blog saya Nonton Olimpiade London 2012, Live

    ReplyDelete
  8. nice info gan. udah ane coba dan mantap hasil nya di blog ane :D

    ReplyDelete
  9. nice post :)
    ditunggu kunjungan baliknya yaah ,

    ReplyDelete
  10. Mantep masta... Simpen buat buka puasa! ;-)

    ReplyDelete
  11. Hasilnya...bagus banget. Thanks sharingnya.

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More