10 Cara Modifikasi Judul Widget Di Sidebar Blogger Supaya Menarik

Tutorial: Langkah-Langkah Cara Mempercantik dan Modifikasi Judul Widget/Gadget di Sidebar Blogger biar Lebih Menarik

Sudah mendapat (mengunduh) template blogger yang kami bagikan secara gratis? Akan tetapi Sidebar-Wrapper yang ditampilkan kurang sesuai dengan selera?

Dinamakan "Stylish Sidebar Blogger", yaitu suatu bentuk/tampilan dari widget-widget yang ada di samping blog. Dan kini, kau biasa memodifikasi judul Widget/Gadget yang ada di samping Blogger Themes...!!!

Biasanya kami menulis Content dan mempublikasikan wacana masalah-masalah dunia Blogger menyerupai HTML, CSS, dan JavaScript (Js). Akan tetapi, untuk kali ini, sedikit berbeda tapi masih dikategorikan "Masalah". Masalah apa? Hanya wacana selera :)

10 Cara Modifikasi Judul Widget di Sidebar Blogger biar Menarik

Bagi yang ingin memodifikasi judul widget yang ada di Sidebar Blogger, setidaknya kau harus paham sedikit wacana CSS.

• Blogger > Theme > Edit HTML
• Hapus CSS yang mengatur Widget/Gadget untuk Sidebar-Wrapper
• Pilih salah satu CSS Widget/Gadget yang sudah dipercantik (Note: Cek di bawah, ada daftarnya)
• Kemudian Simpan, dan Cek hasilnya

Langkah-langkah di atas, maksudnya menghapus CSS yang sudah ada; kemudian kita menggantinya dengan CSS yang ada di bawah ini. Cukup CSS kok :)

#1. Stylish Design for Customize Blogger Sidebar Heading

Kode yang digunakan:

.sidebar h2 { padding:5px; background:#000000; color:#FFFFFF; font: 500 140%; } 

#2. Stylish Design for Customize Blogger Sidebar Heading

Kode yang digunakan:

.sidebar h2 { padding:5px; border-bottom:5px solid #000000; color:#000000; font: 500 140%; } 

#3. Stylish Design for Customize Blogger Sidebar Heading

Kode yang digunakan:

.sidebar h2 { padding:5px; border-bottom:3px dashed #000000; color:#000000; font: 500 140%; } 

#4. Stylish Design for Customize Blogger Sidebar Heading

Kode yang digunakan:

.sidebar h2 { padding:5px; border:2px solid #000000; color:#000000; font: 500 140%; } 

#5. Stylish Design for Customize Blogger Sidebar Heading

Kode yang digunakan:

.sidebar h2 { padding:5px; border:2px dashed #000000; color:#000000; font: 500 140%; } 

#6. Stylish Design for Customize Blogger Sidebar Heading

Kode yang digunakan:

.sidebar h2 { padding:5px; border:2px dashed #000000; border-bottom:5px solid #000000; color:#000000; font: 500 140%; } 

#7. Stylish Design for Customize Blogger Sidebar Heading

Kode yang digunakan:

.sidebar h2{ background:#333; margin:5px 4px 5px 0; padding:9px 0 9px 10px; border:0; color:white; font-size:16px; line-height:1.2em; font: 500 140%; text-decoration:none; text-transform:uppercase; box-shadow:4px 4px 0px rgba(33,33,33,0.45); } 

#8. Stylish Design for Customize Blogger Sidebar Heading

Kode yang digunakan:

.sidebar h2 { padding:5px; border-top:1px solid #000000; border-bottom:5px solid #000000; color:#000000; font: 500 140%; } 

#9. Stylish Design for Customize Blogger Sidebar Heading

Kode yang digunakan:

.sidebar h2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFUa-f7Cz0fZJOjoWiEO9HjMEuovNojO5WXxkSj4hyphenhyphenOkwvJ6u9iflL1A8BnYEHH2P7nL3Pwl6YyWZZyMCMwSYEzdp2ey0p_lOMgYo-LX5KJh40PaMCwb7FZmSBqflhVd8Pg3DwOTY9ryHn/s1600/BloggerSpice+SidebarH2.png) no-repeat scroll 0 0 transparent; color: rgb(213,213,213); height: 66px; font-size: 140%; font-weight: bold; margin: 0 0 -28px; position: relative; left: -30px; top: 0; width: 362px; text-align: center; padding: 15px 0 0; font: 500 140%; padding-bottom: 15px; } 

#10. Stylish Design for Customize Blogger Sidebar Heading

Kode yang digunakan:

.sidebar h2 { padding:10px; text-align:center; border-top-right-radius:30px; border-bottom-left-radius:30px; background:#000000; color:#FFFFFF; font: 500 140%; } 

Bagaimana? Puas dengan Stylish Widget/Gadget yang ada di sini? Kurang? Keluhkan di kolom komentar :)

Source: candysweet-aina.blogspot.com/search?q=best-design-to-make-Blogger-sidebar-header-more-stylish
Sumber http://addbloggerthemes.blogspot.com

Share this post