Image by FlamingText.com

Kamis, 02 Desember 2010

membuat menu horizontal untuk blog

pertama-tama kamu harus punya gambar kayak gini nih:

dan

kalo nggak punya gimana? kalo nggak punya pake gambar yang aku sediain ini aja deh.

blackleft.gifblackright.gif
greenleft.gifgreenright.gif
redleft.gifredright.gif
unguleft.gifunguright.gif
yellowleft.gifyellowright.gif
blueleft.gifblueright.gif
whiteleft.gifwhiteright.gif


Ok, bahan-bahannya sudha ada, mari kita mulai maraciknya:
1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
2. Cari script seperti ini]]></b:skin>
; , kalo udah ketemu copy script dibawah ini dan taruh diatasnya


/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}





Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;
tulisan yg berwarna hijau itu untuk warna teks menu y:bisa di ganti kunjungi http://distroane.blogspot.com

background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;

background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;



ngerti nggaaak"""


Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini


<div id="tabshori">
<ul>
<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >


4. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :


<div id="content-wrapper">



caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo udah ketemu copy script yang tadi diatasnya

6. Simpan hasil pengeditan.
7. Lihat hasilnya.




selamat mencoba......"

Rabu, 01 Desember 2010

cara membuat animasi cursors 2

Cara Membuat Cursor Animasi Molor2 Gila :

  1. Login ke BloGGeR
  2. Dasbor : KLIK link Tata Letak.
  3. Elemen Laman : KLIK link Tambah Gadget.
  4. Widget : KLIK link HTML/Javascript.
  5. Copy Paste : Copy Javascript dan simpan di box penambahan widget HTML/Javascript.
  6. Simpan : KLIK "SAVE/Simpan", kemudian lihat hasilnya dengan membuka halaman blog.




javascript animasi 2



<script type="text/javascript">
<!--
/* gubhugreyot*/
var panjang_molor = 20 /* silahkan rubah nilainya biar ekornya makin molor atau berkurang molornya */
var path = "http://best-free-counter.com/counters/c9f029a6a1b20a8408j15561u2351b321dd8.jpg"
var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
var i,d = 0
function initTrail() {images = new Array()
for (i = 0; i < parseInt(panjang_molor); i++) {images[i] = new Image()
images[i].src = path}
storage = new Array()
for (i = 0; i < images.length*3; i++) {storage[i] = 0}
for (i = 0; i < images.length; i++) {document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '"></div>')}
trail()}
function trail() {for (i = 0; i < images.length; i++) {document.getElementById("obj" + i).style.top = storage[d]+'px'
document.getElementById("obj" + i).style.left = + storage[d+1]+'px'
d = d+2}
for (i = storage.length; i >= 2; i--) {storage[i] = storage[i-2]}
d = 0
var timer = setTimeout("trail()",10)}
function processEvent(e) { if (window.event) {storage[0] = window.event.y+standardbody.scrollTop+10
storage[1] = window.event.x+standardbody.scrollLeft+10} else {storage[0] = e.pageY+12
storage[1] = e.pageX+12}}
initTrail()
document.onmousemove = processEvent
//-->
</script>



Catatan :

  1. Setelah di coba dan berhasil, jika kepingin ganti gambar animasi yang aku setakan di javascript di atas (http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/LatemBleding.gif) bisa sampeyan buat sendiri atau keliling dulu untuk cari. Banyak banget, kok. Tinggal ketik saja gambar animasi.
  2. Untuk merubah jumlah gambar yang jadi buntut, rubah pada var panjang_molor = 20
  3. Mungkin pingin identitas sampeyan atau nama simbah sampeyan yang mau dijadikan cursor? Silahkan saja ke