Cara Modifikasi Judul Sidebar Template Blogger

Untuk memodifikasi tampilan template bawaan blogger.com memang tidak mudah jika di bandingkan dengan template-template bawaan blogger sebelumnya. Sobat blogger butuh sedikit pemahaman tentang kode HTML yang terdapat di dalam template tersebut. Jangan sampai, sobat blogger hanya mampu menghilangkan Navbar-nya saja untuk memodifikasi tampilannya.

Sobat blogger harus bisa membedakan Tag untuk bagian-bagian utama dalam template sobat seperti Footer dengan tag

, Header dengan tag
dan Sidebar dengan tag

#sidebar-wrapper h2 {
margin:4px;
padding: 5px;
color: #f0f0f0;
line spacing: 1px;
line-height: 13px;
}
Untuk menambahkan Background pada judul sidebar, kita tinggal masukkan kode ini : background: #000; dan untuk menambahkan border atau bingkai kita tinggal tambahkan kode ini border: 1px solid #fff;

Sangat mudah kan? Bagaimana dengan template bawaan blogger yang baru? Bagaimana cara kita merubah background pada judul Sidebar, Merubah posisi Judul supaya berada di tengah atau merubah Font-nya?

Tidak ada cara lain yang bisa kita lakukan selain dengan menggunakan kode CSS (Cascading Style Sheet) untuk merubah tampilan sidebar. Sobat blogger bisa lihat sendiri tampilan Sidebar blog ini yang sudah saya rubah menggunakan kode CSS.

sidebar

Ada salah seorang teman saya yang bertanya seperti ini : "Bos, pada template dengan doctype HTML5 sudah terdapat kode h2 {, kenapa tidak dari sana saja kita sisipi kode?". Hal itu bisa-bisa saja kita lakukan, akan tetapi yang akan berubah bukan hanya background di judul Sidebar saja, tapi juga background tanggal yang terdapat di atas judul postingan. Blog kita akan tambah hancur kelihatannya kalau seperti itu.

Cara Merubah Atau Memodifikasi Tampilan Judul Pada Sidebar Pada Template Blogger Baru


  • Sign in di blogger.com
  • Pada menu drop down pilih template
  • BackUp Template sobat terlebih dahulu.
  • Kalau sudah di BackUp, Klik Edit HTML dan klik Proceed
  • Cari kode ]]>


  • Tempatkan kode berikut tepat di atasnya :

  • .sidebar h2 {
    font-size:110%;
    font-weight:bold;
    color:#ffffff;
    text-transform:uppercase;
    text-align:center;
    background:#2281C4;
    border-radius: 15px;
    }
    • Simpan template sobat

    Untuk Kostumisasi:
    1. Kode #ffffff adalah kode warna teks dan #2281C4 adalah background judul sidebar. Silahkan di ganti dengan warna yang sobat blogger inginkan. Lihat kode Warna disini : Hex Color Code
    2. Ganti kata center menjadi left kalau sobat blogger ingin merubah posisi judul sidebar menjadi sebelah kiri.
    3. Untuk merubah lengkungan atau border, hapus kode border-radius: 15px; dan ganti dengan kode berikut :
    -moz-border-radius: 1em 4em 1em 4em;
    border-radius: 1em 4em 1em 4em;

    Saya rasa sudah cukup tutorial tentang Cara Merubah atau Memodifikasi Tampilan Judul Sidebar pada blogger template baru. Jika sobat blogger masih bingung atau ada pertannyaan, silahkan mamfaatkan kolom komentar yang tersedia.
    Untuk memodifikasi tampilan template bawaan blogger.com memang tidak mudah jika di bandingkan dengan template-template bawaan blogger sebelumnya. Sobat blogger butuh sedikit pemahaman tentang kode HTML yang terdapat di dalam template tersebut. Jangan sampai, sobat blogger hanya mampu menghilangkan Navbar-nya saja untuk memodifikasi tampilannya.

    Sobat blogger harus bisa membedakan Tag untuk bagian-bagian utama dalam template sobat seperti Footer dengan tag

    , Header dengan tag
    dan Sidebar dengan tag

    #sidebar-wrapper h2 {
    margin:4px;
    padding: 5px;
    color: #f0f0f0;
    line spacing: 1px;
    line-height: 13px;
    }
    Untuk menambahkan Background pada judul sidebar, kita tinggal masukkan kode ini : background: #000; dan untuk menambahkan border atau bingkai kita tinggal tambahkan kode ini border: 1px solid #fff;

    Sangat mudah kan? Bagaimana dengan template bawaan blogger yang baru? Bagaimana cara kita merubah background pada judul Sidebar, Merubah posisi Judul supaya berada di tengah atau merubah Font-nya?

    Tidak ada cara lain yang bisa kita lakukan selain dengan menggunakan kode CSS (Cascading Style Sheet) untuk merubah tampilan sidebar. Sobat blogger bisa lihat sendiri tampilan Sidebar blog ini yang sudah saya rubah menggunakan kode CSS.

    sidebar

    Ada salah seorang teman saya yang bertanya seperti ini : "Bos, pada template dengan doctype HTML5 sudah terdapat kode h2 {, kenapa tidak dari sana saja kita sisipi kode?". Hal itu bisa-bisa saja kita lakukan, akan tetapi yang akan berubah bukan hanya background di judul Sidebar saja, tapi juga background tanggal yang terdapat di atas judul postingan. Blog kita akan tambah hancur kelihatannya kalau seperti itu.

    Cara Merubah Atau Memodifikasi Tampilan Judul Pada Sidebar Pada Template Blogger Baru


    • Sign in di blogger.com
    • Pada menu drop down pilih template
    • BackUp Template sobat terlebih dahulu.
    • Kalau sudah di BackUp, Klik Edit HTML dan klik Proceed
    • Cari kode ]]>


  • Tempatkan kode berikut tepat di atasnya :

  • .sidebar h2 {
    font-size:110%;
    font-weight:bold;
    color:#ffffff;
    text-transform:uppercase;
    text-align:center;
    background:#2281C4;
    border-radius: 15px;
    }
    • Simpan template sobat

    Untuk Kostumisasi:
    1. Kode #ffffff adalah kode warna teks dan #2281C4 adalah background judul sidebar. Silahkan di ganti dengan warna yang sobat blogger inginkan. Lihat kode Warna disini : Hex Color Code
    2. Ganti kata center menjadi left kalau sobat blogger ingin merubah posisi judul sidebar menjadi sebelah kiri.
    3. Untuk merubah lengkungan atau border, hapus kode border-radius: 15px; dan ganti dengan kode berikut :
    -moz-border-radius: 1em 4em 1em 4em;
    border-radius: 1em 4em 1em 4em;

    Saya rasa sudah cukup tutorial tentang Cara Merubah atau Memodifikasi Tampilan Judul Sidebar pada blogger template baru. Jika sobat blogger masih bingung atau ada pertannyaan, silahkan mamfaatkan kolom komentar yang tersedia.

    0 Response to "Cara Modifikasi Judul Sidebar Template Blogger"

    Post a Comment