Menambahkan CSS3 Batu Bata / Box Style Label Keren Untuk Blogger - Saya akan menerapkan hack ini dengan menggunakan CSS3 murni dan akan mengganti beberapa kode yang ada dengan kode baru di template. CSS3 batu bata / kotak label ini benar-benar menarik. Lihat Screetshot di bawah.

• Pertama kita harus mengedit beberapa pengaturan widget label. Simpan pengaturan widget label Anda seperti yang saya telah diatur di bawah gambar ini.

1. Sekarang pergi ke Blogger Dashboard> Template
2. Download salinan dari template Anda
3. Klik pada Edit HTML
4. Cari kode dibawah ini pada template Anda

/*CSS3 Bricks Style Labels By http://www.Llylsll.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.Llylsll.blogspot.com/ */

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