Cara Memasang Gambar Logo Atau Ikon Blog Di Sisi Bagian Kanan Header

Sobat Blogger, jika sebelumnya Anda pernah mengunjungi blog ini, maka dapat Anda lihat bahwa sekarang terdapat 1 (satu) buah widget baru yang terpasang di area header. Widget yang dimaksud adalah sebuah logo yang terletak di sisi bagian kanan header, seperti yang ditunjukkan dengan tanda anak panah pada gambar di atas. Perlu diketahui bahwasanya gambar atau logo tersebut bukanlah sekedar gambar yang hanya dipakai sebagai hiasan blog, namun logo yang terdapat pada sisi bagian kanan header ini juga merupakan sebuah link atau tautan bergambar yang merujuk pada homepage, sehingga apabila diklik maka secara otomatis terbukalah halaman beranda. Dan perlu diketahui pula bahwa logo tersebut juga merupakan gambar yang dipakai sebagai favicon untuk blog ini.

Berbicara mengenai gambar yang terdapat pada sisi bagian kanan header blog ini, secara prinsip cara pemasangannya adalah serupa dengan teknik yang digunakan untuk memasang atau menempatkan iklan, banner, maupun animasi pada header. Dimana dalam pengerjaannya memerlukan 2 (dua) proses, yaitu membagi header menjadi 2 (dua) kolom untuk proses yang pertama dan kemudian proses selanjutnya adalah menambahkan widget baru pada kolom kedua yang terbentuk dalam header.

Oke, sekarang kita langsung pada pokok pembahasan yaitu mengenai cara memasang gambar, logo, banner, animasi, atau ikon pada header. Dan karena seperti yang saya uraikan di atas bahwa untuk keperluan tersebut diperlukan 2 (dua) proses, maka Anda dapat melakukannya dengan mengerjakan langkah-langkah berikut ini secara berurutan.

Membagi Header Menjadi 2 Kolom

Guna membagi kolom header agar menjadi 2 (dua) bagian, maka kerjakan langkah-langkah di bawah ini.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, cari kode ]]></b:skin> dan kemudian sisipkan rangkaian CSS berikut ini tepat di atasnya.

.Header {
  width: 78%;
}

.Header-RC {
  width: 20%;
  float: right;
  padding: 30px;

}

.Header-RC .widget {
  margin: 0px;
}

.Header-RC img {
  border: 1px solid orange;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -goog-ms-border-radius: 3px;
  box-shadow: 0px 0px 8px 1px orange;
}

Keterangan:

.Header { dipakai untuk mengatur lebar kolom header bagian kiri, .Header-RC { digunakan untuk mengatur setelan pada kolom header bagian kanan, .Header-RC .widget { digunakan untuk mengatur margin widget yang dipasang, dan .Header-RC img { digunakan untuk mengatur setelan bingkai untuk gambar yang dipasang. Jika setelan pada rangkaian kode CSS tersebut belum sesuai dengan desain header blog yang Anda kelola, maka silakan dilakukan kustomisasi seperlunya.

Ketiga, cari <div class='region-inner header-inner'> dan kemudian sisipkan kode berikut ini tepat di bawahnya.

<b:section class='Header-RC' id='Header-RC' maxwidgets='1' showaddelement='yes'></b:section>

Keempat, simpan template.

Menambahkan Widget Baru Pada Blog

Untuk keperluan penambahan widget baru, dalam hal ini adalah menambahkan widget dalam bentuk gambar atau logo yang akan ditempatkan dalam header, maka langkah selanjutnya bukalah menu ‘Tata Letak (Layout)’. Dan setelah membuka menu ‘Tata Letak (Layout)’, maka Anda akan mendapati sebuah kolom widget baru (yang terletak di sisi bagian kanan atau bisa jadi pula di atas widget untuk header) seperti yang tampak pada gambar di bawah ini.

Sumber gambar: Blogger.com

Langkah berikutnya klik ‘Tambah Gadget’ > gunakan pilihan widget ‘HTML/JavaScript’ > masukkan script dengan format seperti contoh di bawah ini dan kemudian simpan.

<div align="right">
<a href='http://eltelu.blogspot.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgtz6J6fAeCikK3PhIRJmOcLm5ntM4gU-5AhLQmpC-aKBrqZptWe58AGLOAVHfRCFRTIq47r41_j8M3h4VRnRjFaB6gGi1ZAk6JE3IyJ1VuT6ZAifbBYhCMbbneIE4bN0G_4JBmjMzZuY/s800/ELTELU.png' style='width: 48px; height: 48px;'/></a>
</div>

Keterangan:

Karena script di atas hanya merupakah sebuah contoh, maka lakukan perubahan sesuai dengan URL blog, gambar serta ukuran gambar yang Anda inginkan.

Setelah semua langkah-langkah di atas Anda kerjakan, maka langkah yang terakhir adalah melakukan pengecekan atau melihat hasil dari penerapan teknik tersebut yaitu dengan cara membuka URL atau alamat blog yang Anda kelola. Namun apabila mengalami kesulitan dalam mengimplementasikan teknik yang diuraikan dalam artikel ini, maka Anda dapat mengajukan pertanyaan mengenai kesulitan yang Anda alami dengan cara mengeposkan komentar dalam artikel ini.

Semoga berguna dan bermanfaat.

Salam.