Tak Punya Ide? Tulis Tutorial Kacangan!

Jika saya tak punya ide ngeblog, maka saya akan...

Akan copas tulisan orang? Ah, basi!

Lalu apa?

Gampang, tinggal buat saja tutorial kacangan! Tutorial yang sepele tetapi bermanfaat. Misalnya cara menghapus komentar. Nah itu kan tak semua orang tahu, dan master sibuk dengan tutorial tingkat tinggi yang memanfaatkan HTML, maka para newbie tingal nulis aja, tutorial untuk newbie sperti saya ini.

Wong kita sama-sama nyubi kan? (goodluck)
KLIK DISINI UNTUK BACA SELENGKAPNYA

Berani Komentar Jujur: Tanda Blogger Sejati

Saya heran, kenapa banyak yang berkomentar hanya asbun, sekedar "Nice Post" dll. Memangnya susahkah untuk berkomentar jujur?

Ada beberapa faktor yang menyebabkan malas menulis komentar yang jujur, yaitu: tidak punya waktu banyak dan emang nggak tau mau ngomong apa.

Jika memang anda tidak mengerti bahasannya ya anda bisa berkomentar seputar templatenya, blognya, gaya penulisannya dll.

Jika memang anda tidak setuju dengan apa yang disampaikan, silakan kritik dengan bahasa yang santun. Toh dia juga akan menerima.

Jika memang anda tidak punya waktu banyak... yah paling tidak anda bisa membookmarknya untuk dikomentari lain waktu.

Apa susahnya untuk berkomentar jujur? Justru lebih baik daripada sekedar nice post! :-))
KLIK DISINI UNTUK BACA SELENGKAPNYA

Gudang Ilmu Minta Izin Mau Rubah Sedikit Haluan

Sebelumnya saya minta maaf jika sekarang postingan di Gudang Ilmu rada berubah. Karena sekarang saya akan merubah sedikit haluannya.

Jika dulu penuh dengan tutorial dan kode HTML yang bikin mual, sekarang stylenya akan diganti dengan sedikit beropini tentang blogosphere. Yah... hitung-hitung ajang untuk mencurahkan isi hati.

Tetapi Insya Allah postingan tutorial akan terus ada. Jadi tunggu saja tanggal mainnya yah? (goodluck)
KLIK DISINI UNTUK BACA SELENGKAPNYA

Standar Hiatus

Saya bertanya-tanya: dalam jangka waktu berapa lama seorang blogger bisa dibilang hiatus.

Kadangkala ada yang tidak ngepost seperti biasanya, misalnya biasanya 1 hari sekali jadi 3 hari, dibilang hiatus.

Tapi menurut saya yang ideal sih 1 bulan...

Kenapa?

Karena jika tidak update 1 minggu bisa jadi ada kesibukan penting yang melanda si blogger di dunia nyata, sehingga tidak sempat ngeblog. Terlalu jika ada yang tidak update seminggu dibilang hiatus! (angry)

Jika satu bulan lebih, itu baru bisa dibilang hiatus.

Masalahnya, kenapa kita mempersoalkan blogger yang hiatus? bukankah itu hak mereka?
KLIK DISINI UNTUK BACA SELENGKAPNYA

Dasar-dasar CSS #5

Ini adalah seri terakhir dari Seri Dasar-dasar CSS. Sebelumnya silakan baca edisi terdahulu:

Dasar-dasar CSS #1
Dasar-dasar CSS #2
Dasar-dasar CSS #3
Dasar-dasar CSS #4

Pada edisi terakhir ini akan dijelaskan tentang beberapa properti yang belum dibahas, penyingkatan CSS yang biasanya digunakan untuk kompresi, dan penggunaan keterangan !important.

1. Beberapa Properti

Pertama-tama kita akan membahas tentang beberapa properti yang belum dibahas. Yaitu:

1. cursor yaitu untuk kursor/penunjuk mouse. Valuenya yaitu:
  • crosshair: yaitu gambar pointer yang berbentuk seperti tanda plus.
  • text: yaitu gambar pointer yang kalau seperti pada microsoft word (berbentuk seperti pointer teks).
  • wait: yaitu gambar jam pasir seperti kalau loading program.
  • default: yaitu gambar pointer biasa (panah).
  • help: yaitu gambar pointer dengan tanda tanya (seperti pernah diaplikasikan untuk trik membuat help/keterangan).
  • n-resize: yt gambar kursor yang seperti untuk memperlebar/memperkecil suatu objek (seperti pada paint). Arahnya menghadap ke utara.
  • ne-resize: sama seperti n-resize tetapi arahnya menghadap ke timur laut.
  • e-resize: arahnya menghadap ke timur.
  • se-resize: arahnya menghadap ke tenggara.
  • s-resize: bentuknya sama seperti n-resize.
  • sw-resize: bentuknya sama seperti ne-resize.
  • w-resize: bentuknya sama seperti e-resize.
  • nw-resize: sama dengan se-resize.
  • none: tidak memakai kursor.
  • url('URLGAMBARCURSOR'): cursor memakai gambar (ganti URLGAMBARCURSOR dengan URL gambar cursor yang diinginkan). (Baca juga: Cara Membuat Custom Cursor)
2. list-style: Tampilan daftar. Ada 3 properti untuk tampilan daftar.
  • list-style-position: Posisi tampilan daftar. Nilainya inside untuk didalam dan outside: untuk diluar.
  • list-style-type: Bentuk bullet. Nilainya:
    • disc: tampilan bullet seperti bentuk bulat penuh.
    • square: tampilan bentuk kotak.
    • circle: bentuk bulat tetapi hanya outsidenya.
    • decimal: berbentuk angka (1, 2, 3, dst. seperti penggunaan tag <ol>).
    • upper-roman: berbentuk angka romawi dengan huruf besar (I, II, III, dst.)
    • lower-roman: berbentuk angka romawi dengan huruf kecil (i, ii, iii, dst.)
    • upper-alpha: berbentuk alfabet dengan huruf besar (A, B, C, dst.)
    • lower-alpha: berbentuk alfabet dengan huruf kecil (a, b, c, dst.)
    • none: tidak memakai bullet
  • list-style-image: url('URLGAMBARBULLET'): Gambar bullet. Ganti URLGAMBARBULLET dengan URL dari gambar bullet yang diinginkan.
3. overflow: kondisi jika isi konten melewati batas width/height yang telah ditentukan. Misalnya width ditentukan 100px dan height 100px tetapi ternyata melewati batas tersebut. Nah, nilai dari overflow ini adalah:
  • visible: yaitu isi konten yang melewati batas tetap ditampilkan.
  • hidden: yaitu isi konten yang melewati batas tidak ditampilkan sehingga yang ditampilkan hanya teks yang masih berada didalam batasnya.
  • auto: yaitu jika kelebihan maka akan ditampilkan scroll-nya. Jika tidak ya maka tidak.
  • scroll: yaitu baik kelebihan ataupun tidak maka akan tetap ditampilkan scrollnya, tetapi jika tidak kelebihan maka scrollnya nonaktif.
4. opacity: yaitu transparansi objek. Biasanya diikuti dengan properti filter: Alpha(Opacity=x, FinishOpacity=y); Dengan ketentuan x = nilai yang ditentukan properti opacity (1 = padat/tdk transparan, 0 = tidak kelihatan, antara 0 s/d 1 = transparan) dan y = 100x dari nilai x. Misal:
body{
opacity:0.5;
filter: Alpha(Opacity=0.5, FinishOpacity=50);
}
Berikut contoh penggunaan properti diatas.
<html>
<head>
<title>Belajar CSS - Part 5</title>
<style>
<!--
body{
cursor: crosshair;
}
.class1{
list-style-position: inside;
list-style-type: square;
}
.class2{
list-style-position: inside;
list-style-image: url('http://forum.plurk-id.org/Smileys/default/47d20905d017c396d67b4a30c9ac9b10.png');
}
#id1{
width:200;
height:200;
overflow:hidden;
}
#id2{
width:200;
height:200;
overflow:auto;
}
#id3{
opacity:0.5;
filter: Alpha(Opacity=0.5, FinishOpacity=50);
}
-->
</style>
</head>
<body>
<ul class="class1">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
<ul class="class2">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
<div id="id1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<br/>
<div id="id2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<br/>
<div id="id3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
</body>
</html>
Buat file seperti contoh diatas dengan notepad lalu save as dengan nama dasar dasar css 5 properti.html dan ganti dropdown Save As Type dengan All Files lalu save dan buka di browser. Kira-kira hasilnya seperti ini.
2. Penyingkatan CSS

Ternyata nggak cuma SMS aja yang disingkat. (goodluck) CSS pun bisa disingkat. Penyingkatan dilakukan supaya lebih cepat diload. Ada beberapa macam penyingkatan.

1. Penyingkatan properti.

Beberapa properti yang bisa disingkat:
  • font
  • border
  • background (image)
  • margin
  • padding
Penyingkatan font

Sintaks penyingkatannya seperti ini.
font: font-weight font-size font-family;
Misal:
font: bold 24px Verdana,Helvetica;
Ket:

Yang perlu diperhatikan, untuk penulisan font-family terutama yang merupakan font generik, diantara font-font generik jangan ada spasi.

Penyingkatan border

Sintaks:
border: border-style border-width border-color;
Misal:
border: solid 1px #CCC;
Ket:

Untuk mendefinisikan border hanya untuk border atas, kanan, bawah, maupun kiri, maka gunakan ,code>border-top, border-right, border-bottom, border-left ketimbang hanya border saja (pada bagian properti).

Penyingkatan background

Sintaks:
border: url('URLGAMBAR') background-repeat position-x position-y;
Ket:

Ganti URLGAMBAR dengan URL background.

position-x adalah posisi horizontal, sedangkan position-y adalah posisi vertikal. Misal:
border: url('http://i49.tinypic.com/2qmqcmc.jpg') repeat-y left 100px;
Penyingkatan Margin/Padding

Untuk margin/padding ada beberapa kondisi.

1. Jika kondisinya nilai margin/padding semua sama, maka sintaksnya: margin/padding: nilai_seluruhnya; Misal: margin: 10px; (nilai margin atas/bawah/kanan/kiri = 10px)
2. Jika nilai beda semua, maka sintaksnya: margin/padding: nilai_atas nilai_kanan nilai_bawah nilai_kiri; Misal: padding: 3px 4px 5px 6px; (3px padding atas, 4px kanan, 5px bawah, 6px kiri)
3. Jika nilai margin/padding atas dan bawah sama, dan juga nilai kiri/kanan juga sama, maka sintaksnya: margin/padding: nilai_atas nilai_kanan; Misal: margin: 5px 10px; (margin atas/bawah 5px, kana/kiri 10px)

2. Penyingkatan tag/class/id.


Jika ada 2 ID yang mempunyai properti sama, maka disingkat saja.

Misal
#id1{
color:#CCC;
width:200px;
}
.class1{
color:#FFF;
width:200px;
}
Maka disingkat jadi:
#id1, .class1{
width:200px;
}
#id1{
color:#CCC;
}
.class1{
color:#FFF;
}
Contoh penggunaan penyingkatan:
<html>
<head>
<title>Belajar CSS - Part 4</title>
<style>
<!--
.class1{
background:url('http://forum.plurk-id.org/Smileys/default/idiot.gif') no-repeat 30px 10px;
border:solid 3px green;
font: lighter 16px Arial,Tahoma,Verdana;
}
#id1{
width:150;
}
#id2{
width:100;
}
#id1, #id2{
height:200;
overflow:auto;
}
-->
</style>
</head>
<body>
<div class="class1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="id1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<br/>
<div id="id2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

</div>
<br/>
<div id="id3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
</body>
</html>
Lalu hasil eksekusi di browser akan seperti ini.
3. Penggunaan !important

Keterangan !important digunakan untuk menerangkan pentingnya suatu properti, sehingga properti tersebut yang didahulukan. Sintaksnya seperti ini.
selector{
properti:value; !important
}
Saya jelaskan dulu. Begini. Jika ada selector yang sama dengan property sama tetapi value yang berbeda, maka value yang disebutkan terakhir akan diprioritaskan. Misal:
#id1{
color:blue;
}
#id1{
color:green;
}
Maka #id1 akan berwarna hijau, karena dituliskan terakhir. Lain cerita dengan yang ini.
#id1{
color:blue; !important
}
#id1{
color:green;
}
Maka #id1 akan berwarna biru. Nah, kalau yang ini?
#id1{
color:blue;
}
#id1{
color:green; !important
}
Ya pasti berwarna hijau lah, orang disebutinnya terakhir, pake !important lagee... (lmao) (haha)

Nah, kalo yang ini?
#id1{
color:blue; !important
}
#id1{
color:green; !important
}
Ya sama kayak yang tadi: ijo! (haha)

!important ini sangat berguna untuk anda yang suka mengoprek CSS, misalnya dalam penggunaan layout Plurk atau Multiply. Dimana mungkin sudah disetting duluan CSS-nya oleh pembuat situs. Jadi jika gagal berubah layoutnya padahal sintaks kodenya sudah bener, maka bisa gunakan !important ini.

Berikut contoh penggunaannya.
<html>
<head>
<title>Belajar CSS - Part 4</title>
<style>
<!--
#id1{
color:blue;
}
#id1{
color:green;
}
#id2{
border: solid 5px grey; !important
}
#id2{
border: solid 1px grey;
}
#id3{
background-color:#CCCCCC;
}
#id3{
background-color:yellow; !important
}
#id4{
width:300px; !important
}
#id4{
width:350px; !important
}
-->
</style>
</head>
<body>
<div id="id1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="id2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="id3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="id4">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
</body>
</html>
Berikut hasil eksekusinya di browser.
Akhirnya serial Dasar-dasar CSS habis juga. Memang lumayan panjang yang edisi #5 tetapi semoga bermanfaat. Dan tetap stay tune di Gudang Ilmu... (goodluck)
KLIK DISINI UNTUK BACA SELENGKAPNYA

Widget Dalam Menu Bar/Navigasi

Kalau dulu saya pernah membuat postingan tentang navigasi menu dan navigasi dropdown menu, kalau ini masih berkutat seputar navigasi, tetapi navigasi ini merupakan pengembangan dari navigasi dropdown menu, yaitu navigasi dropdown menu yang bisa diselipi widget. Contohnya seperti gambar diatas.

(woot) Kalau begitu bagus dong? Tentu saja. Ini bisa menghemat tampilan blog jadi lebih hemat tempat.

Gimana caranya gan?

Begini...

1. Login ke Blogger, lalu klik link Rancangan > Edit HTML.

2. Backup dulu template anda.

3. Cari kode ]]></b:skin> lalu masukkan kode ini diatasnya.
/*--Navigasi--*/
#navigasi{
background:black; /* Warna latar belakang */
width:580px; /* Lebar navigasi */
height:auto;
margin:0;
padding:0;
}
#navigasi ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navigasi li{
list-style:none;
float:left;
}
#navigasi li a, #navigasi li a:link, #navigasi li a:visited{
color:yellow; /* Warna teks */
display:block;
padding:9px 10px 9px 10px;
font-size: 14px;
font-family: verdana;
text-decoration:none;
}
#navigasi li a:hover{
background:yellow; /* Warna latar belakang saat mouse hover */
color:black; /*Warna link saat mouse hover */
}
#navigasi li ul{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu biasa yg berisi link */
visibility:hidden;
}
#navigasi li ul li a, #navigasi li ul li a:link, #navigasi li ul li a:visited{
float:none;
background:black;
width:200px; /* Lebar submenu biasa yg berisi link */
border-width:1px;
border-style:solid;
border-color:#ffff66; /* Warna border */
}
#navigasi li ul li a:hover{
background:yellow; /* Latar belakang link submenu saat mouse hover */
color:black; /* Warna link submenu saat mouse hover */
}
#navigasi li:hover ul{
left:auto;
visibility:visible;
}
#navigasi li ul.widgetmenu{
padding:10px;
color:yellow; /* Warna teks submenu widget */
font-family: verdana;
background:black; /* Latar belakang submenu widget */
height:auto;
font-size:12;
width:auto;
border:1px solid #ffff66; /* Warna border */
width:300px; /* Lebar submenu yang berisi widget */
}
#navigasi .widgetmenu a, #navigasi .widgetmenu a:link, #navigasi .widgetmenu a:visited{
display:inline;
padding:0;
border:0;
height:auto;
width:auto;
}
#navigasi .widgetmenu a:hover{
font-size:12;
text-decoration:underline;
color:yellow; /* Warna link submenu widget saat hover */
font-family: verdana;
background:black;
height:auto;
width:auto;
}
4. Cari kode </head> lalu masukkan kode berikut diatasnya.
<script>
var auahgelap = '';
function petakumpet(id)
{
var menu = document.getElementById(id);
var sangmantan = menu.className;
if (sangmantan == 'ngumpet')
{
if (auahgelap != '')
{
var terlalu = document.getElementById(auahgelap);
terlalu.className = 'ngumpet';
}
menu.className = 'muncul';auahgelap = id;
}
else{menu.className = 'ngumpet';
}
}
function umpetpetak(id)
{
var menu = document.getElementById(id);
var sangmantan = menu.className;
if (sangmantan != 'ngumpet')
{
if (auahgelap == '')
{
var terlalu = document.getElementById(auahgelap);
terlalu.className = 'muncul';
}
menu.className = 'ngumpet';auahgelap = id;
}
else{
menu.className = 'muncul';
}
}
</script>
5. Cari kode yang mirip2 kode berikut.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='C A Minor D Minor ke G ke C Lagi (Header)' type='Header'/>
</b:section>
</div>
6. Dibawahnya, taruh kode berikut.
<div id='navigasi'>
<ul id='navigasi'>
<li><a href='#'>Home</a></li>
<li onmouseout='petakumpet("submenu1")' onmouseover='umpetpetak("submenu1")'>
<a href='#'>Other Blogs</a>
<div class='ngumpet' id='submenu1'>
<ul>
<li><a href='#'>My Blog</a></li>
<li><a href='#'>Info Musik</a></li>
<li><a href='#'>Berita Dunia Maya</a></li>
<li><a href='#'>Belajar SEO</a></li>
</ul>
</div>
</li>

<li onmouseout='petakumpet("submenu2")' onmouseover='umpetpetak("submenu2")'>
<a href='#'>Search</a>
<div class='ngumpet' id='submenu2'>
<ul class='widgetmenu'>
<li>
Ketikkan kata kunci yang anda cari lalu tekan tombol <b>Cari</b>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='200' name='q' onblur='if (this.value == "") {this.value = "Cari...";}' onfocus='if (this.value == "Cari...") {this.value = ""}' type='text' value='Cari...'/><input class='buttonsubmit' name='submit' type='submit' value='Cari'/></form>
</li>
</ul>
</div>
</li>

<li onmouseout='petakumpet("submenu3")' onmouseover='umpetpetak("submenu3")'>
<a href='#'>Buku Tamu</a>
<div class='ngumpet' id='submenu3'>
<ul class='widgetmenu'>
<li>
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe frameborder='0' height='400' scrolling='auto' src='http://www6.shoutmix.com/?mrizkifadillah' title='mrizkifadillah' width='200'>
<a href='http://www6.shoutmix.com/?mrizkifadillah'>View shoutbox</a>
</iframe>
<br/>
<a href='http://www.shoutmix.com' title='Get your own free shoutbox chat widget at ShoutMix!'>ShoutMix chat widget</a>
<!-- End ShoutMix -->
</li>
</ul>
</div>
</li>

</ul>
</div>
Ket:
- Pada kode <li onmouseout='petakumpet("submenu1")' onmouseover='umpetpetak("submenu3")'> perhatikan bagian submenu1. Jika pada kode dibawahnya terdapat kode <div class='ngumpet' id='submenu2'> maka ganti submenu1 dengan submenu2
- Jika ingin membuat menu yang tidak ada dropdown (misalnya link home) tulis saja seperti ini: <li><a href='#'>Home</a></li>.
- Tanda # adalah link yang diinginkan. Jika tidak ingin memakai link, biarkanlah saja begitu. Jika ingin memakai link, ganti dengan URL yang diinginkan.
- Ganti "Home", "Other Blog", "Search", dll dengan anchor link yang diinginkan. Begitu juga dengan "My Blog", "Info Musik", dll.
- Jika submenu itu berupa widget, maka ganti kode <ul> yang dibawah kode <div class='ngumpet' id='submenu1'> dengan <ul class='widgetmenu'>
- Jika submenu berupa link, maka biarkan saja kode <ul> tersebut.

7. Simpan. (klik Simpan Template)

Untuk contohnya bisa dilihat di http://www.demo.emeref.co.cc/2010/11/test-navigasi-link.html. Selamat mencoba! (code)
KLIK DISINI UNTUK BACA SELENGKAPNYA

Untuk Apa Sih Tautan Judul Itu?

Anda tidak tahu tautan judul? Fitur ini sangat berguna untuk mendongkrak SEO, terutama untuk yang ikut Kontes SEO. Jadi konsepnya begini. Jika tautan ini disetting mengarah ke URL tertentu, maka link judul postingan akan menjadi tautan ke URL yang ditentukan. Tetapi tidak berpengaruh terhadap alamt postingannya (hanya link judul postingannya saja yang akan berubah). (evilsmirk)

Udah ah daripada teori terus mending kita langsung ke TKP wae yoo... (funkydance)

1. Pertama-tama login ke Blogger.com, lalu klik Pengaturan > Format.

2. Lalu scroll kebawah hingga ketemu dengan bagian Tampilkan Kolom Link. Lalu pada pilihan disampingnya pastikan pilihannya Ya. Jika pilihannya Tidak ubah saja menjadi Ya. Lalu klik Simpan Setelan.
3. Lalu pilih tab Posting. Akan muncul kolom posting, kolom judul dan kolom tautan. Isikan URL yang diinginkan pada kolom tautan. Lalu postinglah seperti biasa dan terbitkan.
4. Lalu lihat posting anda. Nah, akan terlihat bahwa anchor link pada judul posting akan mengarah ke URL yang ditentukan pada langkah 3.
Nah, itu dia penjelasan cara membuat tautan pada judul posting. Nah, semoga bermanfaat. Kalau bermanfaat, silakan bagi lewat tombol-tombol share dibawah ini dan jangan lupa komentar. (evilsmirk)
KLIK DISINI UNTUK BACA SELENGKAPNYA

Tutorial Blog Copas? Itu Sudah Biasa!

Sudah banyak blog yang berisi tutorial blog. Sebagian besar merupakan tutorial yang copas. Bahkan sudah menjamur dimana-mana.

Sebenarnya tutorial blog copas itu mah sudah biasa!

Asalkan... nah, ini ada asalnya nih... (goodluck)

Asalkan yang dicopy hanya idenya saja.

Misalnya tutorial cara membuat blog. Banyak yang sudah menulisnya! Tetapi berbagai macam variasi penyajiannya. Ada yang katanya dibuat sendiri, ada yang copas tapi diedit dan banyak juga yang dicopas mentah-mentah.

Sebenarnya kalau anda kreatif, anda bisa membuat tutorial blog sendiri. Anda hanya perlu pengetahuan tentang coding, minimal HTML, CSS, JavaScript. Lalu anda bisa membuat blog percobaan atau istilah kerennya blog lab. (goodluck) Anda bisa membuat percobaan apasaja disitu, sampai blog percobaan anda hancur. Lalu anda tinggal posting hasil percobaan di blog asli anda. Contoh blog percobaan saya: http://demo.emeref.co.cc

Intinya, tutorial copas itu boleh saja, tetapi yang dicopas hanya idenya. Tetapi akan lebih bagus lagi jika anda kreatif membuat tutorial sendiri. (goodluck)
KLIK DISINI UNTUK BACA SELENGKAPNYA

Modifikasi (Tampilan) Label ala WordPress

Tampilan label di Blogger memang sudah berubah. Kini sudah bisa berupa list (daftar) atau berupa cloud. Bisa juga ditampilkan jumlah postingannya. Tetapi bila diaplikasikan kedalam mode cloud, maka tampilannya akan menjadi tidak harmonis.

Alternatifnya, adalah menampilkan jumlah postingan dengan title (tooltip) seperti pada blog berflatform WordPress. Seperti dibawah contohnya.

Nah. Dengan title/tooltip ini juga bisa digunakan untuk mendongkrak seo. Dengan menggunakan keterangan "Lihat seluruh tulisan dalam [namalabel]" Seperti dibawah contohnya.
Apakah bisa diaplikasikan di Blogspot? Jawabannya adalah BISA! (rock) Bahkan bisa dikombinasikan dengan menampilkan jumlah postingan sekaligus nama labelnya. Seperti dalam blog ini contohnya. (Silahkan lihat label pada blog ini)
Haduh... kebanyakan intermezzonya nih... (idiot) kapan dong mulainya???

Oke. Pertama-tama...

1. Login ke Blogger, lalu klik Rancangan > Edit HTML.

2. Backup dulu template anda karena pekerjaan ini termasuk beresiko.

3. Kalau sudah dibackup, silakan klik checkbox kecil Expand Template Widget.

4. Cari kode berikut.
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
5. Lalu ubah menjadi seperti ini.
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.count + &quot; posts under &quot; + data:label.name'><data:label.name/></a>
* Ket:

Yang harus diperhatikan adalah bagian expr:title='... dst. yang ditandai dengan warna kuning. Nah, disitu ada beberapa kode. Yaitu:

- expr:title = ekspresi title (abaikan saja).
- data:label.count = jumlah postingan dalam label.
- data:label.name = nama label.

Nah, untuk menambahkan teks gunakan &quot;... teks ...&quot;. Jika didepannya ada data (data:label.count atau data:label.name) maka harus ditambah tanda plus (+) sehingga menjadi + &quot;... teks ...&quot; *nb: spasi sebelum kode &quot; (yang mengapit tanda plus) harus benar dan jelas.*. Jika di belakangnya terdepat data, ya begini jadinya: &quot;... teks ...&quot; + . Jika memang teks tersebut diapit oleh data (didepan maupun dibelakang ada data) maka codenya jadi: + &quot;... teks ...&quot; +

Misal: ingin yang seperti gambar pertama diatas maka kodenya:
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.count + &quot; topik&quot;'><data:label.name/></a>
Atau ingin seperti gambar kedua:
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='&quot;Lihat seluruh tulisan dalam &quot; + data:label.name'><data:label.name/></a>
6. Lalu cari semua kode berikut (menggunakan fitur pencarian di Browser dengan menekan Ctrl + F)
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
7. Lalu ganti semua kode diatas seperti langkah 5. (semua kode diatas harus diganti dengan kode yang sama seperti langkah 5)

8. Simpan. (klik Simpan Template)

9. Lihat hasilnya! Bagaimana? Silakan bagi pengalamannya dengan komentar di sini. (goodluck)
KLIK DISINI UNTUK BACA SELENGKAPNYA

Cara Menampilkan Statistik Blog (Widget Blogger)

Selain entri terpopuler, ternyata Blogger juga menerbitkan satu widget baru, berupa statistik blog. Setelah diadakan fitur statistik di dasbor, akhirnya widgetnya juga ada.

Begini cara memasangnya.

1. Login ke Blogger, lalu klik Rancangan.

2. Di halaman Elemen Halaman, klik Tambah Gadget.

3. Pada popup yang muncul, klik tanda plus disamping tulisan statistik blog.
4. Lalu atur.

- Judul: Isikan judul yang diinginkan.
- Jangka waktu: Aturan untuk menampilkan statistik dalam jangka waktu tertentu.
- Gaya: Pilih style yang diinginkan sesuai selera.
- Opsi gaya: Tergantung gaya yang dipilih. Maka silakan bereksplorasi terlebih dahulu.
5. Klik Simpan.

Sekarang anda telah menampilkan statistik blog yang bergaya. (funkydance)
KLIK DISINI UNTUK BACA SELENGKAPNYA

Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.