Cara Membuat Gambar Pertama Blog Full Width Template LinkMagz

AksesBlog.com - Masih bahas template LinkMagz, kali ini saya akan share cara membuat Full Width Image untuk gambar pertama. Ini dimaksudkan untuk membuat tampilan blog semakin cantik menurut saya dan menurut beberapa orang juga seperti itu.

Full Width Image ini masih menggunakan cara manual, saya belum menemukan cara otomatisnya karena memang saya tidak secerdas itu tapi saya akan bagikan cara yang saya tau ini. Karena kita hanya gambar pertama saja yang mau kita buat Full Width.

Memasang Css Full Width

Pertama kamu harus memasang atau secara garis besar kamu perlu menambahkan CSS berikut ini, masuk ke dashboard blogger kamu dan masuk ke Tema - Edit HTML dan tambahkan CSS dibawah ini tepat diatas kode ]]></b:skin> :

@media only screen and (max-width: 480px) {
    .gambar-utama {
        margin: unset !important;
    }
    .gambar-utama .separator img {
        width: unset !important;
    }
}
.gambar-utama .separator img {
    width: 100%;
    margin-bottom: 15px;
}
.gambar-utama {
    margin: 0 -36px;
}

Setelah kamu letakkan dengan baik, kamu Simpan Tema.

Menerapkan Didalam Artikel

Selanjutnya kamu masuk ke artikel yang ingin kamu buat full width di gambar utamanya, dan letakkan gambar pertama itu tepat diatas artikel kamu dan jangan lupa hilangkan link didalam gambar tersebut, agar gambar pertama tersebut tidak bisa di klik oleh pengunjung.

Lebih jelas lihat gambar berikut :

Tampilan Klik Link

Selanjutnya masuk ke mode HTML dan kamu perlu menambahkan tag class khusus yang akan kita gunakan setiap kita membuat artikel. Class nya seperti berikut :

<div class="gambar-utama">

.....Gambar Pertama Disini....

</div>

Kalau kurang jelas penampakan didalam artikelnya akan seperti berikut :

Setelah itu kamu bisa menyelesaikan artikel kamu seperti biasa dan publish artikel kamu. Selamat mencoba, kalau ada yang kurang jelas silahkan kita bahas dikomentar yah.