Menambah Menu Label Unik Pada Blog

Oleh Chairil Kaka

Monday, 27 January 2014

Bagikan :

Tweet

Bismillahir rahmanir rahim
Assalamualaikum Wr Wb

Setelah beberapa lama sahabat blogger tak jumpa dengan postingan jitu ala Paling Tokcer hehe. Oleh karena itu, saya hendak menunaikan kerinduan kalian dengan sebuah tutorial interaktif yang saya dapat dari salah satu web blog resmi dari pihak Blogger yang berbahasa inggriskemudian saya coba shere dengan bahasa indonesia yang baik dan benar agar memudahkan agan-agan sekalian untuk memperkaya gedget unik pada blog sobat, dan tentunya dinamis tidak memberatkan loading blog.

Nah, pada penasaran kan apa sich yang akan saya jelaskan bentar lagi sebelum itu maka silahkan dipandang baik-baik gambar berikut ini;

contoh gedget label unik

setelah melihat gambar rersebut pasti sobat sudah tahu kan pa itu,,, gambar di atas adalah hasil EDITAN yang akan kita jelaskan sebentar lagi. yaitu Cara Menambah Menu Label Pada Blog

Adapun langkahnya sebagai berikut:
sebelum memasuki inti tutorial maka sobat harus ubah setting label terlebih dahulu, contohlah setting seperti gambar berikut:

Catatan: Jika pada Tata Letak/Layout sobat belum ada pilihan label maka silahkan di tambah dengan menu Add Gedget/Tambah Gedget 

kemudian silahkan ikut petunjuk dibawah ini

Langkah 1. buka Blogger Dashboard dan pilih Template

Langkah 2. pilih Edit HTML

Langkah 3. cari kode ini: (gunakan Ctrl+F)
]]></b:skin>

Langkah 4. Copy dan paste kan kode berikut ini Tepat dibawah kode yang anda cari tadi.

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

Langkah 5. cari kode ini   <b:widget id='Label1' locked='false'


Langkah 6. ganti dari <b:widget id='Label1' locked='false'......... sampai </b:widget> dengan kode dibawah ini: (jika anda tidak paham bahasa saya silahkan lihat contoh kerja di paling bawah.

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


Contoh kerja lihat gambar berikut:

ganti semua kode yang ditandai itu

demikian lah postingan saya tentang Cara Menambah Menu Label Unik Pada Blog. terima kasih anda telah bersabar mengikuti semua petunjuk yang saya berikan.

jika ada mendapat kebingungan tentang postingan ini silahkan tinggalkan coment dibawah ini. insyaAllah akan segera di Replace

Be a Profesional Web Desaint
Wasalamualaikum