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<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/
Related Posts
- Cara Menciptakan Table Of Contents (Menu Daftar Isi) Di Postingan Blogger - Menu Daftar Isi Atau yang biasa disebuat dengan Table Of Contents (TOS) yaitu daftar yang terdiri dari poin atau bab dari subjek yang terkandung d ...
- Cara Memasang Lib Dan Host Ke System Pubg Anti Banned Root Only All Device Tutorial pasang file lib mod - Hallo sahabat berjumpa lagi dengan aku admin infoandrocodax yang akan membagikan tutorial, tips, trik dan juga ...
- Cara Menghilangkan Icon Obeng Dan Tang Atau Quick Edit Di Blogger Pengguna blogger mungkin sering melihat ada icon gambar obeng dan tang kecil di bab widget atau sidebar blog. Icon obeng dan tang ini merupakan t ...
- Membuat Syntax Highlighter Di Postingan Blogger - Sintaks Highlighter ialah fitur khusus dari proses mentransfer arahan bahasa pemrograman tertentu dengan tulisan, warna teks, posisi persis ibarat ...
- Tips Mengatasi “ Error 0X00000709: Can’T Set Default Printer” Postingan kali ini aku akan membahas perihal kode error pada printer “Error 0x00000709: Can’t Set Default Printer”. Tips dan Trik Komputer - ...
- Cara Menciptakan Widget Testimonial Di Blog Kali ini aku akan menciptakan sebuah widget testimonial sederhana dengan instruksi html dan css untuk dipasang pada blog atau website Anda. Widge ...
