Download box ini tentunya sangat cocok apabila dipakai oleh blog download, menyerupai blog film, blog anime, blog software / aplikasi, blog game, dan sebagainya.
Jenis-jenis blog download yang aku sebutkan di atas tentu membutuhkan sebuah widget tombol download yang mendukung, biar pengunjung sanggup dengan gampang menguduh atau mendownload film maupun aplikasi yang diinginkannya.
Dengan alasan tersebut aku menciptakan sebuah kotak download yang sangat mendukung untuk blog download Anda.
Kotak download ini mempunyai desain yang responsive dan cukup keren walaupun desainnya yang sederhana.
Saya sengaja tidak menambahkan desain lainnya menyerupai font awesome atau icon lainnya biar tidak memperngaruhi kecepatan loading blog Anda.
Baca juga: Cara Membuat Tombol Dengan Efek Animasi Border
Download box ini mendukung judul dari film atau nama aplikasi, kualitas video contohnya 480p, 720p, 1080p, file part, dan juga sumber atau server downloadnya.
Jika Anda mempunyai kemampuan dalam mengolah blog, mungkin bisa mendesainnya kembali sesuai dengan impian Anda, tapi dengan desain ini juga aku rasa sudah cukup.
Baik eksklusif saja, kalau Anda tertarik untuk menciptakan download box di blogger, silahkan ikuti langkah-langkahnya di bawah ini.
Cara Membuat Tombol Download Box di Blogger
1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Kemudian letakkan arahan css berikut di atas arahan
]]></b:skin> atau </style>/* CSS Download Box by caramanual.com */ .dbox-title { padding: 8px 10px; margin: 8px 0 3px; color: #FFF; background: #3498db; } .dbox-wrap { font-size: 11px; font-weight: bold; background: #F5F5F5; padding: 10px; margin: 10px 0; } .dbox { margin: 0; padding: 0; list-style: none; } .dbox-list { background: #E4E4E4; margin-bottom: 2px; line-height: 26px; padding: 0 5px; } .dbox-list strong { background: #3498db; border-right: 2px solid #F5F5F5; width: 65px; display: block; float: left; margin-left: -5px; margin-right: 5px; color: #FFF; padding: 0 5px; text-align: center; } .dbox-list a { color: #6d6d6d; } .dbox-list a:hover { color: #222; } @media only screen and (max-width: 360px) { .dbox-list strong {width:100%} .dbox-title {text-align:center} }4. Kemudian masukan arahan berikut di bab HTML Tab pada ketika posting artikel
<div class="dbox-wrap"> <div class="dbox"> <div class="dbox-title">Judul Film</div> <div class="dbox-list"> <strong>480p</strong> <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 1</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 2</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 3</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 4</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 5</a> </div> <div class="dbox-list"> <strong>720p</strong> <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 1</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 2</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 3</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 4</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 5</a> </div> <div class="dbox-list"> <strong>1080p</strong> <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 1</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 2</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 3</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 4</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 5</a> </div> </div> <div class="dbox"> <div class="dbox-title">Nama Software</div> <div class="dbox-list"> <strong>Part1</strong> <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 1</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 2</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 3</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 4</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 5</a> </div> <div class="dbox-list"> <strong>Part2</strong> <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 1</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 2</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 3</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 4</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 5</a> </div> <div class="dbox-list"> <strong>Part3</strong> <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 1</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 2</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 3</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 4</a> | <a href="#" rel="nofollow" target="_blank" title="Cara Membuat Download Box di Blogger">Server 5</a> </div> </div> </div>5. Silahkan edit sesuai dengan impian Anda, kemudian klik Publikasikan atau Perbarui artikel
Itulah artikel mengenai cara menciptakan download box di blogger, kalau Anda masih resah menerapkannya di blog Anda silahkan hubungi kami melalui halaman kontak yang ada atau dengan menawarkan komentar pada postingan ini. Semoga bermanfaat. Sumber https://www.caramanual.com/