Membuat Spoiler (Tombol untuk Menyembunyikan Teks/HTML/Video)

MMenindaklanjuti request dari rekan WBC untuk menshare tips tentang membuat spoiler. Maka pada posting saya kali ini akan membahas tentang tips membuat spoiler ini. Apa itu spoiler? mungkin rekan WBC banyak yang sudah tahu. Spoiler di blog adalah sebuah tombol yang fungsinya menyembunyikan teks atau gambar di bawahnya. Contohnya adalah tombol Rekan WBC pada sidebar blog WBC. Saat diklik tombol tampilkan maka dibawahnya akan muncul kotak yang sebelumnya tersembunyi berisi textarea link-link dari rekan-rekan WBC.
Berminat ingin membuatnya? Berikut tipsnya.

Untuk Blogspot
Seperti biasa login acoount blogger Anda. kemudian masuk Tata Letak > Elemen Laman.
Pada sidebar pilih Tambah Gadget > HTML/Java Script.
Masukkan kode dibawah ini :
<div><div style=”margin: 5px;”>
<div class=”smallfont” style=”margin-bottom: 2px;”><i><span style=”font-weight: bold;”>Judul</span></i><input value=”Show” style=”margin: 0px; padding: 0px; width: 60px; font-size: 10px;” 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 class=”alt2″ style=”border: 1px inset ; margin: 0px; padding: 6px;”>
<div style=”display: none;”>
isi spoiler
</div></div></div></div>

Hasilnya :

Judul

isi spoiler

Nah tugas rekan WBC mengedit sesuai kebutuhan teks yang saya cetak berwarna biru.Cukup mudah bukan? Jika ada kesulitan silahkan meninggalkan komentar.

Untuk WordPress

Bagi rekan WBC yang ingin memasang spoiler di blog berplatform wordpress, kodenya adalah seperti di bawah ini :
<div>
<input type=”button” value=”Tampilkan” style=”margin:0px;padding:0px;” 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 = ‘Sembunyikan‘; } else { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ‘none’; this.innerText = ”; this.value = ‘Tampilkan‘; }”>
</div>
<div style=”background: #CCCCCC; margin: 10px auto;
border: 1px solid #000;
padding: 5px;”>
<div style=”display: none;”>
teks/HTML gambar/embed video yang disembunyikan
</div>
</div>

Hasilnya :

teks/HTML gambar/embed video yang disembunyikan

Ganti teks yang bercetak biru sesuai kebutuhan rekan WBC. Silahkan berkreasi sendiri apa saja yang ingin rekan WBC isi dalam sisi spoiler itu, bisa Text, HTML, Image atau Video.

Sekedar narsis, dibawah ini adalah contoh spoiler yang pada isi spoiler saya beri image foto saya beserta link menuju blog saya,hehe.. Kodenya adalah :
<a href=”http://www.danisetiyawan.blogspot.com/” taget=”_blank”><img src=”http://img708.imageshack.us/img708/7436/dhnzmgs116.jpg” border=”0″ alt=”Blog Motivasi | Dani Setiyawan”></a>
Hasilnya seperti ini :

Cah Ngganteng Dewe >

Blog Motivasi | Dani Setiyawan

Semoga bermanfaat n enjoy blogging.

Off-Page Optimization

Seperti janji saya pada posting sebelumnya tentang SEO yaitu On-Page Optimization. Saya bejanji akan mengupas tentang Off-Page Optimization. Off-Page Optimization ini adalah optimasi SEO yang bekerja diluar blog kita. Ada beberapa hal yang perlu diperhatikan dalam Off-Page Optimization ini yaitu : Jumlah Backlink, Kualitas Backlink dan Natural Backlink.

Jumlah Backlink
Pengertian secara simple backlink yaitu link di dalam blog lain yang menuju blog kita. Jadi semakin banyak backlink dan semakin berkualitas backlink menuju ke blog kita maka sangat besar pengaruhnya dalam meningkatkan posisi kita di jajaran teratas mesin pencari (SERP). Cara untuk mendapatkan backlink antara lain :
  • Meminta backlink kepada blogger lain
  • Melakukan link exchange dengan blogger lain
  • Membuat backlink sendiri dari dummy blog
  • Melakukan linkbait
  • Menulis konten berkualitas yang membuat blogger lain mau secara sukarela memberikan backlink kepada Anda

Kualitas Backlink
Ciri-ciri backlink berkualitas yaitu :

  • Berasal dari blog setopik
  • Berasal dari authority blog (minimal PR 7)
  • One-way backlink
  • Tidak berasal dari link-farm

Natural backlink
Natural backlink adalah backlink yang diberikan kepada sebuah blog dengan ciri-ciri sebagai berikut:

  • Link diletakkan di dalam kalimat (tidak di dalam blogrol)
  • Berupa variasi kata kunci
  • Berupa gabungan inbound dan outbound link
  • Link tidak berasal dari IP yang sama
  • Link berupa deep linking (link ke halaman artikel dan bukan ke halaman homepage)

Dengan melakukan atau memeriksa kembali poin-poin kunci SEO untuk blog diatas, upaya memaksimalkan posisi ranking di SERP (Search Engine Result Pages) bagi blog Anda niscaya akan mendapatkan hasil seperti yang Anda harapkan.

Sumber : Blogguebo

Semoga Bermanfaat

On-Page Optimization

Melanjutkan artikel sebelumnya tentang SEO, kali ini saya akan merinci lebih lanjut tentang Tips SEO di Blog. Sudah kita tahu sebelumnya bahwa agar web/blog kita bisa menjadi jajaran teratas mesin pencari solusinya adalah kita paham akan  SEO. Bagi rekan WBC yang sudah lama berkecimpung di dunia blogging maupun SEO pasti sudah paham betul tips apa saja yang harus diketahui dalam per-SEO-an ini.

Dari berbagai sumber yang saya baca, dapat ditarik kesimpulan bahwa dalam kacamata SEO terdapat dua hal penting yang sangat mendasar. Dua hal penting itu yaitu on-page optimization atau optimasi dalam halaman blog dan off-page optimization atau optimasi di luar halaman blog. Berikut akan saya coba jelaskan satu persatu agar lebih jelas.

On-Page Optimization

On-Page Optimization ini adalah optimasi di dalam halaman blog kita. Optimasi ini meliputi dua hal utama yaitu blog attribute dan content attribute.

1. Blog Attribute
Blog attribute ini meliputi 6 hal yaitu : Nama domain, Nama Blog, Meta tag, Desain / theme blog, Gambar, dan Atribut HTML.
  • Nama domain
Nama domain merupakan alamat URL kita, contohnya untuk blog WBC ini adalah http://www.wbcwonogiri.blogspot.com/. Meskipun nama domain mempunyai peran dalam SEO namun untuk sekarang tidak lagi menjadi hal yang utama dalam SEO. Jadi kita tidak perlu bingung-bingung mencari nama domain yang sesuai dengan tema yang ingin ditulis dalam blog. Kita sebaiknya lebih konsen menciptakan nama domain yang mudah diingat dan mudah dilafalkan.
  • Nama Blog
Nama blog boleh sama dengan nama domain, tetapi juga boleh berbeda. Sesuaikan saja dengan tema yang ingin rekan tulis dalam blog rekan. Meskipun nama domain rekan WBC adalah nama rekan sendiri, namun dalam nama blog ini rekan WBC boleh diisi dengan tema blog rekan. Misalkan nama domainnya http://www.danisetiyawan.blogspot.com/ namun nama blognya adalah Blog Motivasi | Dani Setiyawan. Atau nama blog lain seperti Tips Trik Blogging, dll. Sesuaikan dengan kata kunci yang ingin dibidik. Pilih nama yang mudah diingat dan dilafalkan.
  • Meta tag
Meta tag merupakan uraian singkat mengenai isi blog kita dan keyword yang ingin dibidik. Usahakan ringkas namun terarah, sebaiknya panjang meta tag tidak lebih dari 80 karakter.
  • Desain / theme blog
Desain / theme blog mempunyai nilai yang cukup tinggi dalam SEO. Semua platform blog sekarang ini sudah memiliki sifat SEO friendly. Sebelum memantapkan memilih theme blog kita perhatikan juga struktur kode konten di dalamnya.
  • Gambar
Gambar juga memberi nilai tersendiri dalam SEO. Saat pencarian image melalui search engine penggunaan gambar juga berpengaruh dalam keberhasilan SEO ini. Usahakan panjang atribut gambar tidak lebih dari 40 karakter.
  • Atribut HTML
Atribut HTML ini meliputi struktur heading tag html. Struktur heading H-1, H-2, atau H-3 sebagai penanda tingkat kepentingan judul di dalam konten akan memberikan nilai tersendiri dalam SEO.

2. Content Attribute
Content attribute berkaitan dengan isi yang rekan posting ke dalam blog. Content blog yang perlu diperhatikan dalam SEO ada 4 hal yaitu : Kata kunci (keywords), Jumlah kata kunci, Variasi kata kunci dan  Posisi kata kunci. Berikut penjelasannya :
  • Kata kunci (keywords)
Kata kuci adalah kata yang menjadi topik utama pada artikel di dalam blog. Pemilihan kata kunci ini dalam kacamata SEO adalah hal yang sangat penting. Kata kunci inilah yang akan dibaca oleh mesin pencari (search engine). Semakin tepat kita memilih kata kunci maka semakin tinggi nilai kita di mata search engine dan masuk ke jajaran teratas pada halaman search engine tersebut. Otomatis akan berimbas pada traffic ke blog kita.
  • Jumlah kata kunci
Jumlah atau tingkat kepadatan kata kunci ini dipengaruhi oleh panjang pendeknya artikel. Sebaiknya dalam satu artikel kita memasukkan 2-5 kata kunci sebagai senjata agar terbaca oleh mesin pencari. Terlalu banyak kata kunci menyebabkan hal yang negatif juga untuk blog kita, bisa-bisa dianggap spam oleh mesin pencari.
  • Variasi kata kunci
Selain pemilihan kata kunci dan jumlah kata kunci, hal yang diperlukan dalam SEO adalah variasi dari kata kunci tersebut. Ketika menulis konten, sebaiknya kata kunci yang dibidik tidak tepat sama dan sekedar diulang-ulang. Alih-alih mengulang-ulang sebuah kata yang sama, akan lebih baik apabila Anda menuliskan variasi atau sinonim kata kunci yang dibidik. Hal ini selain untuk mencegah stigma spam content oleh mesin pencari, juga akan semakin memperkaya perbendaharaan kata kunci yang Anda bidik.
  • Posisi kata kunci
Sebagai panduan, posisi kata kunci sebaiknya berada pada kalimat pertama dalam paragraf pertama, serta pada paragraf terakhir. Meskipun demikian, ada baiknya agar isi artikel tetap alami, kata kunci tersebar pada bagian tubuh artikel itu sendiri.
Off-Page Optimization
Off-Page Optimization akan saya jelaskan pada posting berikutnya.
Semoga bermanfaat

SEO (Search Engine Optimization)

dani setiyawan,wbc wonogiri
Kunci sukses sebuah web/blog salah satunya adalah traffic atau banyaknya pengunjung yang memngunjungi web/blog. Blog akan dikatakan sukses jika mampu mendatangkan pengunjung sebanyak-banyaknya. Traffic yang tinggi adalah tanda bahwa blog tersebut digemari oleh pengunjung setianya. Salah satu cara yang efektif untuk mendatangkan pengunjung adalah dengan memanfaatkan mesin pencari atau search engine.Kebanyakan pengguna internet sering menggunakan mesin pencari dalam mencari informasi yang dibutuhkan dengan memasukkan kata kunci atau keyord tertentu dalam mesin pencari tersebut.

Pengunjung akan cenderung membuka website yang tampil pada urutan teratas di mesin pencari tersebut. Oleh karena itu secara otomatis pemilik web/blog sangat berharap web/blognya masuk di jajaran teratas mesin pencari tersebut jika pengunjung memasukkan kata kunci atau keyword tertentu.

Yang jadi pertanyaan kita sekarang adalah bagaimana caranya agar web/blog kita bisa muncul pada mesin pencari tersebut melalui keyword-keyword yang sesuai dengan web/blog kita? Lebih jauh lagi perntanyaan kita adalah bagaimana caranya agar web/blog kita bisa menjadi jajaran teratas mesin pencari tersebut?
Solusinya adalah SEO (Search Engine Optimization). Gambaran tersebut diatas adalah yang saya maksudkan dengan SEO. SEO adalah pengoptimalan web/blog kita agar masuk jajaran teratas pada situs mesin pencari (Google, Yahoo, MSN, dll). Tujuannya seperti yang saya jelaskan tadi yaitu untuk mendatangkan pengunjung ke web/blog kita sebanyak-banyaknya. SEO ini bisa melibatkan web/blog kita maupun web/blog lain.
Sebagus apapun web/blog kita jika tidak bisa dikenali (istilahnya terindex) oleh mesin pecari sama halnya hanya kita yang tahu web/blog kita. Jika web/blog kita dikenali oleh mesin pencari kemungkinan web/blog kita dikenal oleh seluruh pengguna internet seluruh dunia sangatlah besar. Jadi SEO adalah ilmu yang harus dimiliki oleh seorang yang memiliki web/blog yang ingin dikenal oleh banyak pengguna internet.
Mari kita belajar bareng tentang SEO ini, dan selanjutnya saya akan terus share artikel SEO. Banyak yang bisa kita cari diinternet ini.

Membuat Kotak Tukar Link Otomatis Select All Saat DiKlik

Menambahkan lagi artikel saya sebelumnya mengenai kotak (textarea) tukar link yaitu Cara Membuat Kotak Tukar Link / Link Exchange, Membuat Tombol Select All pada Kotak Tuker Link dan Membuat Kotak Tukar Link Anti Edit. Kali ini saya akan melengkapi penjelasan mengenai Cara Membuat Kotak Tukar Link Otomatis Select All Saat DiKlik. Kotak tukar link ini sangat favorit digunakan oleh para blogger karena berfungsi cukup optimal karena cukup kita klik kode html di dalam kotak maka secara otomatis akan mem-blok semua kode html tersebut, pengunjung yang ingin tukar link tinggal mengcopy nya. Bagaimana caranya?

Coba bandingkan kedua tampilan kotak tukar link dibawah ini, sebelum dan sesudahnya.

Sebelum

Sesudah

Sudah bisa membedakan kedua tampilan tersebut datas bukan? Pada tampilan bawah kode html di dalam kotak akan otomatis mem-block saat kita klik.

Seperti pada posting saya sebelumnya tentang Membuat Kotak Tukar Link Anti Edit, Kotak Tukar Link Otomatis Select All Saat DiKlik ini kita juga tinggal menambahkan kode onclick pada text area. Kode tersebut yaitu : 

onclick=”this.focus(); this.select();”
Jadi sekarang kode html textarea secara keseluruhan yaitu :
<center><textarea style=”width: 150px; height: 100px;” name=”txt” rows=”100″ wrap=”VIRTUAL” cols=”55″ readonly=”readonly” onclick=”this.focus(); this.select();”>&lt;a href=”http://www.wbcwonogiri.blogspot.com/” target=”_blank” title=”WBC (Wonogiri Blogger Community)“&gt;&lt;img style=”width: 153px; height: 36px;” src=”http://72.51.34.83/images/9c2/9c2fe617d36c8c766f651c1b445a62b3fb041dd7.gif” alt=”WBC Wonogiri” /&gt;&lt;/a&gt;</textarea></div></center>
Selamat mencoba

Membuat Kotak Tukar Link Anti Edit

Setelah melakukan posting artikel tentang Cara Membuat Kotak Tukar Link dan Membuat Tombol Select All pada Kotak Tuker Link, ternyata ada yang bisa kita perbaiki lagi. Ternyata setelah kita menggunakan kode textarea pada kedua tips di kedua artikel saya tersebut tampilan kode html pada kotak tukar link (textarea) masih berupa text editor atau setiap pengunjung bisa melakukan perubahan seperti pada text editor notepad biasa. Jika pengunjung secara tidak sengaja melakukan tombol delete pada saat masuk textarea maka kode html tersebut pasti akan terjadi kesalahan.

Untuk menghindari hal tersebut pada posting kali ini saya akan membahas Membuat Kotak Tukar Link Anti Edit. Artinya kita tidak bisa melakukan proses editing seperti yang saya jelaskan tadi menghapus atau menambah kode-kode di dalam kotak textarea. Bandingkan tampilan sebelum dan sesudah di bawah ini.

Sebelum

Sesudah

Caranya sangat mudah yaitu kita tinggal memasukkan satu deklarasi read only pada kode html textarea. Lebih jelasnya kode tersebut yaitu : readonly=”readonly”
Sehingga kode keseluruhannya yaitu :
<textarea style=”width: 150px; height: 100px;” name=”txt” rows=”100″ wrap=”VIRTUAL” cols=”55″ readonly=”readonly”>&lt;a href=”http://www.wbcwonogiri.blogspot.com/” target=”_blank” title=”WBC (Wonogiri Blogger Community)“&gt;&lt;img style=”width: 153px; height: 36px;” src=”http://72.51.34.83/images/9c2/9c2fe617d36c8c766f651c1b445a62b3fb041dd7.gif” alt=”WBC Wonogiri” /&gt;&lt;/a&gt;</textarea>
Bisa dipahami? Okey selamat mencoba ya..