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 Menambahkan Emoticon Di Komentar Blogspot alasannya yaitu meningkatnya pengguna medsos (media sosial) dan ingin mennggunakan emoticon lucu untuk berkomentar diblog. Cara menambahkan emotica ...
- Cara Menciptakan Pengaruh Animasi Hujan Salju Pure Css Dan Javascript Di BlogMenambahkan imbas hujan salju pada blog sanggup mempercantik tampilan blog Anda, apalagi bulan desember ini selalu identik dengan animo salju di nega ...
- Cara Menciptakan Akun Google Adsense Non Hosted Cara ini memang sangat tidak banyak orang yang tahu - Cara Membuat Akun Google Adsense Non Hosted ini saya update sehabis saya melaksanakan uji ...
- Cara Menciptakan Widget Author Box Seolah-Olah Google BadgeBeberapa hari kemudian aku sudah menulis artikel perihal cara memasang google badge di blog, google badge atau lencana google ini di pasang di blog b ...
- Cara Menciptakan Blog Yang Ringan, Valid Html5, Dan Seo Friendly Blog yang baik itu blog yang menyerupai apa sih? Sobat Blogger, salah satu cara yang cukup efektif untuk mendatangkan pengunjung ke blog kita yaitu ...
- Cara Menciptakan Kotak Iklan Di Blog Berukuran 125X125 PixelsCara Membuat Kotak Iklan Di Blog - kali ini aku akan membahas mengenai Tutorial Membuat Kotak Iklan Di Blog yang berukuran 125x125 Pixels. Banyak ora ...
