Membuat Menu

Membuat Menu dTree di Blogger

J

ika temen-temen pengguna windows pasti tahu apa itu menu dTree. Menu dTree adalah menu seperti pohon bercabang yang biasa kita lihat pada saat kita membuka windows explorer pada komputer.



Fungsi 
menu ini hampir sama dengan menu navigasi yang lain, yaitu untuk lebih memudahkan seorang pengunjung menjelajahi blog kita. Gambar di bawah ini pasti sudah sering anda lihat di komputer anda. 

 

Menu seperti ini bisa juga kita tampilkan pada web atau blog kita , untuk contoh soalnya temen-temen bisa lihat langsung demonya diblog saya disini. Jika tertarik, perhatikan baik-baik langkah pembuatannya di bawah ini :

1. Login ke blogger dengan akun anda 
2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
3. Letakkan kode/ script berikut di atas kode </head>
   
   view plainprint?

   1. <link  href='https://sites.google.com/site/bangkolis/javascript/dtree_maskolis.css'  rel='StyleSheet' type='text/css'/>          
   2. <script  src='https://sites.google.com/site/bangkolis/javascript/maskolis_dtree.js'  type='text/javascript'/>  

   <link  href='https://sites.google.com/site/bangkolis/javascript/dtree_maskolis.css'  rel='StyleSheet' type='text/css'/>        
   <script  src='https://sites.google.com/site/bangkolis/javascript/maskolis_dtree.js'  type='text/javascript'/>

4.  Save Template anda.

Langkah Kedua

1. Pada dasbor klik rancangan 
2. Kemudian klik elemen halaman => Tambah Gadget 
3. Setelah itu pilih javascript/HTML,  letakkan kode berikut pada kolom konten:
   

   <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,'Creating Website');
   d.add(1,0,'Folder 01','#.html');
   d.add(2,1,'Sub Folder 01',' #.html');
   d.add(3,2,'Sub/file Sub Folder 01',' link anda.html');
   d.add(4,0,'Folder 02',' #.html');
   d.add(5,4,'Sub Folder 02',' #.html');
   d.add(6,5,'Sub/file Sub folder 02',' link anda.html');
   d.add(7,0,'Folder 03',' #.html');
   d.add(8,7,'Sub Folder 03',' #.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,'File[non-folder]',' link anda.html');
   d.add(11,0,'File[non-folder]',' link anda.html');
   d.add(12,0,'File Single',' link anda.html','','','img/trash.gif');
   document.write(d);
   //-->
   </script>
   </div>

4. Terakhir simpan, dan hasilnya akan seperti gambar di bawah ini

Kalau belum ngerti juga, berikut contoh mengisi menu dan linknya dari daftar menu blog saya; 

<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,'Creating Website');
d.add(1,0,'Daftar Isi','#.html');
d.add(2,1,'Tutorial Blog','http://www.maskolis.co.cc/search/label/tutorial%20blog');
d.add(3,1,'Joomla','http://www.maskolis.co.cc/search/label/joomla');
d.add(4,1,'Wordpress','http://www.maskolis.co.cc/search/label/wordpress');
d.add(5,0,'SEO','#.html');
d.add(6,5,'Tips Dasar-Dasar SEO','http://www.maskolis.co.cc/2011/02/tips-dasar-dasar-seo.html');
d.add(7,5,'Kosong','');
d.add(8,5,'Kosong','');
d.add(9,0,'Google','#.html');
d.add(10,9,'Cara Daftar Google Adsense','http://www.maskolis.co.cc/2011/02/cara-mendaftarkan-blog-di-google.html');
d.add(11,9,'','');
d.add(12,0,'','');
d.add(13,0,'Tips Blogger','#.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(14,13,'Kode warna','http://www.maskolis.co.cc/2011/01/memasang-kode-warna-di-blog.html');
d.add(15,13,'Google Page Rank','http://www.maskolis.co.cc/2011/01/google-page-rank-dan-manfaatnya.html');
d.add(16,0,'SEO Tips','http://www.maskolis.co.cc/2011/01/seo-tips-dengan-melakukan-blog-ping.html');

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

Temen-temen bisa ganti alamat url diatas dengan link url anda..Terakhir simpan dan lihat hasilnya. Selamat mencoba dan semoga bermanfaat

Read More

membuat read more

Cara mudah membuat readmore di blogspot

Sudah banyak sekali tutorial membuat ReadMore yang sudah berkeliaran di dunia maya, dan yang saya tulis kali ini mungkin agak berbeda dari yang pernah anda temui, yang sebenarnya ini sudah disediakan oleh para senior blogger.


Langkah pertama yang harus dilakukan adalah aktifkan dulu post editor terbaru dari blogger dengan cara masuk ke dashboard - setting - basic.
Dan rubah settingan paling bawah Global Settings - Select Post Editor kemudian pilih Updated Editor.
(lihat posting saya sebelumnya cara upload gambar gif / animasi)


Langkah Kedua masuk pada HTML anda : Layout - Edit Html, jangan lupa beri tanda centang pada Expand Widget Templates
Kemudian cari kode yang ada dibawah ini:

<data:post.body/>

Langkah ketiga
masukkan kode berikut dibawah kode diatas

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

kemudian simpan template anda.

Oleh karena fungsi Readmore adalah memperpendek tampilan pada halaman utama blog anda, maka tentu saja anda bisa menampilkan lebih dari satu postingan pada halam utama, misalnya saja pada blog ini adalah 4 posting pada halaman utama. Untuk menentukan berapa jumlah posting yang tampil pada halaman utama lakukan langkah berikut :
masuk pada tab Settings - Formating - Show at most : ...... (masukkan berapa postingan yang akan tampil pd halaman utama).

Kemudian buatlah satu posting, ketik (jangan copas hehehehehh...) sampai dengan selesai. nah.... sekarang waktunya untuk memotong dimana tulisan readmore atau baca selengkapnya akan kita letakkan.
lihat gambar dibawah ini :

Cara buat readmore

Langkah 1 : letakkan kursor pada baris yang akan kita potong.
Langkah 2 : klik pada tombol insert jump break

selesai sudah.... postingan kita siap untuk di publish.

Untuk mengganti kata-kata readmore atau baca selengkapnya, masuk pada tab setting - layout - page element, pada gadget posting blog klik edit lihat gambar dibawah.

cara buat readmore

Read More