Selasa, 10 Juli 2018

Cara Membuat Kotak Download Ala Blog Film

Cara Membuat Kotak Download Ala Blog Film

Cara Memasang dan Membuat Tombol Kotak Blog Anime atau juga film dengan penerapan berbagai link download dalam satu kotak (box) agar pengunjung bisa memilih jenis link download yang mereka sukai.

Cara ini juga dapat digunakan untuk meminimalisir adanya link rusak (broken Link) pada area download anda sehingga pengunjung tidak kesulitan mengambil alternatif link download yang sudah disediakan.

Kali ini Blog Mang Otep akan sedikit berbagi tentang bagaimana anda membuat dan memasang kotak dan tombol download ala blog film, silahkan simak tutorial step by step nya di bawah ini.

Cara Membuat Kotak Download Ala Blog Film

Cara Membuat Kotak Download Ala Blog Film

1. Masuk kedalam blog anda dan langsung menuju Edit HTML
2. Copas CSS dibawah ini dan letakkan di atas kode ]]></b:skin> atau </style>


.otepdl-box{Width:50%}
.otepdl-box{display:block;margin:10px auto;}
.otepdl-title{padding:7px;display:block;color:#fff;font-weight:700;font-size:13px;padding-left:12px;position:relative;background:#d01716}
.otepdl-title:before{content:"\f07c";font-family:Fontawesome;position:absolute;right:15px;color:#fff;font-size:16px;}
.otepdl-ar{display:block;padding:10px;margin-bottom:10px;background:#eee;}
.otepdl-ar a{border-right:1px solid #000;padding-right:14px;padding-left:14px;}
.otepdl-ar a:last-child{border:0;}
.otepdl-ar a:first-child{padding-left:7px;}

3. Setelah CSS sudah dimasukkan kedalam template, kemudian saat anda posting artikel dan ingin menggunakan kotak download ini sisipkan HTML di bawah ini.


<div class="otepdl-box">
<div class="otepdl-item">
<span class="otepdl-title">MKV [720P]</span>
<span class="otepdl-ar">
<a href="#">Zippyshare</a>
<a href="#">google Drive</a>
<a href="">Sendit Cloud</a>
<a href="#">Zippyshare</a>
<a href="#">google Drive</a>
<a href="">Sendit Cloud</a>
  </span>
</div>
  <div class="otepdl-item">
<span class="otepdl-title">MKV [480P]</span>
<span class="otepdl-ar">
<a href="#">Zippyshare</a>
<a href="#">google Drive</a>
<a href="">Sendit Cloud</a></span>
</div>
  <div class="otepdl-item">
<span class="otepdl-title">MP4 [720P]</span>
<span class="otepdl-ar">
<a href="#">Zippyshare</a>
<a href="#">google Drive</a>
<a href="">Sendit Cloud</a></span>
</div>
  <div class="otepdl-item">
<span class="otepdl-title">MP4 [480P]</span>
<span class="otepdl-ar">
<a href="#">Zippyshare</a>
<a href="#">google Drive</a>
<a href="">Sendit Cloud</a></span>
</div>
</div>

4. Selesai

Oh ya jangan lupa tutorial ini menggunakan font awesome, bagi anda yang belum memasang font awesome pada blog anda, anda bisa lihat tutorialnya disini :Cara Update Versi Font Awesome dalam HTML Blogspot

atau anda juga bisa sisipkan kode javascript load css tepat diatas kode </body> berikut ini.


<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("https://cdn.rawgit.com/Indzign/InSEO/441b49ed/cookiesmin.css");
//]]>
</script>

Nah Sekarang sudah selesai, untuk penampakan live nya anda bisa lihat demo dibawah ini
Demikianlah informasi dari Blog Mang Otep tentang artikel Cara Membuat Kotak Download Ala Blog Film, semoga bermanfaat untuk anda.

Jika menyukai blog ini jangan lupa klik like and share ke sosial media anda dan juga subscribe untuk berlangganan artikel terbaru langsung dari email anda.

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments