Menambahkan Css3 Watu Bata / Box Style Label Keren Untuk Blogger

Assalamu'alaikum blogger. Dalam tutorial ini aku akan menciptakan bagaimana untuk menyesuaikan label blogger dengan CSS3 dan menciptakan label menyerupai kerikil bata atau gaya kotak. Saya akan menerapkan h4ck ini dengan memakai CSS3 murni dan akan mengganti beberapa isyarat yang ada dengan isyarat gres di template. CSS3 kerikil bata / kotak label ini benar-benar menarik. Lihat Screetshot di bawah.

Sekarang ini mari kita lihat bagaimana menerapkan h4ck ini. 

• Pertama kita harus mengedit beberapa pengaturan widget label. Simpan pengaturan widget label Anda menyerupai yang aku 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 isyarat dibawah ini pada template Anda

]]></b:skin>

tambahkan isyarat di bawah CSS sempurna di atasnya,

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

Sekarang cari isyarat di bawah ini,

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

Tenemukan hingga ...

</b:widget>

ganti isyarat dari <b: widget id = 'Label1' locked = 'false' .........
sampai.. </b:widget>

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

Sekarang klik preview dan simpan template anda.

Harap Anda telah menyukainya :) terima kasih. agar bermanfaat

Sumber http://nandarious.blogspot.com