Menu

Last Minute Posts

29 September 2009 aRi isTiadi

sudah lama saya menginginkan
bagaimana cara pasang Flash intro atau intro blog di blogger..
ternyata sudah di jawab oleh kang jaloe

nah kali ini saya akan menerangkan secara detail bagaimana cara membuat flash intro di blogger

mau pasang flash intro di blog kamu??
mau?
mau?
mau?


sebelum memulai ke EDIT HTML
kita harus memiliki file flashnya
kalau tidak mau repot repot bikin file flashnya...
tema teman bisa melihat lihat atau memilih milih file flashnya
bisa mengunjungin di sini wyomingwebdesign
atau kalau anda ingin berkreatifitas sendiri
bisa mendownload software ALEO FLASH BANNER




dah ketemu file flash yang cocok buat kamu?
nah kalau sudah sekarang kita upload file flash tersebut
di sini saya menggunakan hosting dari fileave

klik link di bawah ini bagi yang mau daftar
FILEAVE









kalau sudah selesai mendaftar di FILEAVE
selanjutnya kita mengupload file flash yang baru kita download atau baru anda buat

lalu anda login dulu di account FILEAVE
nah kalau sudah klik Files





setelah itu pilih Upload files



klik telusuri lalu cari file flash
kalau sudah klik UPLOAD

nah setelah file sudah di UPLOAD
kita kembali lagi ke FILES
setelah itu klik kanan mouse pilih copy link flash intronya
atau bagi yang menggunakan mozilla versi bahasa indonesia
seperti ini contohnya


simpan di notepad dahulu










selanjutnya

1-Login dahulu di account blogger anda

2-Pilih Tata Letak

3-Pilih Edit HTML

untuk menghindari sesuatu yang tidak di inginkan
jangan lupa untuk membackup dulu template anda
di klik dulu Download Template Lengkap
nah sebelum memulainya
kasih tanda ceklist di kotak yang sebelah kiri Expand Template Widget


coba anda cari kode berikut:
<body>

kalau sudah ketemu
Copy kode di bawah ini dan letakan tepat di bawah <body>

<div id='flashintro'>
<div align='center'> <p style='padding:10px;'> <object height='600' width='800'> <param name='movie' value='MYFLASH.swf'/> <embed height='600' src='Url Flash' width='800'> </embed> </object> </p><p style='padding-top:5px;font-size:18px;font-weight:bold;color:#fff;'><a expr:href='data:blog.homepageUrl + &quot;search/label/?max-results=4&quot;'>skip intro</a></p> </div>
</div>



Catatan : Ganti url flash dengan alamat / url flash yang anda simpan di notepad tadi
jangan lupa sesuaikan juga nilai height dan width dengan ukuran flash anda.





Selanjutnya cari tag <b:includable id='main'> - atau bisa dengan ID yang lai
NB:berhubungan tag <b:includable id='main'> ada banyak
kode tersebut bisa anda letakan di ID header wraper
seperti ini contoh kodenya

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='catatan pelajaran sekolah (Header)' type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='main'>








nah kalau sudah ketemu
copy kode di bawah ini dan letakan persis di bawah kode <b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
body {
background-color: #000000;
background-image: none;
}
#flashintro {
text-align:center;
margin:auto;
padding:auto;
}
#outer-wrapper{display:none;}
</style>
<b:else/>
<style>#flashintro{display:none;}</style>
</b:if>



kemudian Save Template





Catatan :

anda bisa mengganti
background-color: #000000;
background-image: none;
sesuai yang anda inginkan




untuk menghilangkan intro flash di dalam halaman Page Elemens , cari tag ]]></b:skin> , dan sebelum tag tersebut di atasnya masukan kode ini.
body#layout #flashintro {display:none;}





Pengaturan Untuk Halaman Depan ( tab Home )

Selanjutnya jika teman mempunyai tab menu/ navigasi maka halaman depan-nya yang biasa di wakili dengan menu Home/depan/beranda mesti di atur ke halaman search/label/?max-results=4 atau 5/6 dst yakni;
<a expr:href='data:blog.homepageUrl + "search/label/?max-results=4"'> Home </a>



Begitu juga untuk link Home di Page Navigation nya ( yang ada di bawah Older - Home - Newer ), untuk Home nya atur dengan link di atas.


dah itu saja caranya
mudah bukan...?


masih bingung atau belum berhasil
tanyakan saja


SUMBER:CATALOG TUTORIAL


PERHATIAN..!
Bagi Anda Yang Ingin Copy Paste Artikel Saya
Harap Mencantumkan Sumbernya
Terima Kasih

27 September 2009 aRi isTiadi

Bikin widget DD Drop Down Panel bahasa indonesianya kalo tidak salah DD panel geser bawah
lagi jelajahin dynamicdrive,terus ketemu widget ini.
kayaknya bagus buat di blog
widget memiliki multi guna
mau lihat contohnya
klik >DI SINI
bisa buat tempat profil,banner teman anda,link teman anda dll
ya sudah saya posting biar teman teman kalau mau coba

dah lihat belum?
mau punya widget seperti itu?
oke ikuti langkah langkahnya

pertama:
Login dahulu di account blogger anda
kedua:
Pilih Tata Letak
ke tiga:
Pilih Edit HTML

bagi yang navbarnya belum di hilangkan harus di hilangkan dahulu
ini kodenya:

#navbar-iframe {
display: none !important;
}

dan letakan di bawah kode
/* Use this with templates/template-twocol.html */








kemudian anda cari kode:
<head>

kalau sudah ketemu kode tersebut
copy kode berwarna biru di bawah ini dan di letakan persis di atas kode <head>

<link href='http://ariistiadi.googlepages.com/dddropdownpanel.css' rel='stylesheet' type='text/css'/>

<script src='http://ariistiadi.googlepages.com/dddropdownpanel.js' type='text/javascript'>
</script>


ini screen shoot nya










setelah itu anda cari kode
<body>

kalau sudah ketemu
copy kode berwarna merah di bawah ini dan letakan persis di bawah kode <body>

<div id="mypanel" class="ddpanel">
<div id="mypanelcontent" class="ddpanelcontent">

<p style="padding:10px">
<img src="http://i36.tinypic.com/kak1t0.jpg" class="closepanel" style="float:left; width:200px; height:172px; margin:0 10px 10px 0" />The Milky Way is a barred spiral galaxy that is part of the Local Group of galaxies. Although the Milky Way is one of billions of galaxies in the observable universe,[4] its special significance to humanity is that it is the home galaxy of our Solar System. The plane of the Milky Way galaxy is visible from Earth as a band of light in the night sky, and it is the appearance of this band of light which has inspired the name for our galaxy. It is extremely difficult to define the age at which the Milky Way formed, but the age of the oldest star in the Galaxy yet discovered, HE 1523-0901, is estimated to be about 13.2 billion years, nearly as old as the Universe itself. -Source: <a href="http://en.wikipedia.org/wiki/Milky_way" style="color:white">Wikipedia</a>.
</p>
<br style="clear: left" />
<p>Note: Click on any link or the Milky Way Image auto closes the panel.</p>

</div>
<div id="mypaneltab" class="ddpaneltab">
<a href="#"><span>Toggle</span></a>
</div>

</div>

ini screen shoot nya


lalu klik SIMPAN TEMPLATE





NB:
anda bisa mengganti
TEKS dan URL gambar di bawah ini sesuai yang anda inginkan

<img src="http://i36.tinypic.com/kak1t0.jpg" class="closepanel" style="float:left; width:200px; height:172px; margin:0 10px 10px 0" />The Milky Way is a barred spiral galaxy that is part of the Local Group of galaxies. Although the Milky Way is one of billions of galaxies in the observable universe,[4] its special significance to humanity is that it is the home galaxy of our Solar System. The plane of the Milky Way galaxy is visible from Earth as a band of light in the night sky, and it is the appearance of this band of light which has inspired the name for our galaxy. It is extremely difficult to define the age at which the Milky Way formed, but the age of the oldest star in the Galaxy yet discovered, HE 1523-0901, is estimated to be about 13.2 billion years, nearly as old as the Universe itself. -Source: <a href="http://en.wikipedia.org/wiki/Milky_way" style="color:white">Wikipedia</a>.
</p>

<p>Note: Click on any link or the Milky Way Image auto closes the panel.</p>

hem...
itu aja caranya
masih bingung juga?....tanyakan saja....

mudah bukan


Sumber:dynamicdrive

19 September 2009 aRi isTiadi



Sejalan dengan berlalunya Ramadhan tahun ini
mari kita tingkatkat tali silahturahmi antar sesama blog


nah oleh karena itu
untuk meluruskan tujuan itu
mari kita sama sama untuk menjalin tali silahturahmi
dengan bertukar link antar sesama blogger

tersedia 16 banner yang kosong hanya cuma cuma(alias GRATIS)
bagi anda yang menginginkan banner anda berada di blog

persyaratannya:
banner tidak unsur komersial&bisnis(contohnya:PTC)
tidak ada unsur porno
memasang link atau banner saya
ukuran banner 125 x 125


bagaimana kalo space nya sudah penuh?
jangan berkecil hati
nah karena untuk menjalin tali silahturahmi
saya akan menambahkan anda di bloglist saya

berminat?
silahkan kirimkan URL blog anda
berserta URL gambar anda

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Sejalan dengan berlalunya Ramadhan tahun ini
Kemenangan akan kita gapai

Selamat Hari Raya Idul Fitri
Taqobalallahu minna wa minkum
Mohon maaf lahir dan bathin
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-






18 September 2009 aRi isTiadi

Kemarin ada teman yang mampir ke blog saya
ada yang berkomentar "gimana sih cara buat Emoticon kayak gini? koq bagus sih"
nah oleh karena itusaya akan menjawab pertanyaan sobat blogger
mungkin teman teman mau coba?


Mau Emoticon yang Lucu Lucu ini ada di kotak Komentar anda?
Emoticonnya Beda dari yang lainnya lho?
mau lihat Contoh Emoticon yang lucu lucunya?
nih screen shootnya

mau lihat yang gambar geraknya?
ada tuh di kotak komentar saya

Mau gak tuh pasang Emoticon Yang kayak gitu?
kalo Mau yuk ikuti langkah langkahnya

pertama:
Login dahulu di account blogger anda
kedua:
Pilih Tata Letak
ke tiga:
Pilih Edit HTML

untuk menghindari sesuatu yang tidak di inginkan
jangan lupa untuk membackup dulu template anda
di klik dulu Download Template Lengkap
biar engga kelamaan




nah sebelum memulainya
kasih tanda ceklist di kotak yang sebelah kiri Expand Template Widget


coba anda cari kode HTML berikut ini
<p class='comment-footer'>

WARNING!!
AWAS KODE INI ADA 2 LHO,JADI JANGAN SAMPAI SALAH TEMPAT


ini Kode lengkapnya
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>


copy kode yang berwarna biru di bawah ini dan letakan di bawah kode
<p class='comment-footer'>

<b><img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/white-dog-blue-nose-emoticons-3.gif'/>
:f
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/white-dog-blue-nose-emoticons-1.gif'/>
:D
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/white-dog-blue-nose-emoticons-6.gif'/>
:-D
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/white-dog-blue-nose-emoticons-2.gif'/>
:)
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-41.gif'/>
;;)
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/white-dog-blue-nose-emoticons-5.gif'/>
:!
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-teddy-bear-in-cold-emoticons.gif'/>
:$
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-61.gif'/>
x(
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-81.gif'/>
:?
</b>

<b>
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-110.gif'/>
:@
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-71.gif'/>
:~
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-171.gif'/>
:|
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-51.gif'/>
:))
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-21.gif'/>
:(
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-181.gif'/>
:((
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-131.gif'/>
:o </b>





masih bingung cara nempatin kodenya?
nih saya kasih contoh penempatannya

<p class="'comment-footer'">

<b><img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/white-dog-blue-nose-emoticons-3.gif'/>
:f
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/white-dog-blue-nose-emoticons-1.gif'/>
:D
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/white-dog-blue-nose-emoticons-6.gif'/>
:-D
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/white-dog-blue-nose-emoticons-2.gif'/>
:)
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-41.gif'/>
;;)
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/white-dog-blue-nose-emoticons-5.gif'/>
:!
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-teddy-bear-in-cold-emoticons.gif'/>
:$
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-61.gif'/>
x(
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-81.gif'/>
:?
</b>

<b>
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-110.gif'/>
:@
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-71.gif'/>
:~
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-171.gif'/>
:|
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-51.gif'/>
:))
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-21.gif'/>
:(
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-181.gif'/>
:((
<img border='0' src='http://i242.photobucket.com/albums/ff196/rodadepan/cute-white-kitten-head-emoticon-131.gif'/>
:o </b>


<b:if cond="'data:post.embedCommentForm'">

<b:include data="'post'" name="'comment-form'/">

<b:else>

<b:if cond="'data:post.allowComments'">


<a href="http://www.blogger.com/%27data:post.addCommentUrl%27" onclick="'data:post.addCommentOnclick'"><data:postcommentmsg></data:postcommentmsg></a>

</b:if>
</b:else>
</b:include></b:if></p>







nah kalau sudah,coba nada cari kode di bawha ini
</body>

dah ketemu belum?
kalau sudah copy kode di bawah ini
dan letakan persis di atas kode
</body>

<script src='http://ariistiadi.googlepages.com/ucingaja.js' type='text/javascript'/>


dah sekarang anda klik SIMPAN TEMPLATE

NB:ADA BEBERAPA TEMPLATE YANG YAANG TIDAK KOMPATIBLE
DENGAN EMOTICON YANG SAYA BUAT
SEHINGGA EMOTICONNYA TIDAK BISA MUNCUL



dah kayaknya itu aja
belum berhasil...? tanyakan saja

17 September 2009 aRi isTiadi

jQuery Image Magnify atau anama lainnya auto image zoom in dan auto image zoom out
kalo bahasa indonesianya otomatis memperbesar foto dan otomatis memperkecil foto

mau lihat contohnya
klik DISINI

bagi yang mau coba silahkan ikuti langkah langkahnya
pertama:
masuk dulu di account blogger anda
kedua:
pilih Tata Letak
ketiga:
Pilih Edit HTML

coba cari kode di bawah ini
<head>

kalau sudah ketemu copy kode yang berwarna merah.
letakan kode yang berwarna merah persis di bawah kode
<head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://ariistiadi.googlepages.com/jquery.magnifier.js' type='text/javascript'>

/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>



bingung cara nempatinnya
nih saya kasih contoh penempatan kodenya

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>


<head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://ariistiadi.googlepages.com/jquery.magnifier.js' type='text/javascript'>

/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script&gt;

masih bingung juga?
nih screen shootnya


klik Simpan Template

nah selanjutnya kita pindah ke Elemen Halaman

klik Tambah Gadget


kalau dah di klik
pilih HTML/JavaScript

setelah itu copy kode di bawah ini
<img style="width:200px; height:150px" src="http://ariistiadi.googlepages.com/Clipart-Cartoon-Design-04.gif" class="magnify"/>

<img border="0" src="http://ariistiadi.googlepages.com/Web_2_0_RSS_Icon_by_datamouse.gif" class="magnify"/>

silahkan ganti :
link http://ariistiadi.googlepages.com/Web_2_0_RSS_Icon_by_datamouse.gif dan http://ariistiadi.googlepages.com/Clipart-Cartoon-Design-04.gif gambar milik saya dengan link gambar milik anda

jangan lupa setiap anda ingin menambah gambarnya kode
" class="magnify"
contohnya:
<img src="gambaranda" class="magnify" border="0" />

jangan lupa klik SIMPAN




udah itu aja caranya
mudah bukan...?
belum berhasil juga..? tanyakan saja oke


sumber:
www.dynamicdrive.com

14 September 2009 aRi isTiadi

bikin Accordion menu alias menu yang bisa kebuka dan ketutup secara otomatis

banyak dari teman teman yang menanyai gimana sih
bikin menu yang bisa kebuka dan ketutp secara otomatis
contohnya yang saya pakai di sidebar saya




karena banyak yang bertanya gimana cara membuatnya
oke deh saya akan kasih tutorialnya



pertama
Login dulu di Account blogger anda
kedua
pilih Tata Letak
ketiga
klik Edit HTML

cari tag HTML di bawah ini:
<head>

kalau sudah copy kode yang berwarna merah
dan paste di atas kode
<head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://ariistiadi.googlepages.com/ddaccordion1.js' type='text/javascript'>

</script>



kalo masih bingung
seperti ini contoh penempatannya


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://ariistiadi.googlepages.com/ddaccordion1.js' type='text/javascript'>

</script>


<head>


masih bingung juga?
nih saya kasih screen shootnya





terus coba cari kode yang berwarna hijau
</head>

kalo sudah ketemu
copy kode kode yang berwarna biru dan paste di bawah kode yang berwarna hijau
</head>

<script type='text/javascript'>

ddaccordion.init({
headerclass: &quot;headerbar&quot;, //Shared CSS class name of headers group
contentclass: &quot;submenu&quot;, //Shared CSS class name of contents group
revealtype: &quot;mouseover&quot;, //Reveal content when user clicks or onmouseover the header? Valid value: &quot;click&quot;, &quot;clickgo&quot;, or &quot;mouseover&quot;
mouseoverdelay: 200, //if revealtype=&quot;mouseover&quot;, set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: [&quot;&quot;, &quot;selected&quot;], //Two CSS classes to be applied to the header when it&#39;s collapsed and expanded, respectively [&quot;class1&quot;, &quot;class2&quot;]
togglehtml: [&quot;&quot;, &quot;&quot;, &quot;&quot;], //Additional HTML added to the header when it&#39;s collapsed and expanded, respectively [&quot;position&quot;, &quot;html1&quot;, &quot;html2&quot;] (see docs)
animatespeed: &quot;normal&quot;, //speed of animation: integer in milliseconds (ie: 200), or keywords &quot;fast&quot;, &quot;normal&quot;, or &quot;slow&quot;
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

</script>

nih screen shootnya


kalo sudah kita ke tahap selanjutnya
coba anda cari kode di bawah ini
]]></b:skin>

kalo sudah,copy kode kode di bawah ini persis di atas kode
]]></b:skin>

.urbangreymenu{width:100%}

.urbangreymenu .headerbar{font:bold 13px Verdana; color:white; background:#606060 url(http://i242.photobucket.com/albums/ff196/rodadepan/arrowstop.gif) no-repeat 8px 6px; margin-bottom:0; text-transform:uppercase; padding:7px 0 7px 31px}

.urbangreymenu .headerbar a{text-decoration:none; color:white; display:block}

.urbangreymenu ul{list-style-type:none; margin:0; padding:0; margin-bottom:0}

.urbangreymenu ul li{padding-bottom:2px}

.urbangreymenu ul li a{font:normal 12px Arial; color:black; background:#E9E9E9; display:block; padding:5px 0; line-height:17px; padding-left:20px; text-decoration:none}

.urbangreymenu ul li a:visited{color:black}

.urbangreymenu ul li a:hover{color:white; background:black}


nih screen shootnya


dah belum?
kalo sudah klik SIMPAN TEMPLATE

selanjutnya kita klik ELEMEN HALAMAN

kalau sudah di ELEMEN HALAMAN
klik Tambah Gadget


kalau dah di klik
pilih HTML/JavaScript

setelah itu copy kode di bawah ini

<div class="urbangreymenu">

<h3 class="headerbar"><a href="http://www.catatan-belajarku.blogspot.com">Catatan</a></h3>
<ul class="submenu">
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
</ul>

<h3 class="headerbar"><a href="http://www.catatan-belajarku.blogspot.com">Catatan</a></h3>
<ul class="submenu">
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
</ul>

<h3 class="headerbar"><a href="http://www.catatan-belajarku.blogspot.com">Catatan</a></h3>
<ul class="submenu">
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
<li><a href="http://www.catatan-belajarku.blogspot.com">catatan</a></li>
</ul>

</div>

jangan lupa klik SIMPAN


anda bisa mengganti link <a href="http://www.catatan-belajarku.blogspot.com">catatan</a>
dengan link milik anda sendiri

kalau anda ingin melihat lihat menu yang lain anda bisa
mengunjungi Dynamic Drive

Sumber: www.dynamicdrive.com

NB:belum berhasil? tanyakan saja