How to Style Label links and Counter Using CSS

Lihat dan hitung, seberapa banyak aplikasi Android yang Anda instal di smartphone Anda? 

Pernahkah terbersit di benak Anda bagaimana cara membuat aplikasi-aplikasi tersebut?

Apakah Anda Saat Ini Ingin Sekali Bisa Bikin Aplikasi Android Sendiri? Seperti aplikasi game edukasi, media pembelajaran, aplikasi berbasis sensor, aplikasi multimedia, dan lain sebagainya?

Tetapi

1. Tidak Ngerti Coding

2. Tidak Tahu Computer Programming

3. Tidak Paham Bahasa Pemrograman Android

4. Dan Sama Sekali Bukan Lulusan IT?

Jangan Khawatir ...

Ternyata, bikin aplikasi Android itu SANGAT MUDAH, bahkan bagi Pemula sekalipun.

Sekarang Anda bisa bikin aplikasi Android dengan Cepat, bahkan TANPA HARUS CODING.

Tak peduli apapun latar belakang Anda, bikin aplikasi Android itu MUDAH, semudah bermain Puzzle.

Anda Hanya Perlu 4 Langkah berikut ini :

1. Drag & drop komponen-komponen yang dibutuhkan

2. Percantik tampilan aplikasi dengan mengatur layout dan desain tampilan

3. Susun blok-blok kode programnya, dan

4. Build aplikasi Anda jadi file instalasi *.APK

Lantas, Bagimana Cara Memulainya?

Mudah kok, karena sudah hadir untuk Anda Di Sini :

"Video Tutorial Android Tanpa Coding untuk Pemula"

Video tutorial yang membahas cara membuat aplikasi Android dengan sangat MUDAH, CEPAT, & TANPA CODING menggunakan tools App Inventor 2. 

We can use CSS(Cascading-Style-Sheet) styling language to change the appearances of label links.Blogger accommodates us to edit the template and customize it as we want.So i thought to use CSS for changing the font styles and colors of label links in label widget.You can make this activity very easily if you're a coding dude.Look at the image in left side.I changed the font family style,color and font-size of label name.Also i modified the color of label post counter.If you need to change them as your desire you can do it very easily.So lets start our journey to Blogger for styling label links and counter.




1: Sign in to your Blogger account.
2: Now go to Dashboard >> Template and backup your template first.In case you got any thing wrong,downloaded template is the only one assistance to reinstall your current template.
3: Click on "Edit HTML" button and find below piece of code in your template.

<b:loop values='data:labels' var='label'>

After you found above code,you will see a portion of code appearing followed by above code slightly similar to one below.

<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 expr:dir='data:blog.languageDirection' expr:title="data:label.name" 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>

 4: Now Replace above code with below chunk of code.

<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 expr:dir='data:blog.languageDirection' style="font-size:20px;font-weight:bold;color:green;font-family: 'Brush Script MT', cursive;" expr:title="data:label.name" expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span style="color:red;" dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>

As i mentioned in above,i just changed some performances of label links.You can add borders,text shadows and further effects using CSS. Add your CSS code in the green color codes.

5: After you made changes,Save your Template.

If you didn't add any own CSS code, Links of label widget will look like above image.

Check : Hide Author Name in Blogger Posts

Need Help ?

Want any help to make your own label gadget ? So leave a comment below.I will help you as time allows me :-o

Pengelola Blog : ABDUL WAHAB

Judul : How to Style Label links and Counter Using CSS
Ditulis oleh : Kejutan Internet pada hari
Rating Blog : 5 dari 5
Terima kasih Anda telah membaca artikel tentang How to Style Label links and Counter Using CSS
Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman anda.
Namun jangan lupa harap memberikan link aktif dofollow yang mengarah ke URL ini ya
https://kejutaninternet.blogspot.com/2013/07/how-to-style-label-links-and-counter.html

Dan Terima kasih sekali lagi atas kunjungan Anda.

Kritik dan saran atau apapun bisa anda sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak bisa selalu online selama 24 Jam.


Mau Di Buatkan Blog Siap Pakai Seperti Ini ?.

Artikel Terkait