Download box ini tentunya sangat cocok apabila dipakai oleh blog d0wnl0ad, menyerupai blog film, blog anime, blog software / aplikasi, blog game, dan sebagainya.
Jenis-jenis blog d0wnl0ad yang aku sebutkan di atas tentu membutuhkan sebuah widget tombol d0wnl0ad yang mendukung, supaya pengunjung sanggup dengan gampang menguduh atau mend0wnl0ad film maupun aplikasi yang diinginkannya.
Dengan alasan tersebut aku menciptakan sebuah kotak d0wnl0ad yang sangat mendukung untuk blog d0wnl0ad Anda.
Kotak d0wnl0ad ini mempunyai desain yang responsive dan cukup keren walaupun desainnya yang sederhana.
Saya sengaja tidak menambahkan desain lainnya menyerupai font awesome atau icon lainnya supaya 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 d0wnl0adnya.
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 pribadi saja, bila Anda tertarik untuk menciptakan d0wnl0ad 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 instruksi css berikut di atas instruksi
]]></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 instruksi 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 d0wnl0ad box di blogger, bila 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 http://www.caramanual.com