Cara ini juga sanggup dipakai untuk meminimalisir adanya link rusak (broken Link) pada area download anda sehingga pengunjung tidak kesulitan mengambil alternatif link download yang sudah disediakan.
Kali ini akan sedikit mengembangkan ihwal 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
1. Masuk kedalam blog anda dan pribadi menuju Edit HTML2. Copas CSS dibawah ini dan letakkan di atas instruksi ]]></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, lalu dikala anda posting artikel dan ingin memakai 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 memakai font awesome, bagi anda yang belum memasang font awesome pada blog anda, anda sanggup lihat tutorialnya disini :Cara Update Versi Font Awesome dalam HTML Blogspot
atau anda juga sanggup sisipkan instruksi javascript load css sempurna diatas instruksi </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 sanggup lihat demo dibawah ini
Demikianlah isu dari ihwal 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 pribadi dari email anda. Sumber https://www.mangotep.com/