Download Box V4

Salah satu cara kita dapat mengatakan bahwa blog kita berhasil adalah ketika sudah memiliki banyak pelanggan, karena merekalah yang dapat mempertahankan lalu lintas dan penghasilan blog kita. Saya tahu sulit untuk mendapatkan pengunjung setia dalam jumlah besar, terutama ketika kita memiliki banyak pesaing yang bersaing untuk mendapatkan jenis audiens yang sama seperti yang kita inginkan. Apakah blog Anda dalam situasi seperti ini? Saya percaya dalam menghasilkan konten yang berkualitas selalu konsisten adalah kuncinya, namun saya percaya juga bahwa bukan satu-satunya hal yang harus kita pertimbangkan. Kita harus lebih strategis dalam mengubah pengunjung, bukan?

Tutorial Blog: Cara Membuat Download Box

Instalasi

Masuk Blogger: Tema > Edit HTML

Tambahkan kode CSS berikut ini sebelum kode ]]></b:skin> atau </style>

/* Download box v4 */
#box-download{border:1px solid #2780e3;margin-bottom:20px;background-color:#FFF;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05)}
#box-download .title-box_download{padding:10px 15px;color:#FFF;background-color:#2780e3}
#box-download .title-box_download h3{font-size:17px;margin:0;line-height:1.1;font-weight:bold;padding:0}
#box-download .title-box_download h3 span{float:right}
#box-download .body-box_download{padding:15px}
#box-download .body-box_download p{margin:0 0 10.5px}
#box-download .body-box_download hr{height:2px;border:none;background-color:#DDD;margin:21px auto}
#box-download .body-box_download p a{color:#2780e3}
#box-download .body-box_download p a:hover{color:#2793e3}

Kemudian tambahkan kode Javascript berikut ini sebelum kode </body>

<b:if cond='data:blog.pageType in {&quot;item&quot;}'>
<script type='text/javascript'>//<![CDATA[
// Target Blank
$(document).ready(function() {$("#box-download .body-box_download p a").attr({rel:"nofollow",target:"_blank"})})
//]]></script>
</b:if>

Tambahan

Tambahkan Font Awesome berikut ini setelah kode <body>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>

Jika sudah ada, bisa diabaikan

Simpan Tema

Untuk menampilkan hasilnya, tambahkan kode HTML berikut ini pada postingan bagian ~~Compose~~ HTML

<div id='box-download'>
<div class='title-box_download'>
<h3>
Title Anime Series<span><i class="fa fa-download"></i></span>
</h3>
</div>
<center>
<div class='body-box_download'>
<p>
<b>Title Anime 480p</b></p>
<p>
<b><a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a></b></p>
<hr/><p>
<b>Title Anime 720p</b></p>
<p>
<b><a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a></b></p>
</div>
</center>
</div>

Result

DEMO