Membuat Menu Navigasi Dynamic-FX Slide di Blogger

yah....bikin navigasi menu Slide In Menu, keren karna dynamic nya...

ameykurdt udah coba bikinnya dan ternyata

sukseeees 100,5% ( heee ..

gampang kok, coba aja...jangan lupa,,langsung PRAKTEK ..

bingung seperti apa...

contoh menu dynamic'a ameykurdt yang dulu seperti ini :



yah...gk sabaran neh...

untuk membuat'a diperlukan "dikit" kreasi dalam ng-edit kode² nya...

nyantai aja ... gampang itu mah klo cuman ng-edit,,

(yang susah bikin'a) mheee...tepuk tangan dulu buat yang uda bikinin...

kodenya yang mana yak...?

Donlot dulu...tuh ada...

dah...??

extrac fail nya ,, disitu ada ssm.js ama ssmItems.js

disini kita cuma edit yang ssmItems,

klik kanan trus buka pake notepad ato MacromediaDreamwiper klo ada,,

( klo buka'a pake dreamwiper, save as nya bisa langsung ke javascript (.js), tp klo notepad ameykurdt gk tau,,)

trus yg di edit yg'mana..,?

liad bagian ini:

barFontColor="black";
barVAlign="center";
barWidth=30; // no quotes!!
barText="Blog OranG KampunG"; // <IMG> tag supported. Put exact html for an image to show.

///////////////////////////

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header

yang berwarna ganti aja (terserah,

contoh yang lain : Menu Saya, Menu (aja),
yah...kreasi mungkin yak...??

trus yang ini :

ssmItems[0]=["KAMPUNG ILMU"] //yang ini bagian header

ssmItems[1]=["Ilmu Komputer", "http://www.ilmukomputer.com", "_new"]
ssmItems[2]=["Artikel-IT", "http://www.artikel-it.com", ""]

ssmItems[3]=["TempLaTe", "http://www.finalsense.com", "", 1, "no", ""] //bikin dalam 2 kolom
ssmItems[4]=["Keren", " http://www.finalsense.com", "",1, ""]

ssmItems[5]=["Blogger Indonesia", "", ""]
ssmItems[6]=["blog-indonesia", "http://blog-indonesia.com", ""]
ssmItems[7]=["Planet Blogger", "http://www.blogger.web.id", ""]
ssmItems[8]=["Muslim Blog", "http://www.blog.muslimblog.net", ""]
ssmItems[9]=["fatihsyuhud", "http://fatihsyuhud.com", ""]
ssmItems[10]=["Edit Tag", "http://edittag.blogspot.com", ""]

ssmItems[11]=["Orang", "http://www.ameybelajarblog1.blogspot.com", "", 1, "no"] //bikin dalam bentuk 2 kolom
ssmItems[12]=["Kampung", "http://www.ameybelajarblog1.blogspot.com", "",1]

ssmItems[13]=["Keren By :", "", ""] //bikin header baru
ssmItems[14]=["Kolom-Tutorial", "http://kolom-tutorial.blogspot.com", ""]



buildMenu();

//-->

mhehehee...

ganti yang tulisan berwarna, ini adalah nama² dari button navigasi nya,,

seperti ini : MENU,About Me, Download, ( banyak yang lain ya, sasuai kondisi blog )

slesei disana, trus

yang berwarna ganti ama alamat yang di tuju sesuai button navigasi'a,,

trus ada lagi yang berwarna, ("_new") ini dimaksudkan ketika meng-kilk navigasi

button akan di buka pada Tab baru, gitu,...

minum dulu ya...biyar nyantei,,

udah ...?

save....

jangan lupa simpan'a dengan format javascript (.js)

abis tu kita UpLoad lagi kedua fail 'a,

(ingat : fail ssmItems musti yang uda di edit,

lah..knapa di upload lagi..?, agar kedua fail tersebut ada alamat URL'a

masih bingung dimana mu meng-Uploadn'a,,

salah satunya di geocities yahoo , disini ,

Log in dengan account yahoo,,

trus Upload,,klo udah jangan lupa simpan alamat URL'a,,

simpan di notepad kesayang juga bisa ,

klo punya orang kampung seperti ini :

fail ssm.js = http://www.geocities.com/jkt24_cbn/ssm.js

fail ssmItems.js = http://www.geocities.com/jkt24_cbn/ssmItems.js


ya...slesai mpe sana...

giliran ameykurdt y' minum ya...

::* untuk langkah terakhir...

Sing in di Blogger

klik menu Layout

Lalu klik Tata Letak trus Edit HTML

lalu cari kode </head> lalu tempel Kode berikut tepat di atas'a :

<style type="text/css">
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</style>

<SCRIPT SRC="http://www.geocities.com/jkt24_cbn/ssm.js" language="JavaScript1.2">
//Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/)
//Updated July 8th, 03' for doctype bug
//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com

</SCRIPT>
<SCRIPT SRC="http://www.geocities.com/jkt24_cbn/ssmItems.js" language="JavaScript1.2"></SCRIPT>

("nah sekarang ameykurdt mau nanya...

alamat URL tempat upload fail yang 2 tadi masih ada kan...?")

ganti dengan masukkan alamat url masing² k tulisan yang berwarna...

trus klo mu b'kreasi warna, lebar menu navigasi, tinggi dan yang lainya

di bagian yang ini :

menuWidth=150; //* lebarnya berarti 150px*//
menuCols=2;

//* bagian Header

hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";

//* klo yang ini button ama link

linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="Left";

//* nah yang ini bagian bar nya ( mheeee ,,pub kale ya... ),klo bartext ameykurdt yang ada tulisan ini "Blog Orang Kampung" *//

barBGColor="#444444";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // lebar pab nya mheee *//

mudah² ngerti ya...

nah, klo masih bingung ama pe'warna'an dsini ada petunjuk kombinasi warna

untuk web/blog. Tubruk aja disini


abis tu simpan,,

coba Liad hasilnya,,

klo masih ragu atau gk sukses sama sekali, c'loteh aja di shout box ,,

keep Fight ...!!!



"Selamat Mencoba sambil Balajar"