Anime Info & download box

Artikel kali ini, dijelaskan cara membuat Anime Info & download box yang cukup mudah & simple.



biasanya saya membuat anime info dan download box secara terpisah seperti diartikel sebelumnya yaitu Cara membuat anime info & Cara membuat download box, tetapi dipost kali ini saya buat menjadi satu artikel yaitu Anime Info & download box. Untuk pratinjau silahkan tekan tombol dibawah :


Cara membuat Anime Info & download box

  1. Buka blogger > tema > edit html, kemudian cari link css berikut diatas </head>, [jika tidak ada tambahkan]
    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

  2. Langkah berikutnya, tambahkan css berikut kedalam <b:skin>...</b:skin> atau <style>...</style>
    /* Animeinfo and Download
      ============================ */
    #inf_anim1,.inf-sinopsis,.inf-detailx,.download-box{clear:both;display:block;overflow:hidden;margin:10px auto}
    .inf-sinopsis p,.inf-detailx p,.download-box p{margin:5px auto;padding:5px 0}
    .inf-sinopsis{margin-top:0;position:relative}
    .inf-sinopsis h3,.inf-detailx h3,.download-box h3{position:relative;font-size:16px;border-bottom:2px solid #222;padding:5px;margin:10px auto;margin-bottom:5px}
    .inf-sinopsis h3:after,.inf-detailx h3:after,.download-box h3:after{content:"";position:absolute;bottom:-2px;right:0;width:70%;border-bottom:2px solid darkorange;z-index:1}
    .inf-sinopsis ul li{margin:5px auto;font-size:15px;line-height:20px}
    .download-box .box-item{margin:0 auto;margin-bottom:5px;position:relative;padding:2px;border:1px solid #ddd;background:#eee}
    .download-box .box-item h2{margin:auto;font-size:15px;background-color:#333;display:block;color:white;padding:5px;border-radius:1px}
    .download-box .box-item ul{list-style:none;padding:5px;margin:auto}
    .download-box .box-item ul li{margin:3px auto}
    .download-box .box-item ul li b,.download-box .box-item ul li a{display:inline-block;padding:3px 5px;border-radius:3px;text-decoration:none;color:white}
    .download-box .box-item ul li a{background-color:#7e8392}
    .download-box .box-item ul li a:hover{text-decoration:underline}
    .download-box .box-item ul li:nth-child(even) b{background-color:#F59F3D}
    .download-box .box-item ul li:nth-child(odd) b{background-color:#69A9F2}
    

  3. Jika sudah Save tema
  4. langkah terakhir, silahkan buat postingan atau halaman untuk menempatkan Anime info & Download boxnya menggunakan HTML berikut
    <div id="inf_anim1">
            <div class="inf-sinopsis">
                <h3><span class="fa fa-info"></span> Info :</h3>
                <ul>
                <li>Judul : Example1</li>
                <li>Judul Lain : Example2</li>
                <li>Type : OVA</li>
                <li>Episode : Unknown</li>
                <li>Duration : 18 Menit</li>
                <li>Category : <a href="#">Action</a> , <a href="#">Ecchi</a> , <a href="#">Hipnotis</a> , <a href="#">Yaoi</a> , <a href="#">Gangbang</a></li>
                <li>Aried : 25 Februari 2020</li>
                <li>Studio : Unknown</li>
                <li>Rating : R 18+</li>
                <li>Score : 7.54</li>
                </ul>
            </div>
            
            <div class="inf-detailx">
                <h3><span class="fa fa-file-text-o"></span> Sinopsis</h3>
                <p>
                    Isi Sinopsis
                </p>
            </div>
            
            <div class="download-box">
                <h3><span class="fa fa-cloud-download"></span> Link Download Anime Sub Indo</h3>
                <div class="box-item 1">
                    <h2>Episode 1</h2>
                    <ul>
                        <li><b>720p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
                        <li><b>480p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
                        <li><b>360p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
                        <li><b>240p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
                    </ul>
                </div>
                <div class="box-item 2">
                    <h2>Episode 2</h2>
                    <ul>
                        <li><b>720p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
                        <li><b>480p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
                        <li><b>360p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
                        <li><b>240p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
                    </ul>
                </div>
                <div class="box-item 3">
                    <h2>Episode 3</h2>
                    <ul>
                        <li><b>720p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
                        <li><b>480p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
                        <li><b>360p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
                        <li><b>240p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
                    </ul>
                </div>
        </div>
    </div>

Related Post
Comment Post