Mengganti judul blog dengan logo gambar

Judul blog terletak pada bagian header blog, anda dapat mengganti judul blog dengan menggunakan font-font yang menarik, merubah ukuran font, memberi warna dan merubah background nya. Selain itu anda juga dapat mengganti judul blog dengan menggunakan logo gambar agar kelihatan lebih menarik dan mewakili indentitas blog anda.

Desain

Untuk desain logo gambar anda dapat mendesainnya sendiri, caranya mudah kok, apalagi sekarang ini sudah banyak aplikasi-aplikasi khusus untuk desain logo gambar dan editor gambar di android yang disediakan secara gratis ditambah dengan sedikit sentuhan kreatifitas anda sendiri.
Gunakan gambar yang memiliki background transparan dengan begitu background gambar akan mengikuti warna background header, oleh karena itu anda dapat memilih gambar dengan format .png.

Resolusi

Untuk ukuran gambar, gunakanlah gambar dengan bentuk persegi panjang sesuaikan saja dengan dengan ukuran header anda, anda kira-kira saja pas atau tidak nya, karena ukuran header pada setiap tema blogger ada yang sama dan ada berbeda, namun intinya sama yaitu sama-sama header dan dapat dimodifikasi.
Di tutorial ini saya menggunakan gambar dengan resolusi persegi panjang dengan resolusi asli nya yaitu 1200x800 piksel dan saya ingin merubah resolusi yang di display menjadi 150x100 piksel, kenapa saya menggunakan gambar yang resolusi aslinya besar, sementara resolusi gambar yang di display di header lebih kecil? jawabannya sederhana, karena apabila gambar di ciutkan ke resolusi yang lebih kecil maka gambar tidak pecah.

Cara mengganti judul blog dengan logo gambar

1. Klik Tata Letak.
2. Klik Edit pada bagian Tajuk (Header).
3. Berikutnya akan muncul konfigurasi seperti ini.

Catatan:

• Pilih opsi Masukkan URL gambar, jika anda ingin menggunakan gambar yang sudah anda upload sebelumnya, disini anda tinggal memasukkan URL gambarnya saja, misal: https://blogger.googleusercontent.com/img/b/xxx/xxx/xxx.png.
• Pilih opsi Upload gambar dari komputer, jika anda ingin menggunakan gambar yang sudah anda siapkan di komputer atau perangkat lain, Caranya yaitu Klik Choose File, Pilih gambar yang sudah anda siapkan, tunggu hingga proses uploading selesai.
• Berikutnya ada 3 opsi penempatan logo gambar, diantaranya adalah Dibalik judul dan deskripsi, Selain judul dan deskripsi, Tempatkan deskripsi setelah gambar, Disini silahkan anda pilih yang Selain judul dan deskripsi.
• Aktifkan opsi Susutkan gambar agar sesuai, disini resolusi display gambar yang ditentukan tema adalah 752 piksel dan nanti resolusi gambar akan otomatis di kompres mengikuti aturan yang ditetapkan oleh tema yaitu 752 piksel.

4. Terakhir anda klik Simpan dan preview blog anda untuk melihat hasilnya.

Gambar kebesaran?

Saat anda preview blog anda, maka anda akan melihat logo gambar pada bagian header menjadi kebesaran dan tidak enak dilihat, tetapi anda tidak perlu khawatir dan itu wajar, karena di tutorial ini saya menggunakan contoh gambar dengan resolusi 1200x800 piksel, sementara lebar default resolusi gambar yang ditetapkan tema adalah 752 piksel dan saya menginginkan gambar yang di display di header memiliki resolusi 150x100 piksel.

Jadi solusinya adalah mengedit ukuran resolusi didalam tema dan berikut caranya.
1. Klik Tema, Edit HTML.
2. Berikutnya anda cari kode seperti ini

<b:widget-setting name='displayHeight'>501</b:widget-setting>
<b:widget-setting name='sectionWidth'>752lt;/b:widget-setting>
<b:widget-setting name='useImage'>true</b:widget-setting>
<b:widget-setting name='shrinkToFit'>true</b:widget-setting>
<b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
<b:widget-setting name='displayWidth'>752</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>

Catatan:

• Kode 'displayHeight' merupakan tinggi gambar yang di display di bagian header, disitu ukurannya 501 piksel, silahkan anda ganti dengan ukuran 100 piksel.
• Kode 'displayWidth' merupakan lebar gambar yang di display bagian header, disitu ukurannya 752 piksel , silahkan anda ganti dengan ukuran 150 piksel.

Jika sudah dirubah maka hasilnya akan seperti ini

<b:widget-setting name='displayHeight'>100</b:widget-setting>
<b:widget-setting name='sectionWidth'>752</b:widget-setting>
<b:widget-setting name='useImage'>true</b:widget-setting>
<b:widget-setting name='shrinkToFit'>true</b:widget-setting>
<b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
<b:widget-setting name='displayWidth'>150</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>

3.Terakhir anda klik Simpan dan preview blog anda untuk melihat hasilnya.

Dari mana saya mendapatkan angka 100x150 piksel? sederhana, yaitu 1200x800:8 maka hasilnya 100x150, dengan menggunakan resolusi genap maka ketika gambar diciutkan 8x lebih kecil, maka gambar tidak akan tampak melebar ke samping atau ke atas.
Sebenarnya anda dapat menggunakan file gambar berupa .jpg, namun karena .jpg tidak memiliki background transparant, sebagian besar orang lebih memilih file gambar berupa .png karena selain itu gambar tidak mudah pecah.
Cara ini tidak berlaku untuk tema-tema baru di blogger yaitu tema essential, emporio, contempo, soho, notable. Demikianlah cara mengganti judul blog dengan logo gambar pada blogger, semoga bermanfaat.

Related