Cara Membuat Menu dTree

Menu dTree adalah menu yang mirip menu explore dan menu ini dapat kita tampilkan ke dalam web/blog. Teman-teman pasti sudah pada tahukan bagaimana bentuknya menu explore itu. Untuk penampilan menu dTree sendiri, daripada teman-teman ntarnya bingung di bawah ini ada demonya sebelum teman-teman ingin mencoba membuatnya bisa di lihat dulu. Oh ya...sebenarnya trik ini sudah lama sekali dibahas. dan trik ini bersumber dari Destroydrop.com, maklumlah saya juga masih belajar,, jadi harus memiliki referensi sebanyak-banyaknya. Ok, lanjuuut...

Untuk memulai memasang menu tersebut, seperti biasa login dulu ke akun blogger. Lalu klik Rancangan >> Klik Edit HTML

• cari script </head> kemudian letakkan script-script di bawah ini di atas script tadi.

<link rel="StyleSheet" href="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/dtree.css" type="text/css" />
<script type="text/javascript" src="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/createdtree.js"></script>

• Kemudian simpan template
• Selanjutnya kunjungi Elemen Laman >> Tambah gadget >> HTML/JavaScript >> copas script berikut ini.

<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,'amcied Logica');
d.add(1,0,'Folder 01','#.html');
d.add(2,1,'Sub Folder 01',' #.html');
d.add(3,2,'Sub/file Sub Folder 01',' #.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',' #.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',' #.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,0,'File[non-folder]',' #.html');
d.add(11,0,'File[non-folder]',' #.html');
d.add(12,0,'File Single',' #.html','','','img/trash.gif');

document.write(d);

//-->
</script>

</div>

Selesai deh, gampangkan ;).. Semoga Bermanfaat...!!!

Read More..

Membuat Efek Zoom Sederhana Pada Gambar

Bagaimana cara membuat suatu effect pada gambar atau image yang kita pasang, yaitu effect yang membuat besar image atau gambar ketika mouse diletakkan tepat di atasnya atau di sorot. Banyak sekali web yang telah menjelaskan cara menggunakan aplikasi effect seperti ini, biasanya web yang menampilkan galeri gambar. disini saya akan mencoba berbagi membuat efek zoom yang sangat sederhana mungkin tidak sebagus bila menggunakan script-script JQuery. Sebelum mencobanya saya sarankan untuk melihat demonya dulu.

Langsung aja ya...!!!

• Cari script ]]></b:skin> kemudian letakkan script di bawah ini tepat di atasnya.

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
font: arial black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 60px;
}

• Kemudian Simpan...!!!
• Setelah itu copy-paste script brikut, letakkan di mana saja sesuai keinginan anda.

<a class="thumbnail" href="#thumb"><img src="Url Gambar" width="100px" height="66px" border="0" /><span><img src="Url Gambar" /><br />keterangan Gambar</span></a>

Semoga Bermanfaat...!!!

Read More..

Membuat Contact Profesional di Blogspot

Ketika kita berkunjung ke sebuah situs profesional penjual atau jasa, maka disana kita akan menemukan menu contact. Menu “contact” (kontak) tersebut bisa berupa pemberitahuan alamat lengkap situs tersebut baik secara offline atau pun online dengan menyertakan alamat email, tujuannya tentu saja agar pengunjung situs tersebut bisa menghubungi pihak pemilik situs baik dalam rangka pembelian product , register atau mengirim pesan lainnya, sesuai dengan judul postingan ini kita langsung saja membuat Contact Profesional di Blogspot.

Berikut demonya yang dapat anda lihat sebelum mencoba pembuatannya :

• Langkah pertama daftar dulu di JotForm
• Isi data anda dengan lengkap
• E-Mail dan account JotForm anda nantinya akan menjadi tempat pengiriman pesan
• Kemudian Pilih Form Style - Close Themes untuk jenis tampilan yang anda sukai
  

• Setelah selesai memilih Form Style kemudian lanjut ke Setup & Share

• Di sebelah kiri anda akan tampil berbagai menu yang bisa anda gunakan sesuai keinginan anda

• Setelah anda membuat form yang sesuai dengan keinginan anda, pilih Share Form kemudian klik Advanced Options
  

• Kemudian pilih iFrame dan copy-paste script yang ada, lalu anda letakkan di dalam blog anda.
  

Mungkin segitu saja yang bisa saya berikan, untuk tampilan lebih menarik lagi silahkan anda berinovasi sendiri.ok..ok.. Salam sukses dari amcied Logica untuk teman-teman MI-10, semoga nilai tugas akhir kita tinggi semua,hehee
Semoga Bermanfaat...!!!

Read More..