Cara Membuat Download Box & Spoiler Post

Download Box & Spoiler Post - Pada kesempatan kali ini saya akan membuat tutorial Cara Membuat Download Box & Spoiler di Blogger .

Tutorial Membuat Download Box kali ini menggunakan spoiler post sebagai tambahan untuk download link atau pesan oleh admin. Tentu saja download box ini responsive .

DEMO

Cara Membuat Download Box & Spoiler Post
1. Buka Blogger ,Pilih Tema , Lalu klik Edit Tema.
2. simpan css dibawah ini diatas ]]></b:skin> atau diatas </style>

 /* Download Box - Alponse
  ====================================== */
#_box-area #table{border-collapse:collapse;border-spacing:0;background-color:transparent;width:100%;max-width:100%;margin-bottom:20px}
#_box-area #table tbody{display:table-row-group;vertical-align:middle;border-color:inherit}
#_box-area #table tbody tr{display:table-row;vertical-align:inherit;border-color:inherit}
#_box-area #table tbody tr:hover,#_box-area #table tbody tr td:hover{background-color:#f5f5f5;}
#_box-area #table tbody tr td{border:1px solid #ddd;padding:7px 10px;line-height:1.42857143;vertical-align:top}
#_box-area #table a{color:#2885DE;background:none;float:none;padding:0;display:inline-block;font-size:14px;border:none;}
#_box-area #table a:hover{text-decoration:underline}
#_box-area #table ._title-box:hover,#_box-area #table ._title-box{background-color:#213649;}

/* Spoiler Post For Download Box - Alponse
  ============================================= */
._spoiler-post{border:1px solid #ddd;margin-bottom:5px}
._showing-post{background:#f1f1f1;width:100%;display:block;padding:10px;text-align:left;line-height:1.5;font-weight:700;cursor:pointer;border:none;color:#333;outline:none}
._showing-post.min:before{content:'+';margin-right:5px}
._showing-post.max:before{content:'-';margin-right:5px}
._spoiler-post .hidden{display:none}
._spoiler-content{padding:10px;overflow:hidden;clear:both;border-top:1px solid #ddd;background:#fbfbfb;}

3. Lalu simpan javascript berikut diatas </head>

 <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){$("._spoiler-post").click(function(){$("._spoiler-content").toggle();$('._showing-post').toggleClass('min max');});});
//]]></script>
</b:if>

4. Save tema.
5. Gunakan HTML dibawah ini untuk Spoiler Post nya.

 <div class='_spoiler-post'>
<button class='_showing-post min'>Episode Lainnya Klik Disini</button>
<div class='_spoiler-content hidden'>

<!-- Isi dengan download box ,text , atau semacamnya -->

</div>
</div>

6. Gunakan HTML dibawah ini untuk Download Box nya.

 <div id='_box-area'>
<table id="table"><tbody><tr><td class="_title-box"><center>
<span style="color: #f3f3f3;">
<b>Boku no Hero Academia S3 Episode 3 Sub Indo — </b><span style="color: cyan;">Oploverz</span>
</span></center></td></tr><tr><td><center>
Mkv 480p
</center></td></tr><tr bgcolor="#eee"><td><center>
<a href="#" rel="nofollow" target="_blank">Nekodrive</a> | 
<a href="#" rel="nofollow" target="_blank">Downace</a> | 
<a href="#" rel="nofollow" target="_blank">Zippyshare</a> | 
<a href="#" rel="nofollow" target="_blank">ClicknUpload</a> | 
<a href="#" rel="nofollow" target="_blank">Datafilehost</a>
</center></td></tr><tr><td><center>
Mkv 720p
</center></td></tr><tr bgcolor="#eee"><td><center>
<a href="#" rel="nofollow" target="_blank">Nekodrive</a> | 
<a href="#" rel="nofollow" target="_blank">Downace</a> | 
<a href="#" rel="nofollow" target="_blank">Zippyshare</a> | 
<a href="#" rel="nofollow" target="_blank">ClicknUpload</a> | 
<a href="#" rel="nofollow" target="_blank">Datafilehost</a>
</center></td></tr><tr><td><center>
Mp4 streaming (480p)
</center></td></tr><tr bgcolor="#eee"><td><center>
<a href="#">Nekonime</a> | 
<a href="#" rel="nofollow" target="_blank">Streamango</a>
</center></td></tr></tbody></table>
</div>

Cukup sekian tutorial kali ini , bila ada yg perlu ditanyakan silahkan komentar , sampe jumpa di artikel selanjutnya ^^;