Cara pasang Auto Read More terbaru (Part 2)

(Revisi: Solusi tanpa hosting file .JS) Fungsi Read More kali ini emang agak berbeda denganversi Read More yang lama (part 1). Bila versi terdahulu kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span>dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas.

Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw  Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode</head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:


<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

silahkan disimpan dan lihat hasilnya :)

Keterangan:

var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat mencoba..

Cara menanam buah naga dalam pot

Tanaman buah naga bisa digunakan sebagai tanaman hias untuk memperindah halaman rumah sekaligus bisa dinikmati buahnya.. Tentunya sangat menyenangkan bila kita bisa memetik sendiri dan menikmati buah naga, buahnya dapat dipetik setiap minggu apabila sudah memiliki lebih dari 10 cabang produksi.
Kelebihan penanaman buah naga di pot adalah kita biasa memindahkan dan mengatur letak tanaman sesuai keinginan. Tetapi untuk menghasilkan tanaman buah naga yang produktif tetap harus diketahui cara perawatan dan pemupukan yang benar.

Berikut ini adalah langkah-langkah yang dilakukan dalam pembudidayaan buah naga di pot :
1. Menyiapkan Pot
Anda bisa menggunakan berbagai jenis pot dari bahan semen, plastic, tanah liat atau drum bekas yang dipotong. Tetapi menurut pengalaman, pot dari bahan tanah liat adalah yang paling ideal karena tanaman buah naga membutuhkan perubahan suhu yang drastic dari siang ke malam dalam proses pembungaan. Ukuran pot yang digunakan semakin besar semakin baik, minimal berdiameter sekitar 40cm.

2. Menyiapkan Tiang Panjatan
Tanaman buah naga membutuhkan tiang panjatan untuk menopang supaya tidak roboh. Nantinya tiang ini akan dililit akar udara dan akan menopang beberapa cabang produksi yang berat yang tentu saja perlu dipilih dari bahan yang kuat tetapi juga perlu diperhatikan jangan sampai pot tidak bisa menahan beban berat tiang panjatan.

Sebaiknya tiang panjatan dibuat dari besi beton berdiameter 8-10 cm, atau balok kayu yang kuat dan tahan lama karena usia buah naga yang bisa mencapai puluhan tahun. Tinggi tiang antara 150-200 cm disesuaikan dengan besar pot. Pada bagian bawah tiang diberi kaki-kaki penguat agar nantinya bisa kuat dan tidak mudah goyah. Untuk tiang dari besi beton, bagian yang terpendam dalam tanah bisa diberi aspal untuk menghindari karat. Untuk bagian atas tiang diberi piringan yang berbentuk seperti stir mobil yang berfungsi untuk menyangga cabang-cabang produksi yang banyak.

3. Media Tanam
Setelah pot dan tiang panjatan sudah selesai disiapkan, selanjutnya adalah menyiapkan media tanam. Bahan-bahannya adalah pasir, tanah, pupuk kandang dan kompos dengan perbandingan 2:1:3:1. Anda juga bisa menambahkan bubuk batu bata merah secukupnya dan dolomit (kapur pertanian) sebanyak 100 g dicampur rata dengan bahan-bahan tersebut. Kemudian media tanam disiram dengan air hingga kondisi jenuh dan dibiarkan selama sehari semalam.

4. Penanaman bibit
Bibit sebaiknya dipilih yang besar, dari batang tua yang berwarna hijau tua keabuan dan bebas dari penyakit. Idealnya panjang bibit yang ditanam minimal 30 cm. Selanjutnya bibit ditanam disekitar tiang panjatan dengan kedalaman 10 cm, jangan terlalu dalam karena akan mengakibatkan pertumbuhan yang kurang bagus. Setelah ditanam media tanam ditekan-tekan agar bibit tidak mudah roboh. Selanjutnya media tanam disiram dengan air dan diletakkan ditempat terbuka tidak ternaungi yang terkena sinar matahari langsung.

5. Pemeliharaan Tanaman
Pemeliharaan tanaman buah naga yang ditanam di pot tidak jauh beda dengan buah naga yang ditanam dikebun yaitu meliputi pemupukan, penyiraman dan pemangkasan cabang yang tidak diperlukan ( untuk lebih lengkapnya bisa dibaca di http://www.buahnaga.us ) .Selain itu, yang perlu diperhatikan adalah tanaman dipastikan menempel dengan baik pada tiang panjatan dan tidak roboh, oleh karena itu perlu dilakukan pengikatan batang buah naga pada tiang dengan menggunakan tali atau kawat dengan bentuk ikatan seperti angka ‘8’ tidak boleh terlalu kencang karena bisa merusak batang atau cabang seiring pertumbuhannya yang semakin membesar.

Cabang hasil pemangkasan bisa ditanam kembali untuk menambah jumlah bibit yang bisa di tanam di pot yang lain. Semoga bermanfaat.

Pasang gambar untuk header

Sebelum melangkah lebih jauh tentang cara memasang gambar untuk header ( judul Blog ).
ada beberapa hal yang mesti di perhatikan.
1. Ketahui dulu berapa ukuran lebar Header blog kita.
caranya dalam halaman TEMPLATE buka Edit Html.

Kemudian geser tab scroll ke bawah pelan-pelan, dan cari kode dalam tag Css Seperti di bawah ini.
#header-wrapper {width:660px;margin:0 auto 10px;
border:1px solid $bordercolor;
}
Tulisan yang saya beri garis bawah di atas merupakan informasi ukuran lebar sebuah header. ( jika di #header-wrapper tidak menemukan ukurannya, bisa saja ukuran Outer-wrapper atau Content-wrapper menjadi patokan ukuran header.)
2. Setelah mendapatkan ukuran lebar header , maka cari gambar atau buatlah gambar untuk header kita sesuai ukuran tersebut atau kurang dari ukuran tersebut.
3. Jika anda mempunyai sofware Photoshop itu lebih bagus untuk menyimpan gambar dengan resolusi kecil namun berkualitas bagus.
Setelah gambar untuk header telah siap. tibalah saatnya memajang atau mengirim gambar header ke dalam blog kita.
Cara Pertama
Dalam halamana TEMPLATE tekan tulisan Elemen Halaman.

Kemudian tekan tulisan Edit di pojok bawah widget header blog kita.

Setelah itu, maka akan tampil halaman seperti gambar di bawah.

Tekan link tulisan Browse. kemudian cari gambar yang ada di komputer yang telah kita persiapkan untuk gambar header .
setelah memilih gambarnya maka kita melangkah pada halaman berikut ini.

Keterangan :
Dibalik judul dan keterangan : jika ini yang kita pilih, maka judul dan Deskripsi/keterangan blog berada bersama gambar .
Selain Judul dan Keterangan : jika ini yang kita pilih, maka judul dan Deskripsi/keterangan blog tidak akan di ikut sertakan ke dalam gambar alias tersembunyi.
Setelah kita menentukan pemilihan, kemudian kita tekan tombol Simpan Perubahan.
Cara Kedua ( advance ).

Sebelumnya simpan dulu gambar untuk header ke web tempat penyedia penyimpanan gambar misalkan di photobucket.com atau googlepages.com

Setelah itu dalam halaman TEMPLATE buka Edit Html

Kemudian dalam kode Css cari tag #header-wrapper seperti di bawah ini.
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor; }
setelah ketemu tambahkan kode dan alamat url gambar diantara kode tersebut . ( jangan di copy paste kode di bawah )
penambahan alamat Url gambar, seperti yang saya pertebal dan akan terlihat seperti ini.
#header-wrapper { background: url(http://i120.photobucket.com/albums/o190/jaloewig/gam-14.jpg)
no-repeat left top;
height:200px; width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
ganti url ( http://i120.photobucket.com/....) dengan alamat url gambar kamu. misal url ( http://alamat gambar kamu ) . sedangkan properti dan nilai height:..px - merupakan ukuran tinggi sebuah gambar lebih baik di definisikan saja.
Setelah itu langkah selanjutnya apakah judul dan deskripsi ( judul dan keterangan ) blog ingin di ikut sertakan atau tidak ? jika tidak ingin di ikut sertakan atau ingin di sembunyikan tambahkan saja kode ini -
Display: none ;
ke dalam tag #header h1.
hasil penambahan-nya akan terlihat seperti ini.
#header h1 {
display:none;
margin:5px 5px 0;
padding:15px 20px .25em;
bla..bla
}
Begitu juga tambahkan properti dan value -
Display:none;
untuk tag #header .description -nya.
seperti terlihat di bawah ini.
#header .description { display:none;margin:0 5px 5px;
padding:0 20px 15px;
bla..bla
}
WARNING :
Biasanya jika judul dan descripsi blog tidak di ikut sertakan, bagian Main-Wapper dan Sidebar akan ikut naik ke atas.
salah satu solusinya bisa saja kita naikan nilai
margin-top
dari tag #header-wrapper -nya.
#header-wrapper { background:$bgcolor; url(alamat url)no-repeat left top;
width:660px;
margin:50px auto 10px;
border:1px solid $bordercolor;
} menambahkan (tambahkan) nilai yang lebih tinggi pada angka yang di pertebal.

Cara Membuat Gambar Selalu di Pojok

1. Login ke Blogger

2. Tata Letak + Edit HTML

3. Beri centang pada Expand Tempelate Widget

4. Kemudian cari kode ]]></b:skin> ( untuk memudahkan pencarian tekan Ctrl + F pada keyboard)

5. Letak kan kode di bawah ini di atas kode ]]></b:skin>

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

• Tulisan yang biru bottom dapat kamu ganti dengan top (fungsinya untuk pilihan atas atau bawah)
• Tulisan yang merah left dapat kamu ganti dengan right (fungsinya untuk pilihan pojok kiri atau kanan bawah)

6. Selanjut nya cari lagi kode </body> ( untuk memudahkan pencarian tekan Ctrl + F pada keyboard)

7. Kemudian letakkan di bawah ini di atas kode </body>

<div id='trik_pojok'><a
href='#'><img border='0'
src='http://i46.tinypic.com/8x50s6.gif'/></a></div>

• Tulisan pada warna merah silahkan ganti dengan url blog/web kamu
• Tulisan pada warna biru sailahkan kamu ganti dengan url gambar yang kamu inginkan

8. Simpan Template dan lihat hasil nya

Cara Membuat Tanggal Update Otomatis Berbentuk Kalender

Caranya gampang ko....

kamu Copy/Paste aja script yang ada di bawah ni....

jangan sampai ada yang tidak tercopy yach,, nanti g bisa....

<script language="JavaScript">
<!-- Ichal
namabulan = new Array(
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"Nopember",
"Desember");
var jumlahlink=0;
function tambahlink(bulan, hari, href) {
var masuk = new Array(3);
masuk[0] = bulan;
masuk[1] = hari;
masuk[2] = href;
this[jumlahlink++] = masuk;
}
Array.prototype.tambahlink = tambahlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
hariini=todayDate.getDay();
bulanini=todayDate.getMonth();
tanggalsekarang=todayDate.getDate();
tahunini=todayDate.getYear();
tahunini = tahunini % 100;
tahunini = ((tahunini < 50) ? (2000 + tahunini) : (1900 + tahunini));
if (((tahunini % 4 == 0)
&& !(tahunini % 100 == 0))
||(tahunini % 400 == 0)) monthdays[1]++;
awalwaktu=tanggalsekarang;
while (awalwaktu > 7) awalwaktu-=7;
awalwaktu = hariini - awalwaktu + 1;
if (awalwaktu < 0) awalwaktu+=7;
document.write("<table border=2 bgcolor=white ");
document.write("bordercolor=black><font color=black>");
document.write("<tr><td colspan=7><center><strong>"
+ namabulan[bulanini] + " " + tahunini
+ "</strong></center></font></td></tr>");
document.write("<tr>");
document.write("<td align=center>Mi</td>");
document.write("<td align=center>S</td>");
document.write("<td align=center>Se</td>");
document.write("<td align=center>Ra</td>");
document.write("<td align=center>Ka</td>");
document.write("<td align=center>Ju</td>");
document.write("<td align=center>Sa</td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<awalwaktu;s++) {
document.write("<td> </td>");
}
jumlah=1;
while (jumlah <= monthdays[bulanini]) {
for (b = awalwaktu;b<7;b++) {
linkbenar=false;
document.write("<td>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==bulanini + 1) && (linkdays[c][1]==jumlah)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linkbenar=true;
}
}
}
if (jumlah==tanggalsekarang) {
document.write("<font color='FF0000'><strong>");
}
if (jumlah <= monthdays[bulanini]) {
document.write(jumlah);
}
else {
document.write(" ");
}
if (jumlah==tanggalsekarang) {
document.write("</strong></font>");
}
if (linkbenar)
document.write("</a>");
document.write("</td>");
jumlah++;
}
document.write("</tr>");
document.write("<tr>");
awalwaktu=0;
}
document.write("</table></p>");
// End -->
</script>

yang ini juga bisa

<script src="http://anasmcguire.googlepages.com/kalender.js"></script>

kalo dah di Copy,,, kamu Paste dech ^_^

Eitz!!! Pastenya di "HTML/Javascript" yach....
masuk ke dasbor lalu tambah target lalu pilih HTML/Javascript lalu lalu kamu Paste dech di dalam kotak kosong yang ada di HTML/Javascript tsb...

Semoga Berhasil yua!!!!

Setting Untuk Mengoptimalkan Windows XP

Ruang-ruang yang akan kita sentuh adalah sebagai berikut :

1. System Properties
2. System Configuration
3. Registry


1. System Properties

Adalah ruang berisi informasi tentang nama dan organisasi pemilik. Anda bisa membukanya dengan klik kanan pada icon MyKomputer dan pilih Properties . Atau bisa juga dengan menekan tombol Start + Pause Break .

Ada beberapa rahasia yang akan kita obrak-abrik pada system properties ini, sehingga menghasilkan installasi yang optimal. Ikuti langkah berikut :

1. Klik kanan pada icon MyComputer dan pilih Properties . Atau bisa juga dengan menekan tombol Start + Pause Break .
2. Klik menu System Restore , pastikan anda mengklik Turn Off System Restore On All Drives .

Ini akan sangat berguna untuk menghalau salah satu cara perkembangbiakan virus.
3. Kemudian klik Advanced .
Terdapat 3 menu setting di bawahnya.

* Klik Setting pertama dan pastikan anda memilih Adjust For Best Performance . Lanjutkan dengan mengklik Apply . Tunggu beberapa saat, dan tampilan windows akan berubah menjadi klasik. Tampilan tersebut dapat kita rubah sesuai keinginan kita nanti.
* Selanjutnya klik Advanced , dan klik Change untuk merubah Virtual Memory.

(Virtual memory adalah Space yang dijadikan memory bayangan untuk membantu kinerja memory asli yang biasa kita sebut RAM . Virtual memory ini akan meminta ruangan dari harddisk.
* Pada sub menu Custome Size , terdapat kolom Initial Size . Isikan kolom dengan angka minimal 2 kali jumlah RAM yang anda pasang.

Misalnya anda memasang RAM 128 MB, maka isi kolom tersebut dengan jumlah minimal 256. Dan pada kolom berikutnya isi dengan 2 x kolom pertama. Jangan lupa klik Set . Klik OK dan OK lagi sehingga kembali ke System Properties awal.
* Sekarang, klik menu Setting yang ketiga, anda akan melihat dua kolom yang berisi angka 30. Rubah angka tersebut menjadi 3 . Kemudian buang tanda Ceklis (v) pada Automatically Restart .
* Klik OK setelah selesai.
* Tutup System Properties dengan mengklik OK

Dari hasil otak-atik tadi, tampilan windows terasa amat membosankan. Semuanya serba Classic, seolah-olah bukan Windows XP.

Jangan khawatir, itu hanya sekedar tampilan yang bisa kita rubah setiap saat. Caranya :

1. Klik kanan di ruang kosong pada area Desktop dan pilih Properties sehingga muncul kotak dialog Display Properties
2. Klik menu Themes , kemudian pada kolom Themes dibawahnya, klik tanda panah ( Pop up ) dan pilih Windows XP .

Jika sebelumnya sudah terpilih Windows XP , maka pilih dulu Themes lain, kemudian klik panah lagi dan pilih Windows XP . Ini dilakukan untuk memancing tampilan Windows XP yang sesungguhnya.
3. Klik Apply dan lihat hasilnya.
4. Selanjutnya klik menu Desktop , perhatikan di bagian bawah. Disana terdapat sub menu Customize Desktop , klik menu tersebut.
5. Pada tampilan kotak dialog berikutnya, pastikan anda membuang tanda Ceklis (v) pada Run Desktop Cleanup Every 60 Days.

Ini dilakukan untuk menghindari penghapusan otomatis Windows terhadap icon-icon yang sudah dianggap tidak penting, padahal menurut kita masih sangat penting.
6. Klik OK dan OK lagi untuk menutup Display Properties


2. System Configuration

Please, jangan pusing dulu …

Ruang berikutnya yang akan kita bedah adalah System Configuration . Perhatikan langkah berikut :

1. Klik Start pilih Run dan ketik msconfig kemudian Ok atau langsung tekan Enter
2. Dideretan menu bagian atas, di ujung kanan terdapat menu Startup . Klik menu tersebut.
3. Lihat ke bagian bawah, terdapat sederetan nama dengan masing-masing mempunyai tanda ceklis (v).

Nama-nama tersebut adalah indikasi program yang akan selalu berjalan ketika Windows baru pertama kali tampil. Dan jika kita membiarkan tanda ceklisnya, maka Windows akan sedikit lambat ketika pertama kali proses Loading .

1. buang tanda ceklis pada nama program yang dianggap tidak perlu untuk ditampilkan pada waktu START UP. Kemudian klik Apply
2. Klik OK untuk menutup System Configuration dan klik Restart .
3. Minum kopi, makan cemilan, atau pesen nasi goreng untuk menunggu komputer anda yang Restart.

Setelah komputer Restart dan kembali ke ruangan Desktop , anda dikagetkan dengan munculnya kotak dialog yang tentu saja berbahasa inggris.

Langsung saja klik kotak kecil untuk memberi ceklis pada Don't Show This Massage ….., (dst) kemudian klik OK . Maka kotak tadi tidak akan muncul lagi ketika Windows baru Restart .

3. Registry

Registry adalah ruang Administrator Windows. Keluar masuknya program yang terinstall akan selalu melapor terlebih dahulu ke Registry .

Berikut ini adalah directory yang terdapat di Registry yang akan kita obrak-abrik :

1. HKEY_CLASSES_ROOT
2. HKEY_CURRENT_USER
3. HKEY_LOCAL_MACHINE
4. HKEY_USERS
5. HKEY_CURRENT_CONFIG


Yang akan kita sentuh adalah bagian a dan b . Ikuti langkah berikut :

1. Klik Start pilih Run dan ketik regedit , klik OK atau langsung tekan Enter
2. Klik tanda plus (+) pada HKEY_CURRENT_USER
3. Klik tanda plus (+) pada Control Panel
4. Klik tanda plus (+) pada Desktop

( Perhatikan jendela sebelah kanan pada posisi Desktop. Terdapat sederetan String yang cukup memusingkan dan tentu saja berbahasa Inggris. J . Cari dan temukan MenuShowDelay . Jika sudah ketemu, klik dua kali dan rubah nilainya dari 400 menjadi 0, kemudian klik OK )
5. Sekarang kembali ke jendela sebelah kiri
6. Dibawah directory Desktop terdapat sub directory WindowsMetrics . Klik sub directory tersebut dan perhatikan jendela sebelah kanan.
7. Cari dan temukan MinAnimate , klik dua kali pada value tersebut dan rubah nilainya menjadi 1 , klik OK .

Sekarang tutup Registry dengan tombol Alt + F4 atau dengan mengklik tanda silang ( X) dibagian atas kanan jendela.

Restart Komputer anda dan lihat hasilnya.

Cara menambahkan tab menu dropdown pada template blogger

Mungkin banyak teman-teman blogger newbie yang belum tahu apa sih itu tab menu dropdown. Sedikit saya akan jelaskan tentang tab menu dropdown blogger kepada teman-teman semua, mungkin teman-teman pernah lihat menu yang berada dibawah header atau diatas header dengan posisi horisontal? nah itulah tab menu, lantas apakah yang dimaksud dropdown? yang dimaksud adalah ketika kursor kita diletakkan ke salah satu menu tersebut maka akan muncul list menu lain secara vertikal kebawah. Untuk lebih jelasnya lihat pada gambar di bawah.



Pasti udah ngerti, sekarang bagaimana cara menambahkan tab menu dropdown pada template blogger? silakan follow tips dibawah:

Login ke account blogger anda dan masuk ke tata letak dan pilih edit html kemudian cari kode dibawah ini jangan lupa centang expand template widget :

]]></b:skin>

untuk memudahkan pencarian tekapn control F lalu paste kode diatas, tapi jangan lupa untuk mengganti angka dua dengan garis miring kalau tidak saya yakin anda tidak akan menemukannya sampai kiamat. Kalau kodenya sudah anda dapatkan kodennya, selanjutnya silakan Download script Berikut CLICK ME. 

/*---------------------
menufs3 ateonsoft.com
------------------------*/
#menufs3-wrapper {width:100%; height:27px; background: #000000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3bg.gif') repeat-x top left;
 border-top:1px solid #333; padding-left:0px; margin-bottom:9px; overflow:hidden}
#menufs3-wrapper h2 {display:none}
#menufs3, #menufs3 ul {padding: 0px; margin: 0; list-style: none; font: normal 0.95em arial; color:#fff;}
#menufs3 a {display: block;text-decoration: none; border-right: 1px solid #000; border-left: 1px solid #202020; color: #fff;
 background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3bg.gif') repeat-x top left;; padding-left:9px; padding-right:9px; padding-top:6px; padding-bottom:7px}
#menufs3 a.awal {padding: 0px; border-left: 0px none;width: 90px; height:27px;
 background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3Awal.gif') no-repeat;}
#menufs3 a.awal:hover{background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3Awalhvr.gif') no-repeat;}
#menufs3 a.awal em {display:none;}
#menufs3 a.IndukMenu {font-weight:bold; text-transform:uppercase;}
#menufs3 a.akhir {padding: 0px; border-left: 0px none; border-right: 0px none; width: 27px; height:27px;
 background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3logoVisited.gif') no-repeat;}
#menufs3 a.akhir:hover {background: #000 url('http://www.geocities.com/f_415_47/HMenuImage/menufs3logoHvr.gif') no-repeat;}
#menufs3 a.akhir em {display:none;}
#menufs3 li {float: left;width: 9em;}
#menufs3 li.akhir{border-left: 1px solid #202020; height:27px; width: 1px; padding: 0px}
#menufs3 li.akhir em{display:none;}
#menufs3 li.kanan{float: right; border-left: 0px none;}
#menufs3 li ul, #menufs3 ul li  {width: 14em;}
#menufs3 ul li a  {color: #565656;border-left: 0px none; border-right: 0px none; padding-left:5px; padding-right:10px; padding-top:5px; padding-bottom:5px}
#menufs3 li ul {position: absolute; display: none; background-color: #000000; z-index:200;border-right: 1px solid #141414; border-left: 1px solid #141414; border-bottom: 1px solid #141414; margin-left:-1px;text-align: left;}
#menufs3 li:hover a, #menufs3 a:focus, #menufs3 a:active{color: #ffff00; background-color: #000;
 background-image:url('http://www.geocities.com/f_415_47/HMenuImage/menufs3hvr.gif'); background-repeat:repeat-x}
#menufs3 li:hover ul{display: block;}
#menufs3 li:hover ul a{color: #fff; border-top:1px solid #141414; background-image:url('none');}
#menufs3 ul a:hover {background-color: #202020!important;color: #ffff00!important;}
#menufs3 li {width: auto;}
Copy script yang anda download tadi dan paste tepat diatas kode yang anda cari tadi, kemudian save template.

Setelah itu kita masuk ke step ke dua, tapi terlebih dahulu download script yang kedua DISINI
 
<div id="menufs3-wrapper">
<ul id="menufs3"> 
 <li><a class="awal" href="http://www.ateonsoft.com/"><em>Home</em></a></li><!-- Menu Home -->

<li><a class="IndukMenu" href="#" title="silahkan pilih sub menu dibawah">Games</a>
<ul>
<li><a href="http://www.ateonsoft.com/2008/09/tes-hebat-untuk-pribadimu.html">Tes Pribadimu</a></li>
<li><a href="http://www.ateonsoft.com/2008/09/tipuan-mata.html">Tipuan Mata</a></li>
<li><a href="http://www.ateonsoft.com/2008/08/aplikasi-sulap.html">File Sulap</a></li>
<li><a href="http://www.ateonsoft.com/2008/05/aplikasi-tebak-pikiran.html">Tebak Pikiran</a></li>
</ul>
</li>

<li><a class="IndukMenu" href="http://www.albachrawi.co.cc/">Islami</a>
<ul>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Hikmah">Hikmah</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Kajian%20Islam">Kajian Islam</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Kisah%20Islami">Kisah Islami</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Kisah%20Nabi">Kisah Nabi</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Nasihat">Nasihat</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/Renungan">Renungan</a>
</li>
<li>
<a href="http://www.albachrawi.co.cc/search/label/TAFSIR">TAFSIR</a>
</li>
</ul>
</li>

<li><a class="IndukMenu" href="http://www.ateonsoft.com/2008/08/guest-book-shoutmix.html">Guest Book</a>
<ul>
<li><a href="http://www.ateonsoft.com/2008/01/email-me.html">Contact me via direct email</a></li>
</ul>
</li>
 
 <li class="akhir"><em>Akhir dari li (bullet) menufs1 Induk</em></li><!-- Penutup Menu jangan diedit-->
 <li class="kanan"><a class="akhir" href="http://www.ateonsoft.com" target="_blank" title="Menu Design by Ateonsoft"><em>ateonsoft</em></a></li>
</ul><!-- end ul menufs3 -->
</div><!-- end menufs3-wrapper -->
 

kalau anda sudah mendapatkan scriptnya, langkah selanjutnya anda masuk Elemen Halaman -->tambah gadget lalau pilih HTML/JavaScript, dan paste Script kedua yang anda download tadi kedalamnya kemudia save. Jangan lupa letakkan widget (gadget) pada posisi atas. Silakan Edit script yang kedua tadi sesuai dengan keinginan anda berdasarkan label yang ingin anda letakkan pada tab menu tersebut. Silakan Mencoba untuk lebih jelasnya silakan tinggalkan komentar anda.

Koleksi Free Host Lengkap Seluruh Dunia

Koleksi Free Host Lengkap Seluruh Dunia

Posted on Juni 26, 2009 by azzaam

• Popular Free Hosting di Indonesia

1. 000WebHost.com, Space 1500 MB, Bandwidth 100 GB, No banner
2. 110mb.com, Space 5 GB, Bandwidth 300 GB, No banner
3. 100WebHost.com, Space 100 MB, 3 GB, Small banner
4. My-PHP.net, Space 250 MB, Bandwidth 6 GB, Small banner
5. Awardspace.com, Space 200 MB, Bandwidth 5 GB, No banner
6. FreeHostia.com, Space 250 MB, Bandwidth 6 GB, No banner
7. FreeHyperSpace.com, Space 1 GB, Bandwidth 10 GB, No banner
8. OrgFree.com, Space 200 MB, Bandwidth Unlimitted (5 GB / Day), No banner
9. AtSpace.com, Space 50 MB, Bandwidth Unlimitted, No banner
10. 50Webs.com, Space 60 MB, Bandwidth Unlimitted, No banner

• Space kurang dari 1 GB, bandwidth diatas 1 GB

1. PHPNet.us, Space 350 MB, Bandwidth 80 GB, No banner

2. DotEasy.com, Space 100 MB, Bandwidth 1000 MB, No banner

3. AgilityHoster.com, Space 200 MB, Bandwidth 5 GB, No Banner

4. HyperPHP.com, Space 250 MB, Bandwidth 6 GB, No banner

5. IfastNet.com, Space 300 MB, Bandwidth 6 GB, No banner.

6. IpowerHosts.com, Space 25 MB, Bandwidth 2 GB, No banner

7. FreeServers.com, Space 50 MB, Bandwidth 1 GB, No banner

8. JustFreeHost.com, Space 100 MB, Bandwidth 1 GB, No banner

9. GetFreeHosting.co.uk, Space 300 MB, Bandwidth 10 GB, No banner

10. FreeHosty.com, Space 300 MB, Bandwidth 10 GB, No banner

11. Hostrocket.com, Space 25 MB, Bandwidth 2 GB, No banner

12. Hostwq.net, Space 300 MB, Bandwidth 10 GB, No banner

13. FreeWebsites.com, Space 50 MB, Bandwidth Unlimitted, No banner

14. FateBack.com, Space 60 MB, Bandwidth Unlimitted, No banner

15. Nostrume.com, Space 300 MB, Bandwidth 5 GB, No banner

16. StoneRocket.net, Space 150 MB, Bandwidth 15 GB

17. 200mbHost.com, Space 150 MB, Bandwidth 4 GB

18. Fateback.com, Space 60 MB, Bandwidth Unlimited

19. Leadhoster.com, Space 250 MB, Bandwidth 10 GB, No banner

20. Mister.net, Space 250 MB, Bandwidth 5 GB, No banner

21. Myfreewebhost.org, Space 120 MB, Bandwidth 1 GB, No banner

22. Fortunecity.com, Space 100 MB, Bandwidth 5 GB

• Space lebih dari 1 GB, bandwith diatas 10 GB

1. FreeHostPage.com, Space Unlimitted, Bandwidth Unlimitted, no banner,
2. MorganHosting.co.cc, Space  MB , Bandwidth 1027  MB, No banner
3. OxyHost.com, Space 5 GB, Bandwidth 100 GB, no banner
4. Fusedtree.com, Space 20 GB, Bandwidth 200 GB, no banner
5. FreeHostingz.com, Space 10 GB, Bandwidth 100 GB, No banner
6. T35.com, Space Unlimitted, Bandwidth Unlimitted, No banner
7. FreeWeb7.com, Space 7 GB, Bandwidth 100 GB, No banner
8. Bplaced.net, Space 2GB, Bandwidth Unlimitted, No banner
9. Quotaless.com, Space Unlimitted, Bandwidth Unlimitted, No banner
10. ByetHost.com, Space 5500 MB, Bandwidth 200 GB, No banner
11. ProfuseHost.com, Space 10 GB, Bandwidth 100 gb, Banner on Top
12. Zymic.com, Space 5 GB, Bandwidth 50 GB, No banner
13. Coolwwweb.com, Space 5500 MB, Bandwidth 200 GB
14. awesomewebspace.com, Space 8 GB, Bandwidth 8 GB
15. fathippohosting.com, Space 10 GB, Bandwidth 5 GB
16. freehostingnow.com, Space 10 GB, Bandwidth 15 GB, no banner
17. hostzerocost.com, Space 10 GB, Bandwidth 10 GB, No banner

iGoogle - Google Aggregator dan Web Portal Servis

Anda mungkin memiliki beberapa website atau aplikasi favorit yang lebih sering dikunjungi daripada website lainnya. Bagaimana jika anda diberi kesempatan untuk mengumpulkan semua website dan aplikasi favorit tersebut kedalam satu tempat di suatu web hingga  mempermudah anda untuk mengaksesnya? Itulah konsep sesungguhnya dari iGoogle, Aggregator gratis atau Web Portal servis milik Google.

Pada iGoogle, pemilik akun Google diperbolehkan untuk memilih aplikasi-aplikasi dan pengumpan berita (news feed) di Internet untuk di organisir sesuai keinginan pada halaman iGoogle-nya. Misalkan, pencita olahraga bisa menambahkan aplikasi-aplikasi yang mendisplaykan skor akhir dan statistik tim-tim olahraga favoritnya dari internet dan menampilkan semuanya dalam satu halaman saja, pada  halaman iGoole.

Google mengijinkan para pemilik akun untuk mengkoordinir tampilan dari iGoogle-nya dengan menggunakan tools yang sederhana. Salah satu tools dari iGoogle adalah Tab-tab pada bagian atas halaman depan iGoogle. Para pemilik akun Google dapat membuat tab-tab baru sesuai kategori aplikasi dan pengumpan berita yang diinginkan. Hal ini akan memudahkan pemilik akun untuk mencari dan menemukan informasi yang diinginkan. Begitu pemilik akun selesai mensetting halaman iGoogle-nya, selanjutnya diselesaikan oleh aplikasi dari iGoogle.

Anda tidak dibatasi hanya memilih Aplikasi-aplikasi milik Google, seperti Gmail, Google Calender, Google Doc saja untuk dimasukkan pada halaman iGoogle, namun anda juga bisa memasukan aplikasi pihak ketiga yang telah membuat aplikasi-aplikasi iGoogle anda bisa mengakses banyak website. Dengan menggunakan aplikasi iGoogle yang tepat, anda juga bisa mengakses Digg, Facebook, Hotmail, MySpace, Pownce, Twitter, Yahoo! Mail pada satu halaman saja.

Membuat menu D'tree

Beberapa waktu yang lampau, saya pernah menulis artikel mengenai cara membuat menu yang menyerupai menu yang ada pada Windows exploreryaitu menu dtree, akan tetapi rupanya kemarin lusa ada laporanbahwa menu tersebut mendadak hilang entah kemana, untuk itu tulisan iniadalah sebagai referensi agar kejadian tersebut tidak terulang kembali.

Saran saya, apabila sobat memasang suatu script atau image yang bersumber dari milik orang lain,sebaiknya bersegeralah untuk menyimpannya pada account milik sobat, akan tetapi sebelum mengambilnyatentu sobat harus minta izin terlebih dahulu kepada pemilik script tersebut, etika nya seperti itu.Misalkan seperti ini, apabila saya menyuruh memasang script seperti ini :

pasanglah kode ini di atas kode </head> :

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

kode --> http://amen24.googlepages.com/Readmore.js berarti java script ini di simpanpada account milik saya. Tentu apabila sobat memasang kode ini tidak ada masalah, akan tetapi hal itu beresiko apabilasaya iseng atau tidak sengaja atau juga terjadi suatu hal sehingga sumber dari script tersebut terhapus, walhasil sobatakan kehilangan fungsi dari script tersebut tanpa bisa berbuat apa-apa. Bagaimana cara mengatasinya? begini caranya :copy kode sumber script ini lalu paste pada address bar browser internet sobat :

http://amen24.googlepages.com/Readmore.js

Jangan lupa untuk klik Go untuk memanggilnya. Setelah itu nanti akan muncul sederetan script java. Langkah selanjutnyaadalah klik file pada bar menu yang ada paling atas sebelah kiri, klik Save As lalu simpan di komputer sobat.Apabila kode tersebut sudah tersimpan di komputer sobat, uploadlah kode tersebut pada hosting yang biasa sobat gunakan, misalkansaya sering menyimpannya di Google Page Creator.Setelah di upload, copy alamat dari script yang baru di upload tadi, misalkanscript ini mempunyai alamat :

http://juned.googlepages.com/Readmore.js

Nah, langkah terakhir adalah mengganti sumber script yang saya punyai dengan milik sobat, misal kode di atas seperti ini :

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



Gantilah sumber script di atas dengan yang sobat miliki, sehingga kodenya jadi seperti ini :

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

Apabila sobat melakukan hal yang di atas, maka sobat tidak usah khawatir akan kehilangan dari fungsi script tersebut.

Langkah-langkah di atas merupakan langkah preventif saja bukan bermaksud mengajarkan sobat untuk mencurikode milik orang lain.


Baiklah kita kembali pada topik pembahasan mengenai cara membuat menu dtree, karena pada pembahasan yang tempo hariagak menyulitkan pembaca, sehingga kali ini saya akan mencoba membahasnya lebih mendalam dengan maksud agar lebih mudah untuk di pahami.

Untuk membuat menu dtree, sobat bisa mendownload pada situs resminya yaitu di http://www.destroydrop.com,silahkan untuk mendownloadnya sendiri. Akan tetapi kode tersebut tidaklah merupakan suatu barang yang sudah jadi, dengan kata lain sobat harusmemahaminya, oleh karena alasan tadi maka saya akan mencoba memberi sedikit gambaran agar supaya lebih mudah untuk di pahami.

Contoh dasar dari script menu dtree yang langsung dari situs http://www.destroydrop.com adalah sebagai berikut :

Kode ini di simpan di atas kode </head> :

<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>


Kode di bawah ini di simpan di bagian sidebar :

<h2>Example</h2>
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom\'s birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>


Apabila sobat mempunyai intelegensi yang cukup lumayan bagus, maka saya yakintidak usah saya terangkanpun akan memahami bagaimana untuk membuat menu dtreedari kode diatas sehingga link-link milik sobat dapat di pasang pada kode-kodedi atas.

Dengan tidak ada maksud saya untuk merendahkan sobat yang masih belum mengerti, makasaya akan mencoba menerangkannya, akan tetapi untuk lebih memudahkan maka saya telahmembuat sebuah menu dtree buatan saya yang telah saya sertakan link-link di dalamnya :source code dari menu yang saya buat seperti ini :

Kode ini di simpan di atas kode </head> :

<link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />
<script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>


Kode di bawah ini di simpan di bagian sidebar :

<div class="dtree">
<p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');


d.add(1,0,'Free template & navigation')

d.add(3,1,'free template','');
d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');
d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');
d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');

d.add(5,1,'Free css menu navigation');
d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');
d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');

d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif');
d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');
d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');
d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');


document.write(d);
//-->
</script>
</div>


Untuk melihat hasilnya, silahkan klik dulu di sini !

Baiklah, saya akan mencoba mengulasnya agar lebih mudah untuk di pahami :

Jika sobat perhatikan dari kode di atas, akan terlihat beberapa ciri yang mudah untuk di kenali, antara lain :

d.add(1,0
d.add(2,0
d.add(4,0
d.add(6,0
d.add(7,0

Kode angka yang bergandengan dengan angka 0 (nol) akan selalu menjadi induk dari menu dtree, jadi jika sobat menginginkanmenu yang di simpan menjadi induk, sobat harus menuliskan angka yang berbeda kemudian di belakang koma harus di susul denganangka nol.

d.add(3,1
d.add(5,1
Kode angka yang bergandengan dengan angka 1 (satu) akan menjadi cabang dari induk yang pertama. Akan tetapi angka di depan angka 1 (satu)adalah angka penentu bahwa menu ini akan menjadi cabang dari kode --> d.add(1,0


d.add(10,5
d.add(20,5
d.add(30,5
d.add(40,5
d.add(50,5
d.add(60,5

Terlihat bahwa angka yang bergandengan dengan angka 5 (lima) akan menjadi cabang dari menu --> d.add(5,1
begitupun angka yang bergandengan dengan angka 3 (tiga) akan menjadi cabang dari menu --> d.add(3,1


Ciri selanjutnya adalah tulisan yang tertera di samping icon selalu di dalam tanda petik (''), formasinya misal seperti ini :

d.add(10,3,'','','','','');

Jika di jabarkan denga isi menu, seperti ini :

d.add(10,3,'isi ke 1','isi ke 2','isi ke 3','isi ke 4','isi ke 5''isi ke 6');



isi ke 1 = adalah tulisan yang akan muncul terlihat langsung
isi ke 2 = adalah alamat yang di tuju apabila di klik tulisan dari isi ke 1
isi ke 3 = adalah judul atau titel atau tulisan yang akan muncul ketika mouse menyorot pada isi ke 1, akan tetapiini berlaku bagi induk yang tidak mempunyai cabang, misal menu : my frienster.
isi ke 4 = terus terang saya tidak tahu pasti, tapi ada kemungkinan untuk alamat image
isi ke 5 = adalah untuk alamat image icon yang mau di munculkan
isi ke 6 = adalah untuk alamat image icon yang akan menggantikan icon isi ke 5


Misal :

d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
Blogroll = tulisan yang kan muncul pada menu induk
http://amen24.googlepages.com/globe.gif (isi ke 5) = icon yang mau dunculkan di samping tulisan Blogroll
http://amen24.googlepages.com/globe.gif (isi ke 6) = icon yang mau dunculkan ketika tulisan Blogroll di klik (akan tetapi dalam hal ini alamatnya sama, maka gambar icon seolahtidak mengalami perubahan)


dan masih banyak ciri-ciri lainnya yang dapat memudahkan sobat untuk mengnalinya.


Bagaimana sudah jelaskah? atau masih tetap bingung? biar tidak terlalu bingung mending langsungbikin menu dtree nya, silahkan ikuti langkah-langkah berikut ini, akan tetapi jangan lupa untuk membuat Backup data dari template sobat:

Untuk template Klasik

1. Sign in di blogger



2. Klik menu Template



3. Klik menu Edit HTML



4. Copy seluruh kode HTML yang ada, lalu save untuk back up



5. Simpan kode berikut di bawah kode <title><$BlogPageTitle$></title> :


<link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />
<script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>



6. Copy kode berikut, lalu paste pada kode sidebar sobat (link nya harus di ganti dengan milik sobat):



<div class="dtree">
<p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');


d.add(1,0,'Free template & navigation')

d.add(3,1,'free template','');
d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');
d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');
d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');

d.add(5,1,'Free css menu navigation');
d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');
d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');

d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif');
d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');
d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');
d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');


document.write(d);
//-->
</script>
</div>




7. Klik tombol Simpan Perubahan Template



8. Selesai.

Untuk Template Baru

1. Sign in di blogger



2. Klik menu Layout



3. Klik menu Edit HTML



4. Klik tulisan Download Template Lengkap, save dulu untuk backup data biar aman



5. Copy paste kode berikut di atas kode </head>


<link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />
<script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>



6. Klik tombol Simpan Template



7. Klik menu Elemen Halaman yang ada di sebelah atas monitor



8. Klik tulisan Tambahkan sebuah Elemen Halaman



9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript



10. Copy paste kode berikut pada kotak yang muncul (ganti link nya dengan milik sobat)



<div class="dtree">
<p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');


d.add(1,0,'Free template & navigation')

d.add(3,1,'free template','');
d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');
d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');
d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');

d.add(5,1,'Free css menu navigation');
d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');
d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');

d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif');
d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');
d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');
d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');


document.write(d);
//-->
</script>
</div>




11. Klik tombol Simpan



12. Klik pada elemen yang barusan di buat, tahan lalu geser pada tempat yang di inginkan (di drag & drop)



13. Klik tombol Simpan yang berada di sebelah atas



14. Selesai.

Selamat mencoba !

Tips Mendirikan Website dengan Peralatan Serba Gratis

Memiliki sebuah website sendiri disaat ini bukanlah hal yang sulit. Namun untuk mendirikan sebuah website yang semuanya bersumber dari barang yang gratis (misalnya hosting gratis, counter gratis dan lain-lain) dengan performance yang bagus bukan hal yang sederhana. Jika kita rajin surfing di internet maka kita akan mendapatkannya dengan mudah namun bagi sebagian orang mungkin mempunyai keterbatasan kesempatan untuk melakukan hal tersebut, baik sisi fasilitas maupun sisi waktu. Tentunya banyak hal yang harus diketahui dalam proses pembuatan website ini. Dibandingkan dengan mendirikan sebuah website yang harus mengeluarkan dana maka pendirikan website gratis ini mungkin lebih susah.

Dimana tempat untuk hosting? Fasilitas guestbook? Fasilitas webcounter? Dan lain-lain merupakan hal pertama yang menjadi pertanyaan untuk pendirian website gratis ini. Tidak semua fasilitas tersebut disediakan oleh satu jasa penyedia hosting gratis. Berikut ini akan dijabarkan tentang segala sesuatu hal yang berkaitan dengan pendirian website yang menggunakan hosting gratis ini.

1. Layout Web
Hal yang paling awal menjadi pertanyaan adalah tentang layout website yang akan kita buat. Layout web itu adalah suatu kerangka visual dari website yang akan kita buat. Karena hal ini akan menentukan image dan penampilan dari website yang akan kita buat. Apabila kita memiliki keterbatasan akan desain web ini maka kita bisa menggunakan template website yang ada. Kita bisa mendapatkan banyak sekali layout web yang menarik di www.freelayouts.com, disana disediakan template yang gratis tinggal Anda download dan tidak memerlukan proses registrasi. Untuk pemula bisa menggunakan web editor Dreamweaver MX atau MS FrontPage untuk mengedit template layout website tersebut. Tetapi bagi Anda yang sudah ahli mungkin hanya memakai text editor sederhana misalnya notepad.

2. Web Hosting
Setelah proses layout selesai maka proses selanjutnya adalah mencari tempat untuk hosting web kita. Web hosting artinya tempat dimana kita meletakan file-file kita agar dapat diakses oleh pengguna internet dan pengunjung website Anda. Ada banyak web hosting gratis namun setiap penyedia jasa tersebut menawarkan fasilitas dan kemampuan yang berbeda-beda. Dari sisi space, bandwidth, penamaan alamat, fasilitas database, support bahasa pemrograman sampai iklan yang disisipkan di website kita atau yang disebut dengan advertising. Tentunya kita harus mempertimbangkan banyak faktor diatas, sisi manakah yang lebih kita utamakan. Hal ini akan mempengaruhi keputusan kita untuk memilih web hosting manakah yang akan kita pakai. Akan sangat bijak apabila pemilihan akan web hosting tersebut dilakukan secara lebih teliti dan sebaiknya kita sesuaikan saja dengan kebutuhan kita. Misalnya apabila bahasa pemrograman yang kita pakai hanya menggunakan HTML maka kita tidak perlu memilih yang support PHP atau CGI-Script. Dalam hal ini penulis memakai jasa dari www.webspace4free.biz karena dia memberikan layanan space 200 Mb, unlimited bandwith (bandwidth tidak terbatas), no advertising (tidak ada iklan), no popup (tidak ada popup), no banner (tidak ada banner), address name ada di depan, proses upload yang mudah serta registrasi yang sederhana. Tetapi kekurangannya dia hanya support dengan bahasa pemrograman HTML. Anda juga bisa menggunakan saudara kembarnya yaitu www.free-webspace.biz. Tidak ada banyak hal yang berbeda dibandingkan saudaranya hanya space yang ditawarkan berbeda 5 Mb diatasnya, tetapi dia menempatkan name addressnya di belakang.

Tetapi sebenarnya name address mau didepan atau dibelakang, mau panjang atau pendek tidak menjadi masalah karena kita bisa menggunakan fasilitas address forwarder (URL forwarder) yang akan mempersingkat nama website kita. Misalnya kita bisa menggunakan jasa www.uni.cc atau www.cjb.net untuk melakukan hal ini. Jadi nanti alamat website kita menjadi http://namakita.uni.cc atau http://namakita.cjb.net sehingga akan sangat mudah mengingatnya walaupun hosting yang sebenarnya tidak ada disana.

3. Guestbook
Sebuah website tanpa guestbook bagaikan sebuah pohon tanpa buah, artinya website kita tidak ada komunikasi dua arah sehingga input yang seharusnya kita dapatkan tidak bisa terekam. Guestbook biasanya dibuat dengan CGI script, sedangkan web hosting gratis biasanya tidak menyediakan fasilitas tersebut. Untuk itu diperlukan jasa penyedia guestbook yang gratis misalnya www.shoutboxes.com, www.doneeh.com atau masih banyak lagi yang lainnya. Dalam hal ini penulis lebih melilih www.shoutboxes.com ketimbang yang lain karena dia jarang sekali mengalami down-time dan theme yang ditawarkan sangat banyak jadi bisa kita sesuaikan dengan theme website kita. Theme bisa diibaratkan sebagai suatu tampilan untuk website kita dimana semua komponen pada website memiliki kesamaan rupa atau sifat yang konsisten. Untuk sciptnya bisa kita dapatkan setelah kita registrasi. Setelah kita login maka kita bisa mendapatkan scriptnya di halaman Code Generator. Selanjutnya tinggal kita copy paste pada halaman guestbook di website Anda.

4. Web Counter
Untuk mengetahui statistik website Anda maka diperlukan web counter. Dalam hal ini penulis lebih memilih www.freestatscounter.com karena image gif yang ditawarkannya sangat banyak dan sangat bervariasi sehingga bisa disesuaikan dengan layout atau theme website Anda. Ada tiga langkah untuk proses ini. Pertama kita memilih desain counter yang Anda akan gunakan, kemudian mengisi kolom lokasi website Anda dan selajutnya isikan nilai awal counter dan alamat e-mail kita. Setelah itu Anda akan mendapatkan code yang dapat di copy paste pada halaman website utama Anda.

How to use Dreamweaver Menu extension

To install the menu into your html page you should do the following things:

Create and save your buttons in any temp folder using Vista Buttons application. It will be better to export all menu code to external .js file. Go to "Tools/Export options...". Check "Save all menu params to js file" option.


You can use "Save as HTML" function.


You can enter any name you like, for example enter "menu":


So you'll have menu.html file and "menu-files" folder with all menu files.



Insert dreamweaver drop down menu to a single page

- Start Dreamweaver and open the web page that you will be inserting the script into. When the page opens, it should look like this:


- Open the generated in Vista Buttons menu.htmlpage in any text editor. Copy all code within the following tags:
      <!-- Begin Vista-Buttons.com -->
        ...
      <!-- End Vista-Buttons.com -->


- Go back to Dreamweaver. In the Design mode decide where you would like the drop down menu to appear in your page. It helps you add the menu code in the correct place. Click in the spot you want the code to appear in and type the phrase: your code here


- We will now be inserting the JavaScript code into the body section right where we typed the phrase in the previous step. To do this, switch to HTML View.


- Go to the "Edit Menu" with Dreamweaver and select the "Paste" option to paste the menu code that we copied to the clipboard earlier. Since the phrase we typed was highlighted, it will be replaced when we paste the code in.


- Now you should copy the "menu-files" folder into the same folder with your index.html page.


- Notice that in the Design mode your drop down menu won't display. It is normal. You should view your page in browser.


- That's all. You've added all necessary code to your page, so let's test it. Select "File/Preview in browser/IExplore" to display the page live (in Internet Explorer).


- If everything goes well, save your document and upload it and the "menu-files" folder to your web site. If something seems wrong, double-check that you followed all the steps correctly.
- If you still run into trouble, we'd be happy to assist you further. You can post your problem to us at , and meanwhile describe your files in details.

Tampil Cantik Dengan Menu Tab View

Postingan tentang Tampil Cantik Dengan Menu Tab View  ini untuk menjawab beberapa sobat yang bertanya seperti ini “ Kang, gimana caranya bikin widget seperti Daftar Isi, Comment, Services dan Others yang disidebar itu ??, kasih tahu doong,”  katanya.,

Memang dengan Menu Tab View bisa menghemat tempat di sidebar karena dalam satu widget bisa menyimpan beberapa menu sesuai kehendak kita , bukan itu saja tampilannyapun tampak cantik dan terkesan profesional, seperti tampilan di bawah ini. .

Cara Membuat Menu Tab View ini adalah sbb. :

1. Masuk ke Dashboard , Pilih Layout , lalu klik Edit HTML
2. Backup template dulu dengan  Download Full Template
3. Kemudian cari kode ini ]]></b:skin>
4. Untuk memudahkan pencarian , pakai saja Ctrl +F , terus ketik kata yang dicari dikotak yang disediakan, lalu klik next. 
5. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin>

   /* Menu Tab View
   ----------------------------------------------- */
   div.TabView div.Tabs {widht:100%;
   padding-top: 0px;
   height: 24px;
   overflow: hidden;
   }
   /* Menu Utama */
   div.TabView div.Tabs a {
   float: left;
   display: block;
   width: 110px; /* ukuran lebar menu */
   text-align: center;
   height: 30px; /* ukuran tinggi menu */
   padding-top: 7px;
   margin-right:4px; /* jarak antarmenu */
   vertical-align: middle;
   border: 1px solid #ccc; /* warna border menu */
   border-bottom-width: 0;
   margin:0px;
   padding: 5px 0;
   font-family:Arial,Helvetica,sans-serif;
   font-size:12px;
   font-weight:bold;; /* besar hurup menu */
   background-color: #4c4c4c; /* warna latar menu */
   color: #FFFFFF; /* warna hurup menu */
   -moz-border-radius-topleft:15px;
   -moz-border-radius-topright:15px;
   -webkit-border-top-left-radius:15px;
   -webkit-border-top-right-radius:15px;
   }
   div.TabView div.Tabs a.Active {
   background-color: #FFFFFF; /* warna background menu aktif */
   color: #000000;
   }
   div.TabView div.Tabs a:hover {
   background-color: #999999; /* warna background menu hover */
   color: #FFFFCC;
   font-weight: bold;
   }
   /* Kotak Utama */
   div.TabView div.Pages {
   clear: both;
   border: 1px solid #CCC; /* warna border kotak utama */
   overflow: hidden;
   background:#FFFFFF; /* background kotak utama */
   }
   div.TabView div.Pages div.Page {
   height: 100%;
   padding: 7px;
   overflow: hidden;
   }
   div.TabView div.Pages div.Page div.Pad {
   padding: 5px 0px;
   font-size: 12px; /* besar hurup kotak utama */
   }
   /* tabview css end */

6. Perhatikan text-text yang berwarna pink, silahkan disesuaikan ya.
7. Selanjutnya pasang kode berikut ini sebelum kode </head>

   <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type="text/javascript"/>

8. Jika sudah tinggal Save Templates
9. Selesai …  untuk langkah pertama,
10. Langkah ke dua Silahkan masuk kemenu "Page Elements"
11. Klik  "Add a Gadget" ,  pilih "HTML/Javascript"  ,
12. Kemudian copy paste kode dibawah ini :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">
<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>
</div>
<div class="Pages" style="width: 256px; height: 270px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div></div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div></div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div></div>
</div></div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Catatan :

• Angka warna pink adalah tinggi dan lebar tab view, silahkan disesuaikan
• Kode yang berwarna Biru Adalah text  Menu utama
• Kode yang berwarna merah adalah isi dari tab view tsb.
• Saya juga pernah posting Membuat Dropdown Navigation Menu atau Tutorial Blog lainnya .

Nah bagaimana ??,  apakah sobat juga mau  Tampil Cantik Dengan Menu Tab View ??.