ADINDA BLOG: 2010

Saturday, May 1, 2010

Cara Membuat Halaman Menu Dropdown di Blog

Membuat Menu Drop down mungkin terdengar aneh di telinga kita, memang saya sendiri awalnya tidak tau harus membuat kata kunci apa yang umum di gunakan di Indonesia untuk mencari tutorial sejenis ini. awalnya mau cara pasang halaman li
di blogspot, lalu coba cara buat navbar menu lebar ke bawah, dan akhirnya cara membuat halaman menu pada blogspot mudah-mudahan pada nyangkut ke sini hehe.

Seperti apa sih Menu Drop down itu langsung aja liat gambarnya biar saya ga sulit ngejelasinnya

Nah dah ngerti belum? menu dropdown adalah seperti gambar di atas, saat kita arahin kursor mouse salah satu menu di navbar, tiba-tiba mucul panjang kebawah (menu tambahan ke bawah) itulah yang di maksud dengan Dropdown Menu

Bagaimana cara buatnya?

1. Login ke Blogger.
2. Pilih Edit Tamplate
3. pilih Edit HTML

4. cari kode ]]></b:skin>
5. Silakan anda copy kode di bawah ini :

/* ----- NAVBAR MENU ----- */
#NavbarMenu {

width:
780px;
height: 30px;
background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE2uEPrTuc0B4uc5ciqGimdDNOfbpJtRU0umDn4gXpT3sMGPLVcucTJn9A0cjfBJEO0xnNX_GbWnNuVsr_Xfdk8sE7ikrvrs645MvnxKJXC2nv5pjO1OrObkZZm2fjNFwIXVM8TVLBr9I/s800/navbar.gif) repeat-x top;
color: #3D81EE
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #3D81EE;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 14px ARIAL;
}
#nav li a:hover, #nav li a:active {
background:#99C9FF;
color: #3D81EE;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #3D81EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE2uEPrTuc0B4uc5ciqGimdDNOfbpJtRU0umDn4gXpT3sMGPLVcucTJn9A0cjfBJEO0xnNX_GbWnNuVsr_Xfdk8sE7ikrvrs645MvnxKJXC2nv5pjO1OrObkZZm2fjNFwIXVM8TVLBr9I/s800/navbar.gif) repeat-x top;
width: 150px;
color: #000;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #99C9FF;
border-left: 1px solid #99C9FF;
border-right: 1px solid #99C9FF;
font: normal 15px,;
}

#nav li li a:hover, #nav li li a:active {
background: #99C9FF;
color: #3D81EE;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

6. Simpan di atas kode
]]></b:skin>

catatan :

pada text yang berwarna hijau di atas sesuaikanlah dengan lebar tamplate yang anda gunakan
pada text yang berwarna orange di atas biarkan saja

7. Setelah itu silakan copy kode berikut ini :

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='Link-Kamu'>Tentang Kami</a>
<ul>
<li><a href='Link-Kamu'>Sejarah Perusahaan</a></li>
<li><a href='Link-Kamu'>Profil Perusahaan</a></li>
<li><a href='Link-Kamu'>Struktur Organisasi</a></li>
<li><a href='Link-Kamu'>Hubungi Kami</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>Komputer</a></li>
<li><a href='Link-Kamu'>Hardware</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Download%20Software'>Software</a>
<ul>
<li><a href='http://asksalman19.blogspot.com/search/label/Anti%20Virus'>Antivirus</a></li>
<li><a href='Link-Kamu'>Download MP3</a></li>
<li><a href='Link-Kamu'>Desktop Enhancements</a></li>
<li><a href='http://asksalman19.blogspot.com/2010/01/pembuat-banner-animasi-webblog.html'>Software Pembuat Banner</a></li>
<li><a href='#'>Internet</a>
<ul>
<li><a href='http://asksalman19.blogspot.com/search/label/Internet'>Dial-Up n Connectivity</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Utility%20Tool'>Security and Spyware</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Utility Tool'>Peralatan</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>System Tools</a></li>
<li><a href='Link-Kamu'>Others</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>Template</a>
<ul>
<li><a href='http://hyperjadulz.blogspot.com/search/label/New%20Blogger%20Template'>New Blogger Template</a></li>
<li><a href='Link-Kamu'>Classic Template</a></li>
</ul>
</li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='http://asksalman19.blogspot.com'>Belajar Komputer</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Tips Blog'>Belajar Blogspot</a></li>
<li><a href='http://asksalman19.blogspot.com/2009/09/tutorial-blog.html'>Tutorial Mudah Blog</a></li>
</ul>
</li>
<li><a href='/feeds/posts/default'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis9HR0okqYy0C_CjOj7jXwhIsAjIclGwmOxRQEZHZzroNnv4ggamq_09T3oF86X6vA101A5YfDWQmTt89-GWGjx7f_Do-pQkrtYwIvdWkW4wuc0qSbZKiqDOBDjP66TXGe-kNxidmrEg/s1600/rss.gif' style='vertical-align:middle'/> RSS Feeds</a></li>
</ul>
</div>

</div> >
</div>

8. Simpan di bawah <body>

9. save.

Sehingga hasilnya seperti ini :

]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='BELAJAR KOMPUTER (Header)' type='Header'/>
</b:section>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='Link-Kamu'>Tentang Kami</a>
<ul>
<li><a href='Link-Kamu'>Sejarah Perusahaan</a></li>
<li><a href='Link-Kamu'>Profil Perusahaan</a></li>
<li><a href='Link-Kamu'>Struktur Organisasi</a></li>
<li><a href='Link-Kamu'>Hubungi Kami</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>Komputer</a></li>
<li><a href='Link-Kamu'>Hardware</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Download%20Software'>Software</a>
<ul>
<li><a href='http://asksalman19.blogspot.com/search/label/Anti%20Virus'>Antivirus</a></li>
<li><a href='Link-Kamu'>Download MP3</a></li>
<li><a href='Link-Kamu'>Desktop Enhancements</a></li>
<li><a
href='http://asksalman19.blogspot.com/2010/01/pembuat-banner-animasi-webblog.html'>Software
Pembuat Banner</a></li>
<li><a href='#'>Internet</a>
<ul>
<li><a href='http://asksalman19.blogspot.com/search/label/Internet'>Dial-Up n Connectivity</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Utility%20Tool'>Security and Spyware</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Utility Tool'>Peralatan</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>System Tools</a></li>
<li><a href='Link-Kamu'>Others</a></li>
</ul>
</li>
<li><a href='Link-Kamu'>Template</a>
<ul>
<li><a
href='http://hyperjadulz.blogspot.com/search/label/New%20Blogger%20Template'>New
Blogger Template</a></li>
<li><a href='Link-Kamu'>Classic Template</a></li>
</ul>
</li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='http://asksalman19.blogspot.com'>Belajar Komputer</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Tips Blog'>Belajar Blogspot</a></li>
<li><a href='http://asksalman19.blogspot.com/2009/09/tutorial-mudah-blog.html'>Tutorial Blog</a></li>
</ul>
</li>
<li><a
href='/feeds/posts/default'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis9HR0okqYy0C_CjOj7jXwhIsAjIclGwmOxRQEZHZzroNnv4ggamq_09T3oF86X6vA101A5YfDWQmTt89-GWGjx7f_Do-pQkrtYwIvdWkW4wuc0qSbZKiqDOBDjP66TXGe-kNxidmrEg/s1600/rss.gif'
style='vertical-align:middle'/> RSS Feeds</a></li>
</ul>
</div>

</div> >
</div>

Kode di atas adalah kode yang saya gunakan di salah satu blog saya. dan mungkin akan sedikit berbeda posisinya dengan template anda. namun standarnya seperti contoh di atas. lihat hasilnya disini

keterangan :
1. jika anda ingin menambah dropdown lagi tinggal tambahkan saja kode :

<li><a href='#'>Tutorial</a>

<ul>
<li><a href='http://asksalman19.blogspot.com'>Belajar Komputer</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Tips%20Blog'>Belajar Blogspot</a></li>
</ul>
</li>

Catatan :
Yang berwarna ungu di atas adalah "tutorial" adalah menu yang akan di buat dropdown ke bawaholeh kita. jadi bila nanti anda ingin membuat dropdown tambahan, tambahkan saja kode pada kumpulan kode menu pada no.7

2. Di atas, saya banyak menuliskan link ke arah blog ini, ganti dengan link yang ingin anda tuju, bisa ke arah blog anda atau orang lain.

silakan lihat contoh yang sudah saya buat disini

Artikel Lainnya :
1. Cara Membuat Navigasi Horizontal Dropdown Menu / Vertikal Navigasi Menu Di Blogger

Menambah Link Menu Blog

Memberi menu pada blog akan menampilkan performa blog terutama untuk navigasi yaitu berpindah dari satu bagian ke bagian lain dalam blog, biasanya satu bagian harus di-link dari halaman utama supaya pengunjung blog lebih mudah menemukan sesuatu yang dicari.

Tutorial kali ini akan menyajikan tombol teks sederhana yang biasanya diletakkan pada bagian header blog dan pada bagian akhir Anda bisa membuat tombol berbasis grafis.

Umpamanya saya akan menambahkan tombol "Home", "About" dan "Contack" pada bagian header blog (sebetulnya kita bisa memindahkan posisi ini dalam blog sesuai selera kita)

1. Siapkan link menu untuk ketiga menu diatas, contoh :
<a href='http://www.namablog.blogspot.com'>Home</a>
<a href='http://www.namablog.blogspot.com/namablog-about-page.html'>About</a>
<a href='http://www.namablog.blogspot.com/namablog-contack-page.html'>Contack</a>

kemudian dari masing-masing link yang sudah disiapkan, tambahkan "Class" menu (tombol menu) untuk setiap link sehingga menjadi

<a href='http://www.namablog.blogspot.com' class='button1' >Home</a>
<a href='http://www.namablog.blogspot.com/namablog-about-page.html' class='button2' >About</a>
<a href='http://www.namablog.blogspot.com/namablog-contack-page.html' class='button3' >Contack</a>

2. Buka blog menggunakan nama 'user' dan 'password'
3. Masuk ke 'Tata Letak > Edit Html'
4. Masukkan kode dibawah ini sebelum kode </b:skin>

a.button1 {
background: #ff0000;
padding: 5px;
color: #ffffff;
}

Maksud Kode CSS diatas adalah : 1. Mendefinisikan Class Button 1 untuk tombol 'Home', 2. #ff0000 = menggunakan warna merah (RGB) dengan kode warna Hex, 3. Padding 5px adalah jarak antar menu (Home dan About) adalah 5 pixel, 4. color:#ffffff = menggunakan warna putih untuk teks pada menu.

untuk tombol berikutnya gunakan id class button seperti berikut ini :

a.button2 {
background: #ff0000;
padding: 5px;
color: #ffffff;
}

a.button3 {
background: #ff0000;
padding: 5px;
color: #ffffff;
}

Simpan atau klik "Terbitkan Entri", sampai disini hasilnya sudah bisa dilihat.

Kalo kita perhatikan, dari menu yang sudah dibuat jika di klik akan menuju ke link yang ditentukan namun ketika mouse mengenai daerah menu tersebut tidak ada efek dari perubahan gambar menu (biasanya pola warna/gambar), hanya icon mouse saja yang berubah menjadi icon mouse "Klik".

"Mouseover" adalah istilah untuk "event" atau kejadian pada saat mouse melintasi area tertentu (dalam hal ini tombol menu) dan area tersebut berubah warna atau berganti gambar. kita bisa memodifikasi warna saat mouse melintasi.

tambahkan kode berikut ini :

a.button1:hover {
background: #cccccc;
color: #ffffff;
}

Kode tersebut menunjukkan bahwa "button1" (yaitu home) akan berubah warna ketika mouse melintas dengan warna latar belakang "#cccccc" dan warna teks "#ffffff"

untuk dua kode berikutnya bisa ditambahkan seperti mendefinisikan button diatas, namun jika ketiga tombol tersebut penampilannya sama bisa dipersingkat menjadi :

a.button1:hover, a.button2:hover, a.button3:hover {
background: #cccccc;
color: #ffffff;
}

Friday, April 30, 2010

Cara Membuat Menu Scroll Sidebar di WordPress

Apakah Anda memiliki banyak blogrol atau link situs/sahabat? Dan semuanya ingin Anda tampilkan, padahal jumlah tersebut memerlukan space/ruang yang banyak. Dengan keterbatasan ruang yang tersedia (gak mungkin blog Anda dipenuhi blogroll, sehingga tulisan Anda nyaris menjadi tidak dominan), maka saya anjurkan Anda untuk membuat scroll di side bar blog_anda.wordpress.com seperti tampilan blog ini (gambar di bawah in yang diberi kotak merah).

Scroll Blogroll WordPress

Cara Membuat Menu Scroll Sidebar di WordPress.

Hanya dua langkah membuat menu scroll sidebar blogroll Anda.

Langkah 1 : Copy-lah source code di bawah ini ke text-widget di dashboard WordPress Anda.

1<div style="overflow:scroll;width:150px;height:180px;">
2<ul>
3    <li><a href="http://wordpress.com/" target="_blank">WordPress.coma>li>
4    <li><a href="http://nusantaranews.wordpress.com/"  target="_blank">Nusantarakua>li>
5    <li><a href="alamat_blog">Nama_bloga>li>
6ul>
7div>

Langkah 2 : Setelah Anda copy source code diatas, silahkan edit nama dan alamat situs referensi anda. Lalu kiklah simpan pada Dashboard WordPress Anda. Anda sudah selesai membuat menu scroll sidebar Anda.

Hanya dua langkah… Selesai!

Catatan (Perhatikan SourceCode!)

Bagian nilai (150 dan 180) dari sourcecode width:150px;height:180px; dapat anda ubah/ganti untuk menentukan lebar pixel (width) dan tinggi pixel (height) scroll bar Anda.
Untuk tag html

Selamat mencoba, semoga bermanfaat.

Cara membuat blog di wordpress

Tulisan ini (dan mungkin serial beberapa tulisan lanjutan) saya tulis dalam rangka memberi informasi yang seluas-luasnya kepada masyarakat kita bahwa adalah baik untuk memulai budaya menulis di dunia internet. Terlebih masih banyak rekan-rekan saya dan mungkin netter lainnya yang masih berasumsi bahwa untuk membuat blog harus :

mengeluarkan uang untuk memiliki sebuah situs/blog
memiliki dasar pemograman berbasis web
tidak bisa menulis

Asumsi pada poin 1 dan 2 adalah tidaklah benar. Anda dapat memiliki sebuah blog secara gratis yang disediakan oleh berbagai provider, seperti Blogdetik, WordPress, Blogspot, Multiply, Blogsome, dan masih banyak lagi. Sedangkan alasan poin 3 merupakan batu rintangan awal saja, karena pada dasarnya dengan memberi komentar pada suatu tulisan berarti secara tidak langsung kita telah memiliki naluri menulis. Pada kesempatan ini, saya hanya akan memberi panduan membuat blog di WordPress.

Cara Membuat Blog WordPress

Klik/buka id.wordpress.com (Blog Bahasa Indonesia) atau en.wordpress.com (Blog in English Version)
Isilah Form Pendaftaran Gratis (Blog Bahasa Indonesia)
- Nama Pengguna : isilah nama blog yang Anda inginkan (paling sedikit 4 huruf/angka). Contoh : nusantaranews atau pemuda1989 [catatan: tidak boleh spasi, hanya boleh huruf dan angka]
- Kata Sandi : pilih sandi/pin/password (paling sedikit 6 huruf/angka)
- Konfirmasi : ketik kembali sandi/pin/password di atas
- Email Address : isilah alamat email Anda (pastikan Anda memiliki email yang valid)
- Legal flotsam : beri tanda centang padakotak yang tersedia sebagai tanda setuju dengan syarat dan ketentuan WordPress.
- Beri tanda titik pada kotak tersedia “Berikan aku blog! (Seperti namauser.wordpress.com)”
Pada bagian kiri bawah, klik Berikutnya
Pada halaman selanjutnya, akan muncul tampilan
- Nama Domain :
  - Jika nama usernya tepat, maka nama tersebut menjadi domain blog kamu.
    Misalnya yang dipilih adalah pemuda1989, maka domainnya adalah pemuda1989.wordpress.com
  - Jika nama usernya sudah digunakan oleh orang lain, maka akan muncul peringatan “Maaf, blog tersebut sudah ada!” .
    Maka ketiklah nama blog lainnya, lalu klik signup. Misalnya nusantaranews sudah digunakan, lalu gantilah/tambahkan frasa ku misalnya menjadi nusantara1989
- Judul Blog : Anda dapat menggantikan Judul blog seperti Nusantaranews – Informasi, Fakta dan Opini
- Bahasa : Pilihlah Bahasa Indonesia sebagai bahasa yang akan Anda gunakan dalam menulis
- Privasi : Pastikan ada tanda titik pada kotak (biasanya sudah ada secara otomatis).
Klik Sign Up
Dan pada halaman berikutnya, akan akan tampilan yang meminta Anda mengecek email untuk menyelesaikan proses registrasi ( Check Your Email to Complete Registration)
Selanjutnya, bukalah email Anda, dan ada pesan yang masuk (biasanya cuman beberapa detik) dari WordPress. Pada pesan tersebut, kliklah link link yang berwarna biru
Dengan mengklik link biru tersebut, berarti Anda sudah memiliki blog pribadi. Selamat!

Cara Login WordPress

Sebelum Anda dapat menulis pertama-tama adalah Anda harus login dulu dengan account baru Anda. Misalnya account Anda adalah namaAnda.wordpress.com atau nusantaranews.wordpress.com, maka ada dua cara login:

Bukalah http://namaAnda.wordpress.com/wp-login.php atau http://nusantaranews.wordpress.com/wp-login.php
Ada dua kotak, pertama Masukkan nama user/pengguna Anda pada bagian atas dan isi kata sandi/pin/password Anda di kotak bagian bawah.
Setelah itu, beberapa saat Anda akan melihat tampilan dalam/internal blog Anda.
Cara kedua (lebih lambat) adalah dengan masuk ke situs WordPress terlebih dahulu.
1. Masuklah ke http://id.wordpress.com/
2. Masukkanlah nama pengguna dan kata sandi
3. Kliklah nama blog Anda tersebut, dan beberapa saat Anda akan melihat tampilan Blog Anda

Cara Membuat Tulisan

Untuk memulai sebuah tulisan, Anda dapat membaca petunjuk lengkapnya di :
Cara Membuat Tulisan Blog yang Baik [Pemula].

ADINDA BLOG