Cara Membuat Spoiler Quote Kaskus

Kaskus adalah salah satu forum penghasil konten terbanyak tiap harinya dari member yang disebut Kaskuser (meski hampir semuanya kopas. Hehe..). Yang membuat banyak user betah untuk menulis di forum Kaskus salah satunya karena editor text yang lumayan user friendly dan tampilan publikasi yang interaktif. Karena artikel dapat dihiasi dengan berbagai macam pernak-pernik.

Contohnya dengan menggunakan Spoiler dan Quote dimana merupakan fitur umum yang menjadi andalah hampir di setiap thread. Spoiler dan Quote dipakai guna merapikan struktur postingan dan membuat konten jadi lebih menarik untuk dinikmati pembaca.

Sebagai seorang Blogger yang pernah menjadi Kaskuser, SyamsSalabim pun pernah tertarik untuk menghasilkan artikel dengan nuansa persis seperti Kaskus, yakni dengan menambahkan Spoiler dan Quote pada paragraf tertentu di artikel blog. Bagaimana cara membuatnya? Bagi Agan yang berpikir untuk melakukan hal serupa akan Syams bahas disini untuk diikuti.

TUTORIAL

Cara Membuat Spoiler Kaskus Artikel Blog


Spoiler adalah fitur untuk menyembunyikan paragraf tertentu sebelum dibuka dengan fungsi tombol. Hal ini bisa digunakan untuk menyingkat postingan yang panjang sehingga pengunjung tidak langsung bosan ketika harus scroll kepanjangan.

Langkah pertama silahkan copy paste kode berikut di atas </head>.

CSS 
<style>
/* Desain Spoiler */
#spoiler {margin:0em}
#spoiler .title{font-size:11px;padding:3px 0;margin-bottom:2px;font-weight:400;font-style:normal;color:inherit}
#spoiler .title:before{content:'Spoiler';font-weight:bold}
#spoiler .title span:before{content:' for '}
#spoiler input[type=button]{background:#1998ed;color:#fff;border-radius:3px;cursor:pointer;width:40px;border:none;font-size:10px;margin:0px;padding:2px 6px}
#spoiler .content{margin: 0px; padding: 5px; border: 1px solid #CCC;background: #EEE;color:#000}
</style>

Selanjutnya script ini taruh di atas </body>.

Javascript 
<script type='text/javascript'>
function spoiler(obj){
if (obj.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { obj.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; obj.innerText = &#39;&#39;; obj.value = &#39;Hide&#39;; }
else { obj.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; obj.innerText = &#39;&#39;; obj.value = &#39;Show&#39;; }
}
</script>

Terakhir, untuk mengaplikasikan Spoiler pada artikel blog, pasang kode berikut dalam artikel yang ingin digunakan. Bisa dipasang sebanyak apapun. Jangan lupa ganti teks yang ditandai merah dengan tulisan milik Agan.

SPOILER 
<div id="spoiler"><div class="title"><span></span><i>JUDUL</i>: <input onclick="spoiler(this)" type="button" value="Show"/></div>
<div class="content"><div style="display: none;">
***** PARAGRAF DISINI *****
</div></div></div>

Hasilnya:

JUDUL:
***** PARAGRAF DISINI *****

Cara Membuat Quote Kaskus Artikel Blog


Quote adalah halaman kutipan yang berguna untuk mengelompokkan paragraf tertentu. Sebenarnya tiap blog sudah memiliki fungsi Quote tersendiri dengan menggunakan tag <blockquote></blockquote>, tapi karena Quote yang kita harapkan memiliki desain seperti Kaskus, tentu triknya akan berbeda.

Langsung saja untuk menambahkan Quote pada artikel sangat simpel, diawali dengan menambah kode berikut diatas atas </head>.

CSS 
<style>
.quote {display:block;width:100%;margin:auto;color:#484848;text-align:justify}
.quote::before {display:block;content: "Quote:";padding-left:10px;font-size:8pt;font-weight:normal}
.quote .content {display:block;width:95%;margin:auto;border:1px solid #CCC;background:#EEE;padding:5px}
</style>

Diakhiri dengan menampilkan tag ini pada artikel blog diantara paragraf yang ingin dijadikan kutipan macam Kaskus.

QUOTE 
<span class="quote"><span class="content">
***** PARAGRAF DISINI ******
</span></span>

Hasilnya:

***** PARAGRAF DISINI ******

Demikian cara membuat Spoiler dan Quote pada artikel blog persis dengan tampilan yang terdapat pada forum Kaskus. Bagi yang belum tahu, trik ini hanya bisa digunakan pada mode HTML sewaktu Agan berada pada editor text Blogger. Jadi kalau terbiasa menggunakan mode Compose sebaiknya beralih untuk memahami tutorial koding lebih baik.

Memang tutorial ini tidak sepraktis menggunakan fitur Toolbar pada Kaskus, karena Blogger sendiri belum menyediakan fungsi semacam itu. Tapi yang terpenting adalah konten yang disajikan kepada pengunjung wajib dibuat semenarik mungkin, dan penggunaan Spoiler dan Quote lumayan membantu ketertarikan pembaca. Jadi, tidak ada salahnya untuk dicoba Gan!