Kamis, 17 Mei 2012

Cara Membuat Menu Mirip Explorer Windows Pada Blogspot

Menu Explorer pada Blogspot pada dasarnya hanyalah seperti arsip Blog akan tetapi pada model ini dapat membuat blogspot kita tampak lebih simple serta optimal guna menempatkan link2 yang tentunya sangat penting guna para pengunjung untuk menemukan sebuah artikel, ok langsung saja kita bahas seperti apa sih.. tahapan membuat menu explorer atau diluar sana menyebut D thee dan bisa juga disebut pohon direktory .
NOTE :
1. Copy dan pastekan kode css dan JS dibawah ini pada URL browser anda dan downlod simpan pada komputer and ( kode css : http://negerikunkri.googlecode.com/files/dtree.css )
2. Sama dengan di atas ( kode JS : http://negerikunkri1.googlecode.com/files/createdtree.js )
3. Hasil dari downlodan file css dan file JS ( java Script ) anda upload di hosting pada CODE.GOOGLE.COM/HOTING atau pada alamat : http://code.google.com/hosting . apa bila anda sudah meng uploadnya maka anda akanmendapat kode css dan kode js seperti yang terlihat pada link diatas . selanjutnya tempatkan link kode css dan js anda pada HTML blogs anda dengan contoh  seperti di bawah ini :
temukan kode :        </head>  pada edit html blogspot anda simpan kode dibawah ini diatasnya :

<link href='http://negerikunkri.googlecode.com/files/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://negerikunkri1.googlecode.com/files/createdtree.js' type='text/javascript'/>

Perlu diketahui link diatas ganti dengan kode yang didapat dari hostingan code.google anda . selanjutnya simpan perubahan .

4. Beralih ke Design Blogs atau ke tata letak  tambahkan kode dibawah ini pada elemen sidebar blog anda " klik tambah Gadged dan cari HTML JAVA SCRIPT kemudian simpan dan terbitkan.

<h2>NEGERIKU - NKRI</h2>

<div class="dtree">

<p><a href="javascript: d.openAll();">KATEGORY</a> | <a href="javascript: d.closeAll();">CLOSE</a></p>

<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'MYEXPLORER FILE');
d.add(1,0,'Belajar Visual Basic Untuk Pemula','http://negeriku-nkri.blogspot.com/2012/05/visual-basic-60-untuk-pemula.html');
d.add(2,1,'Memahami Properties dan Even pada VBE 6',' http://negeriku-nkri.blogspot.com/2012/05/properti-dan-event-pada-visual-basic-60.html');
d.add(3,2,'MASIH PROSES',' #.html');
d.add(4,0,'Tutorial membuat User Login VBE 6',' http://negeriku-nkri.blogspot.com/2012/05/membuat-user-login-pada-visual-basic.html');
d.add(5,4,'NEGERIKU-NKRI',' #.HTML' );
d.add(6,5,'MASIH PROSES',' link.html');
d.add(7,0,'TUTORIAL BLOGSPOT',' #.html');
d.add(8,7,'Optimasi Blogspot','http://negeriku-nkri.blogspot.com/p/optimasi-blogspot.html');
d.add(9,8,'Sub/file Sub folder 03',' link anda.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,0,'Masih Proses',' Link.html ');
d.add(11,0,'Masih Proses',' link.html ');
d.add(12,0,'Masih Proses',' # ','','','img/trash.gif');

document.write(d);

//-->
</script></div>

5. lihat hasilnya ...

6. Ikuti terus artikel Negeriku-nkri Bagaimana sih cara hosting di CODE.GOOGLE.com