Cara Membuat Cbox pada Blog

Kali ini saya akan membahas tentang cara membuat Cbox. Apa itu Cbox ? selalu deh kalo w posting nanya mulu. Ya udah Cbox itu ibarat seperti buku tamu, sebagai contoh lihat di sebelah kiri blog saya yang berjudul Chat BOX. Nah itu dia (tolong sekalian di isi ya...hehe). Ok lanjut, untuk membuat yang sepeti itu, cukup mudah ko. Ikuti Langkah-langkah di bawah ini :

1. Pertama anda masuk dulu ke http://cbox.ws/
2. lalu daftar dengan cara klik sign up, ikuti langkah pendaftrannya.
3. Sudah daftarnya ? Jika sudah silahkan Login ke Cbox anda, lalu klik Publish! Copy semua kode yang ada di step 1.
4. sekarang Login ke blog anda, klik Layout/Tata Letak -> Page Elements/Elemen Laman -> Add a Gadget/Tambah Gadget -> HTML/JavaScript.
5. Beri judul sesuai keinginan anda dan paste kode yang tadi anda copy di kotak konten. Simpan
6. Selesai, Sekarang lihat blog anda, bagaimana ? masih kosong ? tunggu ada ngisi dong sabar aja

Ok... saya rasa cukup untuk saat ini.
Jika ada yang kurang di mengerti silahkan Commentnya. 

sumber

Read more »

Cara Menu Navigasi Melayang

Setelah banyak mencari Menu Navigasi yang unik ,akhirnya saya menemukan Menu yang cantik dan simple .Biasanya Navigasi itu berupa header saja ,tapi kali ini kita menggunakan animasi dan tidak perlu bermain HTML karena hanya perlu tambah gadget saja. Untuk lebih mudah perhatikan contoh di bawah ini ....



Ini adalah gabungan dari 2 gadget yang saya pelajari dan modifikasi sendiri. Untuk membuatnya ikuti langkah-langkah di bawah ini :

1. Silahkan kunjungi http://www.flashvortex.com/menus.php
2. Silahkan pilih menu yang anda inginkan dengan cara klik "CLICK HERE TO EDIT THIS" pada menu yang anda inginkan.
3. Ikuti langkah-langkah pembuatan menu, bagi yang tidak mengerti akan saya jelaskan.

• Step 1 tidak begitu penting, lewati saja
• Step 2 kolom pertama, isi dengan judul menu anda (setiap judul pisahkan menggunakan ENTER)
• Masih pada Step 2, di kolom yang kedua isi dengan alamat link judul menu (setiap link pisahkan menggunakan ENTER, urutan di sesuaikan dengan judulnya)
• Lewati Step 3 & 4
• Klik Generate Animation
• Copy code yang ada di kolom "Copy / paste this code into your site"

4. Login ke blog anda > Layout (tata letak) > Page Elements (Laman Elemen) > Add a Gadget (Tambah Gadget) > HTML/JavaScript
5. letakan code berikut di kotak konten (ganti yang berwarna merah dengan code menu anda)

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

.gbtab{
height:100px;
width:30px;
float:right;
cursor:pointer;
background:url('http://i953.photobucket.com/albums/ae17/abi-galoga/Untitled-1-16.jpg') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000;
background:#F5F5F5;
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.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

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

<div class="gbcontent">

<script src="http://h1.flashvortex.com/display.php?id=3_1259075124_65300_151_0_131_137_6_34" type="text/javascript"></script>

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

6. Save dan lihat hasilnya

Terima kasih ,dan jangan lupa tinggalkan komentar .

Read more »

Cara Membuat Menu Floating Image

Oke sekarang mari kita bahas apakah itu menu floating image? menu floating adalah menu yang memiliki posisi tetap/fixed, berada di kanan/kiri dan atas/bawah. Sedangkan image adalah gambar. Berarti dapat di artikan bahwa menu floating image adalah menu floating yang menggunakan gambar. Jika anda seorang kaskuser, maka anda sering menjumpai tampilan seperti ini. 

Floating

Itu yang di tunjuk panah merah yang saya maksud floating. Nah sekarang kita langsung ke cara pembuatannya aja ya. Step,By.Step!!!

1. Log in ke blog anda dengan akun anda.

2. Masuk ke design > Edit HTML

3. Cari kode ]]></b:skin> 

4. Copy dan paste kode berikut di atas kode ]]></b:skin> 

#floating {
position:fixed;_position:absolute;top:170px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Keterangan : kode yang berwarna merah dapat anda ganti sesuai keinginan. top=atas bisa di ganti dengan bottom= bawah. left=kiri dapat di ganti dengan right=kanan
5. cari kode </body>
6. Copy dan past kode ini di atas kode </body>

<div id="floating">
<a href="http://abi-galoga.blogspot.com">
<img src="http://i953.photobucket.com/albums/ae17/abi-galoga/Untitled-2.jpg" border="0" /></a>
</div>

Yang berwarna merah ganti dengan Link anda dan yang berwarna biru ganti dengan alamat gambar anda.

Selesai sudah posting kali ini. Jika berhasil ucapakan Alhadulillah jika gagal jangan menyerah!coba lagi !

sumber

Read more »

Membuat Search Box

Kotak search (search box) yang saya maksud bukanlah search engine, tapi kotak search yang ini di gunakan untuk mencari artikel yang berada di Blog kita. Ok penjelasannya sudah selesai, langsung saja :

1. Login ke blog anda > Layout (tata letak) >> Page Elements (laman elemen) >>> Add a Gadget (tambah gadget) >>>> HTML/Java Script
2. Copy paste kode ini di kotak konten

<form id="searchform" action="/search" style=" text-align:center;" method="get">
<input onfocus="if (this.value == &quot;Cari Artikel&quot;) {this.value = &quot;&quot;;}" value="Cari Artikel" type="text" id="s" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Cari Artikel&quot;;}" size="20" class="inpsearch" name="q"/>
<input id="searchsubmit" value="GO" type="submit"/>
</form>

Lalu lihat hasilnya ....

Read more »

Cara Membuat Float Gambar Melayang

Trik ini sebenernya udah jadul siih, dan udah nggak gue pake lagi. Dan trik ini bisa dipake dengan mengkombinasikannya dengan blog, maksudnya ya menyesuaikan dengan tampilan blog. Gambar ini bentuknya bisa gambar diem atau berekstensi .jpeg/.jpg atau bahkan gambar bergerak/animasi berekstensi... .gif . Udah maksud belum niih? Gambar melayang ini selalu ada di pojok dan tidak akan ikut kemana-mana kalo scroll window digerakkan. Kalo penasaran ya praktekin aja lah, niih caranya:

• Pastinya ya Login di Blogger terus pilih Layout/Tata Letak
• Kemudian pilih menu Edit HTML kemudian beri tanda centang pada Expand template widget
• Sekarang coba cari kode ]]></b:skin> ... Kalo udah ketemu taruh kode di bawah ini di atasnya:
  

  #diesilver_float {
  position:fixed;_position:absolute;bottom:0px; left:0px;
  clip:inherit;
  _top:expression(document.documentElement.scrollTop+
  document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

• Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".
• Langkah selanjutnya yaitu mencari kode </body> kalo udah tinggal paste kode berikut di atas kode tadi:
  

  <div id="UnoZoneu">
  <a href="http://unozoneu.co.cc">
  <img src="http://i181.photobucket.com/albums/x62/deth_killer_2007/metalsluggunner.gif" border="0" /></a>
  </div>

• Ganti alamat link http://unozoneu.co.cc dengan alamat link kamu. Kemudian ganti juga link http://i181.photobucket.com/albums/x62/deth_killer_2007/metalsluggunner.gif dengan link gambar kamu. Berikut udah gue cariin beberapa gambar yang mungkin bisa kamu pake:
  
  
  
  

Read more »