Membuat Menu Ikon Mengapung

Technorati Tag: menu vertikal,menu melayang,icon melayang,floating menu

Setelah hampir satu minggu tidak posting, akhirnya hari ini dapat menulis lagi sebuah artikel yang sebenarnya untuk materi ini sudah banyak diulas oleh para sobat blogger.  Dengan harapan agar nantinya artikel ini dapat berguna dan bermanfaat bagi para sobat blogger lain yang bisa jadi belum mengetahui tentang cara membuat menu dengan ikon mengapung. Atau paling tidak artikel ini dapat berguna dan bermanfaat bagi diri saya sendiri sebagai sebuah catatan on line yang nantinya dapat saya jadikan sebagai bahan rujukan bila diperlukan.

Bila sobat blogger ingin membuat menu dengan ikon mengapung (floating menu with icons) atau biasa juga disebut menu dengan ikon melayang seperti pada gambar di atas, maka caranya adalah seperti pada langkah-langkah di bawah ini.

Pertama, login ke akun blogspot Anda kemudian buka “Template” -  “Edit HTML”. Selanjutnya cari kode ]]></b:skin> dan kemudian copy kode di bawah ini tepat di atasnya.

#eltelu { float:left; height:151px; margin:0; padding:0px 0 0 0px; position:fixed; left:0; text-align:left; top:70%; width:50px; } #eltelu a { display:block; float:left; padding-left:0px; border:none; } #eltelu a img { borde

Terimakasih bila Anda tetap menyertakan dan mencantumkan URL lengkap sumber artikel ini.

Kedua, cari kode </body> dan kemudian copy kode di bawah ini tepat di atasnya.

Berikut Kode nya

<div id='eltelu'> <a href='http://www.twitter.com/ID_TWITTER' target='_blank' title='Twitter'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_d6BKpavZC2VsZq8RPwL4TE31whQxnYwfSsKsITQ4X1CE209k0jkYVRHY2Gre74PsOCYCqUZNphXHDCPV5i88bkhqce6C-oqRmHJ_sH-XrRg9RPN2URyITkUfjbiFUykAcfhI5ZQHXDc/s800/twittericon.png'/></a> <a href='http://www.facebook.com/ID_FACEBOOK' target='_blank' title='Facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIGvTdWCiBEbuGId-oo4T50yH6z9qokebfYK5u9bA-d3vtaOhDd78EmpXaGv8HngMBgwKdHxbU3L1yDM1OFAvYwn2j5CLfeP-eQztHcuTrtJIcXJ1QlAwPCHd4WaGw4FBAYL8ynInJZME/s800/facebookicon.png'/></a> <a href='/feeds/posts/default' target='_blank' title='RSS'><img alt='RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4hYJlcnROIqQOFJkyXaEGmeEG16nlcdzLpQVhfE6CnsGSRcwr5wyApipWHXyB5LS6tO0qxOJJk-CU3AQYEP0ockFPoQdekon1WkDi_vm8uk0NckZ7zshxt6NKfO8GmJ7wzQ5TH3mbDX0/s800/rssicon.png'/></a> </div>

Terimakasih bila Anda tetap menyertakan dan mencantumkan URL lengkap sumber artikel ini.

Catatan: Ganti ID_TWITTER dan ID_FACEBOOK dengan ID Twitter serta ID Facebook Anda.

Ketiga, simpan template blog Anda.


Kalau berkenan Kunjungi http://eltelu.blogspot.com/2011/12/membuat-menu-ikon-mengapung.html

Bagikan Artikel ini