Saturday, July 27, 2013

Cara Mengganti Judul Blog dengan Gambar Logo Blog SEO Friendly


Umumnya, tutorial cara mengganti judul blog dengan gambar atau logo blog di Blogspot adalah melalui menu "Tata Letak". Namun beda dengan yang diterapkan oleh Aku Blogger Indonesia pada blog ini, yaitu melalui menu "Edit HTML".


1. Memepersiapkan Gambar Logo Blog

Sebelum kita melakukan langkah-langkah di bawah ini, mari kita persiapkan terlebih dahulu logo atau gambar blog sebagai pengganti judul blog nantinya. Pastikan ukuran gambar sesuai dengan ukuran panjang dan lebar header judul. Cara mengetahui ukuran lebar dan panjangnya adalah sebagai berikut:
  • Cari kode #header di CSS Style (gunakan jalan pintas CTRL+F untuk mempercepat pencarian),
  • Kemudian perhatikan bagian kode CSS Styke #header
    Contoh:
    #header {width:230px;height:100px;margin:0px;padding:0px;}
    Dengan begitu ukuran lebar dan panjang gambar yang harus dipersiapkan adalah 230px x 100px. Atau bisa kita sesuaikan dengan keinginan kita. Ingat..!! ukuran gambar harus sama dan sesui dengan ukuran bagian header tersebut.
  • Kemudian silakan desain logo atau gambarnya menggunakan Software Photoshop sesuai dengan kemampuan masing-masing. 
  • Selanjutnya unggah gambar logo blog yang telah didesain di situs hosting gambar atau di blog Anda sendiri. Cara mengunggah gambar di blog, lihat pada langkah ke-dua di bawah.

2. Unggah gambar di Blog, Caranya (perhatikan gambar);


ganti judul blog dengan gambar logo blog
  • Buat posting baru dan jangan diterbitkan/ dipublish,
  • Beri judul Image Hosting atau sejenisnya,
  • Unggah gambar seperti halnya ketika hendak memasukkan gambar untuk sebuah posting pada umumnya, 
  • Setelah gambar terunggah dengan sempurna, klik gambar, klik Original Size
  • Selanjutnya ambil LINK/URL gambar dengan cara; klik kanan pada gambar tersebut, dan pilih Copy Link Location
  • Selanjutnya untuk mepersingkat langkah berikutnya, buka tab baru, kemudian paste-kan LINK/URL gambar tersebut, dan tekan enter,
  • Lanjut ke langkah ke-tiga.

3.  Menjadikan Gambar Logo Blog Sebagai Background

Oleh karenanya sebelumnya saya katakan bahwa cara mengganti judul blog dengan gambar logo blog di Aku Blogger Indonesia berbeda dengan tutorial yg sama pada umumnya. Adapun caranya dalah sebagai berikut:
  • Cari kode #header seperti sebelumnya kita mencari kode tersebut ketika ingin mengetahui ukuran header judul,
  • Tambahkan kode background berikut di bawah ini pada bagian dalam kode #header,
    background: url(LINK/URLGAMBAR) left top no-repeat;
    Contoh hasil akhir:
    #header {background: url(LINK/URLGAMBAR) left top no-repeat;width:230px;height:100px;margin:0px;padding:0px;}
  • Ganti teks LINK/URLGAMBAR dengan LINK/ULR gambar yang sebelumnya sudah kita taruh di tab baru,
  • Klik save/ simpan kemudian reload halaman blog. Maka hasilnya seperti gambar di bawah:
ganti judul blog dengan gambar logo blog

4.  Menyembunyikan Judul dan Deskripsi Blog

Setelah gambar terlihat sebagai background, kita harus menyembunyikan Judul dan Deskripsi blog yang bertumpukkan dengan gambar logo blog. Cara menyembunyikannya adalah sebagai berikut:
  • Lakukan langkah pertama poin pertama seperti sebelumnya untuk mencari kode #header untuk mencari kode #header h1 dan #header .description,
  • Kemudian tambahkan kode berikut ke dalam bagian #header h1 dan #header .description;
    display:none;
    contoh hasil akhir:
    #header h1 {display:none;font: blod 24px Arial;color:#000;line-height:normal;}
    #header .description {display:none;font: blod 24px Arial;color:#000;line-height:normal;}
  • Klik Save/ Simpan, maka hasilnya adalah sebagai berikut:
ganti judul blog dengan gambar logo blog

Langkah terakhir ini bisa kita terapkan dan juga tidak, tergantung bagaimana kita mendesainnya gambarnya. Jika tidak ingin menyembunyikannya, kita bisa mendesain gambar untuk meberi ruang judul dan deskripsi blog, tentunya gambar yang didesain membutuhkan ukuran yang lebih besar. Jadi, saya kembalikan kembali kepada Anda.

Saya mempersilakan kepada Anda sebagai Blogger Indonesia untuk memberi komentar atas pembahasan posting tutorial cara mengganti judul blog dengan gambar logo blog yang SEO Friendly. Jika ada pertanyaan maupun perbedaan pendapat, mari kita diskusikan bersama. Dan jika posting ini bermanfaat, silakan bagikan kepada Blogger Indonesia lainnya. Salam Blogger..

0 comments:

Post a Comment