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
nah sebelum memulainya
jangan lupa untuk membackup dulu template anda
di klik dulu Download Template Lengkap
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 + "search/label/?max-results=4"'>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
Bagi Anda Yang Ingin Copy Paste Artikel Saya
Harap Mencantumkan Sumbernya
Terima Kasih
29 September 2009 aRi isTiadi
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>
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: "headerbar", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", 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: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
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