Tips dan Trik Blogger

Membuat CSS Dock Menu



Coba deh Liat menu di [Dunia Blogger] Menunya animasi kan...



Saya dapet Dari blognya mas O-om dan sumber aslinya di http://www.ndesign-studio.com/blog/design/css-dock-menu/ setelah saya liat liat akhirnya tertarik juga tuh... di situ juga dijelasin sih... caranya...dan dwsediakan juga link dwnloadnya lagi... baik yah... untuk membuat menu kayak gitu.... dan sekalian belajar ....!!!!




Untuk membuat Menu Tersebut caranya cukup Sederhana... hal ini agar memudahkan teman-teman semua supaya gak ribet untuk mencobanya... sebab filnya sudah saya simpan di GooglePages saya.. he he

Sekarang Copy deh Kode di bawah ini......!!!

<script src="http://adesanusi.googlepages.com/jquery.js" type="text/javascript"> </script> <script src="http://adesanusi.googlepages.com/interface.js" type="text/javascript"> </script> <link href="http://adesanusi.googlepages.com/style.css" rel="stylesheet" type="text/css"> <!--[if lt IE 7] > < style type="text/css" > .dock img { behavior: url(http://adesanusi.googlepages.com/iepngfix.htc) } < /style > < ![endif]-->


Abis di Copy Silahkan Masuk Ke blogger dan Pilih [Layout] - [Edit HTML] dan kemudian Paste/Tempatkan kode yang tadi Tepat di bawah Kode <head>

Jika sudah Selesai kembali baca artikel ini yah... he he kemudian Copy kode Berikut ini: 


<script type='text/javascript'>
   
    $(document).ready(
        function()
        {
            $(&#39;#dock&#39;).Fisheye(
                {
                    maxWidth: 50,
                    items: &#39;a&#39;,
                    itemsText: &#39;span&#39;,
                    container: &#39;.dock-container&#39;,
                    itemWidth: 40,
                    proximity: 90,
                    halign : &#39;center&#39;
                }
            )
            $(&#39;#dock2&#39;).Fisheye(
                {
                    maxWidth: 60,
                    items: &#39;a&#39;,
                    itemsText: &#39;span&#39;,
                    container: &#39;.dock-container2&#39;,
                    itemWidth: 40,
                    proximity: 80,
                    alignment : &#39;left&#39;,
                    valign: &#39;bottom&#39;,
                    halign : &#39;center&#39;
                }
            )
        }
    );

</script>




Dan Sekarang Pasang Kode di yang bacgroudnya warna biru muda... dan pasang kode tepat di Atas kode </head> Perhatikan di situ ada / [garis miring] awas yah jangan salah... kode </head> adanya di kedua paling bawah...silahkan pasnag tuh kode tasi di atas yah.... sekali lagi di atas kode </head> Sekarang [SAVE] dulu... jika sudah di Simpan Tinggal Pasang Kode untuk menampilkan Menunya...



Sebelumya kan berada di [Edit HTML] sekarang beralih ke [Page Element] dan tambahkan Widget yah.... Widgetnya yang [HTML/JavaScrift] pasti ada kok.....




kalo udah sekarang

Copy Lagi Kode yang Ini.... he eh... Copy mulu yah... tar gak bisa tidur lagi........!!!





<div class="dock" id="dock">
<div class="dock-container" style="left: 395px; width: 200px;">
<a class="dock-item" href="http://dunia-blogger.blogspot.com/" style="width: 40px; left: 0px;"> <img alt="home" src="http://i261.photobucket.com/albums/ii65/adephotobucket/home.png" /> <span style="display: none;"> Home </span> </a>
<a class="dock-item" href="http://dunia-blogger.blogspot.com/search/label/Blog" style="width: 40px; left: 40px;"> <img alt="Blog Tutorial" src="http://i261.photobucket.com/albums/ii65/adephotobucket/blog.png" /> <span style="display: none;"> Blog </span> </a>
<a class="dock-item" href="http://dunia-blogger.blogspot.com/search/label/Tips%20and%20Trik" style="width: 40px; left: 80px;"> <img alt="Tips And Trik" src="http://i261.photobucket.com/albums/ii65/adephotobucket/tips.png" /> <span style="display: none;"> Tips and Trick </span> </a>
<a class="dock-item" href="http://dunia-blogger.blogspot.com/search/label/Tutorial" style="width: 40px; left: 120px;"> <img alt="Tutorial" src="http://i261.photobucket.com/albums/ii65/adephotobucket/tutorial.png" /> <span style="display: none;"> Tutorial </span> </a>
<a class="dock-item" href="http://dunia-blogger.blogspot.com/search?max-results=200" style="width: 40px; left: 160px;"> <img alt="Daftar isi Dunia Blogger" src="http://i261.photobucket.com/albums/ii65/adephotobucket/isi.png" /> <span style="display: none;"> Daftar Isi </span> </a>
</div>
</div>





Saya Berii Background Warna Itu Artinya Mewakili 1 Menu Karena di di blog ini baru menampilkan lima menu....




Silahkan Paste Kode Tersebut di Widget [HTML/JavaScript] Jangan Copy paste yang di warnain aja.... tapi semuanya..... Silahkan Ganti Kode yang warna merah [di contoh ini yang ada akhiran.png]... dan ganti dengan Gambar yang mau di tampilkan........Sedangkan kode yang miring dan ada coretan itu ganti dengan link tujuan kita.....OK deh Selamat Mencoba... Semoga Berhasil...!!!


Catatan:...!! Waktu Nyoba di Save pas bagian pasang kode yang pertama itu ada kode error pada bagian [ <link href="http://adesanusi.googlepages.com/style.css" rel="stylesheet" type="text/css">] maka solusinya saya tambahkan kode </link> menjadi seperti ini... <link href="http://adesanusi.googlepages.com/style.css" rel="stylesheet" type="text/css"></link>.
11 Komentar untuk "Membuat CSS Dock Menu"

NAH INI BARU BISA DI PELAJARI OLEH AKU YG BLOM LIHAI DI BIDANG BLOG HEHEHE

KEREN BOZ...SAMPAI2 DI POSTING SECARA AKURAT HEHHE

BELAJAR AH....:D

@Frank:
+++++++++
Selamat Mencoba... Semoga Berhasil......

@Artha:
He he... makasih dah Berkomentar... he he Semoga Terhibur .... he he
+++++++++

wah bagus ilmunya mas..bisa dikembangkan ni...

udah di add link mas :)) betewe diriku lum ngerti css. jadi sedih

Bingung...new blogger sih...
Ajarin yak...

kok widget html./scrip ga ada? adanya html/script converter

lo napa gak ngajar aja.. hehehee.. :)

kayaknya artikel ini lbh mudah bwt gw yg msh belajar, coba ah....thanx bozz...

mau tnya donk gmana caranya bikin sub.sub,, kyak home dll itu diblog hehe makasih

Terima Kasih telah Mengunjungi Blog ini dan Silahkan tinggalkan Komentar Anda...

Back To Top