The 1st Tutorial Ngeblog dari Meong

Sempet ada yang nanya sama gw tentang template dan pernak-pernik blog gw...
jadi gw akan menjawab disini...
dan ini adalah Tutorial Ngeblog dari Meong yang perdana...yeeeeyyy !!!!

oh iya...sebelum mengedit sesuatu, pastikan segala hal semuanya di backup, jadi kalo ada yang error bisa di restore...meong gak bertanggung jawab kalo gagal...soalnya tutorial ini udah dicoba di blog ini, dan SUKSES.

tanpa langsung berbasa-basi langsung aja yaahh....
enjoy....



==========================================================================
1. Cara Membuat Spoiler di Blog

nihhh contoh spoiler yang gw maksud....

ISI SPOILER YG DIHIDDEN

dan cara memasang di postingan kita adalah.

1. COPY kode HTML berikut :

<center><div style="border: 1px inset gray; padding: 1px;"><div><button type="button" class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Click to show the spoiler."><span style="color: rgb(0, 0, 0);"><b>JUDUL SPOILER</b></span></button></div><div id="spoiler" style="display: none;">ISI SPOILER YG DIHIDDEN</div></div></center>

2. PASTE kode tadi ke POST-INGAN kita.
3. Ganti JUDUL SPOILER dengan judul yang kalian kehendaki.
4. Ganti ISI SPOILER YG DIHIDDEN dengan isi yang ingin kawan-kawan sembunyikan.
5. Done !!!!

credit by : Afi

---------------------------------------------------------------------------------------------------------------

2. Cara Membuat Widget yang  Show-Hide (kaya disamping blog gw)

1. Seperti biasa langkah yang pertama adalah Login dulu k blogger
2. Pilih Layout kemudian pada page element pilih Add Gadget (Sebenarnya gak mesti tambah gadget baru sih. Bisa juga di selipin di Gadget yg sudah terpasang.)
3. Copy - Paste kode berikut ini kemudian masukin kedalam gadget tadi.

<!-- Begin Show Hide Floating - http://www.hitsuke.blogspot.com --> <style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:200px; width:50px; float:left; cursor:pointer; background:url('http://i683.photobucket.com/albums/vv193/vebyo/Guest2.gif') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #d9e3ff; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> <center><b><span style="color:white;"><br/>G<br/>u<br/>e<br/>s<br/>t <br/><br/><br/>B<br/>o<br/>o<br/>k </span><span style="font-size:130%;color:white;"></span></b></center></div> <div class="hitsukeFXcontent"> <!-- Taruh Kode Shoutmix Kamu disini --> <br/> Mw Guest Book yg Seperti ini..??<br/> Klik di <a href="http://hitsuke.blogspot.com/2009/08/membuat-show-hide-floating-menu.html"> Membuat Show Hide floating Guest Book </a> <div style="text-align:right"> <a href="javascript:showHidehitsukeFX()"> [close] </a> </div> </div> </div> <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script> <!-- End Show Hide Floating - http://www.hitsuke.blogspot.com -->

Keterangan
Coba perhatikan code diatas di bagian * html #hitsukeFX{position:relative;}
kan ada code height untuk tinggi gambar dan width untuk lebar gambar, nah kode itu harus disesuaikan dengan ukuran gambar backround nya kalau misalnya kamu mo ganti OK..^_^
selajutnya coba liat di bagain .hitsukeFXcontent{
kan ada kode seperti ini
border:2px solid #d9e3ff; nah kode yang ini buat border / garis pinggirnya ganti kode warna #d9e3ff sesuai keinginanmu.
background:#ffffff; klo kode ini buat warna latar belakang / backgroundnya ganti kode warna #ffffff sesuai keinginanmu.
kemudian
Keterangan

Coba perhatikan code diatas di bagian * html #hitsukeFX{position:relative;}
kan ada code height untuk tinggi gambar dan width untuk lebar gambar, nah kode itu harus disesuaikan dengan ukuran gambar backround nya kalau misalnya kamu mo ganti OK..^_^
selajutnya coba liat di bagain .hitsukeFXcontent{
kan ada kode seperti ini
border:2px solid #d9e3ff; nah kode yang ini buat border / garis pinggirnya ganti kode warna #d9e3ff sesuai keinginanmu.

background:#ffffff; klo kode ini buat warna latar belakang / backgroundnya ganti kode warna #ffffff sesuai keinginanmu.
kemudian coba perhatikan baik-baik kode
 

jika di hilangin kode html na akan terbaca GUEST BOOK. klo mo ganti tulisannya sertakan kode
agar tulisannya terlihat vertikal kemudian sertakan

untuk spasinya.
Oy jangan sampei lupa ganti tulisan dengan kode shoutmix kamu

Nah kode diatas untuk buku tamu yang bisa diganti-ganti tulisannya. Klo kamu mau yang langsung berbentuk gambar juga ada kox. Nieh dia code nya
Pink TAB 

  <!-- Begin Show Hide Floating - http://www.hitsuke.blogspot.com --> <style type="text/css"> #hitsukeFX{ position:fixed; top:30px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:108px; width:37px; float:left; cursor:pointer; background:url('http://i683.photobucket.com/albums/vv193/vebyo/GuestPink.gif') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #d241c7; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent">  <!-- Taruh Kode Shoutmix Kamu disini -->  <br/> Mw Guest Book yg Seperti ini..??<br/> Klik di <a href="http://hitsuke.blogspot.com/2009/08/membuat-show-hide-floating-menu.html"> Membuat Show Hide floating Guest Book </a> <div style="text-align:right"> <a href="javascript:showHidehitsukeFX()"> [close] </a> </div> </div> </div> <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script> <!-- End Show Hide Floating - http://www.hitsuke.blogspot.com -->  

Black TAB 

  <!-- Begin Show Hide Floating - http://www.hitsuke.blogspot.com --> <style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:125px; width:40px; float:left; cursor:pointer; background:url('http://i683.photobucket.com/albums/vv193/vebyo/Guest3.gif') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #d9e3ff; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent">  <!-- Kode Shoutmix mu Disini -->  <br/> Mw Guest Book yg Seperti ini..??<br/> Klik di <a href="http://hitsuke.blogspot.com/2009/08/membuat-show-hide-floating-menu.html"> Membuat Show Hide floating Guest Book </a> <div style="text-align:right"> <a href="javascript:showHidehitsukeFX()"> [close] </a> </div> </div> </div> <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script> <!-- End Show Hide Floating - http://www.hitsuke.blogspot.com -->  

Bagi pengguna wordpress ato yang lainnya sepertinya bisa deh tinggal Copy - Paste aja, gw kurang yakin karena gw gak pernah make yang lain selain blogger. tapi coba aja deh...!!
Sekian dulu ya smoga bermanfaat.
Good Luck..!!!

credit by : Hitsuke


-------------------------------------------------------------------------------------------------------------------------------------

3. Cara Mengganti Cursor.


1. langkah yang pertama adalah Login dulu k blogger
2. Pilih Layout kemudian pada page element pilih Add Gadget (Sebenarnya gak mesti tambah gadget baru sih. Bisa juga di selipin di Gadget yg sudah terpasang.)
3. Copy - Paste kode berikut ini kemudian masukin kedalam gadget tadi.

<style type="text/css">body {cursor:url("http://i49.tinypic.com/68t2jp.gif"),default}</style>

4. HTML diatas bisa diganti sesuai dengan kemauan kalian...gambar2 cursornya bisa dicari di Google.

==========================================================================

begitulah....kalo ada yang mau tanya lagi, silahkan.... :)

gw yakin semua blogger didunia mencintai blognya sebagaimana orangtua yang senang melihat anak nya tumbuh, dan bagaimana kucing yang menyusui anaknya...

atau... Setan yang cinta dengan makanan ? heh....kalian gak percaya kalo setan bisa makan ?

ok...sekian postingan dari meong...
see in next post...


stay tune yaa... :)