Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Gambar Pertama Blog Full Width Template LinkMagz

Cara Membuat Gambar Pertama Blog Full Width Template LinkMagz
IwanBlog.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.
Update 13 Maret 2021 - Penyesuaian dengan versi template LinkMagz versi 2.9.0, jadi pastikan kamu menggunakan template versi terbaru ya.

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 TataLetak - Terus Edit Widget Custom CSS dan tambahkan CSS dibawah ini didalam Widget tersebut :
@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 klik Simpan.

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.

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>
Atau untuk lengkapnya akan terlihat seperti ini :
<div class="gambar-utama">
<div class="separator">
<img alt="Cara Membuat Gambar Pertama Blog Full Width Template LinkMagz" border="0" data-original-height="450" data-original-width="800" src="https://1.bp.blogspot.com/-Y8B4i3Z7oQM/XqYzzmHbBwI/AAAAAAAABjM/4iGvxMPUghMSlhw7nTfe0pCrmPmJh1FbwCLcBGAsYHQ/s1600/fullImgv2.png" title="Cara Membuat Gambar Pertama Blog Full Width Template LinkMagz" /></div>
</div>
Kalau kurang jelas penampakan didalam artikelnya akan seperti berikut :

Cara Membuat Gambar Pertama Blog Full Width Template LinkMagz

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.

Posting Komentar untuk "Cara Membuat Gambar Pertama Blog Full Width Template LinkMagz"