Catatan Galung

Kamis, 25 Desember 2008

Cara mengganti Tulisan Posting Lama Dan Posting Baru

Dulu pernah ada yang bertanya ke kang rohman tentang bagaimana cara menyembunyikan tulisan Posting lama atau Posting baru di blogger, dan jawaban tentang hal ini pernah kang Rohman posting pada artikel “Cara Menghilangkan Link Posting Lama”. Ternyata ada pertanyaan lain seputar “Link Posting lama Dan Posting baru” ini, kutipan pertayaan tersebut seperti ini :

Hallo,

Bagaimana caranya mengganti “posting lama” atau “Posting baru” dengan tulisan “Next” atau “previous”

Terima kasih

Tulisan Posting lama atau Posting baru tentu saja bisa anda ganti sesuai dengan keinginan anda, contoh di ganti dengan tulisan “Next” atau “Previous”, bahkan tidak hanya bisa diganti dengan dengan tulisan biasa namun “Posting lama atau Posting baru” bisa diganti dengan gambar atau icon. Yuk, kita bahas satu – satu.

Mengganti Posting lama dan Posting baru dengan Next dan Previous

Ikuti langkah-langkah berikut :

Login ke blogger dengan ID anda
Klik Tata Letak.
Klik tab Edit HTML
Klik tulisan “Download Full Template”, silahkan di backup dulu template anda (penting)
Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget
Tunggu beberapa saat sampai proses selesai.
Cari kode berikut pada template anda :

<span id='blog-pager-newer-link'>
     <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
     </span>
   </b:if>

   <b:if cond='data:olderPageUrl'>
     <span id='blog-pager-older-link'>
     <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
     </span>
   </b:if>

   <b:if cond='data:blog.homepageUrl != data:blog.url'>
     <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
     <b:else/>
     <b:if cond='data:newerPageUrl'>
       <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
     </b:if>
   </b:if>
Perhatikan kode yang saya cetak merah.
Gantilah kode <data:newerPageTitle/> dengan tulisan Next dan kode <data:olderPageTitle/> dengan tulisan Previous
Klik tombol Simpan Template
Selesai.

Sangat sederhana bukan?

Mengganti Posting lama dan Posting baru dengan Icon

Untuk mengganti Posting lama serta Posting baru dengan icon, langkah pertama tentu saja anda harus mempersiapkan icon yang akan di pakai. Sebagai contoh kang Rohman mempunyai icon seperti ini :

Uploadlah icon-icon yang anda miliki ke server tempat anda biasa menyimpan gambar, kemudian catat URl nya. Contoh kang rohman mempunyai alamat icon icon di atas sebagai berikut :

http://lh6.ggpht.com/_pt7i0nbIOCY/SVGKP6ApR7I/AAAAAAAAAok/jdxY8orBJ10/Next_thumb%5B2%5D.png?imgmax=800

http://lh3.ggpht.com/_pt7i0nbIOCY/SVGWOwXOtlI/AAAAAAAAAo8/iCG-SNx6gMI/previous_thumb%5B1%5D.png?imgmax=800

http://lh4.ggpht.com/_pt7i0nbIOCY/SVGKSFmGSsI/AAAAAAAAAos/dzYf7KrG0S4/home_thumb%5B3%5D.png?imgmax=800

Ubahlah kode di atas menjadi seperti ini :

Jika anda sudah mempunyai kode seperti diatas, langkah selanjutnya adalah tinggal memasukannya ke kode template anda, caranya seperti ini :

Login ke blogger dengan ID anda
Klik Tata Letak.
Klik tab Edit HTML
Klik tulisan “Download Full Template”, silahkan di backup dulu template anda (penting)
Beri tanda centang pada kotak kecil di samping tulisan Expand Widget Template
Tunggu beberapa saat sampai proses selesai.
Cari kode berikut pada template anda :

<span id='blog-pager-newer-link'>
     <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
     </span>
   </b:if>

   <b:if cond='data:olderPageUrl'>
     <span id='blog-pager-older-link'>
     <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
     </span>
   </b:if>

   <b:if cond='data:blog.homepageUrl != data:blog.url'>
     <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
     <b:else/>
     <b:if cond='data:newerPageUrl'>
       <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
     </b:if>
   </b:if>
Perhatikan kode yang saya cetak merah.
Gantilah kode <data:newerPageTitle/>, <data:olderPageTitle/> , dan <data:homeMsg/> dengan kode icon anda. Contoh

<span id='blog-pager-newer-link'>
     <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img alt='Next' border='0' src='http://lh6.ggpht.com/_pt7i0nbIOCY/SVGKP6ApR7I/AAAAAAAAAok/jdxY8orBJ10/Next_thumb%5B2%5D.png?imgmax=800' title='Next'/></a>
     </span>
   </b:if>

   <b:if cond='data:olderPageUrl'>
     <span id='blog-pager-older-link'>
     <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img alt='previous' border='0' src='http://lh3.ggpht.com/_pt7i0nbIOCY/SVGWOwXOtlI/AAAAAAAAAo8/iCG-SNx6gMI/previous_thumb%5B1%5D.png?imgmax=800' title='previous'/></a>
     </span>
   </b:if>

   <b:if cond='data:blog.homepageUrl != data:blog.url'>
     <a class='home-link' expr:href='data:blog.homepageUrl'><img alt='home' border='0' src='http://lh4.ggpht.com/_pt7i0nbIOCY/SVGKSFmGSsI/AAAAAAAAAos/dzYf7KrG0S4/home_thumb%5B3%5D.png?imgmax=800' title='home'/></a>
     <b:else/>
     <b:if cond='data:newerPageUrl'>
       <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
     </b:if>
   </b:if>
Klik tombol Simpan Template
Selesai

Contoh hasil yang akan anda dapatkan seperti ini :

Jika anda mempraktekan tutorial ini kemudian mendapatkan pesan error, kang Rohman menyarankan untuk mencoba lagi dengan menggunakan browser yang berbeda.

Selamat mencoba!

Senin, 22 Desember 2008

Melacak Daerah Berdasarkan IP Address

Beberapa hari kemarin ada orang menyamar dengan memakai nama Kang Rohman di shoutbox, alamat blognya pun di tulis ke blog ini yaitu http://kolom-tutorial.blogspot.com, komentar-komentarnya seakan-akan dia adalah kang Rohman. Yang menjadi sedikit dongkol adalah ketika kang Rohman ikut berkomentar, sang pengaku ini malah mengclaim dirinya sebagai rohman yang asli. Hiks… jadi penasaran ingin menyelidiki dari mana nih orang.

Sebagaimana kita ketahui bahwa shoutbox dari shoumix bisa menampilkan IP address dari sang pemberi komentar, jadi ada celah untuk menyelidiki darimana sang penyamar tersebut.

Ada banyak cara untuk melacak daerah berdasarkan IP address, salah satu cara gratisan adalah dengan menggunakan google earth atau google map. Sudah pada tahu kan tentang google earth? dengan google earth anda bisa mengintip berbagai belahan dunia hanya dari komputer kita. Yang belum pernah mencoba kehandalan google earth, silahkan download softwarenya di http://earth.google.com (sok atuh di klik link nya biar keluar situsnya).

Langkah pertama dalam penyelidikan adalah tentu saja IP address sang tersangka, dan setelah di lihat pada panel shoutbox kang Rohman mendapatkan IP address 125.164.227.180

Langkah kedua adalah mencari letak koordinat berdasarkan IP tersebut. Untuk hal ini anda bisa menggunakan berbagai tool gratisan di internet, contoh di http://www.geobytes.com/IpLocator.htm?GetLocation atau di http://www.ip2location.com. Hasil dari pengecekan terhadap IP 125.164.227.180 adalah sebagai berikut :

Dari data di atas yang di perlukan adalah koordinat Latitude serta Longitude, hasil yang di dapat Latitude : –6.1670 dan Latitude : 106.80000. Data yang di pasangkan ke google earth adalah gabungan dari keduanya yang hanya di pisahkan dengan tanda koma : –6.1670, 106.80000

Langkah ketiga adalah melakukan penelusuran dengan dengan Google earth. Buka google earth nya, lihat ke bagian panel kiri atas. Pilih tab fly to, masukan data koordinat yang tadi : –6.1670, 106.80000 klik icon search

Dan tarrrrraaaaaat…… kita langsung di bawa terbang ke tempat tujuan kita.

Pelacakan awal sudah selesai, tentu saja masih bisa di telusuri lebih akurat jika masih penasaran.

Minggu, 21 Desember 2008

Cara Membuat “breadcrumb-navigation” Di Blogger

Jika anda pemerhati revolution theme karya brian gardner, mungkin anda pernah melihat deretan navigasi sederhana di atas judul artikel yang sedang di baca, sebagai contoh screenshotnya seperti ini :

Navigasi seperti di atas lebih di kenal dengan nama “breadcrumb-navigation”. Dengan adanya “breadcrumb-navigation” maka pembaca dapat dengan mudah melihat posisi artikel yang di baca serta mencari artikel dalam satu kategori.

Apakah “breadcrumb-navigation” bisa di pasang pada template blogger? Jawabannya adalah tentu saja bisa. Dengan sedikit modifikasi pada kode template anda, maka “breadcrumb-navigation” akan segera anda miliki. Berikut adalah triknya.

Silahkan login ke blogger degan ID anda.

Klik Tata Letak.

Klik tab Edit HTML

Click Download Full Template and please back up your template first.

Silahkan beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.

Silahkan cari kode ]]></b:skin>

Copy lalu paste kode di bawah ini persis di atas kode ]]></b:skin>

.breadcrumbs{

padding:5px 5px 5px 0;

margin:0;font-size:95%;

line-height:1.4em;

border-bottom:4px double #cadaef;

}

Silahkan cari kode berikut pada template anda :

<div class='post hentry uncustomized-post-template'>

Copy lalu paste kode di bawah ini persis di bawah kode <div class='post hentry uncustomized-post-template'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<div class='breadcrumbs'>

Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »

<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:if cond='data:label.isLast != "true"'> , </b:if>

</b:loop>

</b:if> » <data:post.title/>

</div>

</b:if>

</b:if>

Klik tombol Save Template.

Tunggu beberapa saat sampai template anda tersimpan.

Buka halaman blog anda, klik pada judul artikelnya. Silahkan lihat hasilnya.

Selesai.

Jika langkah-langkah anda sudah benar, maka “breadcrumb-navigation” akan seperti ini :

Selamat mencoba!

Pasang Gambar Always On Top Plus Tombol Close

Pada posting sebelumnya telah di terangkan bagaimana cara membuat Gambar Always On Top atau gambar yang di pasang selalu tampil di depan layar walaupun pengunjung blog melakukan scrolling pada layar monitornya. Namun ternyata banyak yang rikues ke kang Rohman agar di buatkan tutorial membuat Gambar Always On Top tapi plus fasilitas Tombol Close Seperti special ads yang ada pada blog kang Rohman.

Trik yang di pakai untuk membuat Gambar Always On Top plus fasilitas Tombol Close adalah dari maxblogpress yaitu memakai skrip strip ad seperti yang pernah OOM terangkan. Namun agar bisa di terapkan seperti yang di inginkan, Kang rohman memodifikasi bagian CSS nya dan jadilah seperti yang anda lihat.

http://lh4.ggpht.com/_pt7i0nbIOCY/SU5bWCoZLjI/AAAAAAAAAnE/UD_epmQq5LY/specialads_thumb%5B2%5D.png?imgmax=800

Special ads yang Kang Rohman gunakan sengaja memakai fasilitas ini agar bagi mereka yang merasa terganggu dengan keberadaan gambar yang selalu muncul di depan layar monitor, mereka sendiri bisa menghilangkannya.

Yang penasaran ingin bisa membuat Gambar Always On Top plus fasilitas tombol Close, berikut adalah langkah- langkahnya :

langkah #1

Buatlah dua buah gambar yang ingin di tampilkan yaitu gambar utama sebesar 125 X 125 pixel ( contoh saja ) serta tombol close yang akan di pakai, contoh :

Uploadlah kedua gambar tersebut ke hosting tempat anda biasa menyimpan gambar. Catatlah alamat URL dari kedua gambar tersebut, contoh :

http://lh6.ggpht.com/_pt7i0nbIOCY/SUWuARPT5fI/AAAAAAAAAgM/GxFnybAf7-8/adspace_thumb[1].png?imgmax=800

http://lh3.ggpht.com/_pt7i0nbIOCY/SUCgHswo4DI/AAAAAAAAAf8/evva1-0AhtU/close_thumb[1].png?imgmax=800

Jangn lupa juga untuk menentukan target link untuk gambar anda, misal punya kang rohman seperti ini :

http://kolom-tutorial.blogspot.com

Langkah #2

Silahkan login ke blogger dengan ID anda.

Klik Tata Letak.

Klik tab Edit HTML.

Klik Download Template Lengkap. Silahkan di backup dulu templatenya.

Copy lalu paste kode berikut persis di atas kode ]]></b:skin>

#mta_bar {
position:fixed;
_position:absolute;
bottom:10px;
right:10px;
margin:0;
padding:0
}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .right { float:right;width:125px;margin:0;padding:0}
#mta_bar .ads {margin:0;padding:0}
#mta_bar .close {margin:0;padding:0}

Copy lalu paste kode berikut persis di atas kode </head>

<script type='text/javascript'>          
//<![CDATA[           
var mta_arr = new Array();           
var mta_clear = new Array();           
function mtaFloat(mta) {           
mta_arr[mta_arr.length] = this;           
var mtapointer = eval(mta_arr.length-1);           
this.pagetop = 0;           
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;           
this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);           
this.mtasrc.height = this.mtasrc.offsetHeight;           
this.mtaheight = this.cmode.clientHeight;           
this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);           
var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';           
mtabar = mtabar;           
eval(mtabar);           
}           
function mtaGetOffsetY(mta) {           
var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);           
var parentOffset = mta.mtasrc.offsetParent;           
while ( parentOffset != null ) {           
mtaTotOffset += parentOffset.offsetTop;           
parentOffset = parentOffset.offsetParent;           
}           
return mtaTotOffset;           
}           
function mtaFloatInit(mta) {           
mta.pagetop = mta.cmode.scrollTop;           
mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";           
}           
function closeAds() {           
document.getElementById("mta_bar").style.visibility = "hidden";           
}           
//]]> 
</script>

Copy lalu paste kode berikut persis di atas kode </body> (ganti dengan alamat URL anda)

<div id='mta_bar'>
<div class='right'>
<span class='ads'>
<a href='http://kolom-tutorial.blogspot.com' target='_blank'>
<img border='0' height='125' src='http://lh6.ggpht.com/_pt7i0nbIOCY/SUWuARPT5fI/AAAAAAAAAgM/GxFnybAf7-8/adspace_thumb[1].png?imgmax=800' width='125'/>
</a>
</span>
<span class='close' onmouseout='self.status=''' onmouseover='self.status='kolom-tutorial.blogspot.com';return true;'>
<img align='absmiddle' border='0' onClick='closeAds();return false;' src='http://lh3.ggpht.com/_pt7i0nbIOCY/SUCgHswo4DI/AAAAAAAAAf8/evva1-0AhtU/close_thumb[1].png?imgmax=800' style='cursor:hand;cursor:pointer;'/>
</span>
</div>
</div>

Klik tombol SIMPAN TEMPLATE.

Selesai. Silahkan lihat hasilnya.

Selamat mencoba

Sabtu, 20 Desember 2008

Pasang gambar Always On Top

Ada info menarik bagi anda yang suka memajang gambar di blognya. Info kali ini adalah tentang cara memasang gambar yang akan selalu muncul di bagian depan blog anda, gambar tersebut akan selalu muncul walaupun pengunjung melakukan scrolling ke halaman bagian bawah blog anda,Screenshot nya seperti ini :

Tertarik ingin tahu triknya? Berikut adalah langkah langkahnya :

Langkah #1

Buatlah gambar yang ingin anda tampilkan nanti. Saya sarankan gambar tersebut sekitar 125 X 125 agar tidak terlalu mengganggu pengunjung anda. Format gambar terserah anda, bentuk animasipun tentu saja boleh. Contoh Gambar :
uploadlah gambar tersebut ke hosting tempat anda menyipan gambar. Belum tahu cara upload gambar? Baca dulu posting yang ini.
Catat alamat gambar yang sudah anda upoad.

Langkah #2

Silahkan login ke blogger dengan ID anda
Klik Tata Letak.
Klik Tab Edit HTML
Klik tulisan Download Template Lengkap. silahkan backup dulu templatenya biar aman.
Copy lalu paste kode berikut persis di atas kode ]>><b:skin>

#top_image {
position:fixed;
_position:absolute;
bottom:5px;
left:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
Silahkan cari kode <body> di template anda.
Copy lalu paste kode berikut persis di bawah kode <body> (ini contoh saja)

<div id='top_image'>
<img border='0' src='http://lh3.ggpht.com/_pt7i0nbIOCY/SUL0frimGbI/AAAAAAAAAgE/FrMr_MKfweA/Doraemon-1_thumb.gif?imgmax=800'/>
</div>
Klik tombol simpan template.
Selesai. Silahkan lihat hasilnya.

Secara default kode di atas adalah untuk menampilkan gambar di sebelah pojok kiri bawah layar monitor. Posisi tersebut bisa anda ubah sesuai keinginan, misal ingin di simpan di sebelah pojok kanan bawah, pojok atas kanan ataupun pojok atas kiri. Kode yang bisa anda edit adalah seperti ini ;

#top_image {
position:fixed;
_position:absolute;
bottom:5px;
left:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

kode yang berwarna merah adalah kode yg bisa anda ganti sesuai keinginan.

Untuk pojok kanan bawah :

bottom:5px;

right:5px;

untuk pojok kanan atas :

top:5px;

right:5px;

untuk pojok kiri atas

top:5px;

left:5px;

Pada contoh di atas, gambar yang tampil tidak bisa di klik. Jika anda menginginkan agar gambar ada bisa di klik atau nge link, anda hanya menambahkan kode link di dalamnya. contoh :

Selamat mencoba!

Kamis, 18 Desember 2008

Memasang Kode Hasil CSS Menu Generator

Pada postingan terdahulu kang Rohman sempat menginformasikan tentang free download tool yang bernama CSS Menu Generator, dengan tool CSS Menu Generator anda dapat dengan mudah membuat sebuah Horizontal Menu, Vertical Menu, Combo-box Menu, Full Down Menu atau Drop down Menu. Namun ternyata eh ternyata setelah di kasih enak malah jadi pada bingung tujuh keliling dan akhirnya banyak yang bertanya ke Kang Rohman tentang cara memasang kode hasil dari CSS Menu Generator pada blog. Hihihi.. pada bingung yah, duuuh kacian…..

Bagi anda yang masih merasa kebingungan memasang kode hasil dari CSS Menu Generator, mungkin postingan ini bisa menjadi obat sakit kepala anda karena Kang Rohman akan mencoba membahas tentang bagaimana cara memasukan kode yang di hasilkan oleh CSS menu generator ke dalam blog. Namun sebelumnya, anda saya anggap sudah bisa mengoperasikan CSS Menu Generator.

Kode yang di hasilkan oleh CSS Menu Generator terdiri dari dua bagian yaitu bagian kode CSS dan yang satunya kode HTML. Perhatikan gambar berikut :

Contoh kode CSS ;

<style type="text/css" media="screen">
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #0000A0;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #0000A0;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px #004080; }
.pd_menu_01 ul li a {color: #FFFFFF;background: #0000A0;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #0000A0;}
.pd_menu_01 ul li:hover a {background-color:#008000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 table {position:absolute; top:0; left:0; border-collapse:collapse;color: #FFFFFF;background: #0000A0;}
.pd_menu_01 ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
</style>

Contoh kode HTML :

<div class="pd_menu_01 ">
<ul><li><a href="/">Home</a>
</li></ul>
<ul><li><a href="">Blog Tutorial</a>
<ul>
<li><a href="" >Cara Daftar</a></li>
<li><a href="" >cara Setting</a></li>
<li><a href="" class="lastone">Cara Posting</a></li>
</ul>
</li></ul>
<ul><li><a href="">Wordpress tutorial</a>
</li></ul>
<ul><li><a href="">Hot News</a>
</li></ul>
</div>

Untuk menempatkan kode di atas pada blog anda tentu tidak ada ketentuan yang baku karena tergantung di manakah posisi tab menu mau di tempatkan, faktor yang lain adalah kode template antara yang satu dengan yang lain tentu saja berbeda. Namun sebagai gambaran, kang Rohman akan memberikan satu contoh, mungkin dengan ini akan ada sedikit titik terang.

Jika menurut kebiasaan, lazimnya suatu tab menu di simpan di atas Header atau di bawah header. Untuk itu anda di sarankan untuk membuat elemen di atas atau di bawah header, trik ini pernah kang rohman posting pada “ Menyimpan Widget Persis Dibawah Header “ atau pada posting “ Cara Membuat Elemen Persis Di Bawah “, Silahkan di baca dulu.

OK. sekarang saya anggap anda sudah membuat elemen persis di bawah header, dan sekarang kita mencoba untuk memasukkan kode hasil dari CSS Menu Generator. Namun sebelumnya perlu di ketahui bahwa pada kode CSS seperti contoh di atas ada sedikit kode yang perlu di hapus, yaitu pada contoh kode yang saya contohkan di atas saya cetak merah, tepatnya kode yang ini :

</style>

Sekali lagi, kode di atas di hapus saja.

Berikut adalah langkah-langkah untuk memasukkan kode dari CSS Menu Generator :

Silahkan login ke blogger dengan ID anda.
Klik Tata Letak.
Klik tab Edit HTML.
Klik Tulisan Download Template Lengkap, silahkan di backup dulu (penting).
Copy kode CSS tab menu anda ( tentunya ada kode yang di hapus seperti keterangan di atas ) persis di atas kode ]]></b:skin> . Contoh ;

.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #0000A0;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #0000A0;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px #004080; }
.pd_menu_01 ul li a {color: #FFFFFF;background: #0000A0;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #0000A0;}
.pd_menu_01 ul li:hover a {background-color:#008000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 table {position:absolute; top:0; left:0; border-collapse:collapse;color: #FFFFFF;background: #0000A0;}
.pd_menu_01 ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
Klik tombol SIMPAN TEMPLATE
Tunggu beberapa saat sampai template anda tersimpan.
Klik tab Elemen Halaman.
Klik Tambah Gadget pada elemen yang di bawah header ( tentunya sudah di buat terlebih dahulu )
Klik tanda plus (+) untuk HTML/JavaScript.
Copy kode HTML dari CSS tab menu anda, lalu paste pada kolom yang muncul. Contoh ;
<div class="pd_menu_01 ">
<ul><li><a href="/">Home</a>
</li></ul>
<ul><li><a href="">Blog Tutorial</a>
<ul>
<li><a href="" >Cara Daftar</a></li>
<li><a href="" >cara Setting</a></li>
<li><a href="" class="lastone">Cara Posting</a></li>
</ul>
</li></ul>
<ul><li><a href="">Wordpress tutorial</a>
</li></ul>
<ul><li><a href="">Hot News</a>
</li></ul>
</div>
Klik tombol SIMPAN.
Selesai. Silahkan lihat hasilnya.

Mungkin langkah-langkah di atas bisa menjadi satu gambaran bagaimana cara memasukkan kode hasil dari CSS menu Generator.

Selamat mencoba!