Rabu, 14 Januari 2009

283. Cara Buat Menu Navigasi 3 Dimensi

Kali ini Ziliwu membahas cara buat menu navigasi 3 dimensi,menu navigasi pada template standard umumnya adalah menu navigasi yang standard pula.seperti menu navigasi pada blog saya yang masih menggunakan menu navigasi dari template.Nah biar menu navigasi di blog anda jadi keren dan inovatif anda bisa mencoba menggunakan menu navigasi 3dimensi.oke tanpa panjang lebar kita langsung aja membahas tips ini, biar nggak bosan dengan ocehan lusalary :

Ikuti step by step dengan cermat dan teliti ya :
1-Log in ke account blogger anda.
2-Click Lay out---->EDIT HTML.
3-Cari kode ]]></b:skin> didalam template anda.
4-Copy pastekan code di bawah ini tepat diatas kode ]]></b:skin>.


/* Object Dock Nav */
.dock {


position: relative;


height: 50px;


text-align: center;


}


.dock-container {


position: absolute;


height: 50px;


background: url(http://i584.photobucket.com/albums/ss285/vanesalu/BGDock.png);


padding-left: 20px;


}


a.dock-item {


display: block;


width: 40px;


color: #FFFFFF;


position: absolute;


top: 0px;


text-align: center;


text-decoration: none;


font: bold 12px Arial, Helvetica, sans-serif;


}


.dock-item img {


border: none;


margin: 5px 10px 0px;


width: 100%;


}


.dock-item span {


display: none;


padding-left: 20px;


}



-Kode pada script yang saya tandai dengan warna merah bisa anda edit.
-Ganti url backgrounds dengan url image anda sendiri, jika ingin menggantinya tetapi sebaiknya anda ganti sebab saya tidak menjamin masih menyimpan gambar background tersebut.dan jika anda tidak ingin menggunakan gambar untuk backgroundnya hapus url gambar sehingga menjadi seperti ini background:#FFFFFF.kode FFFFFF adalah kode warna backgroundnya.
-Kode FFFFFF adalah kode warna text. untuk kode warna klik disini !!.
5-Kemudian copy pastekan code di bawah ini tepat di bawah kode ]]></b:skin>.


<script src='http://h1.ripway.com/lusalary/j_query.js ' Gantitype='text/javascript'/>
<script src=' http://h1.ripway.com/lusalary/interface_query.js ' type='text/javascript'/>

Perhatian :
-Ganti Direct Link yang berwarna merah dengan Direct Link anda sendiri, Hal ini untuk mencegah terjadinya over load bandwith tempat saya menyimpan script JS tersebut. Anda bisa Download Script JSnya up load ke hostingan anda.
@-Script js j_query.js--->Download
@-Script js interface_query.js--->Download
Cara mendapatkan Direct Link anda sendiri Baca Disini !!.
6-Terakhir cari code <div id="header-wrapper">, jika sudah ketemu copy pastekan kode di bawah ini tepat di bawah kode <div id="header-wrapper">.




<div class='dock' id='dock'>


<div class='dock-container'>


<a class='dock-item' href='GANTI TULISAN INI DENGAN URL ANDA'><img alt='home' src='http://i584.photobucket.com/albums/ss285/vanesalu/Home-1.png'/><span>Home</span></a>


<a class='dock-item' href='GANTI TULISAN INI DENGAN URL ANDA'><img alt='contact' src='http://i584.photobucket.com/albums/ss285/vanesalu/MyYahoo-1.png'/><span>Contact</span></a>


<a class='dock-item' href='GANTI TULISAN INI DENGAN URL ANDA'><img alt='portfolio' src='http://i584.photobucket.com/albums/ss285/vanesalu/Satellite-1.png'/><span>Internet</span></a>


<a class='dock-item' href='GANTI TULISAN INI DENGAN URL ANDA'><img alt='music' src='http://i584.photobucket.com/albums/ss285/vanesalu/Airport-1.png'/><span>Travel</span></a>


<a class='dock-item' href='GANTI TULISAN INI DENGAN URL ANDA'><img alt='video' src='http://i584.photobucket.com/albums/ss285/vanesalu/BisnisOnline-1.png'/><span>My Businnes</span></a>






</div>


</div>


<script type='text/javascript'>






$(document).ready(


function()


{


$('#dock').Fisheye(


{


maxWidth: 50,


items: 'a',


itemsText: 'span',


container: '.dock-container',


itemWidth: 40,


proximity: 90,


halign : 'center'


}


)


}


);


</script>

Keterangan ;
-Ganti tulisan yang warna kuning dengan link yg ingin anda pasang di menu navigasi 3D ini.
-Ganti tulisan yang warna merah dengan judul dari link yang anda pasang.
-Ganti url icon navigasi 3D yang saya tulis dengan warna putih dengan icon yang anda sukai icon pada script diatas hanyalah sebagai contoh,silahkan anda googling untuk mencari icon favorite anda, download iconnya dan upload ke hosting image gratisan, agar icon yg muncul pada menu navigasi 3D ini sesuai dengan keinginan anda, maka sebaiknya anda edit ukuran iconnya sesuai selera anda. Sebab url icon pada contoh script apabila terhapus dari hosting tempat saya menyimpan gambar tersebut maka icon navigasinya tidak akan muncul.
Contoh navigasi 3D seperti di bawah ini, klik gambar untuk lebih jelas :



Dari blog master: Asuindo

2 komentar:

  1. bro koq gambarny numpuk jadi satu ya....kira2 apanya ya bro yang salah?????bls di email q aja arbaini12@gmail.com,,,bls ya bro butuh banget nih...............thanks........

    BalasHapus
  2. bro koq gambarny numpuk jadi satu ya....kira2 apanya ya bro yang salah?????bls di email q aja arbaini12@gmail.com,,,bls ya bro butuh banget nih...............thanks........

    BalasHapus

Kembali ke atas

Kembali ke atas