Cara Menciptakan Tabel Download Di Blogger
Akhirnya panduanajib sanggup kembali mengupdate artikel seputar blogging di blog yang aku cintai ini hehe. Sudah usang sekali rasanya aku tidak menawarkan artikel seputar blogging kepada sahabat pembaca sekalian. Dan dikesempatan kali ini aku akan menawarkan sebuah cara menciptakan download box di blogger dengan mudah. Hem niscaya seru ni untuk dibahas, untuk itu silahkan Anda simak artikelnya hingga tamat dan jangan lupa tinggalkan komentarnya ya hehe.
Tabel download responsive di blogger ini sangat cocok untuk Anda yang ketika ini sedang membangun sebuah blog download. Seperti blog download apk, software, film dan lain sebagainya.
Dengan adanya widget tombol download yang responsive dan menarik tentunya akan menciptakan para pengunjung semakin gampang untuk mengunduh isi konten yang sediakan.
Selain memudahkan pengunjung tentunya juga sanggup menciptakan tampilan artikel serta blog sobat lebih rapi dan sehingga yummy untuk pandang mata.
Sebelum melanjutkan, tabel box download pada blogger ini bukanlah hasil buatan admin pribadi. Melainkan buatan rekan blogger adalah admin dari blog www.caramanual.com.
Terimakasih untuk dia alasannya sudah membagikan instruksi ini secara gratis dan sanggup kita nikmati bersama-sama.
Cara Membuat Box Download Responsive di Blog
Desain dari box ini cukup sederhana dan responsive. Pembuat sengaja tidak menambahkan desain suplemen ibarat font awesome, icon dan lainnya. Hal ini pastinya ditujukan biar tidak mempengaruhi loading blog.
Download box ini mendukung judul dari film atau nama aplikasi, kualitas video contohnya 480p, 720p, 1080p, file part, dan juga sumber atau server downloadnya.
Penasaran ibarat apa penampakannya? Silahkan Anda lihat demonya saja secara pribadi ibarat gambar dibawah.
Cara Membuatnya:
- Masuk ke Dashboard Blog Anda
- Klik Tema > Edit HTML
- 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}
}
- Kemudian masukan instruksi berikut di bab Tab HTML pada ketika akan 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 Tabel Download di Blogger">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 5</a>
</div>
<div class="dbox-list">
<strong>720p</strong>
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 5</a>
</div>
<div class="dbox-list">
<strong>1080p</strong>
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download 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 Tabel Download di Blogger">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 5</a>
</div>
<div class="dbox-list">
<strong>Part2</strong>
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 5</a>
</div>
<div class="dbox-list">
<strong>Part3</strong>
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Cara Membuat Tabel Download di Blogger">Server 5</a>
</div>
</div>
</div>
- Terakhir silahkan edit sesuai dengan impian Anda, lalu klik Publikasikan atau Perbarui artikel.
Nah demikianlah cara menciptakan tabel download responsive di blog. Semoga artikel kali ini sanggup menawarkan manfaat bagi kita semua. Salam blogger.
