Modif Blog

Membuat Tabel di Blog

noreply@blogger.com (KOerniawan) — Sat, 12 Dec 2009 22:35:00 +0700

Blogger Mania kali ini saya tanggapi request dari sobat saya yang kebetulan membutuhkan tutorial pembuatan tabel diblog dengan menggunakan HTML, menu script yang kita pake adalah <table> ..... </table>.
Di dalam tabel, kita bisa ketahui beberapa atribut di dalamnya, antara lain :

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".

align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .

cellpadding : untuk mengatur jarak antara tepi sel dengan isi sel di dalam sebuah tabel. Penempatan kodenya : cellpadding="pixel" .

border : untuk mengatur tingkat ketebalan garis tepi pada tabel. Penempatan kodenya : boeder="pixel"

cellspacing: untuk mengatur jarak antara sel. Penempatan kodenya : cellspacing="pixel" .

height : untuk mengatur tinggi tabel. penempatan kodenya : height="pixel"|"%" .

widht : untuk mengatur lebar tabel. Penempatan kodenya : height="pixel"|"%" .

Script kode yang dipakai seperti ini :

<table align="left"|"center"|"right"

bgcolor="color"

border="pixel"

cellpadding="pixel"

cellspacing="pixel"

width="pixel"|"%"

height="pixel"|"%">



.....................



</table>

Elemen TABLE, juga berisi beberapa elemen yaitu CAPTION, elemen TH(table header), elemen TR(table row), serta elemen TD (table row).

Elemen CAPTION
berfungsi untuk membuat judul dari sebuah tabel. elemen ini mempunyai atribut align dengan nilai top (yaitu judul di simpan di sebelah atas tabel), juga bottom (yaitu judul berada di sebelah bawah dari tabel).

Script kode yang terbentuk seperti ini :

<caption align="top"|"bottom">



............................



</caption>

Elemen TR (Table Row)
yaitu untuk membuat baris, elemen ini di tempatkan di dalam elemen tabel. Atribut yang bisa di pakai di dalam TR antara lain :

align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .

valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".

Script kode yang terbentuk seperti ini :

<tr align="left"|"center"|"right"

bgcolor="color"

valign="top"|"middle"|"bottom">



.....................



</tr>

Elemen TH(Table Header)
berfungsi sebagai header sel pada sebuah kolom tabel. Atribut yang bisa di pakai antara lain:

align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .

valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".

colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor" .

rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"

Script kode yang terbentuk seperti ini :

<th align="left"|"center"|"right"

bgcolor="color"

valign="top"|"middle"|"bottom"

colspan="number" rowspan="number">



.....................



</th>

Elemen TR(Table Row)
adalah elemn untuk membuat kolom. atribut yang bisa di pakai antara lain :

align : untuk mengatur tata letak tulisan yang ada pada tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan. Penempatan kodenya : align="left"|"center"|"right" .

valign : untuk mengatur posisi vertikal. penempatan kodenya : valign="top"|"middle"|"bottom"

bgcolor : untuk mengatur warna background/warna latar belakang tabel. Penempatan kodenya seperti ini : bgcolor="kode warna".

colspan : untuk mengatur kolom. Penempatan kodenya : colspan="nomor" .

rowspan : untuk mengatur row atau baris. Penempatan kodenya : rowspan="nomor"

Script kode yang terbentuk seperti ini :

<td align="left"|"center"|"right"

bgcolor="color"

valign="top"|"middle"|"bottom"

colspan="number" rowspan="number">



.....................



</td>

( ---------------------------- ~"(0_0)"~ --------------------------------- )

Kita praktekan pada pembuatan tabel nih contohnya

Untuk membuat sebuah tabel tunggal, kodenya kira-kira seperti ini :

<table width="200" border="1">

<tr>

<td>



Sample



</td>

</tr>

<table>

Hasilnya akan seperti ini :

Sample

Teks diletakkan di sebelah kiri (left), jika ingin teks di tengah tabel, maka cukup tambahkan saja kode align="center" pada kolomnya. misal seperti ini :

<table width="200" border="1">

<tr>

<td align="center">



Sample



</td>

</tr>

</table>

Hasilnya akan seperti ini :

Sample

Contoh-contoh di atas menggunakan nilai border 1, coba bandingkan apabila saya menggunakan nilai border yang lebih besar, misalkan 9. Kodenya kira-kira seperti ini :

<table width="200" border="9">

<tr>

<td align="center">



Sample



</td>

</tr>

</table>

Hasilnya akan seperti ini :

Sample

Jika ingin kolomnya bertambah, tinggal tambahkan kode kolomnya. contoh dua kolom, kodenya seperti ini :

<table width="300" border="9">

<tr>

<td align="center">

Test

 

</td>

<td align="center">

Test lagi aahh

</td>

</tr>

</table>

Hasilnya akan seperti ini :

Test	Test lagi aahh

Kalau ingin dua baris, kira-kira kodenya seperti ini :

<table width="300" border="1">

<tr>

<td align="center">



Sample



</td>

<td align="center">



Sample KOe



</td>

</tr>

<tr>
<td align="center">

Sample lain

</td>
<td align="center">

Sample KOe yg lain

</td>
</tr>

</table>

hasilnya seperti ini :

Contoh	Contoh juga denk
Sample Lain	Sample KOe yg lain

Jika tabelnya ingin di beri warna, tinggal tambahkan kode bgcolor="kode warna". contoh :

<table width="300" border="1" bgcolor="black">

<tr bgcolor="green">

<td align="center">



Sample



</td>

<td align="center">



Sample lagi nih



</td>

<tr bgcolor="yellow">

<tr>

<td align="center">



Sample



</td>

<td align="center">

Sample lagi nih

 

</td>

</tr>

</table>

hasilnya seperti ini :

Sample	`Sample lagi nih`
Sample	`Sample lagi nih`

Sekarang saya beri contoh terakhir (sedikit lebih serius) dengan mengunakan fungsi caption serta TH (table header). Misalkan saya ingin membuat sebuah tabel data dari nama-nama teknisi. Data-data yang ingin di buatkan tabel, misalkan seperti ini :

**Tabel KOe**
Data KOe
No.	Nama
1.	Blogger
2.	Kyipeware
3.	Templat KOe

Contoh Lain Lagi nih :
Kode yang di pakai bisa seperti ini :
<table align="left" border="2" bgcolor="cyan" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel KOe</b></caption>
<tr bgcolor="fuchsia">
<th colspan="2">Data KOe</th>
</tr>
<tr bgcolor="green">
<th>No.</th>
<th>Nama</th>
</tr>
<tr bgcolor="yellow">
<td>1.</td>
<td>Blogger</td>
</tr>
<tr bgcolor="red">
<td>2.</td>
<td>Kyipeware</td>
</tr>
<tr bgcolor="blue">
<td>3.</td>
<td>Template KOe</td>
</tr>
</table>

Selain untuk menempatkan tulisan, sebuah tabel pun banyak di gunakan untuk menempatkan gambar agar terlihat lebih rapih. Contoh :

Hasilnya akan seperti ini :

jika sobat beranggapan bahwa garis tabel menggangu pemandangan, maka kita bisa mensiasatinya dengan cara menghilangkan garisnya yaitu nilai bordernya kita buat 0 (nol).
contoh :

Hasilnya akan seperti ini :

Keterangan :

Kode ini berbentuk HTML, Apabila ingin di simpan di sidebar, pilih gadget yang untuk HTML/javaScript.

Sumber : Kang Rohman
Selamat mencoba

New Label Tag Cloud

noreply@blogger.com (KOerniawan) — Sun, 6 Dec 2009 21:42:00 +0700

Blogger Mania, kali ini ada lagi yang lain dan sebenarnya sudah tidak terlalu new, karena sudah lama sih Tag Cloud ini digunakan di blogger, kalau sebelumnya punya saya Tag cloud labelnya muter muter, kali ini tidak perlu bingung dengan penambahan script, dan nanti gimana sih cara pasangnya akan saya jelaskan.
Tag Cloud label ini dipakai word press juga sudah lama, blogger kini menambah fitur baru baik dari editor posting entri maupun gadget yang bisa kita cari sesuai kebutuhan..

Kita lanjutkan aja cara pasang Tag Cloud yang baru ini :

Login keblogger anda
Masuk ke Tata letak
Tambah gadget
Pilih Label
Setting Seperti gambar dibawah ini

Simpan

Mudah dan kelihatan Nyentrik seperti Wordpress padahal Blogger
Semoga berguna dan selamat mencoba

New Readmore

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 12:22:00 +0700

Blogger mania...read more yang satu ini dipermudah oleh blogger sendiri dengan menambahkan fitur terbaru pada blog kita.

gimana caranya, langsung dibahas ya...

Masuk ke blogger (login)
Masuk ke pengaturan - pada menu dasbor
Di menu dasar yang dibawah (editor entri masuk)

Tandai Editor yang diperbaharui
Simpan setelan
Lihat tampilan yang baru nih

Keterangan :

Ada Undo & Redo
Insert Jump Break digunakan untuk Read More

Lebuiiih Mudah dan Praktis tanpa perlu banyak Script
Semoga bisa dan selamat mencoba !!

Facebook Minisite

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 12:22:00 +0700

Blogger mania..kali ini saya pakai gadget yang terdapat sudah ada pada blogger dengan sedikit mencari yang kita inginkan. disini yang saya inginkan adalah fitur dari facebook yang akan saya masukkan ke blogger saya.. mudah kok caranya.

1. kita login ke bloggernya
2. masuk ke Tataletak
3. tambah gadget - pada menu seacrh ketik facebook
4. akan terdapat gadgetnya...nha...saya pilih facebook minisite
5. atur ketinggian kotaknya...simpan
6. mudah to.

Semoga bisa
Selamat Mencoba

Kode Warna HTML Hexadecimal

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 12:21:00 +0700

Blogger mania warna Hexadecimal bisa kita dapat dari aplikasi sotfware Adobe Photoshop, anda bisa melihat kode warna yang dihasilkan dari warna RGB yang dilazim dipakai oleh semua pengguna web berbasis HTML. berikut kodenya :

#FFFFFF	#FFFFCC	#FFFF99	#FFFF66	#FFFF33	#FFFF00
#FFCCFF	#FFCCCC	#FFCC99	#FFCC66	#FFCC33	#FFCC00
#FF99FF	#FF99CC	#FF9999	#FF9966	#FF9933	#FF9900
#FF66FF	#FF66CC	#FF6699	#FF6666	#FF6633	#FF6600
#FF33FF	#FF33CC	#FF3399	#FF3366	#FF3333	#FF3300
#FF00FF	#FF00CC	#FF0099	#FF0066	#FF0033	#FF0000

#CCFFFF	#CCFFCC	#CCFF99	#CCFF66	#CCFF33	#CCFF00
#CCCCFF	#CCCCCC	#CCCC99	#CCCC66	#CCCC33	#CCCC00
#CC99FF	#CC99CC	#CC9999	#CC9966	#CC9933	#CC9900
#CC66FF	#CC66CC	#CC6699	#CC6666	#CC6633	#CC6600
#CC33FF	#CC33CC	#CC3399	#CC3366	#CC3333	#CC3300
#CC00FF	#CC00CC	#CC0099	#CC0066	#CC0033	#CC0000

#99FFFF	#99FFCC	#99FF99	#99FF66	#99FF33	#99FF00
#99CCFF	#99CCCC	#99CC99	#99CC66	#99CC33	#99CC00
#9999FF	#9999CC	#999999	#999966	#999933	#999900
#9966FF	#9966CC	#996699	#996666	#996633	#996600
#9933FF	#9933CC	#993399	#993366	#993333	#993300
#9900FF	#9900CC	#990099	#990066	#990033	#990000

#66FFFF	#66FFCC	#66FF99	#66FF66	#66FF33	#66FF00
#66CCFF	#66CCCC	#66CC99	#66CC66	#66CC33	#66CC00
#6699FF	#6699CC	#669999	#669966	#669933	#669900
#6666FF	#6666CC	#666699	#666666	#666633	#666600
#6633FF	#6633CC	#663399	#663366	#663333	#663300
#6600FF	#6600CC	#660099	#660066	#660033	#660000

#33FFFF	#33FFCC	#33FF99	#33FF66	#33FF33	#33FF00
#33CCFF	#33CCCC	#33CC99	#33CC66	#33CC33	#33CC00
#3399FF	#3399CC	#339999	#339966	#339933	#339900
#3366FF	#3366CC	#336699	#336666	#336633	#336600
#3333FF	#3333CC	#333399	#333366	#333333	#333300
#3300FF	#3300CC	#330099	#330066	#330033	#330000

#00FFFF	#00FFCC	#00FF99	#00FF66	#00FF33	#00FF00
#00CCFF	#00CCCC	#00CC99	#00CC66	#00CC33	#00CC00
#0099FF	#0099CC	#009999	#009966	#009933	#009900
#0066FF	#0066CC	#006699	#006666	#006633	#006600
#0033FF	#0033CC	#003399	#003366	#003333	#003300
#0000FF	#0000CC	#000099	#000066	#000033	#000000

#465584	#EEF2F7	#3A4F6C	#00D	#434951	#555
#777	#DFE6EF	#345487	#F5F9FD	#3860BB	#BCD0ED
#C2CFDF	#F0F5FA	#D1DCEB	#003	#900	#CCE9FD
#E4EAF2	#4C77B6	#DFE6EF	#EEF2F7	#F

Semoga berguna untuk blogger mania
Sumber : http://kampoengjogja.blogspot.com

Menampilkan Komentar disidebar

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 12:20:00 +0700

Pembaca yang budiman, trik saya kali ini menampilkan bagaimana sih komen bisa tampil disidebar kita...seperti teori yang ada bahwa komentar sebenarnya mempunyai link sendiri...nha...dengan memanggil link tersebut kita dapat menampilkan komen tersebut pada sidebar.

Langsung saja saya bahas gimana sih caranya...

buka blogger (masuk ke akun blogger anda)
masuk ke dasbor - menu Tata letak
tambah gadget - HTML / Java script
copy script dibawah ini

paste di tempat yang disediakan
ganti link http://blogkamu.blogspot.com/ diatas dengan link blog anda
simpan

Mudah to....silahkan mencoba
Semoga berhasil !!

Enaknya pake Widgetbox

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 12:05:00 +0700

Pembaca blogKOe yang budiman, dalam postinganku kali ini saya tampilkan penggunaan widgetbox yang begitu banyak fasilitas dan seksi kalo dipakai diblog dengan berbagai kemudahan.
misal :

membuat daftar isi blog
membuat operasi hitungan
membuat pengukuran waktu (bukan kiamat loh)
koleksi Photo
Streaming video
Twitteran
Polling
Membuat form

Nha....yang saya buat kali ini adalah daftar isi yang seksi
caranya gimana nich ??

Ok dibahas dech..

daftar dulu ya... di widgetbox
klik join untuk daftar & isi formnya
cek email anda & klik pada link yang diberikan
mulai dengan menu make widget
saya gunakan feed dari blogger saya (blogfeed)
Masukkan blog andadikolom Enter your blog or feed address (URL).
contoh punya saya (http://kyipe.blogspot.com)
klik make widget
atur label layout sesuai keinginan, baik warna dan font
atur theme (gambar backgraund)
beri logo
kalo udah upgrade deh
cek email anda & klik linknya
klik get widget (klik ikon blogger)
klik embed
copy dan paste
simpan

Hasilnya kayak dibawah ini
:

panjang bener tutornya....aslinya mudah kok kalo dicoba langsunk
Selamat mencoba !!
Semoga berhasil....he...hee

Pelangi di Link-KOe

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 12:03:00 +0700

Blogger mania Kali ini saya memberi judul Pelangi di Link-Koe, karena bingung mau ngasih judul apa...??, Setiap link-Koe bila disorot akan berganti-ganti warna.....jadi tak kasih judul begitu.

Sebelumnya tak kasih tau Link itu apaan??
dikamusKOe link tak beri pengertian : alamat website / URL(Universal/Uniform Resource Locator) berupa halaman web yang tersebar diseluruh jagad raya yang mempunyai format atau standar di Internet.
Kalo dijabarin apa sich URL Lihat aja di Kamus Koe.

Langsung saja ni.. scriptnya :

Taruh dibawah kode </head>

Selamat Mencoba !!

Posting Dalam Border

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 12:02:00 +0700

SobatKoe yang budiman pernah sebelumnya saya memposting script yang sama tetapi dengan penggunaannya yang berbeda...kalo yang dulu saya gunakan untuk memberi background, yang kali ini saya gunakan untuk membingkai(border) teks postingan/entri-Koe.
Sebelumnya kita harus mengupload gambar/image yang digunakan untuk border/bingkai untuk kemudian diberi teks pada tengahnya, misal punya saya :
"http://i703.photobucket.com/albums/ww35/koerniawan_photo/borderkoe.png"

<div style="background:url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/borderkoe.png); width:500px; height:300px; padding:5px;">

Ketik Teks Anda disini....torehkan karya anda...!!
</div>

Aturlah :
Width: 500px adalah panjang gambar yang akan ditampilkan
heigth: 300px adalah tinggi gambar yang akan ditampilkan

Alhasil :

Hati Berkata.....

Pertemuan kita
Didunia akan dikenang

maka
ucapkanlah kata
"CINTA"

________________
Panggilan Hati oleh Hati.....

ditepian cinta

Kayaknya mudah dech he....he...
Selamat Mencoba !!

Menu Horisontal Drop Down Part 2

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 12:01:00 +0700

Blogger mania setelah kemarin saya bahas Menu Drop Down 1 dengan bentuk yang semacam itu kali ini saya berikan lagi dengan bentuk yang demikian...livedemo
sebenarnya menu ini didapat dari penyedia menu CSS menumaker
modif saya lakukan karena menyesuaikan warna pada template yang saya pasang dengan mengedit beberapa gambar (image) yang akan diupload (unggah) untuk dipasang pada menu ini.

OK saya bahas..langsung gimana cara pasangnya :

Masuk ke Blogger anda
Menu Tata letak - Edit HTML
masukkan Kode dibawah ini diatas kode ]]></b:skin>

/* kyipe */<br /> .bg {background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/button4.gif);}<br /> .menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/bg.png) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }<br /> .menu li.top {display:block; float:left; position:relative;}<br /> .menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}<br /> .menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}<br /> .menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/down.gif) no-repeat right top;}<br /> .menu li a.top_link:hover {color:#000; background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/button4.gif) no-repeat;}<br /> .menu li a.top_link:hover span {background:url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/button4.gif) no-repeat right top;}<br /> .menu li a.top_link:hover span.down {background:url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/button4a.gif) no-repeat right top;}<br /> <br /> .menu li:hover > a.top_link {color:#000; background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/button4.gif) no-repeat;}<br /> .menu li:hover > a.top_link span {background:url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/button4.gif) no-repeat right top;}<br /> .menu li:hover > a.top_link span.down {background:url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/button4a.gif) no-repeat right top;}<br /> <br /> .menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}<br /> <br /> .menu a:hover {visibility:visible;}<br /> .menu li:hover {position:relative; z-index:200;}<br /> <br /> .menu ul,<br /> .menu :hover ul ul,<br /> .menu :hover ul :hover ul ul,<br /> .menu :hover ul :hover ul :hover ul ul,<br /> .menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}<br /> <br /> .menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #009900; white-space:nowrap; width:200px; height:auto;}<br /> .menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}<br /> .menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}<br /> .menu :hover ul.sub li a.fly {background:#fff url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/arrow.gif) 80px 7px no-repeat;}<br /> .menu :hover ul.sub li a:hover {background:#42c555; color:#fff;}<br /> .menu :hover ul.sub li a.fly:hover {background:#42c555 url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/arrow_over.gif) 80px 7px no-repeat; color:#fff;}<br /> .menu :hover ul li:hover > a.fly {background:#42c555 url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/ikonku/arrow_over.gif) 80px 7px no-repeat; color:#fff;}<br /> <br /> .menu :hover ul :hover ul,<br /> .menu :hover ul :hover ul :hover ul,<br /> .menu :hover ul :hover ul :hover ul :hover ul,<br /> .menu :hover ul :hover ul :hover ul :hover ul :hover ul<br /> {left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}<br />
Simpan
Masuk Ke Elemen Halaman
Tambah Gadget - HTML Java Script
Copy Kode dibawah ini dan ganti dengan link dan nama web/URL yang anda inginkan (disarankan editnya Pake Notepad)

<div>
<ul class="menu">
<li class="top"><a href="http://smp2kaliwungu.blogspot.com/" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="http://smp2kaliwungu.blogspot.com/" class="top_link"><span>About Us</span></a>
<ul class="sub">
<li><a href="http://smp2kaliwungu.blogspot.com/2009/08/alamat.html">Address</a></li>
<li><a href="http://smp2kaliwungu.blogspot.com/2009/08/visi-misi.html">Visi & Misi</a></li>
<li><a href="http://www.smpn2kaliwungu.co.cc/2009/08/struktur-organisasi-sekolah.html">STRUKTUR ORGANISASI</a></li>
<li><a href="http://eskulsmpn2klw.blogspot.com/">Ekstra Kurikuler</a></li>
<li><a href="http://smp2kaliwungu.blogspot.com/2009/10/peta-satelit.html">Peta</a></li>
</ul>
</li>
<li class="top"><a href="http://smp2kaliwungu.blogspot.com/" class="top_link"><span>Profile</span></a>
<ul class="sub">
<li><a href="http://guru-smp2kaliwungu.blogspot.com/">Teacher</a></li>
<li><a href="http://staff-smp2kaliwungu.blogspot.com/">Staff</a></li>
</ul>
</li>
<li class="top"><a href="http://smp2kaliwungu.blogspot.com/" class="top_link"><span>Content</span></a>
<ul class="sub">
<li><a href="http://mail.smp2kaliwungu.co.cc/">E-mail</a></li>
<li><a href="http://www.facebook.com/group.php?gid=159207540782">Facebook</a></li>
</ul>
</li>
<li class="top"><a href="http://soal-smpn2klw.blogspot.com/" class="top_link"><span>Soal - Soal</span></a></li>
<li class="top"><a href="http://galery-smp2kaliwungu.blogspot.com/" class="top_link"><span>Gallery</span></a></li>
<li class="top"><a href="http://alumnismp2klw.blogspot.com/" class="top_link"><span>Alumni</span></a></li>
</ul>
</div>
/>
Paste pada kotak yang disediakan
simpan

Cara Menambah sub Menu mudah kok tinggal tambah elemennya
misal ya... pada gambar dibawah ini....
yang warna merah adalah elemen pembuka menu, dan merah tua adalah penutup menu,
jika kita ingin menambah sub menu maka yang warna biru yang ditambahkan elemennya, dan yang ungu adalah penutup sub menunya

<div>
<ul class="menu">
<li class="top"><a href="http://smp2kaliwungu.blogspot.com/" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="http://smp2kaliwungu.blogspot.com/" class="top_link"><span>About Us</span></a>
<ul class="sub">
<li><a href="http://smp2kaliwungu.blogspot.com/2009/08/alamat.html">Address</a></li>
<li><a href="http://smp2kaliwungu.blogspot.com/2009/08/visi-misi.html">Visi & Misi</a></li>
<li><a href="http://www.smpn2kaliwungu.co.cc/2009/08/struktur-organisasi-sekolah.html">STRUKTUR ORGANISASI</a></li>
<li><a href="http://eskulsmpn2klw.blogspot.com/">Ekstra Kurikuler</a></li>
<li><a href="http://smp2kaliwungu.blogspot.com/2009/10/peta-satelit.html">Peta</a></li>
</ul>
</li>
Selamat mencoba !!

Semoga bermanfaat menu yang satu ini dan sudah teruji kelayakannya...jiakakakaka

Menu Horisontal Drop Down Part 1

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 11:59:00 +0700

Para Pembaca yang setia.... setelah sekian lama membuat coretan baru kali ini saya gunakan kata-kata Para pembaca..biasanya Blogger mania..he..he.. kali aja ada yang bukan Blogger mania
Ocre..langsung masuk ke TKP..alias Tambah Koleksi Pikirannya dilanjut dengan membahas beberapa pengguna Blogger mania yang menginginkan menu Drop Down versi Horisontal dengan setting gambar yang bisa diupload dan diganti sesuai keinginan..

Jika dilihat dari pemasangan pada menu CSSnya anda cermati maka anda dapat melihat link gambar yang telah saya upload...nah kalo anda ahli gambar pake Photoshop silahkan disesuaikan dengan keinginan anda.

Pada Menu ini cocoknya digunakan pada template putih..karena mempunyai efek samping background putih

berikut menu CSSnya taruh diatas kode ]]></b:skin>

.Kyiper1{
color: #44433f;
font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
margin: 0;
padding: 4px 0 0;
}
.wrapper1 a{
color: #E5F2FB;
text-decoration: none;
}
.wrapper1 a:hover {
color: #09548B;
}
.wrapper1 p {
margin: 0 0 17px;
padding: 0;
line-height: 18px;
}
.wrapper {
/*width: 710px;*/
margin: 20px auto;
}
.nav {
background: #fff url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/nav_bg.png) repeat-x;
float: left;
}
.nev-wrapper {
clear: both;
float: left;
}
.nav-left {
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/nav_left.png) no-repeat top left;
float: left;
width: 11px;
height: 41px;
}
.nav-right {
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/nav_right.png) no-repeat top right;
float: left;
width: 11px;
height: 41px;
}
.nav ul {
/*width: 648px;*/
height: 38px;
float: left;
margin: 0;
padding-top: 3px;
list-style: none;
font-size: 15px;
}
.nav li {
float: left;
padding: 0 7px;
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/split.png) no-repeat right center;
position: relative;
z-index: 1;
}
.nav li.last {
background:none;
}
.nav li:hover {
z-index:2;
}
.nav li a {
display: block;
line-height: 38px;
overflow: hidden;
float: left;
}
a .menu-left {
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/menu_left.gif) no-repeat left top;
width: 8px;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
a .menu-mid {
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/menu_mid.gif) repeat-x top left;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
a .menu-right {
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/menu_right.gif) no-repeat top left;
width: 8px;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
.nav li a:hover .menu-left,
.nav li.active a .menu-left,
.nav li:hover a .menu-left,
.nav li a:hover .menu-mid,
.nav li.active a .menu-mid,
.nav li:hover a .menu-mid,
.nav li a:hover .menu-right,
.nav li.active a .menu-right,
.nav li:hover a .menu-right {
background-position: 0 -37px;
line-height: 35px;
}
.nav li a:hover,
.nav li.active a,
.nav li.hover a,
.nav li:hover a {
color: #09548B;
}
.nav li:hover .sub,
.nav li.hover .sub {
display:block;
}
.nav li .sub {
display: none;
position: absolute;
top: 27px;
left: 6px;
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/submenu_top.png) no-repeat;
width: 186px;
padding-top: 9px;
}
.nav li ul {
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/submenu_bg.png) repeat-y;
width: 162px;
height: auto;
margin: 0;
padding: 0 12px 10px;
list-style: none;
font-size: 14px;
}

.nav li:hover li,
.nav li.active li {
width: 100%;
padding: 1px 0 2px;
border-bottom: 1px #C1D9F0 dashed;
background: none !important;
}
.nav li:hover li a,
.nav li.active li a {
color: #09548B;
background: none !important;
line-height: normal;
width: 156px;
padding: 8px 3px 3px;
text-indent: 1px;
}
.nav li:hover li a:hover,
.nav li.active li a:hover {
color: #fff;
background: #165B9F !important;
text-decoration: none;
line-height: normal;
}
/*IE*/
.nav li li a:hover,
.nav li li a:hover {
color: #fff;
background: #165B9F !important;
text-decoration: none;
line-height: normal;
}
/**/
.nav .btm-bg {
background: url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/submenu_bottom.png) no-repeat;
width: 205px;
height: 9px;
overflow: hidden;
clear: both;
}
.content {
width: 670px;
background: transparent url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/content_bg.png) repeat-y;
float: left;
padding: 10px 20px;
}
.content h1 {
color: #333;
font-weight: 400;
text-transform: uppercase;
font-size: 18px;
border-bottom: 1px dashed #C1D9F0;
}
.content h2 {
font-weight: 400;
text-transform: uppercase;
font-size: 14px;
padding-left: 10px;
margin-bottom: -5px;
}
.content p {
padding: 0 15px;
text-align: justify;
}
.content-bottom {
width: 710px;
background: transparent url(http://i703.photobucket.com/albums/ww35/koerniawan_photo/horisontal-menu1/content_bottom.png) no-repeat;
height: 13px;
float: left;
}

dan
untuk tambah kegetnya eh Gadgetnya
silahkan di Isi Link dan nama Linknya
caranya masuk ke blogger
Tambah Gadget - HTML Java Script
copy culu script ini ke notepad kemudian edit link dan namanya
setelah cukup dan sesuai paste pada blog anda

<div class="wrapper1"><br /> <div class="wrapper"><br /> <div class="nav-wrapper"><br /> <div class="nav-left"></div><br /> <div class="nav"><br /> <ul id="navigation"><li class="active"><br /> <a href="Kyipe.blogspot.com"><br /> <span class="menu-left"></span><br /> <span class="menu-mid">Home</span><br /> <span class="menu-right"></span><br /> </a><br /> </li>  <li class=""><br /> <a href="kyipeware.blogspot.com"><br /> <span class="menu-left"></span><br /> <span class="menu-mid">Kyipeware</span><br /> <span class="menu-right"></span><br /> </a><br /> <div class="sub"><br /> <ul><li><br /> <a href="#">Archives</a><br /> </li>  <li><br /> <a href="#">Categories</a><br /> </li>  <li><br /> <a href="#">Top-rated Posts</a><br /> </li>  <li><br /> <a href="#">Most-viewed Entries</a><br /> </li>  </ul><br /> <div class="btm-bg"></div><br /> </div><br /> </li>  <li class=""><br /> <a href="#"><br /> <span class="menu-left"></span><br /> <span class="menu-mid">Development</span><br /> <span class="menu-right"></span><br /> </a><br /> <div class="sub"><br /> <ul><li><br /> <a href="#">Wordpress Themes</a><br /> </li>  <li><br /> <a href="#">Wordpress Plugins</a><br /> </li>  <li><br /> <a href="#">Mac OS X</a><br /> </li>  </ul><br /> <div class="btm-bg"></div><br /> </div><br /> </li>  <li class=""><br /> <a href="#"><br /> <span class="menu-left"></span><br /> <span class="menu-mid">Tutorials</span><br /> <span class="menu-right"></span><br /> </a><br /> <div class="sub"><br /> <ul><li><br /> <a href="#">Photoshop</a><br /> </li>  <li><br /> <a href="#">Illustrator</a><br /> </li>  <li><br /> <a href="#">Css, Html</a><br /> </li>  <li><br /> <a href="#">Post Your Tutorial!</a><br /> </li>  </ul><br /> <div class="btm-bg"></div><br /> </div><br /> </li>  <li class=""><br /> <a href="#"><br /> <span class="menu-left"></span><br /> <span class="menu-mid">Gallery</span><br /> <span class="menu-right"></span><br /> </a><br /> <div class="sub"><br /> <ul><li><br /> <a href="#">Personal Photos</a><br /> </li>  <li><br /> <a href="#">My Friends</a><br /> </li>  <li><br /> <a href="#">Tech</a><br /> </li>  </ul><br /> <div class="btm-bg"></div><br /> </div><br /> </li>  <li class=""><br /> <a href="#"><br /> <span class="menu-left"></span><br /> <span class="menu-mid">Portfolio</span><br /> <span class="menu-right"></span><br /> </a><br /> <div class="sub"><br /> <ul><li><br /> <a href="#">My Works</a><br /> </li>  </ul><br /> <div class="btm-bg"></div><br /> </div><br /> </li>  <li class="last"><br /> <a href=""><br /> <span class="menu-left"></span><br /> <span class="menu-mid">Contact</span><br /> <span class="menu-right"></span><br /> </a><br /> </li>  </ul><br /> </div><br /> <div class="nav-right"></div><br /> </div><br /> <div class="content"><br /> <p></p><br /> <p></p><br /> <br /> </div><br /> <div class="content-bottom"></div><br /> </div><br /> </div>

Selamat mencoba !!

Google Translate Dengan Gambar Part II

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 11:58:00 +0700

Blogger mania e...ternyata ada juga yang minta google translate dengan gambar bendera yang lagi berkibar alhasil...kali ini anginnya sudah kenceng dan akhirpun...nyampe ke blog saya

ini scriptnya silahkan copy sendiri yach

Pemasangannya seperti biasa

Masuk Ke blogger anda
Masuk ke menu Tata Letak
Tambah Gadget
HTML / Java Script
Copy Script diatas
Paste di kotak yang disediakan
Simpan

Selamat Mencoba

Kotak Penggemar Facebook

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 11:56:00 +0700

Blogger mania mungkin pernah lihat widget facebook dengan judul lencana profil..he...he..
nha..kalo yang ini beda tapi sama - sama dari facebook

Apa sih bedanya....ya..jelas beda kalo ini isinya para fans' yang ada difacebook
lha kalo lencana profil kan kita doank jiakakaka

gimana masangnya OK dibahas dech...!!

masuk ke widgetnya facebook
klik aja gambar dibawah ini..nggak refferal kok/mbati....i(nyari untunk)

Pilih kotak penggemar
Pilih Halaman Anda
Centang kedua Opsi sertakan siaran & penggemar
klik blogger
klik edit kontent
copy + tutup halaman/tab
masuk ke blogger + tambah gadget
paste & simpan

Selamat mencoba

Menu Tab View

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 11:55:00 +0700

Blogger mania...he..he..dari beberapa pembaca ternyata banyak yang menginginkan bentuk menu yang semacam ini
Nah....menu yang diatas dinamakan menu tab view. gimana sich cara bikinnya...yuk mari...
pada beberapa postingan yang sudah saya jumpai, banyak yang menawarkan cara membuatnya tapi kenbanyakan server hostingan untuk scriptnya ada yang mati, jadi tidak jalan menunya...nah nati saya posting dua-duanya kalo mau aman silahkan disimpan pada hostingan yang anda percaya. Jika mau pake script yang sama ya....tidak masalah.
nih scriptnya kalo mau diupload ke hostingan yg dipercaya...he..he..

Berikut caranya :

Lha...ini link scriptnya yang diatas...
Taruh kode script dibawah ini diatas kode </head>

<script src='http://mr.koerniawan.googlepages.com/tabview.js' type='text/javascript'/>

Masukkan kode dibawah ini diatas ]]></b:skin>
<center>
div.TabView div.Tabs
{
height: 20px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 70px;/* Lebar Menu Utama Atas */
text-align: center;
height: 20px;/* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:12px;
border-top: 1px solid #454545;/* Warna Border Atas Menu Utama */
border-left: 1px solid #454545;/* Warna Border Kiri Menu Utama */
border-right: 1px solid #454545;/* Warna Border Kanan Menu Utama */
border-bottom: 1px solid #454545;/* Warna Border Bawah Menu Utama */
font-family: "Arial", Serif; /* Jenis Font Menu Utama Atas */
font-weight: 900; /* Ukuran Font Menu Utama Atas */
color: #000000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #cfcfcf; /* Warna Background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border-left: 1px solid #000000; /* Warna Border Kiri Kotak Utama */
border-right: 1px solid #000000; /* Warna Border Kanan Menu Utama */
border-bottom: 1px solid #000000; /* Warna Border Bawah Menu Utama */
overflow: hidden;
background-color: #392e26; /* Warna Background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 95%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</center>

kemudian simpan
masuk ke TATA LETAK - Tambah keget - teyus...HTML / Java Script
Naah masukkan bentuk kode dengan penjelasannya dibawah ini

<div id="TabView" class="TabView">
<div style="width: 250px;" class="Tabs">
<a>Menu :</a>
<a>Aku nih :</a>
<a>K-wan :</a>
</div>

<div style="width: 250px; height: 255px;"
class="Pages">

<div class="Page">
<div class="Pad">

<a href="
http://kyipe.blogspot.com/2009/10/pasang-domain-cocc.html" title="Domain">Pasang Domain CO.CC</a><br/>
<a href="
http://kyipe.blogspot.com/2009/10/mengganti-google-translate-dengan.html" title="Blogger">Pasang Google translate dengan gambar</a><br/>

</div>
</div>

<div class="Page">
<div class="Pad">
<center> <a href="ymsgr:sendIM?koerniawan_guru"><img border="0" src="http://opi.yahoo.com/online?u=koerniawan_guru&m=g&t=2"/></a> <br/><a style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" href="http://id-id.facebook.com/people/Arif-Kurniawan/1181272605" target="_TOP" title="Arif Kurniawan">Arif Kurniawan</a><br/><a href="http://id-id.facebook.com/people/Arif-Kurniawan/1181272605" target="_TOP" title="Arif Kurniawan"><img width="120" style="border: 0px;" src="http://badge.facebook.com/badge/1181272605.906.1557095386.png" height="152"/></a><br/><a style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" href="http://id-id.facebook.com/facebook-widgets/" target="_TOP" title="Make your own badge!">Buat Lencana Anda</a></center>

</div>
</div>

<div class="Page">
<div class="Pad">
<center>
<br/>
<script src="http://pub.mybloglog.com/comm3.php?mblID=2008032800315926&r=widget&is=small&o=l&ro=4&cs=black&ww=225&wc=multiple&l=n"></script></center></div></div></div></div>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Ganti Tulisan yang berwarna ungu dengan judul menu yang mau dipake,
Gantilah script yang berwarna hijau dengan menu yang kamu mau....he...he...
mau disi link postingan boleh
mau diisi link temen boleh
mau diisi air juga meledak...he....he...
Setelah selesai Simpan

Selamat mencoba !!

Pasang Domain CO.CC

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 11:55:00 +0700

Blogger mania yang menginginkan blognya jadi berdomain CO.CC alias blogspot rasa CO.CC beginilah caranya disimak ya....

dibanyak blog yang saya temui rata-rata menggunakan URL forwading atau dalam kamus saya URL yang membuntut alias jadi ekor...seperti punya saya ...kalo diketikkyipe.blogspot.com ya....masih blogspot. tetapi kalo yang satu ini smp2kaliwungu.blogspot.com maka akan berubah blogspotnya menjadi smpn2kaliwungu.co.cc. secara otomatis. karena settingnya mirip kalo kita beli domain. padahal kita pake domain gratis.

Sebenarnya teori ini sudah lama dipakai dan semenjak kangen dengan keyboard....ya...apa yang pingin saya tulis ya...tulis disini.

Seperti yang pernah ditulis di tips & trik, saya jabarkan biar mudah

OK kita bahas ....seperti di tips&trik disana memakai ooowebhost karena gratis,
pertama kita butuh 2 server dari 000webhost :

ns01.000webhost.com
ns02.000webhost.com

selanjutnya kita masuk ke co.cc kalo belon punya ya...daftar

kalo udah dan masih aktip ya... let's do it
manage domain - setup

klik pada Name server ...isikan
ns01.000webhost.com ns02.000webhost.com
trus di OK

masuk ke setup lagi
masuk ke zone record
Host : www.domainkamu.co.cc
Ttl : 1
Type : CNAME
Value : ghs.google.com
kemudian setup

masuk ke URL Forwading
redirect URL : http://(diisi alamat blogmu)
Page Title : judulnye blogmu
frame : terserah mau diumpetin atau mau diperlihatkan link yang dituju
kemudian Setup

Login keblogkamu
setelah itu masuk ke pengaturan pada blog kamu
publikasikan - berpindah ke Domain ubah sesuaian
pilih beralih kepengaturan lebih lanjut

Google Translate dengan gambar Part I

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 11:54:00 +0700

Ok mas fuad.....kali ini saya beri sedikit bocoran dari request njenengan karena benderanya ndak ada anginnya kayak yg di SMP N 2 KALIWUNGU...ya akhirnya tidak berkibar...kl mau berkibar tinggal nyari aja image gif yg berkibar diupload ganti link scr img-nya guampank kok.......he..he

Nih....yang biasa aja yach....dari katalog beberapa blogger mania Mas Dharmapala, saya temukan script model beginian

<div class="widget-content">
<style>

.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>

<div>
<center>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src=" http://i41.tinypic.com/mcbs77.jpg" style="cursor: pointer; margin-right: 13px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src=" http://i42.tinypic.com/2qn39mr.jpg" style="cursor: pointer; margin-right: 13px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="http://i40.tinypic.com/2znvfxl.jpg" style="cursor: pointer; margin-right: 13px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src=" http://i40.tinypic.com/15pse3p.jpg" style="cursor: pointer; margin-right: 13px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="http://i41.tinypic.com/v5c2eq.jpg" style="cursor: pointer; margin-right: 13px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="http://i42.tinypic.com/2qn39mr.jpg" style="cursor: pointer; margin-right: 13px;" width="24"/></a>
<br/>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src=" http://i41.tinypic.com/1ystb8.jpg" style="cursor: pointer; margin-right: 13px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="http://i42.tinypic.com/2q1un43.jpg" style="cursor: pointer; margin-right: 13px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="http://i39.tinypic.com/b3vu3t.jpg" style="cursor: pointer; margin-right: 13px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.oogle.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="http://i41.tinypic.com/wv7orr.jpg" style="cursor: pointer; margin-right: 13px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="http://i43.tinypic.com/2552exg.jpg" style="cursor: pointer; margin-right: 13px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="http://i42.tinypic.com/2pt7x9v.jpg" style="cursor: pointer; margin-right: 13px;" width="24"/></a><br/>

<a href="#" target="_blank" rel="nofollow" title=" Install this widget " onclick="window.open('http://kyipe.blogspot.com/2009/10/mengganti-google-translate-dengan.html'); return false;"><img border="0" alt=" Install this widget " title=" Install this widget " align="absbottom"/></a>
</center>
</div>
</div>

Mummmeeet ndaaaaak.... Ngopynya kepanjangan ya...udah tak ringkes nih

<div class="widget-content"><br /> <style> .google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; border:0; } </style><br /> <br /> <div><br /> <center><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src=" http://i41.tinypic.com/mcbs77.jpg" style="cursor: pointer; margin-right: 13px;" width="24" /></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src=" http://i42.tinypic.com/2qn39mr.jpg" style="cursor: pointer; margin-right: 13px;" width="24" /></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="http://i40.tinypic.com/2znvfxl.jpg" style="cursor: pointer; margin-right: 13px;" width="24" /></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src=" http://i40.tinypic.com/15pse3p.jpg" style="cursor: pointer; margin-right: 13px;" width="24" /></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="http://i41.tinypic.com/v5c2eq.jpg" style="cursor: pointer; margin-right: 13px;" width="24" /></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="http://i42.tinypic.com/2qn39mr.jpg" style="cursor: pointer; margin-right: 13px;" width="24" /></a><br /> <br /> <br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src=" http://i41.tinypic.com/1ystb8.jpg" style="cursor: pointer; margin-right: 13px;" width="24" /></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="http://i42.tinypic.com/2q1un43.jpg" style="cursor: pointer; margin-right: 13px;" width="24" /></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="http://i39.tinypic.com/b3vu3t.jpg" style="cursor: pointer; margin-right: 13px;" width="24" /></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.oogle.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="http://i41.tinypic.com/wv7orr.jpg" style="cursor: pointer; margin-right: 13px;" width="24" /></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="http://i43.tinypic.com/2552exg.jpg" style="cursor: pointer; margin-right: 13px;" width="24" /></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="http://i42.tinypic.com/2pt7x9v.jpg" style="cursor: pointer; margin-right: 13px;" width="24" /></a><br /> <br /> <br /> <a href="#" target="_blank" rel="nofollow" title=" Install this widget " onclick="window.open('http://kyipe.blogspot.com/2009/10/mengganti-google-translate-dengan.html'); return false;"><img border="0" alt=" Install this widget " title=" Install this widget " align="absbottom" /></a><br /> </center><br /> </div><br /> </div>

Selamat mencoba...!!!!

Horisontal Menu Sederhana

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 11:52:00 +0700

Blogger mania, bagi....pemain yang menginginkan menu sederhana...tidak rumit kok, bisa kita gunakan penyedia menu dibawah ini....yang sangat mudah penggunaannya

CSS Menu Builder

klik aja link diatas dan mari kita bermain....

- Kita pilih salah satu menu horisontal
- Atur warna background, menu image, dan menu color
- setelah kita cocok dengan menu yang kita atur
- silahkan masyuk ke blogger anda
- copy semua script dari menu CSS pada CSS Menu Builder
- paste di Edit HTML pada blog di menu TATA LETAK anda, taruh diatas ]]> bskin

- Simpan Template

- masuk lagi ke CSS Menu Builder Buka menu HTML
- copy dinotepad atur link dan nama linknya
- tambah gadget
- HTML/ Java Script
- paste di kotak java script/HTML yang ada di Elemen Halaman pada blog anda

- terkahir download di CSS Menu Builder pada menu Image klik kanan save image as.
- upload gambarnya dipenyedia uploadtan : photobucket, googlepages...dll.
- ambil link URL nya
- paste pada semua script yang ditempelkan di Edit HTML pada menu Tata Letak,
terdapat pertanyaan dalam tanda kurung mis :

background:url('topMenuImages.png')
- gantilah yang bercetak tebal dengan link URL dari image yang anda upload tadi
- Simpan Template kembali

Selamat mencoba !!

CSS Vertikal Part II

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 11:51:00 +0700

Trima kasih atas commentnya dari mas Warsito dilampung, langsung saya tanggapi...sebenarnya scriptnya mudah asal tau cara pembuatan menu dulu.
dibagian pertama saya sudah jelaskan cara membuat dan mengedit menu serta linknya...kali ini akan saya perbaiki tutorial yang saya berikan, agar mudah dimengerti menggunakan My CSS menu, kali ini saya berikan tutorial cara pemasangan scriptnya.

Gimana siiiiich ?

diatas merupakan gambaran menunya dan paling atas adalah menu yang kita gunakan :

Design : untuk membuat / mengedit menu & URLnya
CSS : yaitu script yang dimasukkan pada menu edit HTML dimenu TATA LETAK
HTML : yaitu script yang anda olah pada design yang berisi menu dan URL yang akan anda letakkan dimenu Tambah Gadget dimenu Elemen Halaman di TATA LETAK

OK kita bahas pemasangannya :
setelah menu dan link diubah dimenu design, kita masuk kemenu CSS

copy semua scriptnya...dari ujung atas dengan macem2 teks keriting kribo dan rebonbinan
sampai bawah atau CTRL+A tekan bareng aja trus CTRL+C alias copy

masuk kemenu edit HTML pada menu TATA LETAK diblog anda... paste diatas kode ]/bskin seperti gambar dibawah ini

kalau sudah disimpan templatenya
masuk ke menu Elemen Halaman
pilih menu Tambah Gadget - pilih menu HTML/Java Script
buka My CSS Menu pilih menu HTMLnya

copy semua menu scriptnya.
masuk ke Tambah Gadget yang sudah anda buka
paste dikotak yang disediakan
simpan

Maaf contoh punya saya belon diedit menunya ...jadi bila berbeda tidak masalah masukkan aja punyanya anda sesuai keterangan saya
semoga berhasil dengan penjelasan ini
selamat mencoba !

Cara Memasang Template / Skin

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 11:50:00 +0700

Para Blogger Mania mungkin apa yang saya tulis alurnya mundur ....he...saya kira banyak yang sudah bisa memasang template atau skin yang digunakan untuk tampilan blog para blogger mania...eh ternyata ...
dari beberapa pertanyaan yang dilayangkan kepada saya melalui YM maupun e-mail...masih banyak yang belum tau gimana sih cara memasangkan template blog

OK kita mulai :

Cari dulu penyedia template yang anda inginkan (pada blog saya ada di PARTNER BLOG sebelah kiri bawah), kalo saya biasa pake Btemplates.com
Pilih salah satu template yang anda inginkan, pastikan dikomputer anda ada aplikasi WINRAR kalo tidak ada silahkan klik ikon dibawah ini :
kalo sudah download file .rarnya,
buka file yang anda download,
cari file bertipe .xml
klik kanan file tersebut
pilih menu view file
copy semua teks nya
paste pada edit HTML anda yang ada di menu TATA LETAK
kemudian simpan kalo ada pertanyaan konfirmasi dan simpan
maka sebelum anda melakukan itu pastikan semua atribut gadget sudah anda backup untuk dimasukkan kembali

Selamat Mencoba !!!

Menu Combo Box

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 11:48:00 +0700

Blogger mania ...kali ini menu yang saya tawarkan adalah menu combo box....seandainya para blogger mania menginginkan blognya simple dan ringkes.... silahkan gunakan menu ini
caranya mudah

<br /> <option value="0">School Link</option><br /> <option value="http://smamuhiweleri.blogspot.com/">SMA Muhammadiyah 1 Weleri</option><br /> <option value="http://muhpat.blogspot.com/">SMA Muhammadiyah 4 Kendal</option><br /> <option value="http://smapik.blogspot.com/">SMA PGRI Kendal</option><br /> <option value="http://sman1boja.sch.id/">SMA N 1 Boja</option><br /> <option value="http://sma2kendal.googlepages.com/">SMA N 2 Kendal</option><br /> <option value="http://smacepiring.wordpress.com/">SMA N 1 Cepiring</option><br /> <option value="http://smarowosarionline.wordpress.com/">SMA N Rowosari</option><br /> <option value="http://stmkendal.blogspot.com/">SMK N 2 Kendal</option><br /> <option value="http://www.smk-bina-utama-kendal.blogspot.com/">SMK Bina Utama</option><br /> <option value="http://smknu03klw.blogspot.com/">SMK NU 03 Kaliwungu</option><br /> </select><br /> <br /> <select onchange="document.location.href=this.options[this.selectedIndex].value;"><br /> <option value="0">Organisation Link</option><br /> <option value="http://www.muhammadiyah.or.id/">Muhammadiyah</option><br /> <option value="http://pcmkaliwungu.blogspot.com/">PCM Kaliwungu</option><br /> <option value="http://pdipmkendal.blogspot.com/">PD IPM Kendal</option><br /> <option value="http://gurumuhkendal.blogspot.com/">Klub Guru Muh. Kendal</option><br /> <option value="http://www.depdiknas.go.id/">Depdiknas</option><br /> <option value="http://jardiknas.org/">Jardiknas</option><br /> <option value="http://jipkendal.blogspot.com/">Jar.Inovasi.Pend.</option><br /> <option value="http://www.kabupaten-kendal.go.id/">Kabupaten Kendal</option><br /> </select><br /> <br /> <select onchange="document.location.href=this.options[this.selectedIndex].value;"><br /> <option value="0">Good Link</option><br /> <option value="http://www.suaramerdeka.com/">Suara Merdeka</option><br /> <option value="http://wawasandigital.com/">Wawasan</option><br /> <option value="http://ilmukomputer.com/">Ilmu Komputer</option><br /> <option value="http://e-dukasi.net/">Edukasi</option><br /> <option value="http://download.com/">Download apa aja</option><br /> <br /> position: static;<br /> }

Sample :

Silahkan ganti Nama dan link yang anda inginkan...selamat mencobaMenu Combo Box

Menu CSS Vertikal Part 1

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 11:47:00 +0700

Blogger mania kali ini pada artikel saya pingin mengajak kita bermain menu menggunakan CSS yang sangat mudah dipahami oleh kita.

Ok.. fasilitas yang kita pake kali ini dari salah satu penyedia pembuat menu CSS yaitu :

http://www.mycssmenu.com

dari web ini saya kasih sedikit fungsi dan cara pemasangan pada blog anda
1. silahkan klik pada link diatas
2. pilih salah satu menu yg diinginkan
contoh :
3. keluar jendela baru dg ada tips-tipsnya langsung close aja
4. kita kenali dulu menu yg sering digunakan beserta fungsinya :

berfungsi untuk menambah daftar menu dan

berfungsi untuk menghapus menu yang tidak diinginkan

berfungsi untuk menambah sub menu

berfungsi untuk memberi nama menu dan Link menu tersebut

5. klik pada menu yg ingin diubah...kemudian pilih menu URL
6. beri nama menu dan masukkan link untuk menu tersebut pada

contoh :

pada text / HTML
kolom menu overview diubah dengan menu yang anda inginkan

pada URL
diisi link (http:// yang anda inginkan)
misal : http://kyipe.co.nr

kalo sudah di OK

setelah selesai membuat susunan menu dan sub menu yg diinginkan

7. klik CSS pada MyCssmenu kemudian copy scriptnya
8. masuk keblog anda paste diatas ]]></b:skin> kemudian simpan

9. klik menu HTML pada My CSS tadi...copy scriptnya
10. masuk ke elemen halaman, tambah gadget ...HTML/Java script klik paste scriptnya
11. simpan

live demo

site counter feed burner (III)

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 11:46:00 +0700

Blogger mania sebelumnya sudah saya gambarkan bagaimana mengambil script dari cara pemasangan e-mail subscribe...nah sekarang kita pasang site counter menggunakan feed burner untuk mengetahui berapa pembaca blog anda, caranya :

- klik pada feed count anda
- tentukan warna background dan text
- activate site counter anda

- ambil/ copy scriptnya seperti pada gambar diatas
- paste pada edit HTML/java script
- simpan

e-mail subscribe feed burner (II)

noreply@blogger.com (KOerniawan) — Sat, 5 Dec 2009 11:45:00 +0700

Blogger mania ....kemarin telah saya bahas cara pemasangan header animator pada pemasangan feed burner bagian I, na...h sekarang akan saya bahas pemasangan e-mail subscribe menggunakan feed burner....kita hanya melanjutkan proses yang telah kita lakukan seperti kemarin dan masuk pada menu publize

selanjutnya langkah memasang e-mail subscribe

- pilih menu email subscribe
- kemudian ambil/copy script yang ada dalam kotak kemudian paste pada edit HTML anda
- simpan

Modif Blog

Membuat Tabel di Blog

New Label Tag Cloud

New Readmore

Facebook Minisite

Kode Warna HTML Hexadecimal

Read More ??

Menampilkan Komentar disidebar

Enaknya pake Widgetbox

Pelangi di Link-KOe

Posting Dalam Border

Menu Horisontal Drop Down Part 2

Menu Horisontal Drop Down Part 1

Google Translate Dengan Gambar Part II

Kotak Penggemar Facebook

Menu Tab View

Pasang Domain CO.CC

Google Translate dengan gambar Part I

Tag Cloud Label Blogger

Horisontal Menu Sederhana

CSS Vertikal Part II

Cara Memasang Template / Skin

Menu Combo Box

Menu CSS Vertikal Part 1

site counter feed burner (III)

e-mail subscribe feed burner (II)