Memadukan Spoiler di Blogger Template

Sudah lama saya tidak otak-atik template, akhirnya kali ini saya mencoba memodifikasi minima dengan hasilnya adalah Spoiler Minima Template.

Mengapa saya sebut Spoiler Minima Template, karena di dalam Spoiler Minima Template ini terpasang sistem spoiler yang aku terapkan pada kolom dibawah navigasi menu. Apa sih Spoiler itu ? Anda bisa mengetahuinya di bCOMStudio, termasuk mendowload template tersebut.

Spoiler Minima Template ini sederhana, karena hanya terdiri dari dua kolom. Meskipun sederhana, tapi tidak boleh dipandang sebelah mata... apalagi dipandang dengan mata bathin.

Bagaimana saya menerapkan Spoiler ini pada Spoiler Minima Template, berikut penjelasannya :
(sebaiknya coba pada template baru dengan template minima dan ukuran width: 750px )
Langkah awal saya menambahkan dua buah kolom dibawah navigasi menu/ header atau di atas Content Wrapper.

Saya menambahkan kode berikut :

/* -- kotak dhukur -- */

#kotak {
width:750px;
clear:both;
margin:0 auto;
float:left;
padding: 10px 0;
color:#ffffff;
background:#434741;
border-top:#ffffff;
border-bottom:#ffffff;
}

#kotak a:link {
color:#006699;
text-decoration:none;
}

#kotak a:hover {
color:#c06000;
text-decoration:underline;
}

#kotak a:visited {
color:#808080;
text-decoration:none;
}

#kotak h2 {
color:#000000;
padding:10px 0 2px 0;
margin:0 0 10px 0;
border-bottom:1px dotted #333;
font-size:11px;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase;
}

#kotak ul {
padding:0;
margin:0;
color:#333;
}

#kotak ul li {
list-style-type:none;
border-bottom:1px dotted #333;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNcus6vrktn3YwPsfUG5f60CXMavSqZT9E2ireJaVS21bBVBzyv6NRQX0J-Ny2s-pZOFfp-KtZ9yWTrWUOcKchEh0VEcakHns9xhTU0E5He2XjbDW_3w_e4hdI8w2BGn0B_3xJq3D28ME/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px;
margin-top:2px;
}

#kotak1 {
width:300px;
float:left;
padding-left:10px;
}

#kotak2 {
width:390px;
float:left;
padding:0 10px 0 10px;
border-left: 2px solid #ffffff;
}

Kemudian saya menambahkan kode berikut, di atas kode : <div id='main-wrapper'>

<div id='kotak'>
<b:section class='kotak' id='kotak1' preferred='yes'/>
<b:section class='kotak' id='kotak2' preferred='yes'/>
</div>

Kemudian saya menerapkan kode spoiler pada kode di atas, seperti ini :

<div id='kotak'>
&lt;div&gt;&lt;div style=&quot;margin: 5px;&quot;&gt;
&lt;div class=&quot;bigfont&quot; style=&quot;margin-bottom: 2px;&quot;&gt;&lt;input value=&quot;Show&quot; style=&quot;margin: 0px; padding: 0px; width: 60px; &quot; onclick=&quot;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;Hide&#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;Show&#39;; }&quot; type=&quot;button&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;alt2&quot; style=&quot;border: 0px inset ; margin: 0px; padding: 6px;&quot;&gt;
&lt;div style=&quot;display: none;&quot;&gt;

<b:section class='kotak' id='kotak1' preferred='yes'/>
<b:section class='kotak' id='kotak2' preferred='yes'/>

&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
</div>


Kata Show maupun Hide bisa dirubah sesuai keinginan.
Bila anda ingin mendowload daripada template ini, silahkan kunjungi bCOMStudio.

Pada demo template, anda juga bisa mencoba alunan musik berikut link downloadnya pada sidebar.

(Pesan Singkat : Pada template bCOMStudio telah saya terapkan kombinasi link iklan, jadi sebelum anda masuk ke URL sebenarnya, anda terlebih dahulu disodori halaman iklan. he..he..he.... saran saya diklik iklanya, biar bidikCOM dapat dollar....... wik, bCom ... malu-maluin....... )

DEMO