memasang gambar dan link pada header di blog

Para blogger dimanapun anda berada, ada kabar berita dari saya, kali ini saya akan memposting tentang cara memasang gambar dan link pada header di blog. Cara ini bisa dikatakan sederhana karena kita hanya meletakan kode kode pada tempat yang dimaksud, gambar yang ber-link akan dipasang pada beberapa header sekaligus di blog yang sebelumnya saya bagi headernya dalam beberapa kolom. Banyak dari para blogger kesulitan saat membuat gambar link dikarenakan harus dipasang dibawah kode header-wrapper tapi kode header-wrappernya tidak ketemu, jadi bingung mau dipasang dimana, terkadang gambarnya bisa muncul di header tapi masih bingung cara buat linknya dan banyak lagi kendalanya terutama untuk para blogger pemula seperti saya hehehe..., tujuan saya memposting ini ialah sekedar sharing dan bukan merasa lebih jago dari anda.

Langkah langkahnya kita akan bagi header dalam beberapa kelompok kolom, lalu saya akan bagi header dalam 4 kolom header, kemudian masing masing gambar pada kolom akan saya beri link, hasilnya bisa dilihat dibawah ini:

Bisa kita lihat ada 4 header gambar diatas yaitu sisi kiri, tengah kanan dan bawah, dan kolom header disebelah kiri bisa dipasangi tombol share, like dan lain lain, ok langsung saja saya contohkan kodenya, so...lihat kebawah. Pertama login ke blogger, masuk ke tata letak lalu cari kode ini .header-outer { contoh lengkap pada blog saya ialah :

.header-outer {background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none;min-height: 230px; background:#DCDCDC; }

Setelah ketemu, kemudian copy kode dibawah ini lalu paste di bawah kode diatas.

#headerkanan { float: right; width: 24.6%; /* mengatur lebar header kanan */ height:230px; background-color:#FF8C00; color:#000000; /* background: url(alamat laman anda yang berisi gambar yang ingin diunggah); background-repeat: no-repeat; */ margin-right:0px; } #headerkiri { float: left; width: 25%; /* mengatur lebar header kiri */ height:230px; background: url(alamat laman anda yang berisi gambar yang ingin diunggah); background-repeat: no-repeat; ; } #headertengah { float: left; width: 5%; /* mengatur lebar header tengah */ height:20px; background-repeat: no-repeat; margin-left:-42px; margin-top:15px; } #headerbawah { float: left; width: 5%; /* mengatur lebar header tengah */ height:20px; background-repeat: no-repeat; margin-left:-263px; margin-top:230px; }

Ganti alamat url(alamat laman anda yang berisi gambar yang ingin diunggah) dengan alamat url gambar yang ingin anda unggah contoh : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq1XLsCmfdiJNVuwxJ80z_jIrEC3aFa3tFK3tQdpR8t_M5_mlgp5f4fgiFYpCcFaTFqSCq7UC6yoT0gANI0UKWhSwjbzwrysL5wXQSGhMVXYx0j7OwrFp_N6MbTE-W7FXx8LPNtBpAnlOk/s1600/IMG_5322.JPG).

Kode float: berfungsi agar header keluar dan ditampilkan dari sisi kiri, kanan atau tengah.

Untuk mengatur lebar header silakan ganti angka pada width contoh : width:30px.

Untuk mengatur tinggi header silakan ganti angka pada height contoh : height:10%.

Kode background-repeat: no-repeat; berfungsi agar gambar tidak ditampilkan lebih dari 1 kali.

Kode margin- berfungsi menempatkan header pada posisi angka pixel yang dikehendaki contoh : margin-top:230px;, px adalah singkatan dari pixel.

Kemudian cari kode <header> , lalu copy kode dibawah ini dan paste kode tersebut dibawah <header>, kode dibawah ini berfungsi untuk mendeklarasikan variabel apa saja yang ada pada header.

<b:section class="headerkanan" id="headerkanan" maxwidgets="1" showaddelement="yes"> <b:widget id="HTML10" locked="false" title="" type="HTML"> <b:includable id="main"> <!-- only display title if it's non-empty --> <b:if cond="data:title != """> <h2 class="title"> <data:title></data:title></h2> </b:if> <div class="widget-content"> <data:content> </data:content></div> <b:include name="quickedit"> </b:include></b:includable> </b:widget> </b:section> <b:section class="headerkiri" id="headerkiri" maxwidgets="1" showaddelement="yes"> <b:section class="headertengah" id="headertengah" maxwidgets="1" showaddelement="yes"> <b:section class="headerbawah" id="headerbawah" maxwidgets="1" showaddelement="yes">

Fungsi kode maxwidget= adalah untuk membatasi berapa widget yang bisa dipasang pada header, contoh : maxwidget='1' berarti cuma boleh ada 1 widget yang diletakan. Fungsi showaddelement='yes' adalah element apapun yang berupa gambar, tulisan dan lain lain akan ditampilkan pada header.

Lalu copy kode dibawah ini dan paste tepat dibawah kode yang tadi dipaste.

<div id="headertengah"> <a href="http://bagasnewweb.blogspot.com/" rel="nofollow" title="Homepage"> <img alt="logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibB-qIm6Uke2LmGMXtEC-q4xhl-0coammAs2PgoOYFVjEIoxNy163AskOTUkes6AefZ0hGtCk87gYP7awYt23hX6A7yMtps-rt-nShxCguEfE9SCN2hXnay1f22DJk536jqeU6_o8xbeb9/s1600/ADVERTISEMENT+SPACE+3.jpg" height="200" title="Homepage" width="520" /> </a> </div> <div id="headerbawah"> <a href="http://bagasnewweb.blogspot.com/" rel="nofollow" title="Homepage"> <img alt="logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV74qed8Imdr95tPhBhgQdGbTRmZKX2uH7ex7nt0Tb7dxerIdbGbX_ftZgQkCb6DYIvgSjd0KfvmvCV7vSqY9N3srGEQa4yTE-hPmb_4wBzOQLMb8lEQIH5GeNtabPALOathEfyCDR-lxs/s1600/ADVERTISING+SPACE+CALL+087852642439+3.gif" height="200" title="Homepage" width="992" /> </a> </div>

Fungsi <a href= adalah memberi link pada gambar sehingga gambar bisa diklik menuju halaman pada url yang berada setelah kode src=". Setelah itu klik simpan template, lalu lihat hasil dengan klik lihat hasil atau refresh halaman yang telah dibuka sebelumnya, selamat mencoba..., tapi jangan lupa beri komentar, yang berarti anda menghargai posting saya, terima kasih...

Memasang gambar dan link pada header di blog