LABEL Bata ADD CSS3 / BOX STYLE UNTUK BLOGGER

Cara Customize Blogger Label Dengan CSS3?

Pertama kita harus mengedit beberapa pengaturan label kami widget.Save pengaturan widget label Anda seperti yang saya telah diatur di bawah gambar.

1. Sekarang pergi ke Blogger Dashboard> Template
2. Download salinan template Anda
3. Klik pada Edit HTML
4. Menekan tombol Lanjutkan
5. Periksa kotak centang Expand Template Widget
6. Cari tag ini dalam template Anda]]> </ b: skin>
7. Tambahkan kode di bawah tepat di atasnya,

#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

}

8. Sekarang cari kode di bawah ini,

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

(jika yang bertulisan merah tidak ada maka ganti dengan Header)
cari ini sampai ketemu 

</b:widget>

9. Replace aja <b:widget id='Label1/header' locked='false'......... 

ke </b:widget>

<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>

SELESAI HAPPY BLOGING :D