Download Box Kurogaze

Download Box Kurogaze
Dagruel.com

Download Box merupakan widget yang mengatur kumpulan link download agar tersusun rapi, sekaligus mempercantik tempilan website.

Download Box Kurogaze - merupakan salah satu yang terbaik dari beberapa website anime yang akan saya share di web Dagruel.

Pemasangan CSS

Untuk WordPress buka

Appearance > Theme Editor > style.css > tempelkan CSS nya
atau bisa juga
Appearance > Customize > Additional CSS > tempelkan CSS nya

dan untuk Blogger buka

Tema > Edit HTML > tempelkan CSS nya di antara tag <style> tempelkan css nya disini </style>
.dlx h4 span{margin-left:10px}
.dlx{backgound:#ddd;padding:3px}
.dlx h4{background:#c2382b;color:#fff;font-size:14px;font-weight:700;border-left:6px solid #e4ab01;border-right:6px solid #e4ab01;margin:5px 0;padding:8px}
.dlx ul{list-style:none;margin:0;padding:0}
.dlx ul li{margin-bottom:10px}
.dlx strong{background:#305d7b;padding:3px 8px;margin-right:1px;margin-bottom:5px;font-size:12px;color:#fff;border-radius:2px}
.dlx a{padding:3px 8px;color:#333;font-weight:500;font-size:12px;margin-right:2px;border-radius:2px;background:#fff;border-left:2px solid #eee;border-bottom:2px solid #eee;transition:.02s}
.dlx a:hover{background:#e4ab01;color#fff}

Pemasangan Download Box

Saat membuat postingan baru pastikan memakai mode HTML (bukan Compose) untuk blogger, sedangkan wordpress mode Text (bukan Visual)

<div class="dlx">
  <h4>Judul Anime</h4>
  <ul>
    <li><strong>720p </strong><a href="#">ZippyShare</a> | <a href="#">HxFile</a> | <a href="#">FilesIm</a></li>
    <li><strong>480p </strong><a href="#">ZippyShare</a> | <a href="#">HxFile</a> | <a href="#">FilesIm</a></li>
    <li><strong>360p </strong><a href="#">ZippyShare</a> | <a href="#">HxFile</a> | <a href="#">FilesIm</a></li>
    <li><strong>240p </strong><a href="#">ZippyShare</a> | <a href="#">HxFile</a> | <a href="#">FilesIm</a></li>
  </ul>
  <h4>Judul Anime</h4>
  <ul>
    <li><strong>720p </strong><a href="#">ZippyShare</a> | <a href="#">HxFile</a> | <a href="#">FilesIm</a></li>
    <li><strong>480p </strong><a href="#">ZippyShare</a> | <a href="#">HxFile</a> | <a href="#">FilesIm</a></li>
    <li><strong>360p </strong><a href="#">ZippyShare</a> | <a href="#">HxFile</a> | <a href="#">FilesIm</a></li>
    <li><strong>240p </strong><a href="#">ZippyShare</a> | <a href="#">HxFile</a> | <a href="#">FilesIm</a></li>
  </ul>
</div>
Ganti Text yang ditandai Sesuai Keinginan Kalian

Pemasangan JavaScript

Untuk Javascript bersifat opsional, hanya untuk membuat agar tampilan download box nya singkat, seperti saat diklik download box nya hilang dan diklik kembali muncul download box nya.

Sebelum memasang script nya pastikan blog kalian sudah terpasang JQuery, jika belum silahkan pasang dulu, untuk menambahkan JQuery ke blogger pasang script berikut dibawah tag <head> atau diatas </head>, untuk WordPress silahkan cari di google karena saya tidak tau (tehe).

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Terakhir pasang script berikut disetiap postingan bagian akhir.

<script type="text/javascript">
    $(document).ready(function() {
      var xx = 1;
      $(".dlx h4").each(function() {
        var getclas = $(this).css('text-align');
        if (getclas != "center") {
          $(this).css({
            'background': '#6EC1DB',
            'cursor': 'pointer'
          })
          $(this).attr("id", "ini_ep" + (xx++));
          $(this).attr("title", "mantul");
          $(this).addClass("ini_ep");
          $(this).append(" <span class='fa fa-eye'></span>");
          $(".dlx ul").css({
            'display': 'none'
          });
        } else {
          $(this).css({
            'margin-bottom': '10px',
            'margin-top': '10px'
          });
          /*$(this).attr("id","ini_ep"+(xx++));
          $(this).attr("title","mantul");
          $(this).addClass("ini_ep");
          $(this).append(" <span class='fa fa-eye'></span>");
          $(this).css({'cursor':'pointer'});*/
        }
      })


      if (!$('.dlx h4').length) {
        $(".dlx ul").css({
          'display': 'block'
        });
      }
      var aa = 1;
      $(".dlx ul").each(function() {
        $(this).addClass("ini_ep" + (aa++));
      })

      $(".ini_ep").click(function() {
        $(this).removeClass('ini_ep');
        $(this).addClass('ini_epok');
        var get_title = $(this).attr("title");
        if (get_title == "mantul") {
          $(this).attr("title", "mantol");
          var get_id = $(this).attr('id');
          if (get_id) {
            $("." + get_id).show();
          }
        } else if (get_title == "mantol") {
          $(this).attr("title", "mantul");
          var get_id = $(this).attr('id');
          if (get_id) {
            $("." + get_id).hide();
          }
        }
      })

    })
  </script>

Sekian Postingan saya kali ini semoga bermanfaat, dan jika ada yang ingin di tanyakan silahkan berkomentar dibawah. Sampai jumpa dipostingan selanjutnya Terima Kasih.

https://kurogaze.co.id

Comments