Tutorial Blog of Salon Oyah

     Berikut ini, Oyah ingin menyampaikan tips untuk membuat SPOILER. Btw, apa sih yang dimaksud dengan SPOILER? Itu looohhh... yang kalo di blog teman2 kita ada semacam button yang bertuliskan 'OPEN' dan kalo kita klik button tersebut, maka akan terbukalah isi dari button itu. (lihat gambar)
Misalnya, link dari blog roll, atau gambar/foto, atau bisa juga teks saja, dll. Naaahh... setelah kita klik button yang bertuliskan 'OPEN' tadi, maka tulisannya berubah jadi 'CLOSE'. Kadang2 ada yang menuliskan 'SHOW/HIDE' atau 'BUKA/TUTUP'.


Truz, kalau kita klik button bertuliskan 'CLOSE' tadi, maka isi dari button tersebut tidak ditampilkan lagi di layar monitor.

Okelah, kalaw begituw, aq gak mo berpanjang kata lagi. Ikutin aja petunjuknya...

1. Log In dahulu ke Account blogspot Anda.

2. Klik "Page Element/Elemen Laman" & klik "Add/Tambah Gadget", lalu klik "HTML/Java Script".

3. Selanjutnya, COPAS kode yang ada di dalam box di bawah ini ke Gadget tersebut. Klik "Save/Simpan". Aturlah posisi dari Gadget ini, sesuai yg Anda inginkan di blog Anda.

Di bawah ini ada beberapa contoh SPOILER yang bisa kawan2 gunakan... depeleh, deepeeleeh... deeepppeeellleeehhh...

<div><div
style="margin: 5px;"><div class="smallfont" style="margin-bottom:
2px;"><input value="BUKA" style="margin: 0px; padding: 5px;
width: auto; font-size: 10px; background:yellow; color:blue; border:1px
dashed red;" onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
!= '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= ''; this.innerText = ''; this.value = 'TUTUP'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value = 'BUKA'; }"
type="button"/></div><div class="alt2"><div
style="display: none;"><div style="border: 2px dashed red;
color:blue; background-color:yellow; text-align: justify;
padding:10px;">Isi dengan teks atau kode gambar dll disini</div></div></div></div></div>

<div><div
style="margin: 5px;"><div class="normalfont"
style="margin-bottom: 2px;"><input value="OPEN" style="margin:
0px; padding: 5px; width: 30%; font-size: 11px; background:BLUE;
color:white; border:1px dashes yellow;" onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
!= '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= ''; this.innerText = ''; this.value = 'CLOSE'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value = 'OPEN'; }" type="button"
/></div><div class="alt2"><div style="display:
none;"><div style="border: 2px dashes white;
color:white;background-color:NONE; text-align: justify; padding:10px;
">Isi dengan teks atau kode gambar dll disini</div></div></div></div></div>

<div><div
style="margin: 5px;"><div class="normalfont"
style="margin-bottom: 2px;"><input value="OPEN" style="margin:
0px; padding: 5px; width: 30%; font-size: 11px; background:BLUE;
color:white; border:1px dashes yellow; -moz-border-radius-topright:
15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft:
15px; " onclick="if
(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
!= &#39;&#39;) {
this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
= &#39;&#39;; this.innerText = &#39;&#39;; this.value =

&#39;CLOSE&#39;; } else {
this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
= &#39;none&#39;; this.innerText = &#39;&#39;;
this.value = &#39;OPEN&#39;; }" type="button"
/></div><div class="alt2"><div style="display:
none;"><div style="border: 2px dashes white;
color:white;background-color:NONE; text-align: justify; padding:10px;
">Isi dengan teks atau kode gambar dll disini</div></div></div></div></div>

<div><div
style="margin: 5px;"><div class="normalfont"
style="margin-bottom: 2px;"><input value="BUKA" style="margin:
0px; padding: 5px; width: 30%; font-size: 11px; background:RED;
color:white; border:1px dashes yellow;-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-webkit-border-bottom-left
-webkit-border-bottom-right
"
onclick="if
(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
!= &#39;&#39;) {
this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
= &#39;&#39;; this.innerText = &#39;&#39;; this.value =
&#39;TUTUP&#39;; } else {
this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
= &#39;none&#39;; this.innerText = &#39;&#39;;
this.value = &#39;BUKA&#39;; }" type="button"
/></div><div class="alt2"><div style="display:
none;"><div style="border: 2px dashes white;
color:white;background-color:NONE; text-align: justify; padding:10px;
">Isi dengan teks atau kode gambar dll disini</div></div></div></div></div>

<div><div
style="margin: 5px;"><div class="normalfont"
style="margin-bottom: 2px;"><input value="BUKA" style="margin:
0px; padding: 5px; width: 30%; font-size: 11px; background:darkgreen;
color:white; border:1px dashes yellow;-moz-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-bottom-left
-webkit-border-bottom-right
"
onclick="if
(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
!= &#39;&#39;) {
this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
= &#39;&#39;; this.innerText = &#39;&#39;; this.value =
&#39;TUTUP&#39;; } else {
this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display
= &#39;none&#39;; this.innerText = &#39;&#39;;
this.value = &#39;BUKA&#39;; }" type="button"
/></div><div class="alt2"><div style="display:
none;"><div style="border: 2px dashes white;
color:white;background-color:NONE; text-align: justify; padding:10px;
">Isi dengan teks atau kode gambar dll disini</div></div></div></div></div>

<div
style="margin: 5px;"> <div style="margin-bottom: 2px;"
class="bigfont"><input style="margin: 0px; padding: 0px; width:
100%;" value="SHOW" onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
!= '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= ''; this.innerText = ''; this.value = 'HIDE'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value = 'SHOW'; }"
type="button"> </div> <div style="border: 1px inset ;
margin: 0px; padding: 6px; background: #FF0000; none repeat scroll 0%
0%; -moz-background-clip: border; -moz-background-origin: padding;
-moz-background-inline-policy: continuous;" class="alt2"><div
style="display: none;">
Isi dengan teks atau kode gambar dll disini</a>
</div></div></div>

Catatan :

Btw, di sini aq mo kasi sedikiiitttt aja tambahan, yaitu sbb :

<div style="padding:10px; overflow:auto; width:200px; height:200px;" 1px="">

.

.

.

</div>

NB :
Kode titik2 ke bawah itu adalah isi dr div style ini, bisa berisi link, text, gambar, dll

Okelah, kalaw begituw.. semoga tips ini bermanfaat, makasyiiihh atas segala perhatiannya, jangan sampe ada yg kelupaan... contohnya : sendal, handphone, kunci motor, kunci mobil, kunci rumah, dompet, tas, topi, jas ujan, jaket, payung.... wakakakak... banyaaaaaakk... yyyaaaaaakkkk....

Langkah2 membuat Cursor Salju pada blog Anda, adalah sbb :

1. Login ke Account blog Anda.

2. Klik "Layout/Tata Letak" lalu "Page Element/Elemen Laman" & klik "Edit HTML"

3. Beri tanda centang/check sign di kotak "Expand Widget Templates"

4. Cari kode berikut : <body>

5. COPAS kode berikut di atas <body>

6. Jangan lupa Simpan/Save Template... selamat bersalju ria...

Berikut ini, Oyah mencoba untuk memberikan beberapa tips tentang cara memasukkan suatu artikel (posting) ke dalam blog.
Pertama-tama yang perlu kita perhatikan dalam menu posting adalah beberapa jenis perintah di dalam Toolbar yang dapat Anda gunakan. Jika Anda sudah terbiasa menggunakan MS-Office, tentu tidak akan mengalami kesulitan saat posting artikel, karena kode di Toolbar tersebut mirip dengan yang ada di MS-Word.

Toolbar yang ada dalam menu posting, dilihat dari kiri ke kanan :

1. Untuk membatalkan/mengulang suatu perintah (undo/redo)

2. Untuk mengubah jenis huruf yang di gunakan (font type)

3. Untuk mengubah ukuran huruf (font size)

4. Untuk Menebalkan huruf (bold)

5. Untuk memiringkan huruf (italic)

6. Untuk membuat 'strikethrough'

7. Untuk mengubah warna huruf (font color)

9. Untuk menambahkan hyper-link pada suatu bagian tulisan

10. Untuk memasukan gambar (picture upload)

11. Untuk memasukkan film/video (video upload)

12. Untuk membuat artikel menjadi rata kiri (align left)

13. Untuk membuat tulisan menjadi di tengah (align center)

14. Untuk membuat artikel menjadi rata kanan (align right)


16. Untuk membuat sub artikel dengan simbol "Angka/Number"

17. Untuk membuat sub artikel dengan simbol "Bullet"

18. Untuk membuat artikel menjorok ke dalam (Quote)

19. Untuk mengembalikan format tulisan ke standard/default (Remove Formatting)

20. Untuk memberikan pemisah halaman (Insert Jump Break)

21. Untuk mengecek ejaan/spelling (Btw, ini khusus untuk bahasa Inggris, untuk bahasa Indonesia sih gak perlu, apalagi kalo bahasa gaul ... susah ngecek spelling-nya... hehehe... Red.)

♥ Tombol "Pratinjau/Preview" untuk melakukan preview (tinjau) terhadap artikel yang akan Anda posting

♥ Tombol "Edit HTML" untuk membuat/menyunting artikel dalam kode HTML
♥ Tombol "Compose" untuk membuat/menyunting artikel dalam Mode Compose (tulisan biasa)

Cara penggunaan toolbar di atas adalah melakukan blocking (beri tanda) terlebih dahulu tulisan yang akan di edit, kemudian tekan tombol toolbar yang diinginkan.
Khusus untuk tombol "Picture Upload", "Video Upload", "Insert Jump Break", "Preview", "Edit HTML" dan "Compose" , tidak perlu melakukan blocking. Cukup tempatkan posisi kursor di bagian yang akan di-edit untuk tombol-tombol tersebut.

Langkah-langkah dalam melakukan posting suatu artikel :

1. Klik tombol “Compose“ untuk melakukan penyuntingan/editing artikel (jika Anda masih bingung dengan   kode HTML).
2. Klik tombol tool yang berlambang “Panorama” berwarna biru, jika Anda ingin memasukan gambar atau foto untuk menghiasi posting-an Anda.

Catatan :
- Gambar/foto bisa di-upload dari komputer Anda, setelah muncul dialog box berwarna biru, klik "Browse" lalu pilih gambar/foto di komputer Anda, setelah itu klik "Upload".

- Setelah muncul tinggal pilih, mau diletakkan di kiri/left, tengah/center atau kanan/right dari artikel Anda. Bisa juga digeser dengan melakukan 'click and drag'. Pilih ukuran dari kecil/small sampai besar sekali/xtra-large

3. Klik tombol “Preview“ untuk melihat hasil posting-an anda yang nantinya akan tampil di dalam blog, barangkali masih ada yang perlu diedit.

Catatan :
- Kalau bisa warna tulisan artikel disesuaikan dengan background, khan gak mungkin background putih diberi tulisan artikel berwarna putih jga... yaaa gak keliatan atuuuhh... hehe
- Fungsi BOLD, ITALIC, besar/kecil atau pengubahan jenis FONT adalah sebagai penanda, bahwa bagian tulisan itu dipertegas atau ditekankan...
4. Klik tombol “Publish“. Selesai. Sekarang tulisan hasil karya Anda dapat di baca oleh semua orang.

SELAMAT MENCOBA...
GOOD LUCK TO YOU, MY FRIEND...

Sedikit tips dari Oyah :

* Cari artikel yang ingin Anda posting, sebaiknya tidak meleset dari thema blog Anda.
* Edit semua penulisan, agar tidak terjadi salah ketik. Kalo aq pake Notepad, shg yg ada hanya format teks yang standar.
* Setelah siap dengan artikel, kalau Anda ingin menambahkan gambar, carilah dulu gambar yang sesuai dengan topik artikel tersebut. Kalo aq pake Search gambar dari Google.
* Langkah selanjutnya, COPY artikel yang telah Anda buat, lalu PASTE di area posting. Langkah ini biasa disebut COPAS.
* Bila Anda masih ingin posting tersebut disempurnakan, edit lagi sesuai selera Anda.
* Bila Anda sudah sedikit banyak faham tentang HTML, sebaiknya hasil tulisan dalam mode "Compose", diperiksa ulang. 

Kadang2 terjadi, artikel yang kita susun di Compose mode, berbeda dengan isi HTML-nya... check aja di "Pratinjau/Preview". Kalau tidak sesuai, edit lagi.

Pengalaman q seehh, biasanya kode baris alinea suka gak muncul... yaitu <br />. Ini adalah kode agar tulisan berikutnya sesudah kode <br />, berada satu spasi di bawah tulisan sebelumnya. Utk dua spasi maka kode <br /> hrs diketik 2 kali ... dst...
* Okelah, kalaw begituw... semoga tulisan ini bermanfaat buat semua... tak lupa, Oyah mengucapkan semoga sukses, diberi limpah rezeki, diberi kesehatan dan keselamatan tuk semua teman2 Oyah...

1. Login ke Account blog Anda, kemudian klik "Layout/Tata Letak" lalu klik "Edit HTML"
2. Berikan tanda centang atau check sign "Expand Template Widget" . Download/Save dulu seluruh Template Anda ke hard disk/flash disk, hanya untuk antisipasi. Bisa dgn perintah Download Template yang ada di halaman "Edit HTML" tersebut, atau anda gunakan COPAS dengan memilih seluruh kode HTML yang ada di blog ke media penyimpan Anda, hard disk/flash disk.
3. Carilah kode berikut ini ini ]]></b:skin> . Tekan saja 'Ctrl+F' lalu ketik kode itu untuk mempermudah mencarinya.
4. Setelah ketemu, copas kode berikut ini di atasnya.

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

5. Text yang berwarna merah adalah posisinya. Jika Anda ingin mengganti posisinya di pojok kanan bawah, text "left" diganti "right". Demikian pula text "bottom" dapat diganti dengan "top" untuk posisi atas.
6. Selanjutnya letakkan script berikut ini sesudah kode </body>

<div id='oyahtop'>
<div id='wpdc_embed_12627492203' style='display: none'>Jam Garuda Indonesia</div><head/><script src='http://www.widgipedia.com/embed/orido/Jam-Garuda-Indonesia_4639w-12627492203t-1262749220721i-8192p.js'/>
</div>

7. Simpan/Save Template, lalu Lihat Blog Anda ... "taaarrrraaaaa" ... Jam Garuda Indonesia sudah muncul di blog Anda...

Langkah2 membuat "Readmore" pada postingan Anda, sbb :

1. Login ke Account blog Anda.

2. Klik "Layout/Tata Letak" lalu "Page Element/Elemen Laman" & klik "Edit HTML"

3. Beri tanda centang/check sign di kotak "Expand Widget Templates"

4. Cari kode berikut

 </head>

Berikut ini adalah langkah2 untuk membuat Buku Tamu tersembunyi :

1. Masuk ke account blog Anda.
2. Pilih Tata Letak >> Elemen Halaman >> Tambah Gadget [dimana aja bisa], kemudian pilih "Html/Java Script". Catatan : klo aq taro kode ini tepat di bawah header, spy loading-nya lbh cepat...
3. Kemudian COPAS (copy and paste) kode berikut :

<style type="text/css">

#gb{

position:fixed;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

}

.gbcontent{

float:left;

border:2px solid #A5BD51;

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;

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

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

<div class="gbcontent">

<br/>

<div style="text-align:right">

<a href="javascript:showHideGB()">

[close]

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script></div></div>

* Pada kode diatas, ganti kode <!-- Ganti ini dengan kode Buku Tamu Anda-->  dengan kode Buku Tamu Anda yg diberikan oleh penyedia-nya, misalnya dr CBox, ShoutBox, Oggix, ShoutMix, dll.
Btw, kode ini hrs persis/lengkap spt yg diberikan oleh penyedia-nya, jgn sampe ad yg kurang sedikitpun. 

Kalo aq, aq bikin sendiri dulu model tombolnya, pake MS-Word, truz q insert di MS-Publisher, dan q 'Save As Picture' dan q upload ke PhotoBucket, baru q pake alamat di PhotoBucket sebagai pengganti link tsb. Pusing? Yawdah, pake tombol dr link itu az... Btw, klo tar ad wkt dan pengen nyoba2 sndiri, bisa dicoba cara aq... 

* Kalau ingin mengubah posisinya ke atas sedikit, ubah kode top:50px; dengan mengganti angka 50 dengan keinginan Anda, contoh 30px. Klo aq pake 5px, spy gak trlalu ke bwh.

* Okelah, kalaw begituw... selamat mencoba, smoga tutorial ini bermanfaat .... semoga hari ini jga menyenangkan bwt Anda... have a nice day, everyone... I luv y'all.... mmmmmuuuuuuaaaaacccchhhh...

* Special thanks for my friend >> Rizal Saputra, yg telah memberi inspirasi tutorial ini... sukses aja bwt kang Rizal... Oooyyyeeee...