Cara Membuat Kotak Spoiler di Blog Versi 2

Yo~ Konnichiwa sobat Otatechnime

Kali ini, mimin mau ngasih tips blogging Cara Membuat Kotak Spoiler di Blog versi 2.
Sebelumnya mimin pernah nge post untuk versi pertamanya dan bisa kalian baca di
Cara Membuat Kotak Spoiler di Blog Versi 1. Nah, apakah perbedaan kotak spoiler yang ini dengan yang sebelumnya? Jadi jika pada kotak spoiler 1, mimin sudah jelaskan bentuknya yaitu dengan tombol spoiler dan kotak tertutup yang belum terbuka. Untuk kotak spoiler yang ini, tetap menggunakan tombol untuk pemicunyatetapi lebih simple dengan tidak adanya gambar kotak tertutup pada halaman. Sehingga lebih ekonomis dan simple. 

Okee langsung saja mimin kasih ya

<div id="spoiler" style="display:none"> <span style="color: #ff0000;">Isi Dari Konten</span> </div> <button title="Klik untuk melihat isi" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Spoiler</button>

Yang Males nge-blok silahkan langsung di copy (klik Copy Here)

<div id="spoiler" style="display:none"> <span style="color: #ff0000;">isi dari Konten</span> </div> <button title="Klik untuk melihat isi" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Spoiler</button>

Keterangan:

1. Pada teks Isi dari Konten dapat kalian ganti dengan konten yang kalian masukkan seperti gambar, paragraf,  atau teks.

2. Teks Klik untuk melihat isi merupakan teks yang akan muncul ketika kursor kita diarahkan ke tombol spoiler
3. Untuk teks Spoiler bisa kalian ganti bebas. Teks ini muncul pada button spoiler.

Caranya memasukkan kodenya sama seperti versi 1 nya.

Hasilnya akan seperti dibawah ini.

isi dari Konten

Sampai ketemu di post selanjutnya
Saynoara~

Cara Membuat Kotak Spoiler di Blog Versi 1

Yo~ Konnichiwa sobat Otatechnime

Mimin mau sharing-sharing tips blogging lagi nih, yaitu membuat kotak spoiler. Pada tau spoiler kan? Loh bukan, bukan yang di mobil 😁, nih spoiler yang ada di blog-blog loh. Yang gimana? Ya contohnya seperti ini:

Spoiler:

Ini Dia contoh dari Spoiler

Tuh, seperti yang diatas. Udah pada mudeng kan? Biasanya ini kotak spoiler digunakan untuk menghemat laman artikel atau juga buat bikin pembaca penasaran. Kotak tersebut berupa sebuah button teks spoiler dan kotak yang seakan-akan masih tertutup, dan setelah kita mengeklik tombol atau buttonnya, barulah konten yang ada di dalam kotak terbuka dan terlihat. Itulah kurang lebih penjelasan mengenai kotak spoiler. Seperti blog review mimin, banyak dikasih kotak spoiler. Itu buat opsi pembaca, ada yang mau baca atau ada yang engga.

Okeh, langsung saja mimin berikan blok kode nya

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
 <b>Spoiler</b>: < input 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'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /> </div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> isi konten </div> </div> </div>

Yang males ngeblok kodingan, nih tinggal copy (klik Copy Code)

<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"> <b>Spoiler</b>: <input 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'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /> </div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> isi konten </div> </div> </div>

Keterangan:

1. Pada bagian Spoiler, bisa diganti bebas. Itu untuk tulisan spiler pada kotak.

2. Kalian ganti isi konten dengan konten yang kalian ingin masukkan, seperti kalimat, paragraf, kode HTML ataupun gambar.
3. Kalian bisa ganti kata Buka dengan yang kalian mau seperti open atau jangan dilihat.

Cara memasukkannya:

1. Masuk terlebih dahulu ke blog kalian lalu buat entri baru atau edit post lama, itu terserah kalian.

2. Masuk ke tab HTML yang ada di sebelah Compose. Editor ini berfungsi sebagai pemasukkan konten yang menggunakan kode HTML.

3. Lalu paste kan kode yang kalian copy.

4. Jika ingin memasukkan kode di antara kalimat atau sesudahnya, perhatikan tag <br/>. Letakkan kode atau paste kode setelah tag tersebut. Jika bingung dapat lihat gambar.

Dan...yap kotak spoiler kalian sudah selesai. Simpan lalu publikasikan. Maka kotak spoiler kalian sudah dapat digunakan.
Untuk versi kotak spoler 2 bisa kalian baca di Cara Membuat Kotak Spoiler di BlogVersi 2

Cara Membuat Teks Title Berjalan pada Blog

Yo Konnichiwa~ Sobat otatechnime, kali ini mimin mau ngasih tips blogging nih. Tips kali ini bakal ngebuat title blog kalian bergerak loh. Title blog tuh yang mana ya? Title blog itu merupakan judul blog kalian yang tertera di bar browser ketika kalian membuka suatu website.

Nah kali ini bakal mimin kasih tips nya sekalian tuh sama kodingannya bagi yang mau blognya punya tittle bergerak hehe...

Sebelumnya mimin bakal jelasin sekilas mengenai tag <head>
Yang belajar bahasa pemrograman html mungkin sudah khatam dengan tag yang satu ini, bagi yang masih awam atau pemula mungkin bingung atau belum paham. Yang penasaran ingin tau silahkan dibaca terlebih dahulu, yang mau langsung blok programnya langsung aja scroll ke bawah~

Jadi bahasa html tuh punya berbagai tag. Salah satunya tag <head>. Nah tag ini fungsinya sebagai bagian kepala dari badan page html. Seperti layaknya manusia, <head> kita umpamakan kepala dari tubuh manusia. Letaknya ada di bagian atas halaman. Setiap tag ditutup </tag> kode. Jadi kalau tagnya <head> kita tutup dengan tag </head>. Nah udh dapat bayangan kan? Jadi ketika kita melakukkan sesuatu pada tag <head> maka hanya akan berdampak ke bagian atas halam web.

Itu sekilas mengenai tag <head>. Sekarang mimin berikan langkah-langkahnya:

1. Masuk ke Template > Edit HTML
2. Muncul area koding baru lalu cari tag <head>. Biasanya ada di awal blok program.
3. Letakkan kodingan berikut ini diantara tag <head> dan </head>.

Teks Berjalan

<script type = 'text/javascript'> //<![CDATA[ teks = "teks";posisi = 0; function animasiteks(){ document.title = teks.substring(posisi, teks.length) + teks.substring(0, posisi); posisi++; if (posisi > teks.length) posisi = 0 window.setTimeout("animasiteks()", 200); } animasiteks(); //]]> </script>

Keterangan kode:

• Pada teks yang berada di dalam kutip kalian ganti dengan title teks yang kalian mau. 
• Lalu angka 200 pada window.setTimeout("animasiteks()", 200); menunjukkan kecepatan teks bergerak. Punya mimin kecepatannya 100. Semakin kecil angkanya semakin cepat laju teks berjalan.

4. Simpan.

Coba kalian pratinjau atau langsung buka blog kalian. Taraaa~ title blog kalian sudah bergerak dan menjadi lebih keren dari sebelumnya hehe...

Sekian tips blogging dari mimin

Sampai ketemu di post selanjutnya~

Sayonara~