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;}
#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;}
#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:
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/).*
0 comments:
Post a Comment