Membuat Object Dock pada header blogger/blogspot..

Pertama sebelum kita membuat object dock pada header  blog. Kita harus menyiapkan ikon sebagai objek yang akan di pasang pada headernya disarankan jenis file imagenya PNG agar dapat menggunakan transparansi pada background ikon nya. kita bisa menguploadnya sendiri pada image uploader yang gratis seperti Photobucket, imagesharks, atau bagi yang memiliki account google bisa juga menggunakan Picassa album. setelah itu...

pergi ke design > Edit Html > klik Expand Widget

lalu cari <header>. kamu bisa search langsung dengan menekan Ctrl + F lalu, masukkan kata kunci <header>

setelah ketemu. Copy - paste code berikut ini setelah kode <header> atau sebelum </header>

ini untuk kode CSS nya.
<style type="text/css"> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .bubblewrap{ list-style-type:none; margin:0; padding:0; } .bubblewrap li{ display:inline; width: 65px; height:60px; } .bubblewrap li img{ width: 55px; /* width of each image.*/ height: 60px; /* height of each image.*/ border:0; margin-right: 12px; /*spacing between each image*/ -webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */ -o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */ } .bubblewrap li img:hover{ -moz-transform:scale(1.8); /*scale up image 1.8x*/ -webkit-transform:scale(1.8); -o-transform:scale(1.8); } </style>


Dan copy - paste juga kode HTML berikut ini dibawahnya.
<ul class='bubblewrap'><li><a href='ketik URL halaman disini'><img src='Url gambar' title='Judul'/></a></li> <li><a href='ketik URL halaman disini'><img src='Url gambar' title='Judul'/></a></li> <li><a href='ketik URL halaman disini'><img src='Url gambar' title='Judul'/></a></li> <li><a href='ketik URL halaman disini'><img src='Url gambar' title='Judul'/></a></li> <li><a href='ketik URL halaman disini'><img src='Url gambar' title='Judul'/></a></li> </ul>

Keterangan :

Ganti ketik URL halaman disini dengan alamat halaman blog yang kamu tuju dan ganti juga Url gambar dengan URL gambar yang telah kamu upload sebelumnya. Jangan lupa ganti Judul dengan nama page yang dituju Misal : Home, gallery dll....

kamu bisa menambahkan jumlah ikon yang kamu inginkan dengan menambah/mengcopy paste kode

<li><a href='ketik URL halaman disini'><img src='Url gambar' title='Judul'/></a></li> 

Dan full codenya seperti dibawah ini. disini ditambah kan kode <center> untuk alignment tengah pada awal kode dan akhir.

<center><style type='text/css'> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .bubblewrap{ list-style-type:none; margin:0; padding:0; } .bubblewrap li{ display:inline; width: 65px; height:60px; } .bubblewrap li img{ width: 55px; /* width of each image.*/ height: 60px; /* height of each image.*/ border:0; margin-right: 12px; /*spacing between each image*/ -webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */ -o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */ } .bubblewrap li img:hover{ -moz-transform:scale(1.8); /*scale up image 1.8x*/ -webkit-transform:scale(1.8); -o-transform:scale(1.8); } </style><ul class='bubblewrap'><li><a href='ketik URL halaman disini'><img src='Url gambar' title='Home'/></a></li> <li><a href='ketik URL halaman disini'><img src='Url gambar' title='Gallery'/></a></li> <li><a href='ketik URL halaman disini'><img src='Url gambar' title='Articles'/></a></li> <li><a href='ketik URL halaman disini'><img src='Url gambar' title='Movies'/></a></li> <li><a href='ketik URL halaman disini'><img src='Url gambar' title='Musics'/></a></li> </ul></center>

Setelah selesai klik SAVE TEMPLATE  lalu view blog untuk melihat hasilnya.

Preview