Download Box & Spoiler Post - Pada kesempatan kali ini aku akan menciptakan tutorial Cara Membuat Download Box & Spoiler di Blogger .
Tutorial Membuat Download Box kali ini memakai spoiler post sebagai komplemen untuk d0wnl0ad link atau pesan oleh admin. Tentu saja d0wnl0ad box ini responsive .
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 - ====================================== */ #_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 - ============================================= */ ._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 j4vascript berikut diatas </head>
<b:if cond='data:blog.pageType in {"item","static_page"}'> <script type='text/j4vascript'>//<![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 d0wnl0ad 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 , jikalau ada yg perlu ditanyakan silahkan komentar , sampe jumpa di artikel selanjutnya ^^;
Sumber http://idalponse.blogspot.com
EmoticonEmoticon