Friday, 29 November 2013

Membuat Widget Label Blog Tampilan Metro Flat

Membuat Widget Label Blog Tampilan Metro Flat. Saat ini, mungkin sudah sering anda melihat banyak blog / web yang mengubah penampilannya menjadi flat. Seperti blog ini, beberapa hari lalu telah menyempurnakan desainnya supaya terkesan datar tanpa ada efek 3d, shadow ataupun inset outset. Desain flat memiliki ciri seperti warna yang cerah, padding yang tebal, efek hover animasi dan CSS3 serta beberapa web ada juga yang menerapkan tampilan metro. Sama seperti widget kategori / label Cloud yang akan blog Jona Rendra berikan sebentar.

Membuat Widget Label Blog Tampilan Metro Flat Blogger jonarendra

Berbicara sedikit tentang widget kategori. Apabila anda menggunakan platform blogger/blogspot, pastinya sudah tahu gadget ini. Apalagi anda yang senang mengedit blog. Itu karena widget label memang sudah di vasilitasi atau disediakan oleh pihak Blogger. Kita cukup mengambilnya dan berikan sedikit sentuhan CSS. Sekarang saya akan jelaskan lebih lengkap.

Membuat Widget Label Blog Tampilan Metro Flat Simple

1. Login ke blogger
2. Pada dashboard, pilih blog yang akan diedit
3. Selanjutnya masuk ke Tata Letak, dan klik tambah gadget pada kolom yang sudah anda sesuaikan dengan layout blog anda
4. Di halaman Add gadget tersebut cari lalu pilih gadget yang bernama Label, yang logonya seperti ini

Logo Flat dari Widget Label Blogger jonarendra

5. Lalu atur penampilan widget dengan mengedit judul, dan tampilkan Cloud dan klik Simpan

Konfigurasi widget label blogger jonarendra

6. Tahap ini belum selesai. Sebab, jika hanya segitu tampilan widget ter setting default (biasa). Supaya lebih menarik, mari tambahkan CSS.
7. Caranya, masuk ke Template, Edit HTML
8. Masukkan CSS berikut ini di atas kode ]]></b:skin> atau </style>

.label a{background:#1ABC9C;color:#fff!important;font-size:13px;padding:0 10px;height:26px;lineheight:26px;text-decoration:none;border:none !important;margin:1px;-webkit-transition:all .2s ease-in-out !important;}
.label a:hover{background:#16A085;}
9. Terakhir klik Simpan Template dan selesai.


Akhirnya widget sudah terpasang diblog. Ini merupakan salah satu upaya kita untuk mendesain sebuah template. Kalau anda ternyata sama seperti saya yang senang desain datar ini, coba pakai template magazine yang saya bagikan di post Template Magazine Responsive K44-White. Dan jangan lupa untuk membaca Cara Menambah Jenis Font Baru Ke Blog karena ada beberapa font style yang bagus tidak disediakan blogger.

Sampai disini dulu postingan Jona Rendra kali ini yang berjudul Membuat Widget Label Blog Tampilan Metro Flat, semoga dapat mempercantik blog anda. Jika ada pertanyaan mengenai tutorial diatas, silahkan kirim lewat form komentar dibawah.

KATEGORI:
arrow_back
arrow_forward

8 komentar

Wah cantik banget blognya..metro design juga

Kalau yang beginian sih emang Jona Rendra jagonya....

haha, iya
makasih ya sudah berkunjung

haha, cuma belajar dari blog blog lain kok :D
blog kang sun juga punya konten yang menarik

Wah kreen nih,,, aku bookmark dulu blognya,,, nanti aku mampir lagi...

sekedar mampir smbil baca2.......

Berkomentarlah dengan baik dan benar, dilarang SPAM!
Tata Tertib Berkomentar
EmoticonEmoticon