GeoCities ditutup pada 26 October 2009.

JIka Anda kebetulan punya web, situs, atau file yang disimpan di geocities, saya sarankan untuk segera di selamatkan sebelum bulan oktober 2009. Karena secara resmi, geocities akan di tutup. Ini adalah E-mail resmi dari Geocities.

Important notice: GeoCities is closing.

Dear Yahoo! GeoCities customer,

We're writing to let you know that Yahoo! GeoCities, our free web site building service and community, is closing on October 26, 2009.

On October 26, 2009, your GeoCities site will no longer appear on the Web, and you will no longer be able to access your GeoCities account and files.

What You Need to Do
If you'd like to move your web site, or save the images and other files you've posted online, you need to act now by choosing one of the following options:

•	Move your site to Yahoo! Web Hosting. We know your files are important to you, and we want to make moving to Web Hosting as easy and affordable as we can. For a limited time, you can move your files automatically, take advantage of terrific features like a personalized domain name and email, even redirect your GeoCities web address to your new site — all for only $4.99 a month for a full year. For more information and complete terms, please see our special offer now.
•	Download your files to your own computer. With your pages and images saved offline, you can re-create your site with any hosting provider. To quickly download your published files, visit your GeoCities web site, right-click on each page, and choose Save Page As... from the menu that appears. Choose a location on your computer to save your files, then click OK or Save. Learn more about downloading your files.

Don't Wait
Please be aware that after October 26, your GeoCities files will be deleted from our servers, and will not be recoverable. If you'd like to save your files, you must download them now or move to Yahoo! Web Hosting. If you need assistance, please visit the help center.

We want to thank you for being a GeoCities customer, and hope you continue to enjoy our other Yahoo! services.

Best regards,

The Yahoo! GeoCities team.

Yuk dilanjut membaca “GeoCities ditutup pada 26 October 2009.”  »»

membuat dropdown menu (3)

Sekarang kita akan meletakkan navigasi menu di blog kita. Tapi terlebih dulu baca membuat dropdown menu (1) dan jangan lupa juga buka post tentang membuat dropdown menu (2) agar anda tidak bingung.

Yuk kita lanjutkan.
Jika anda ingin meletakkan navigasi menu dengan gaya Dropdown menu ini di bagian header blog, maka anda harus kembali masuk ke Template blog anda, Kotak kecil bertuliskan expand widged gak usah di centang.
Dan ikutilah panduan ini.

I; Cari kode ini:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
Lalu rubahlah menjadi seperti ini. (perhatikan yang saya beri warna hijau, adalah hasil perubahannya).
<b:section class="header" id="header" maxwidgets="2"
showaddelement="yes">
Lalu klik Save Template untuk menyimpan hasil kerja anda.

Keterangan; kode2 diatas adalah kode2 widget header, maxwidgets adalah jumlah widget header, sedang showaddelement adalah perintah untuk menampilkan penambahan widget pada header..

II; Masuk ke menu => layout => tab page elements.

Nah di sana di bagian header, sudah terdapat tulisan Add Gadget atau Add page element. Klik tulisan Add page element dan akan muncul popup (jendela pemunculan). Lalu tambahkan HTML/Javascript, dan isikan kode2 berikut:

<div id="chromemenu" class="chromestyle"> <ul> <li><a href="url 1" rel="dropmenu 1" title="Judul link 1">Link 1</a></li> <li><a href="url 2" rel="dropmenu 2" title="Judul link 2">link 2</a></li> <li><a href="url 3" rel="dropmenu 3" title="Judul link 3">Link 3</a></li> </ul> </div> <!--1st drop down menu --> <div id="dropmenu1" style="width: 150px;" class="dropmenudiv"> <a href="Sub Url 1.1" title="sub Judul 1.1">Sub Link 1.1</a> <a href="Sub Url 1.2" title="sub Judul 1.2">Sub Link 1.2</a> <a href="Sub Url 1.3" title="sub Judul 1.3">Sub Link 1.3</a> </div> <!--2nd drop down menu --> <div id="dropmenu 2" style="width: 150px;" class="dropmenudiv"> <a href="Sub Url 2.1" title="sub Judul 2.1">Sub Link 2.1</a> <a href="Sub Url 2.2" title="sub Judul 2.2">Sub Link 2.2</a> <a href="Sub Url 2.3" title="sub Judul 2.3">Sub Link 2.3</a> </div> <!--3rd drop down menu --> <div id="dropmenu 3" style="width: 150px;" class="dropmenudiv"> <a href="Sub Url 3.1" title="sub Judul 3.1">Sub Link 3.1</a> <a href="Sub Url 3.2" title="sub Judul 3.2">Sub link 3.2</a> <a href="Sub Url 3.3" title="sub Judul 3.3">Sub Link 3.3</a> </div> <script type="text/javascript"> cssdropdown.startchrome("chromemenu")</script>

Perhatikan baik-baik, penjelasan dibawah ini:

• Kode-kode yang berada dalam tag <div id="chromemenu" class="chromestyle"> ...........</div>adalah menu Horizontal. Jadi masukkan link2 utama yang akan anda tautkan.


• Kode-kode dalam tag <!--1st drop down menu -->......... </div> adalah sub menu dari Link 1, dan berupa vertikal menu.


• Kode-kode dalam tag <!--2nd drop down menu --> ......... </div> adalah sub menu dari Link 2, yang berupa vertikal menu.


• Kode-kode dalam tag <!--3rd drop down menu --> ......... </div> adalah sub menu dari Link 3, yang berupa vertikal menu.

Dan seterusnya, anda dapat memperbanyak link-link ini sesuai keinginan anda.

Jika Anda menginginkan setiap link jika di klik akan terbuka di halaman / tab baru, maka tambahkan tag target="new" untuk setiap link. Jadi... format link-nya adalah: <a href="Url tautan" title="Judul link" target="new">nama Link</a>

Terakir, klik save untuk menyimpan kode-kode HTML diatas.
Dan jangan lupa pula klik save pada menu layout => tab page elements.

Harapan saya....... jika ada kesulitan, bisa kita pelajari bersama-sama. Okey?

Yuk dilanjut membaca “membuat dropdown menu (3)”  »»

Membuat Dropdown Menu (2)

Ini adalah bagian 2 dari membuat drop down menu dengan menggunakan CSS dan Javascript. Ada baiknya anda baca ulang cara membuat dropdown menu(1) pada post kemarin. Nah jika anda sudah mengikuti dari awal, ikutilah Langkahnya adalah sebagai berikut:

1: Signin ke Blogger.com, dan langsung tuju => layout dan klik edit HTML blog anda. Kotak kecil bertuliskan expand widged gak usah di centang.

Peringatan :sebelum anda mulai mengedit template, backup template blog anda terllebih dahulu dengan cara klik download Full Template lalu simpan tempalte anda di tempat yang aman.

2: Carilah Kode </head>. Untuk memudahkan pencarian: tekan ctrl+f (ini hanya berlaku bagi browser firefox). Maka di sudut kiri bawah browser anda, akan muncul kolom pencarian. Ketikkan </head> lalu kilk Next. Nah udah ketemu tuh kode </head>-nya.

3: Copy Kode di bawah ini.

<script src='http://stubb.fanatic.googlepages.com/chrome.js' type='text/javascript'/>

4: Paste Kode tersebut, persis diatas </head>

Catatan: jika anda menggunakan SHORTCUT ICON, letakkan script tersebut diatas SHORTCUT ICON

5: Cari Kode ini; ]]></b:skin> jika sudah ketemu, copy css dibawah ini.

.chromestyle{
width: 99%;
font-weight: bold;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://photos1.blogger.com/blogger2/2604/6063341998323/320/chromebg3.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #ADED7C; /*THEME CHANGE HERE*/
}

.chromestyle ul li a:hover{
background: url(http://photos1.blogger.com/blogger2/2604/6063341998323/320/chromebg3-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " ";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #ADED7C; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}


.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border: 1px solid #ADED7C; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #EAFADC;
}

Lalu Paste kode Css tersebut, persis sebelum kode ]]></b:skin>

Catatan: Jika anda ingin memodifikasi atau membuat tampilan berbeda, anda dapat mendownload Kode Css seperti tersebut diatas di link ini.
klik di sini untuk download kode CSS style 1:
klik di sini untuk download kode.CSS style 2:
klik di sini untuk download kode CSS style 3 (seperti kode pada item 5 diatas):
klik di sini untuk download kode CSS style 4:

Terakir (pada sesi ini) klik Save Template untuk menyimpan template blog anda.

Nah..... sekarang tinggal meletakkan link2 nya pada header blog kita. Jadi tetap stay tune di sawasanganam.com untuk kelanjutan tutorial membuat dropdown menu ini

Yuk dilanjut membaca “Membuat Dropdown Menu (2)”  »»