Mempercantik Tampilan Judul Widget (H2) Sidebar Blog
October 10, 2015
Cara modifikasi atau mempercantik judul H2 widget sidebar blog.
SETIAP kali ada "hal baru" di tampilan (desain) CB Blogger, hampir selalu ada yang tanya: bagaimana cara membuatnya? Share dong! Termasuk ketika CB mengubah tampilan judul di sidebar dan footer blog ini.
Modifikasi Desain Blog termasuk mengubah tampilan elemen tertentu di blog, pada dasarnya yaitu dengan cara menambah atau mengedit kode Cascading Style Sheets (CSS). Kita bisa mempelajari penerapan kode CSS di CSS Tutorial.
Judul sidebar blog memang harus diperlakukan istimewa, karena ia bagian dari navigasi menu dan internal link, untuk memudahkan pengunjung membuka konten blog kita.
Biasanya, widget sidebar blog yang "wajib ada" a.l. Recent Posts dan Popular Post. Widget Related Posts biasanya ada di bawah posting. (Baca: Widget yang Wajib Ada di Blog).
Ini kode CSS judul Footer Widget yang CB gunakan:
Jika Anda tidak menemukan kode sidebar h2, mungkin sidebar .widget h2 atau yang semisalnya. Intip aja kodenya dengan cara:
1. Arahkan cursor ke judul sidebar blog Anda
2. Klik kanan > pilih "inspect element"
Nah, kode itulah yang harus diubah. Untuk urusan warna, silakan gunakan Kode Warna HTML untuk mempercantik tampilan judul sidebar blog Anda. Good Luck! (http://www.contohblog.com/).*
SETIAP kali ada "hal baru" di tampilan (desain) CB Blogger, hampir selalu ada yang tanya: bagaimana cara membuatnya? Share dong! Termasuk ketika CB mengubah tampilan judul di sidebar dan footer blog ini.
Modifikasi Desain Blog termasuk mengubah tampilan elemen tertentu di blog, pada dasarnya yaitu dengan cara menambah atau mengedit kode Cascading Style Sheets (CSS). Kita bisa mempelajari penerapan kode CSS di CSS Tutorial.
Judul sidebar blog memang harus diperlakukan istimewa, karena ia bagian dari navigasi menu dan internal link, untuk memudahkan pengunjung membuka konten blog kita.
Biasanya, widget sidebar blog yang "wajib ada" a.l. Recent Posts dan Popular Post. Widget Related Posts biasanya ada di bawah posting. (Baca: Widget yang Wajib Ada di Blog).
Mempercantik Tampilan Judul Widget (H2) Sidebar Blog
Langsung saja, ini kode CSS judul sidebar blog yang CB gunakan:
#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/AVvXsEjIvIkIOq482KVvK54xenm54ZrFSIrbqrnW0YH5fti1rvhl-yqRXVR-86BXOMdszA3P4JezyJl04Uvkj-YcWsTwv6FjgdN5dLFCaPU1m6AjipJSycN-ai3GIHXYd1IrjoA0EfhqkMDa7mNy/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/AVvXsEjIvIkIOq482KVvK54xenm54ZrFSIrbqrnW0YH5fti1rvhl-yqRXVR-86BXOMdszA3P4JezyJl04Uvkj-YcWsTwv6FjgdN5dLFCaPU1m6AjipJSycN-ai3GIHXYd1IrjoA0EfhqkMDa7mNy/s1600/repeat-bg.png)repeat;}
Ini kode CSS judul Footer Widget yang CB gunakan:
#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/AVvXsEjIvIkIOq482KVvK54xenm54ZrFSIrbqrnW0YH5fti1rvhl-yqRXVR-86BXOMdszA3P4JezyJl04Uvkj-YcWsTwv6FjgdN5dLFCaPU1m6AjipJSycN-ai3GIHXYd1IrjoA0EfhqkMDa7mNy/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/AVvXsEjIvIkIOq482KVvK54xenm54ZrFSIrbqrnW0YH5fti1rvhl-yqRXVR-86BXOMdszA3P4JezyJl04Uvkj-YcWsTwv6FjgdN5dLFCaPU1m6AjipJSycN-ai3GIHXYd1IrjoA0EfhqkMDa7mNy/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 Mengubah Warna Background dan Huruf Judul Sidebar Blog
Jika Anda hanya ingin mengubah warna latar (background) dan huruf doang, misalnya latar hitam dan teks putih, ini kodenya:
.sidebar h2 {background:#000; padding:4px 2px 2px;color:#fff}
Jika Anda tidak menemukan kode sidebar h2, mungkin sidebar .widget h2 atau yang semisalnya. Intip aja kodenya dengan cara:
1. Arahkan cursor ke judul sidebar blog Anda
2. Klik kanan > pilih "inspect element"
Nah, kode itulah yang harus diubah. Untuk urusan warna, silakan gunakan Kode Warna HTML untuk mempercantik tampilan judul sidebar blog Anda. Good Luck! (http://www.contohblog.com/).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Mantap Bos sudah diterapkan dan sukses...
ReplyDeleteThanks panduannya
code css nya di pastekan di mana mas?
ReplyDeleteSupaya bisa responsive judul plus background nya gmn bos? Mohon penjelasanya dong...
ReplyDelete