Notice :

1. Mohon Klik Iklannya Untuk Kemajuan Blog :)

2. Mohon Donasinya, Klik Tombol Donasi Di Sidebar Blog :)

Created (c) by Princexells Seyka (Princelling Saki)

Membuat CSS3 Label Untuk Blog

Halo sobat EDHO-TECH, masih di di posting  tutorial blogger. Kali ini gue akan shre tentang Membuat CSS3 Label Untuk Blog. Kalo kalian nampili label yang berbaris ditambah nomor / jumlah posting itu sudah biasa sob. kali ini kita memodikikasi label blog lebih unik. klaian bisa melihat demonya di gambar / di samping posting ini.

Pertama kalian harus mengedit beberapa pengaturan widget labelnya. Simpan pengaturan widget label Anda seperti yang saya telah diatur di bawah gambar ini.harusa sama yah !


  1. Sekarang  ke Blogger Dashboard> Template
  2. Cari Kode ]]></b:skin>
  3. pastekan kode css berikut di atas kode ]]></b:skin>
    /*CSS3 Bricks Style Labels By http://edho-tech.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://edho-tech.blogspot.com/ */
  4. Sekarang cari kode di bawah ini,

  5. <b:widget id='Label1' locked='false'
  6. Tenemukan sampai ...

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

  8. dengan kode di bawah ini :

  9. <b:widget id='Label1' locked='false' title='Tags EDHO-TECH' 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>


  10. Sekarang klik preview dan simpan template anda.

Semoga Bermanfaat :D

Anda sedang membaca artikel tentang Membuat CSS3 Label Untuk Blog. Anda boleh menyebar luaskannya atau mengcopy paste-nya di blog anda. Berikan sumber link http://edho-tech.blogspot.com/2013/07/membuat-css3-label-untuk-blog.html dibawah posting artikel yang anda copy paste. Ingat dengan Link Hidup jangan link mati !
Facebook Comments
6 Blogger Comments


6 komentar: