Home » » Cara Termudah Mengganti Judul blog Dengan Gambar

Cara Termudah Mengganti Judul blog Dengan Gambar

Judul blog, atau title blog, bisa juga header blog. Biasanya kurang terlihat menarik jika hanya tulisan teks saja, bahkan jika kita sering bermain didunia maya, para master blog sering kita lihat menggunakan gambar pada judul blognya. Banyak memang tutorial seperti pada postingan ini, tetapi tidak sedikit juga kita diharuskan membuat html style seperti (header, visibility, hidden).
Tidak salah, namun jika untuk newbie seperti saya, sedikit kesulitan. Terlebih jika anda menggunakan template responsive, maka diharuskan gambar sebisa mungkin sesuai dengan nilai view terkecil layar.

Contoh :
jika minimal lebar layar terkecil template adalah 240px, saran gambar yang dibuat tidak lebih dari 240px.
Floatnya juga sebisa mungkin disesuaikan.
CSS-nya tergantung, jika pada template ini namanya .header img.
Langsung saja cara termudah :
  1. Langkah pertama buat gambar yang cocok untuk blog kalian. Seperti yang saya sebutkan diatas, jika template anda responsive buatlah ukuran lebar gambar tidak lebih dari ukuran lebar layar terkecil.
  2. Log in akun blogger
  3. Tata Letak / Layout
  4. Pada kolom Header (edit)

  5. judul atau header blog dengan gambar
Coba sesuaikan penempatan gambar, jika.
• Dibalik judul dan keterangan, maka gambar tepat diposisi belakang dan judul serta keterangan diposisi depan (kalian lebih mengenalnya dengan istilah background).
• Selain judul dan keterangan, maka gambar berada didepan judul dan keterangan ini kebalikan dari poin pertama yaitu dibalik judul dan keterangan.
• Tempatkan keterangan setelah gambar, maka gambar hanya menutupi judul blog tidak untuk keterangan seperti pada blog ini.
• Simpan.

Setelah semua yang dilakukan diatas, silahkan cek apakah penempatan gambar sudah sesuai yang diharapkan ?
jika sudah dan hanya terkendala pada masalah posisi ditengah atau dikiri dan kanan. Tinggal edit header img {float:left}.
Lebih spesifiknya jika kalian menggunakan template responsive biasanya akan mengalami kendala ketika dilayar maksimal, contoh ketika lebar blog dibuat dengan lebar 960px dan tampilan gambar sedikit menuju ketengah, gunakan kode berikut sebelum ]]></b:skin>
@media screen and (min-width: 961px) {
.header img {float:left}
}
Tetapi itu tergantung struktur template yang digunakan.

© If you want to copy Article, please provide the source

0 comments:

Post a comment

Silahkan berkomentar jika sempat, klik notify me/beritahu saya, agar ketika saya balas, ada pemberitahuan.
• Baru Mei 2015.
- No URL Promosi (except Open ID)
- No Live Link
- No Sara
- No Spamming

Posting Terbaru