Membuat Menu Ikon Mengapung

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://lh6.googleusercontent.com/-BFJWfCvUjHU/Tvx4pt9PgLI/AAAAAAAABNs/Cp3crxCvCTE/s800/twittericon.png'/></a> <a href='http://www.facebook.com/ID_FACEBOOK' target='_blank' title='Facebook'><img alt='Facebook' src='https://lh3.googleusercontent.com/-AxoB48FsPoo/Tvx3XcndowI/AAAAAAAABNc/h57ayCaeXIA/s800/facebookicon.png'/></a> <a href='/feeds/posts/default' target='_blank' title='RSS'><img alt='RSS' src='https://lh6.googleusercontent.com/-V4NP3bbpDe0/Tvx4pLyN5xI/AAAAAAAABNo/KQ1rvo8WtTA/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

2 Komentar untuk "Membuat Menu Ikon Mengapung"

  1. Kang Sofi, ulasannya tentang membuat menu ikon mengapung sangat menarik nih, dan kayaknya pelu dicoba. :)

    btw, kode yang harus dicopy untuk membuat menu ikon mengapung ini mana ya Kang, kok di sini gak ada? @_@

    BalasHapus
  2. terima kasih om atas comment nya

    BalasHapus

Rule Komentar :
1. Berkomentarlah dengan sopan
2. Tidak boleh berkomentar yang mengandung SARA
3. Komentar dengan livelink akan di hapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel