Friday, October 23, 2015

Cara Modifikasi Judul (H2) Widget pada Sidebar dan Footer Blog

Cara Modifikasi Judul (H2) Widget pada Footer Blog
Jika sobat memperhatikan salah satu tips dari MyBlogsIdeas yang membahasa tentang Internet Marketer, di bagian sidebar terlihat judul setiap widget akan terlihat unik dan menarik.

Terkesan sederhana, menonjolkan perspektif simple minimalis seperti yang dianut pada Evo Magz blogger template yang fenomenal itu. Widget merupakan salah satu bagian penting dalam sebuah situs, entah website personal maupun blog.
 
Tidak hanya sebagai sebuah navigasi yang terdapat di setiap halaman blog, namun juga berfungsi sebagai menu navigasi internal maupun eksternal.

Sehingga, main concept yang sering disampaikan para master blogger terkait faktor diterimanya sebagai publisher Google Adsense salah satunya kelengkapan menu navigasi, termasuk setting widget yang rapih dan tidak menyulitkan pengunjung.
Saking pentingnya, berikut Ane coba berikan salah satu tips bagaimana cara memodifikasi Judul (H2) Widget pada Sidebar Blog. 

Modifikasi Tampilan Judul (H2) pada Widget dan Footer Blog

Di bawah ini ada dua buah kode CSS yang bisa digunakan untuk melakukan modifikasi judul widget (H2) dan footer.

Kode Modifikasi Judul (H2) Widget

#sidebar-wrapper h2 {overflow: hidden;position: relative;font-family: 'Oswald';font-size: 15px;font-weight: 500;color: #666;padding: 10px 0;text-transform: uppercase;display: block;letter-spacing: 1px;}
#sidebar-wrapper h2:after {content: '';display: inline-block;position: absolute;height: 14px;top: 0;margin: 13px 0 12px 10px;width: 100%;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGzM-YXyF7aPyoBkLGHXmzO2iP1BuKzL2NrKQmg8iMtXJ9MudSOAQh_kcLnaDXXB6_Ep6dA2ivA7_Dqw9L5mRcuXmkEpQy7Gk5JzNB0fU49Me9vZGVnp_TPfRHocQFOp9DVAQiceAD9Bi0/s1600/repeat-bg.png)repeat;}

Kode Modifikasi Judul (H2) Footer

#footer-wrapper h2 {overflow: hidden;position: relative;font-family: 'Oswald';font-size: 15px;font-weight: 500;color: #fff;padding: 10px 0;text-transform: uppercase;display: block;letter-spacing: 1px;}
#footer-wrapper h2:after {content: '';display: inline-block;position: absolute;height: 14px;top: 0;margin: 13px 0 12px 10px;width: 100%;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGzM-YXyF7aPyoBkLGHXmzO2iP1BuKzL2NrKQmg8iMtXJ9MudSOAQh_kcLnaDXXB6_Ep6dA2ivA7_Dqw9L5mRcuXmkEpQy7Gk5JzNB0fU49Me9vZGVnp_TPfRHocQFOp9DVAQiceAD9Bi0/s1600/repeat-bg.png)repeat;}
#footer-wrapper ul,#footer-wrapper ol {list-style-type:none;margin:0 0 0 0;padding:0 0 0 0;}

Cara Modifikasi Tampilan Judul (H2) pada Widget dan Footer Blog

Pada tips kali ini, mudah banget kok, silakan lakukan langkah berikut ini:
1. Masuk akun blogger
2. Pilih template > Sesuaikan > tingkat lanjut > pilih CSS
3. Copas kedua kode di atas > Simpan

Mudahkan? Nih screen shot tmpilan pada sidebar:

Cara Modifikasi Judul (H2) Widget pada Sidebar Blog

Jika cara di atas belum berhasil, silakan copas langsung pada bagian template mode HTML. Caranya: silakan pilih template > mode HTML > cari elemen sidebar dan footer, dan sesuaikan dengan warna latar pada sidebar atau footer. Untuk mempermudah, sialakan lihat referensi lengkap kode warna HTML.

DEMO

Demikian tips desain blog mengenai Cara Modifikasi Judul (H2) Widget pada Sidebar Blog. Semoga bermanfa'at.

Good luck and happy blogging, salam.
(http://www.forumblogindo.com/).*

Ditulis Oleh : Unknown // October 23, 2015
Kategori:

0 comments:

Post a Comment

 

Total Pageviews

Powered by Blogger.