cara membuat gambar melayang (float)

cara membuat float

1. Login ke blogger trus klik "Layout -->> Edit HTML

2. Cari kode ini ]]></b:skin> kalo dah ketemu taru kode berikut ini di atasnya. #trik_pojok { 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); }

3. 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".

4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body> <div id="trik_pojok"> <a href="http://trik-tips.blogspot.com"> <img src="http://kendhin.890m.com/soniclari.gif" border="0" /></a> </div> "http://trik-tips.blogspot.com" adalah link. ganti dengan link kamu. "http://kendhin.890m.com/soniclari.gif" adalh lokasi gambarmu. ganti dengan lokasi gambar kamu.

ato url ini::

http://i181.photobucket.com/albums/x62/deth_killer_2007/metalsluggunner.gif http://i256.photobucket.com/albums/hh197/josuencore/metalslug327.gif http://i174.photobucket.com/albums/w100/LinkinaTank/Video%20Games/Metal%20Slug/031.gif http://i544.photobucket.com/albums/hh336/agungkornelius/NrUtnfrnZ.gif http://i196.photobucket.com/albums/aa76/freemommy33/James%20Photos/soccer14.gif

5. Jika kamu pingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.

6. Simpan hasil kerja kamu dan lihat hasilnya.

Baca Selengkapnya »»

cara membuat menu vertikal

1. Login ke blogger trus pilih "Layout-->Edit HTML"

2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh. .glossymenu, .glossymenu li ul{ list-style-type: none; margin: 0; padding: 0; width: 185px; /*WIDTH OF MAIN MENU ITEMS*/ border: 1px solid black; } .glossymenu li{ position: relative; } .glossymenu li a{ background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left; font: bold 12px Verdana, Helvetica, sans-serif; color: white; display: block; width: auto; padding: 5px 0; padding-left: 10px; text-decoration: none; } .glossymenu li ul{ position: absolute; width: 190px; left: 0; top: 0; display: none; } .glossymenu li ul li{ float: left; } .glossymenu li ul a{ width: 180px; } .glossymenu li a:visited, .glossymenu li a:active{ color: white; } .glossymenu li a:hover{ background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif'); } * html .glossymenu li { float: left; height: 1%; } * html .glossymenu li a { height: 1%; } Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini : .glossymenu li a{ background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left; dan .glossymenu li a:hover{ background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');

3. Kemudian di save.

4. Lalu pergi ke menu "Page Elements"

5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu"> <li><a href="/">Home</a></li> <li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li> <li><a href="http://x-template.blogspot.com" >Free Template</a></li> <li><a href="http://getebook.co.cc">Free Ebook</a></li> </li> </ul>

Ket::::::::::::: Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya. Dah gitu aja. Gampang kan???? :D

Baca Selengkapnya »»

Cara Menuliskan Script/Kode Dalam Artikel Blog

Untuk menuliskan script/kode kedalam artikel blog memang ada tekniknya sendiri, karena jika kita menuliskannya dengan cara yang biasa maka yang akan muncul kemudian di blog tidaklah seperti dengan apa yang kita tuliskan. Misalnya gini, jika kita menuliskan kode <head> dengan cara yang biasa maka hasilnya tidak akan muncul dalam postingan karena kode tersebut langsung diterjemahkan kedalam bahasa HTML. Jadi untuk menuliskan kode <head>, maka yang seharusnya dituliskan supaya bisa muncul kode tersebut adalah ini &lt;head&gt;. Nah terus bagaimana kalau ada banyak kode yang harus kita posting? Mau tahu bagaimana caranya menuliskan kode2/script2 tersebut ke dalam blog? Ada beberapa cara untuk menuliskan kode-kode tersebut kedalam blog, diantaranya yaitu:

Cara Pertama : - Gunakan software-software web design, misalnya Macromedia Dreamwaver, Microsoft Frontpage, Namao Web Editor. Atau bisa juga dengan software-software blogtools seperti post2blog dll. - Trus tuliskan semua kode pada area design, kemudian copy kode-kode tersebut dari area HTML Code. Nha kode-kode dalam area HTML Code tersebut lah yang harus diposting.

Cara Kedua : - Tuliskan semua kode/script ke dalam notepad - Kemudian ganti/replace kode-kode berikut Kode Kode Pengganti < &lt; > &gt; " &quot; - Udah tahu kan caranya mereplace di notepad? itu lho dengan memilih menu edit --> replace kemudian pada kotak yang muncul masukkan kode yg akan direplace pada kolom "Find what" trus masukkan kode pengantinya pada kolom "Replace with"trus tekan tombol Replace All. - Nha kalo udah semua baru kamu copy semua kode yang udah direplace all tadi, trus kamu masukkan kedalam postingan kamu.

Cara Ketiga : - Buka situs ini http://centricle.com/tools/html-entities, trus isikan kode-kode kamu kedalam kotak yang disediakan, nha kalo sudah tekan tombol "Encode", nha maka kamu akan mendapatkan script baru untuk diposting di blog kamu. Piye? Gampang to? gitu aja kok repot.....

Baca Selengkapnya »»