Thursday, December 2, 2010

Tips dan Trick Membuat Menu D’Tree

Menu DTree ini cukup menarik juga buat menghiasi blog kita, menu yang menyerupai menu windows explorer.

Langkah2nya sebagai berikut :
dtree_menu_t4belajarblogger

  1. Login ke Blogger.com
  2. Kemudian Tata Letak
  3. Pilih Edit HTML
  4. Centang Expand Widget [jangan lupa untuk Back Up Template dulu]
  5. Copas kode berikut diatas kode </head>

 

<link href='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/dtree.css' rel='StyleSheet' type='text/css'/>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/createdtree.js' type='text/javascript'/>

6. Kemudian Save Template
7. Selanjutnya klik Elemen Halaman
8. Pilih Tambahkan Elemen Halaman [Add Gadget]
9. Pilih HTML/JavaScript
10. Copas kode berikut pada konten:

<h2>Arsip</h2>
<div class="dtree">
<p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Rasiq Zone');
d.add(1,0,'Blogging','http://rasiqzonetwork.blogspot.com/search/label/Tutorial%20Blog');
d.add(2,1,'Tutorial Blog Untuk Pemula','http://rasiqzonetwork.blogspot.com/search/label/Tutorial%20Blog');
d.add(3,1,'Cara Bikin Blog','http://rasiqzonetwork.blogspot.com/2009/08/bikin-blog-di-blogger.html');
d.add(4,1,'Judul','URL Anda');
d.add(5,0,'Judul','URL Anda');
d.add(6,5,'Judul','URL Anda');
d.add(7,5,'Kosong','');
d.add(8,5,'Kosong','');
d.add(9,0,'Internet Marketing','http://rasiqzonetwork.blogspot.com/search/label/Internet%20Marketing');
d.add(10,9,'Pengertian Internet Marketing','http://rasiqzonetwork.blogspot.com/search/label/Internet%20Marketing');
d.add(11,9,'','');
d.add(12,0,'','');
d.add(13,0,'News Update','http://rasiqzonetwork.blogspot.com/search/label/News');
d.add(14,13,'Twitter Akan Mengalahkan Facebook','http://rasiqzonetwork.blogspot.com/2010/01/twitter-akan-mengalahkan-facebook.html');
d.add(15,13,'Judul','URL Anda');
document.write(d);
//-->
</script>
</div>

11. Terakhir Save

Cara yg ke 2  :

1. Login ke http://draft.blogger.com,
2. Trus ke menu Setting-->Comments. Kemudian ganti "Comment Form Placement" menjadi "Embedded below post"
3. Kemudian klik "Save Setting"
Sekarang coba kamu lihat blogmu dan coba di klik salah satu postinganmu kemudian lihat hasilnya, apakah sudah ada kotak komentarnya yg dibawah postingan atau belum. kalau sudah berarti langkahnya cukup disini. Kalau belum ikuti langkah berikut ini.
(ini karena kode HTML tiap2 template itu berbeda. Untuk template default dari blogger yang baru, kode HTMLnya sudah berubah, sedangkan template yg lama atau ambil dari luar ada yg belum dan ada juga yg sudah).
4. Selanjutnya pergi ke menu "Layout-->Edit HTML"
5. Beri tanda centang kotak "Expand widget templates".
6. Trus cari kode berikut ini :

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</p>
</b:if>

7. Kemudian ganti kode tersebut dengan kode dibawah ini:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/> <b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>

</b:if> </b:if> </p> </b:if>

8. Lalu simpan template kamu.

1. Login to Blogger, trus pilih "Layout --> Edit HTML"
2. Taruh kode berikut ini diatas kode <head>

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

3. Trus Klik Tombol "Save
4. Setelah itu copy kode berikut ini dan pasang di sidebar kamu, udah tahu tho cara pasangnya? itu lho di menu "Page Element" trus klik "Add a Gadget --> HTML/Javascript". Inolah script yang harus kamu copy di sidebar kamu.

<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->
</script>
</div>

berikut ini keteranganya:
- Ganti tulisan "link.html" dengan link kamu (judul posting kamu).
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’link.html’);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).
- Kamu bisa mengganti icon-iconnya dengan icon kamu sendiri, contoh scriptnya akan seperti ini:

d.add(10,0,’Profile’,’link.html’,’’,’’,’http://i1118.photobucket.com/albums/k602/Ikhsanprayoga/Yoga%20Album/nklogopnggu3.jpg’);

Ganti text "http://i1118.photobucket.com/albums/k602/Ikhsanprayoga/Yoga%20Album/nklogopnggu3.jpg" dengan alamat gambar kamu.

Selamat Mencoba……..

Tag Technorati: {grup-tag},

No comments: