October 7, 2015

Cara Modifikasi Widget Label Blog Biar Lebih Menarik

October 7, 2015

Modifikasi Widget Label Blog Biar Lebih Menarik
Cara mempercantik Desain Tampilan Widget Label blogger agar  lebih menarik dan keren.

WIDGET  Label adalah salah satu feature blogger yang bisa dipasang di sidebar atau footer.

Widget label alias daftar kategori posting ini berfungsi sebagai navigasi menu dan internal link untuk memudahkan pengunjung mengeksplorasi konten blog kita.

Semua postingan (tulisan/artikel) dalam label (kategori) tertentu bisa dilihat pengunjung dengan klik salah satu label.

Label ini juga bisa menjadi dipasang di Navigasi Menu untuk memudahkan pembaca mencari tips, trik, kode, atau informasi yang mereka butuhkan. (Baca: Cara Menampilkan Halaman & Label di Menu Navigasi Blog).

Untuk menarik perhatian, kita bisa memodifikasi widget Label ini agar lebih menarik. CB sendiri memilih tampilan yang "simple" seperti bisa dicek di footer widget.

Untuk memperindah tampilan widget label ini, banyak sekali kode CSS yang sudah dibagikan oleh para master desain blogger. Googling aja dengan mengetikkan "Stylish Widget Label Blogger". Silakan pilih sesuai selera.

CB sendiri memilih tampilan yang simple dari MBT.

Cara Modifikasi Widget Label Blog Biar Lebih Menarik

Jika Anda ingin menampilkan widget label seperti di footer widget CB, maka berikut ini cara membuatnya:

1. Template > Edit HTML
2. Copas saja kode CSS Label Widget berikut ini di atas kode ]]></b:skin>
atau </style>

.label-size{margin:7px;padding:7px;text-transform:uppercase;border:solid 1px #C6C6C6;border-radius:3px;float:left;text-decoration:none;font-size:12px;color:#666}.label-size:hover{border:1px solid #6BB5FF;text-decoration:none;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out;-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(7deg);transform:rotate(7deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand');zoom:1}.label-size a{text-transform:uppercase;float:left;text-decoration:none}.label-size a:hover{text-decoration:none}

3. Save Template!

Langkah berikutnya, tambahkan widget label dengan cara:

1. Layout > Add a Gadget > pilih Label
2. Lakukan setting dengan klik "Cloud" seperti gambar berikut ini:

setting widget label blog

3. Save


Tampilan Lainnya: Widget Label Simple Keren


Widget Label Simple Keren


KODE
.label-size{margin:0 6px 6px 0;padding:3px;text-transform:uppercase;border:solid 1px #C6C6C6;border-radius:3px;float:left;text-decoration:none;font-size:13px;color:#666}
.label-size:hover{border:1px solid #6BB5FF;text-decoration:none;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .5s ease-out;-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(7deg);transform:rotate(7deg);filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand');zoom:1}
.label-size a{text-transform:uppercase;float:left;text-decoration:none}
.label-size a:hover{text-decoration:none}

Demikian Cara Modifikasi Widget Label Blog Biar Lebih Menarik. Good Luck! (http://www.contohblog.com/).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

14 comments on Cara Modifikasi Widget Label Blog Biar Lebih Menarik

  1. Sip... Mau menambahkan nih CB, tambahkan kode <-- label cloud --!> di atas kode tadi sebagai "petunjuk" bahwa kode itu adalah kode untuk label cloud tersebut. Fungsinya yakni apabila modifikasi label tersebut tidak ingin digunakan lagi, cari kode "label cloud" tadi dan hapus. Betul ndak?

    ReplyDelete
  2. Milik ane kok ga jadi yah gan CB

    ReplyDelete
  3. Bahan dasar template CB ini seperti Genesis SEO kalau saya lihat. Betul ndak? Yang jelas, tampilan CB yang sekarang lebih keren dari pada tampilan CB dulu. Itu sih menurut saya.. :D

    ReplyDelete
    Replies
    1. Template ini masih menggunakan Framework Template Johny Wuss kok :)

      Delete
  4. Mas bos, gimana widget jg footer agar bisa muncul di mobile, template johny wuss tentunya? adakah artikelnya? trims.

    ReplyDelete
    Replies
    1. setting disable mobile
      1. Template > No. Show desktop template on mobile devices.

      Delete
    2. trims mas.
      saya buka webmaster,, knp ya dgn New Johny Wuss V2 kok Duplikasi deskripsi meta?
      trims bantuannya..

      Delete
  5. kok gak jadi ya mas? ane pakai template NJW simple
    mohon pencerahaanya bang

    ReplyDelete
  6. gimana maksud nya min cari kode apa ]] ?

    ReplyDelete
  7. mantap tutorialnya gan, silahkan berkunjung ke blog saya Marcopedia Thanks!

    ReplyDelete

Contact Form

Name

Email *

Message *