Menampilkan icon/image bulat di header blogClick here to get more tutorials!

Bukan sebuah image, icon, photo atau gambar yang sebelumnya sudah berbentuk bulat dengan format gif atau png, namun image ini berbentuk bujursangkar (kotak sama sisi) yang dibuat menjadi bulat dengan menggunakan border-radius property. Image juga bukan hasil upload melalui elemen header yang ada di "Dasboard » Page Element, namun sebuah image yang benar-benar baru dan untuk memasangnya di header blog dilakukan dengan menambah atau membuat kode css baru. Ukuran image dapat anda sesuaikan dengan tinggi header dan bisa berupa gambar apa saja.

Ada dua pilihan kode css yang mungkin bisa anda pilih agar sesuai dengan template/blog anda. Pilihan pertama tentu saja yang sesuai untuk digunakan di template blogger baru (tempalte designer) dan yang kedua untuk template blogger lama (template tata letak & template klasik) serta beberapa template hasil download.

D E M O

Lihat di sudut kanan atas halaman!

Kode css untuk template blogger baru

Yang dimaksud template blogger baru adalah perancang template blgger atau blogger template designer yang dapat anda pilih melalui halaman dasbor » perancang template (template mudah, tanda air, jendela dsb).

.header{
        position:relative;
}
.header:before{
        position:absolute;
        width:60px; /* sesuaikan dg lebar image yg diinginkan */
        height:60px;  /* sesuaikan dg tinggi image yg diinginkan */
        content:"";
        background:url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s100-c/March82012.jpg) center no-repeat;  /* image yang akan ditampilkan */
        background-size:60px 60px; /* untuk mengatur tinggi, lebar image */
        top:30px; /* jarak image dari atas */
        left:75%; /* jarak image dari kiri */
        border:5px solid #eee; /* membuat border */
        border-radius:36px; /* membuat image bulat */
}

Kode css untuk template blogger lama & beberapa template hasil download

#header-wrapper{
        position:relative;
}
#header-wrapper:before{
        position:absolute;
        width:60px; /* sesuaikan dg lebar image yg diinginkan */
        height:60px;  /* sesuaikan dg tinggi image yg diinginkan */
        content:"";
        background:url(https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s100-c/March82012.jpg) center no-repeat;  /* image yang akan ditampilkan */
        background-size:60px 60px; /* untuk mengatur tinggi, lebar image */
        top:30px; /* jarak image dari atas */
        left:75%; /* jarak image dari kiri */
        border:5px solid #eee; /* membuat border */
        border-radius:35px; /* membuat image bulat */
}

Keterangan:

• Tidak semua template menggunakan kode yang sama, oleh karena itu jika dengan kode ini belum berhasil maka anda harus mencari kode yang sesuai di template. Mungkin beberapa yang lain menggunakan syntax seperti #header-wrap atau #header sehingga anda harus sedikit melakukan perubahan pada syntax css yang disertakan di atas. .header atau #header-wrapper bisa diganti dengan kode yang digunakan di template anda.
• background-size:60px 60px; berfungsi membentuk ukuran image sesuai dengan nilai tersebut. 60px untuk lebar/width dan 60px untuk tinggi/height.
• Sesuaikan width:60px dan height:60px; dengan nilai yang digunakan di background-size:60px 60px;
• border-radius:35px merupakan hasil penambahan padding (5px) dan setengah dari ukuran image (1/2 x 60px).
• Ganti https://lh3.googleusercontent.com/-ILlzOVEiQv8/T1jQbeVGY8E/AAAAAAAAB08/SaeQOvFfY8I/s144-c/March82012.jpg dengan URL baru sesuai gambar yang ingin anda pasang di header.
• Gunakan image dengan ukuran yang tidak terlalu besar agar tidak menjadi beban berlebihan bagi loading blog.
• top:30px; untuk mengatur jarak image dari atas. Makin besar makin turun, sedang 75% mengatur jarak image dari kiri. Makin besar makin ke kanan.

Cara Menyimpan/menggunakan kode css

1. Login ke BloggerKlik untuk login ke Blogger!
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
5. Edit HTML
6. Template › Edit HTML
   • Procced (Lanjutkan)
   • Cari Kode ]]></b:skin>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Letakkan kode css di atas kode tersebut.
   • Simpan Template/Save Template
7. Selesai! Silahkan coba cek hasilnya dengan membuka blog anda!

Contoh menempatkan kode css di atas kode ]]></b:skin>

#header-wrapper{
        position:relative;
}
#header-wrapper:before{
        position:absolute;
        .... dst
        border-radius:35px;
}

]]></b:skin>