Cara Membuat Menu Dropdown

Apa itu Dropdown Menu ?Dropdown Menu adalah menu yang jika kita mengarahkan kursor ke menu tersebut maka akan muncul menu lainya yang memanjang kebawah.Contoh dari Dropdown Menu Adalah sebagai berikut:

MENUCara Download Video Youtube  Cara nge-hack Facebook  Cara Konversi File Online Cara Bikin Blog  Cara nge-hack Facebook 

Berarti sekarang kamu udah tau kan apa itu Dropdown Menu.ya udah tenang aja karena dalam postingan kali ini klinik-it akan menjelaskan bagaimana Cara Membuat Dropdown Menu.Tapi sebelumnya klinik-it akan menjelaskan sedikit dulu tentang Dropdown Menu. Apa sich kegunaan dari Dropdown Menu ini.Dropdown Menu ini berguna untuk membuat menu tanpa harus memakan banyak tempat.misalnya saja untuk menu-menu postingan kamu,atau bisa juga sebagai menu utama blog. dan yang jelas Dropdown Menu ini tidak akan memakan tempat yang banyak.untuk membuatnya silakan ikuti tutorial Cara Membuat Dropdown Menu berikut ini.

1.Login Ke Blogger dengan ID kamu.

2.Klik Tata Letak.

3.Klik tab Elemen Halaman.

4.Klik Tambah Gadget.

5.Kemudian Pilih HTML/Javascript.

6.Lalu masukan Script Berikut ini.

<select onchange="document.location.href=this.options[this.selectedIndex].value;"><option value="0" selected="selected">MENU</option><option value="http://kelolablogspot.blogspot.com/2010/02/cara-download-video-youtube.html">Cara Download Video Youtube </option><option value="http://kelolablogspot.blogspot.com/2010/01/cara-nge-hack-facebook.html"> Cara nge-hack Facebook </option><option value="http://kelolablogspot.blogspot.com/2010/02/cara-konversi-file-online.html"> Cara Konversi File Online</option><option value="http://kelolablogspot.blogspot.com/2010/02/cara-buat-blog.html"> Cara Bikin Blog </option><option value="http://kelolablogspot.blogspot.com/2010/01/cara-nge-hack-facebook.html"> Cara nge-hack Facebook </option></select>

Keterangan : Silakan Ubah Link yang berwarna biru dengan link-link Blog kamu. Dan ganti Teks yang berwarna merah dengan Teks yang kamu inginkan.

7.Dari Script di atas maka hasilnya adalah sebagai berikut.

MENUCara Download Video Youtube  Cara nge-hack Facebook  Cara Konversi File Online Cara Bikin Blog  Cara nge-hack Facebook 

8.Jika kamu ingin menambahkan menu-menu yang lainya,kamu tinggal menambahkan Kode berikut ini di atas kode </select>.

<option value="URL link">Teks</option>.

8.Setelah jadi semua jangan lupa klik SIMPAN.

9.Selamat mencoba...

Artikel yang ada di sini sebenarnya  hanyalah berupa koleksi pribadi yang saya kumpulkan dari berbagai sumber. Namun jika menurut anda artikel ini menarik dan bermanfaat, Bagikan artikel ini agar orang lain bisa membacanya : Bagikan via twitter :    Atau Pilih menu share yang anda ingin kan :

Read More

Membuat Scroll pada blogspot

Fungsi scroll sangat membantu kita dalam memaksimalkan fungsi tempat, karena dengan scroll kita dapat membuat tulisan yang panjang menjadi pendek, gambar yang besar menjadi kecil, dan sebagainya.
Cara membuatnya cukup sederhana yaitu dengan menambahkan kode html berikut pada setiap unsur yang ingin kita tampilkan dalam bentuk scroll

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">
Elemen yang akan discroll

</div>

Ketrangan :
300px = lebar scroll
200px = Tinggi scroll
padding:10px : Jarak antar elemen
#eee = kode warna

Artikel yang ada di sini sebenarnya  hanyalah berupa koleksi pribadi yang saya kumpulkan dari berbagai sumber. Namun jika menurut anda artikel ini menarik dan bermanfaat, Bagikan artikel ini agar orang lain bisa membacanya : Bagikan via twitter :    Atau Pilih menu share yang anda ingin kan :

Read More

Generator Kode HTML Warna

Sudah baca tentang kode warna HTML? Atau tool generatornya? . Kalau sudah, sekarang ada lagi tool baru yang barunnya. Kali ini tool generator tersebut berbentuk sebuah roda yang berputar. Mau?

Jangan lupa ucapkan terima kasih buat team 2createwebsite.com dan Mohammad Mustafa Ahmedzai.

Semoga bermanfaat.

Read More

Kode Warna HTML

Insert your color code:  

• R 
• G 
• B 

• H  °
• S  %
• V  %

# 

Click to put the color on the list below: 

Read More

Membagi 1 List style menjadi 2 Kolom

Cara buat 1 list menjadi 2 kolom itu sangat berguna lo apalagi bagi yang punya template 2 kolom dan lebih beruntung lagi kalo punya template 3 kolom jadi bisa hemat tempat, dapat meletakkan 2 widget atau tambahan lainya ke dalam 1 list saja. Jadi penen liat bagaimana bentuknya.. nah begini nih bentuknya

Untuk mendapatkan yang seperti diatas cara mudah ko' tinggal cari kode

]]>

Dan letakkan kode ini di atasnya

/* Kode Css List Two Kolom
------------------------------------------------------------------------------------------*/
#catl {
padding :5px 10px;
width : 91%;
background-color : #ffffdd;
border : 1px solid #ccc;
margin : auto;
}


#catl h3 {
display : block; color : #669900; padding-bottom : 5px;
margin-bottom : 5px; border-bottom : 1px solid #666;font-size:14px; }


/* style all the list items here */
#catl ul li {
height : 1em;
list-style-type : none;
color : #333;
padding : 0.3em 0 0.4em 0.25em;
font-size : 0.9em;
border-bottom : 1px solid #ccc;
text-indent:0px;
}


/* every second list item is positioned outward and moved up equal to LI height to even them */
#catl ul li.catl_l2 {
margin-left : 50%;
margin-top : -1.8em;
padding : 0.3em 0 0.4em 0.5em;
border : 0;
}


/* Every other two list items are styled with a background for usability and style */
.catl_alt {
background-color : #fffffc;
}


/* ini merupakan code hacking css untuk Ie 6*/
* html #catl ul li.catl_l2 {
margin-top : -2.3em;
}

Kalau sudah Klik Simpan dan Pilih Page Element Dan pilih Add Page Element/Tambahkan sebuah widget baru dengan pilihan Html/java script.

Kemudian masukkan kode ini di dalamnya:

<div id="catl">

<h3>Satu List Dua Kolom</h3>

<ul>

<li><a href="#">List Item Satu</a></li>

<li class="catl_l2"><a href="#">List Item Dua</a></li>

<li class="catl_alt">List Item Tiga</li>

<li class="catl_l2">List Item Empat</li>

<li>List Item Lima</li>

<li class="catl_l2">List Item Enam</li>

<li class="catl_alt">List Item Tujuh</li>

<li class="catl_l2">List Item Delapan</li>

</ul>

</div>

Catatan penting :

1. Yang perlu di ganti adalah tulisan antara tag

dan

.
Jika ingin membuat linklist menjadi seperti ini.

Nama List

jika ingin membuat list berupa link gambar seperti ini.

green-beast

Read More

Cara membuat Iklan melayang di Blogspot

Banyak dari kalangan blogger yang menngunakan cara ini untuk meningkatkan klik iklan yang pendanaannya bersifat pay to click seperti iklan-iklan  kumpulbloger, kliksaya dan jenis-jenis iklan lainnya, dikarenakan platform blogger dapat mendukung javascript maka widget tersebut bisa di pasang di blogspot anda dengan cara. ikuti cara dibawah ini, ya! tentunya disajikan secara praktis tapi kreatif.

1. Login ke Blogger
2. kLik Tata Letak => Klik elemen Tambah Gadget
3. Pilih Gadget yang bertemakan HTML/Java Script
4. Isikan Kode berikut di dalamnya

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}




.gbcontent{
float:right;
border:2px solid #000000;
background:#F1DEDE;
padding:10px;
}
</style>


<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>


<div id="gb">


<div class="gbtab" onclick="showHideGB()"> </div>


<div class="gbcontent">


<div style="text-align:right">
<a href="javascript:showHideGB()">
.:<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4VAz1ZrxIjeEJkTesekrCM7-FyRxS-TpLVt8T1bVZ8XEBhrL9XjgXtoSmp92Ca3Hj1gCf34URNk5AJHQxFvQ9I9NjUfPjoTfiZyIjS-OmZf_jAV3KJUd3nD5efzgsggSVo5ecbrI6mTWw/" title="kalau muncul, klik lagi" alt="tutup" />:.
</a>
</div>
<center>


SCRIPT IKLAN ANDA DI SINI - BISA DIISI DENGAN APA AJA SIH, TERSERAH~


</center>


<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

5. Klik simpan.

Selesai namun jika anda ingin merubah warna atau garis tepi silahkan edit scripts diatas di bagian border

Read More

HTML Membuat kursor animasi (animation cursor)

Mungkin anda pernah mengunjungi salah satu blog atau website yang kursornya terlihat berbeda dengan kursor yang ada pada umumnya. Kursor yang terlihat seperti gambar atau animasi adalah hasil dari edit html di ccs body. Jika dilihat sangatlah simpel untuk menggantikan kursor tersebut, hanya dengan menambahkan sebaris ccs. Langkah pertama yang harus anda lakukan adalah anda harus menyipakan gambar dengan ukuran dan dimensi yang sesuai dengan ukuran kursor yang anda inginkan, lalu gambar tersebut anda upload ke server image, seperti contohnya http://www.photobucket.com atau situs lainya yang mempunyai fasilitas menyimpanan gambar. Anda bisa juga menggunakan berbagai koleksi kursor di situs-situs penyedianya contohnya http://www.myfile.us dan banyak situs lainya

(silahkan cari di mesin pencari google)

Langkah selanjutnya, copy ccs berikut:

 cursor:url("isi alamat gambar anda"),text;

Langkah selanjutnya, paste ccs di atas, di bawah body{ dan selanjutnya save HTML anda.
selesai, paktis tapi kreatif.
*text adalah alternatif kursor anda juga dapat digantikan.

selamat mencoba

Read More