Menambah Gambar Header pada Media Blog

Judul media blog merupakan fitur yang posisinya bagian atas (header). Fitur ini menggambarkan isi daripada media blog, sebelum membaca tulisan kita seorang sudah bisa menebak isi media blog kita secara keselurahan, judul media blog dapat diisi dengan teks atau menggunakan gambar bahkan animasi untuk lebih menarik.
Pada saat awal loading maka tampilan pertama yang nampak oleh penggunan adalah header, dari header tersebut pengguna akan lebih mudah memahami bagian-bagian (isi postingan) media blog dan tentunya dengan header yang interaktif (dalam bentuk animasi) akan membuat pengunjung lebih betah di media blog Anda. Oleh karena itu headernya sebaiknya menggunakan gambar atau animasi yang Anda buat sendiri, misalnya dengan melalui aplikasi Photoshop.

Ukuran ideal Header blog dengan gambar, lebar 860 pixel dan tinggi 150 pixel. Ukuran lebar Header Blog dapat Anda sesuaikan dengan lebar blog Anda (temukan ukuran lebar di edit HTML atau mencari di propertis).


Bagaimana cara memasang Header Blog dengan Gambar, sebagai berikut:

  1. Buka account Anda di blogger.com
  2. Klik Tata Letak
  3. Pada bagian tata letak, klik Edit di gadget Header
  4. Muncul kotak dialog "Mengkonfigurasi Header", silahkan klik Browser untuk upload gambar yang telah dibuat (silahkan tunggu sampai gambar yang diuplod muncul)
  5. Aturlah penempatannya, dengan cara klik Selain judul dan keterangan
  6. Akhiri upload Header Blog dengan Gambar dengan klik Simpan
  7. Lihat hasilnya pada blog Anda

Catatan, biasanya ukuran gambar dengan ukuran yang disediakan Header Blog tidak sesuai. Untuk itu, perlu Anda edit gambar yang dibuat di Photoshop dengan menyesuaikan ukuran Header Blog, lalu ulangi langkah-langkah di atas.

Komentar

Posting Komentar

Postingan populer dari blog ini

Buat Link Warna-warni

Gambar
Caranya Brada : 1. Login ke Blogger 2. Tata Letak 3. Edit Html 4. Cari script <head> 5. Kalau sudah ketemu, letakkan script ini tepat dibawah <head> <script src="http://www.mahadesain.com/js/mahawarnawarni.js" type="text/javascript"></script> Setelah di copy paste script di atas langkah selanjutnya tinggal di save aja and di lihat hasilnya. Gimana brada xiixxi!! ....... Semangat Blogger.,..,
Baca selengkapnya

Cara Mengganti Cursor di Blog

Saya yakin, Anda pasti bosan dengan cursor berbentuk panah itu. Dengan trik kali ini, Anda bisa mengganti cursor panah tersebut dengan gambar-gambar yang menarik setiap kali blog Anda dibuka. Caranya pun sangat mudah. Langsung saja, begini caranya: 1. Pilih tab “Tata Letak”. 2. Klik “tambah gadget” baik itu berada di bawah, atas atau samping. 3. Pilih “HTML/JavaScript” 4. Copy kode di bawah ini pada tempat pengetikan: <style type="text/css">body {cursor:url("http://www.123cursors.com/freecursors/7676.gif"),default}</style> 5. Nah, ganti alamat cursor http://www.123cursors.com/freecursors/7676.gif tersebut dengan alamat cursor yang lain. Untuk mengetahui alamat cursor yang lain, kunjungilah www.123cursors.com dan pilih cursor yang Anda inginkan. Supaya lebih mudah, cari berdasarkan kategori. Bila Anda sudah menemukan, copy alamat cursornya dengan cara klik kanan pada gambar cursor tersebut, lalu pilih “copy image location”.
Baca selengkapnya

Cara Membuat Efek Bubble Pada Cursor di Blog

Cara Membuat Efek Bubble Pada Cursor di Blog , Yups... seperti postingan saya tentang Membuat Cursor Bertabur Bintang , Tapi kali ini tentang Efek Bubble atau bisa disebut dengan gelembung. Tips ini ane dapet dari blog vikrymadz Lalu ane ulas lagi disini.. Efek ini secara otomatis akan muncul setelah sobat" menggerak"an kursor sobat. Ok deh buat sobat" yang dah kepengen ma ini tips, Langsung aja ke TKP. hehehehe 1.Login ke Blogger 2.Rancangan --> Elemen Laman --> klik Tambah Gadget --> HTML/Javascript 3.Lalu Copy dan Paste Kode Bubble Kursor Efek di bawah ini di kotak HTML/Javascript <noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript"> // <![CDATA[ var colours=new Array(" #F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE "); // colo
Baca selengkapnya