Membuat Box Download Keren dengan CSS di Blogspot

Cara membuat Box Download – Penggunaan Box Download biasanya hanya di gunakan bagi blogger dengan niche download seperti fansub atau fanshare, terkadang untuk membuat pengunjung nyaman dan betah dalam berjelajah di suatu website si yang punya akan membuat konten se-rapih dan se-epik mungkin yang mereka jadikan sebagai daya tarik.

Pada kesempatan kali ini, saya akan berbagi sedikit coretan tentang bagaimana membuat sebuah box download keren yang banyak diminati oleh blogger bertemakan download. Cara yang akan saya bagikan tentunya tidak terlalu rumit untuk kalian yang masih pemula ataupun yang sudah berkecimpung di dunia blog. Seperti kata para pelaku dunia blog, bahwa untuk membuat sebuah blog kita tidak dituntut untuk mahir koding HTML, selama kita giat belajar semua akan ada jalannya. Dalam hal ini, pengetahuan dasar selain HTML adalah CSS.

Baca Juga

Atribut-atribut dasar yang perlu kita pahami untuk membuat sebuah box download keren, untuk lebih mudahnya kalian bisa sambil lihat gambar ya:

Content Konten yang akan kita simpan di box, tempat teks atau gambar muncul

Padding Ruang untuk membatasi konten dan garis box

Border Garis yang mengelilingi padding dan konten

Margin Area di luar garis box.

Dasarnya kita udah dapet, sekarang yang akan kita buat adalah tampilannya seperti ini nih gaes, mungkin sebagian dari kalian sudah tahu bahwa box download ini seperti animefans.

Download JUDUL ANIME

JUDUL ANIME [480p]

DDL Server 1 Server 2 Server 3

JUDUL ANIME [720p]

DDL Server 1 Server 2 Server 3

Pertama, Buka Blogger - Edit HTML - Salin dan Terapkan kode di bawah ini tepat di atas </b:skin>

.arealinker{padding: 10px;background: #ECECEC;font-size: 12px}
.arealinker span{font-weight: bold;display: block;margin-bottom: 5px}
.arealinker .boxdownload{overflow: hidden}
.arealinker .boxdownload .liner{margin-bottom: 2px}
.arealinker .boxdownload .liner .name{background: #D2D2D2;padding: 5px 10px;margin-bottom: 2px;font-weight: bold;color: #919191}
.arealinker .boxdownload .liner .listlink{padding: 5px 10px;background: #B3B3B3;font-weight: bold;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.arealinker .boxdownload .liner .listlink b{margin-right: 5px;float: left;color: #fff;font-size: 11px;line-height: 19px;padding: 0 5px;background: #3D8ECB}
.arealinker .boxdownload .liner .listlink a{display: block;float: left;margin-right: 5px;color: #000000}
.arealinker .boxdownload .liner .listlink a:hover{color:#3D8ECB}

Jika langkah pertama sudah di simpan, sekarang kita mulai ke tahap pemasangannya di postingan.

Kedua, saat membuat postingan baru terapkan kode di bawah ini pada tab HTML (bukan compose).

<div class="arealinker">
    <span>Download JUDUL ANIME</span>
    <div class="boxdownload">
        <div class="liner">
            <div class="name">JUDUL ANIME [480p]</div>
            <div class="listlink">
                <b>DDL</b>
                <a href="    LINK DOWNLOAD DI SINI    " rel="nofollow" target="_blank">Server 1</a>
                <a href="    LINK DOWNLOAD DI SINI    " rel="nofollow" target="_blank">Server 2</a>
                <a href="    LINK DOWNLOAD DI SINI    " rel="nofollow" target="_blank">Server 3</a>
            </div>
        </div>
        <div class="liner">
            <div class="name">JUDUL ANIME [720p]</div>
            <div class="listlink">
                <b>DDL</b>
                <a href="    LINK DOWNLOAD DI SINI    " rel="nofollow" target="_blank">Server 1</a>
                <a href="    LINK DOWNLOAD DI SINI    " rel="nofollow" target="_blank">Server 2</a>
                <a href="    LINK DOWNLOAD DI SINI    " rel="nofollow" target="_blank">Server 3</a>
            </div>
        </div>
    </div>
</div>

Silahkan kreasikan sesuka kalian dan lampaui dirimu, sebetulnya css box download ini tidak hanya untuk pengguna blogspot saja namun pengguna wordpress dan kawan-kawannya juga bisa, cuman cara mengaplikasikannya saja yang sedikit berbeda.

Tweet