[ASK] Menu Horizontal yang menarik.

Kawan" di NS ane lagi cari cari menu nih, buat blog ane.
ane pngen menu horizontall ntu yang agak keren n cool,

ada yg punya ide gk ??

Ada gan Ini menu Tampilan nya manteb banget serasa Blogger Profesional.

DEMO CEK DI SINI http://kawaliblog6.blogspot.com/2011/04/menu-navigasi-css-mac-dock-bottom-with.html

Cara membuatnya :
Login blogger
Rancangan, Edit Html, Cari kode

Code:

]]></b:skin>

Dan Simpan kode berikut diatasnya :

Code:

/* ---------------
Menu navigasi CSS Mac  Dock bottom with jQuery
---------------------------------- */
#dock2 {
    width: 100%;
    bottom: 0px;
    position: relative;
    left: 0px;
}
.dock-container2 {
    position: relative;
    height: 50px;
    background: url(https://lh3.googleusercontent.com/-fmqNzHvyjbU/TYk7WUmoQaI/AAAAAAAAAaI/rhdjOhBd3pk/s1600/dock-bg.gif);
    padding-left: 20px;
}
a.dock-item2 {
    display: block;
    font: bold 12px Arial, Helvetica, sans-serif;
    width: 40px;
    color: #000;
    bottom: 0px;
    position: absolute;
    text-align: center;
    text-decoration: none;
}
.dock-item2 span {
    display: none;
    padding-left: 20px;
}
.dock-item2 img {
    border: none;
    margin: 5px 10px 0px;
    width: 100%;
}

selanjutnya simpan kode berikut diatas kode

Code:

 </head>

:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/interface.js"></script>

simpan script berikut ditas kode

Code:

</body>

:

Code:

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

</script>

SIMPAN TEMPLATE!


terakhir pemanggilanya pada html, simpan sesuai keinginan baik itu pada edit html posting ataupun html/java script pada menu gadget :

Code:

div class="dock" id="dock2">
  <div class="dock-container2">
  <a class="dock-item2" href="#"><img src="https://lh5.googleusercontent.com/-Tzvk7gEQayM/TYk7hMbzrBI/AAAAAAAAAaY/AKv8REtJ2Bo/s1600/home.png" alt="home" /></a>
  <a class="dock-item2" href="#"><img src="https://lh4.googleusercontent.com/-RW1CNT_pjaY/TYk7bcwN9QI/AAAAAAAAAaQ/vS59D1M5euI/s1600/email.png" alt="contact" /></a>
  <a class="dock-item2" href="#"><img src="https://lh4.googleusercontent.com/-wPaS5JWh1hM/TYk7pWPBenI/AAAAAAAAAao/B9yKqG2NaA0/s1600/portfolio.png" alt="portfolio" /></a>
  <a class="dock-item2" href="#"><img src="https://lh5.googleusercontent.com/-ZyW9SH0hcY0/TYk7n6DktqI/AAAAAAAAAak/T1B6jxb7Cgo/s1600/music.png" alt="music" /></a>
  <a class="dock-item2" href="#"><img src="https://lh6.googleusercontent.com/-uYoefPPwTQE/TYk7xytlqNI/AAAAAAAAAa0/ep3940GHq8c/s1600/video.png" alt="video" /></a>
  <a class="dock-item2" href="#"><img src="https://lh6.googleusercontent.com/-bwKSU_xFjIc/TYk7ewTZ9bI/AAAAAAAAAaU/yyOGMdInqfk/s1600/history.png" alt="history" /></a>
  <a class="dock-item2" href="#"><img src="https://lh3.googleusercontent.com/-cBGBsQkJ54I/TYk7UK9B-QI/AAAAAAAAAaE/qWc3jO0NVC8/s1600/calendar.png" alt="calendar" /></a>
  <a class="dock-item2" href="#"><img src="https://lh3.googleusercontent.com/-UovHAEdtbqA/TYk7rLHFe0I/AAAAAAAAAas/pjKjOKCE8Wk/s1600/rss.png" alt="rss" /></a>
  <a class="dock-item2" href="#"><img src="https://lh5.googleusercontent.com/-igrXkJUyY_E/TYk7uSY6uRI/AAAAAAAAAaw/5VPf85w8vjE/s1600/rss2.png" alt="rss" /></a>
  </div>
</div>

Enjoy!

ijin make ane gan

hehe :D

Oke Silahkan gan...


Ane Izin Edit Post ente he he

okeehh kerennn
mantap kk...
langsung ke TKP ah....

NS Admin wrote:

selanjutnya simpan kode berikut diatas kode :

Code:

[code]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/interface.js"></script>[/code]

simpan script berikut ditas kode[color=red] </body>[/color] :

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

</script>

SIMPAN TEMPLATE!

di letak dimana nya kk ???
bingung ane . . .

YEah.....!!!!!!!
Percobaan pertama gagal...
Owhh men FAILED.

kk bantuin dong ,, di jlasin ku masih awam nii kk...
tapi..

ekintung wrote:YEah.....!!!!!!!
Percobaan pertama gagal...
Owhh men FAILED.

kk bantuin dong ,, di jlasin ku masih awam nii kk...
tapi..

Maaf Bener gan...

Ane lupa lox Forum ini Support code Html jadi kode2 tertentu kgak bisa muncul...

COba sekarang di Ulangi pasti bisa...

Maaf sekali lagi

maaf OOT

skin forum di ganti apa nih ???

Nyerah kk....
5 kali coba gagal maning...
padahal keren wak menu nya...

ekintung wrote:

Nyerah kk....
5 kali coba gagal maning...
padahal keren wak menu nya...

He he Memang Terkadang ada yang ndak Support kk

Btw template ente Hasil Convert dari Wordpress ke Blogger bukan???


Lox agan mau nanti ane cari.in template yang udah otomatis menu horizontal nya Keren Gi mana???

CWL_SpinxPlat wrote:maaf OOT

skin forum di ganti apa nih ???

Ke Forum Pemberitahuan gan...

KK ada gk menu horizontal tapi pas kursor di arah kan ke salah satu menu, menu tersebut berubah wallpaper nya.....
pasif nya warna itam, pas di arahkan kursor jadi kuning gtu...
klo tw bole di share gk kk ?

ekintung wrote:KK ada gk menu horizontal tapi pas kursor di arah kan ke salah satu menu, menu tersebut berubah wallpaper nya.....
pasif nya warna itam, pas di arahkan kursor jadi kuning gtu...
klo tw bole di share gk kk ?

he he maaf nie lox yang kayak gini sy baru denger he he

Baru dengar kan ???
aq ja pusing tuh mikirin menu....
ngayal" tpi gk tw gimana cara nya...
wkwkkwkwkw

ekintung wrote:Baru dengar kan ???
aq ja pusing tuh mikirin menu....
ngayal" tpi gk tw gimana cara nya...
wkwkkwkwkw

coba terus gan

jgn menyerah
hehe :D

He he BEner gan...

Lox Ada usaha pasti ada jalan.

NEWBIE wrote:He he BEner gan...

Lox Ada usaha pasti ada jalan.

tp klo g bisa bisa

peruma gan

wkwkwkwkwk

CWL_SpinxPlat wrote:

NEWBIE wrote:He he BEner gan...

Lox Ada usaha pasti ada jalan.

tp klo g bisa bisa

peruma gan

wkwkwkwkwk

HA ha ikut ngakak gan
bner juga gan... kata2 ente.

jgn ngakak keterlaluan gan

kasihan orangnya

ntar dikira kita ngejek lagi. . .

^__^

patut dcoba gan..

guzpra wrote:patut dcoba gan..

Silahkan gan...