Cara Membuat Tabel Informasi Film pada Blog

byKurazone Net -
KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini kita akan mempelajari tentang "Cara Membuat Tabel Informasi Film pada Blog", tabel informasi ini memberikan info yang lebih detail mengenai film yang sedang dibagikan pada sebuah blog. Mulai dari judul, tanggal rilis, durasi film hingga rating film. Hasil akhirnya nanti bisa kalian lihat pada bagian bawah artikel.

Nah, buat sahabat Kurazer yang sedang ingin menggunakan tabel informasi Film untuk Blog Film nya, bisa menggunakan cara ini, cekidot..

Memasukkan Bahan Tabel Informasi Film kedalam Template

1. Buka Akun Blogger
2. Pilih menu Tema
3. Cari kode </style> pada template kalian.
Jika tidak ada, bisa mencari kode similarnya yaitu ]]></b:skin>
4. Copy kode CSS dibawah ini, lalu letakkan (paste) tepat diatas kode </style> atau ]]></b:skin>
.headinfo{background: rgb(238, 238, 238);
    border-bottom-width: 0px;
    border-left: 5px solid rgb(221, 221, 221);
    border-radius: 2px;
    border-right: 5px solid rgb(221, 221, 221);
    border-top-width: 0px;
    box-sizing: border-box;
    color: #666666;
    direction: ltr;
    font-family: hind, arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin: 10px 0px;
    padding: 5px;
    text-align: center;
    vertical-align: baseline;
}
.tabelinfo{
    border: 0px;
    box-sizing: border-box;
    color: #333333;
    direction: ltr;
    font-family: hind, arial, sans-serif;
    margin: 0px 0px 15px;
    overflow: hidden;
    padding: 0px;
    position: relative;
    vertical-align: baseline;
}
.datafilm{
    background-color: white;
    border-bottom: 1px solid rgb(238, 238, 238);
    border-left: 5px solid rgb(238, 238, 238);
    border-right-width: 0px;
    border-top-width: 0px;
    box-sizing: border-box;
    direction: ltr;
    display: block;
    font-size: 13px;
    line-height: 22px;
    margin: 0px;
    overflow: hidden;
    padding: 6px 5px;
    text-overflow: ellipsis;
    vertical-align: baseline;
    white-space: nowrap;
}
.dataentri {
    border: 0px;
    box-sizing: border-box;
    direction: ltr;
    display: inline-block;
    margin: 0px;
    padding: 0px;
    vertical-align: baseline;
    width: 150px;
}
5. Simpan template.
Darisini kalian sudah mempunyai bahan untuk membuat tabel informasi film pada Blog. Selanjutnya kita tinggal memanggil kode tersebut kedalam Artikel.

Memanggil Tabel Informasi Film kedalam Artikel

1. Masuk ke Menu Postingan >> Buat Entri Baru
2. Pindah ke mode HTML
3. Masukkan kode HTML dibawah ini :
<div class="headinfo">INFORMASI</div>
<div class="tabelinfo">
PETUNJUK 1 
</div>
4. Gunakan kode dibawah ini untuk menciptakan data film dan data entri, kode dibawah ini untuk menindih tulisan "PETUNJUK 1"
<span class="datafilm"><span class="dataentri">Judul</span>How to Train Your Dragon</span>
Sehingga kodenya akan berbentuk seperti dibawah ini : (lihat yang bewarna kuning)
<div class="headinfo">INFORMASI</div>
<div class="tabelinfo">
<span class="datafilm"><span class="dataentri">Judul</span>How to Train Your Dragon</span>
PETUNJUK 2
PETUNJUK 3
dst...
</div>
NOTE : Sedikit penjelasan singkat supaya tidak bingung dalam menambahkan data film dan data entri. Kode pada langkah ke 4 diatas tinggal kalian paste lagi dan diletakkan pada tulisan "PETUNJUK 2" dan seterusnya. Sehingga kode nya akan berbentuk seperti dibawah ini :
<div class="headinfo">INFORMASI</div>
<div class="tabelinfo">
<span class="datafilm"><span class="dataentri">Judul</span>How to Train Your Dragon</span>
<span class="datafilm"><span class="dataentri">Judul</span>How to Train Your Dragon</span>
<span class="datafilm"><span class="dataentri">Judul</span>How to Train Your Dragon</span>
dst..
</div>
Lebih tepatnya, kode diletakkan diatas </div> yang terakhir. Sisanya tinggal mengubah tulisan yang ditandai warna kuning. Kode pada langkah ke 4 bebas mau dipakai berapapun jumlahnya asalkan peletakan kodenya masih berada diatas kode </div> yang terakhir.
CONTOH :
<div class="headinfo">INFORMASI</div>
<div class="tabelinfo">
<span class="datafilm"><span class="dataentri">Judul</span>Fairy Tail</span>
<span class="datafilm"><span class="dataentri">Sutradara</span>Naruto</span>
<span class="datafilm"><span class="dataentri">Genre</span>Komedi</span>
<span class="datafilm"><span class="dataentri">Durasi</span>45 menit</span>
</div>
HASIL :
INFORMASI
JudulFairy TailSutradaraNarutoGenreKomediDurasi45 menit
Pada saat memasukkan kode di mode HTML nya, saya sarankan untuk menggunakan pengaturan seperti dibawah ini :

Nah, sisanya silahkan kalian kembangkan sendiri. Itulah informasi mengenai "Cara Membuat Tabel Informasi Film pada Blog", selamat mencoba dan semoga bermanfaat. Goodluck !!
Tags





أحدث أقدم