Cara Membuat Gambar Pertama Berada di Atas Judul Postingan

Cara Membuat Gambar Pertama Berada di Atas Judul Postingan


Halo semuanya, pernakah kamu melihat postingan dari blog orang lain yang posisi gambar berada diatas judul dan terlihat begitu rapi serta enak untuk dipandang. Lalu bagaimana cara untuk membuarnya? Jangan khawatir kali ini RUi MYID akan membagikan Cara Membuat Gambar Pertama Berada di Atas Judul Postingan untuk template VioMagz dan LinkMagz dan untuk template lainnya bisa untuk mencoba siapa tau berhasil juga. Ingat sebelum melakukan percobaan cara ini saya menyarankan untuk melakukan Backup template terlebih dahulu.

Akhir akhir ini  Membuat Gambar Pertama Berada di Atas Judul Postingan begitu populer pada blogger Indonesia. Gambar pada artikel dipostingan yang paling pertama maka akan berada di Atas Judul Artikel.

Kemungkinan ada banyak yang menyukai posisi gambar utama berada di atas judul postingan sebagai tumbnail postingan. Tapi sayangnya masih belum banyak tempalate blogger populer yang belum menggunkan cara ini seperti Viomagz dan Linkmagz.

Ok langsung saja kita masuk kepembahasannya, Cara Membuat Gambar Pertama Berada di Atas Judul Postingan pada pada template Viomagz dan Linkmagz karya mas Sugeng.


Membuat Gambar Pertama Berada di Atas Judul Postingan

Berikuti ini adalah Panduan Cara Membuat Gambar Pertama Berada di Atas Judul Postingan pada template Viomagz dan Linkmagz karya mas Sugeng yang bisa kamu coba untuk membuat tampilan blog menjadi lebih rapi dan enak dipandang.


Membuat Gambar Pertama Berada di Atas Judul Postingan pada VioMagz

1. Pertama kita masuk ke dashboard blogger

2. Klik pada Menu Tema, kemudian klik Edit HTML

3.  Cari kode seperti ini: <h1 class='post-title entry-title'>, gunakan CTRL + F untuk mempermudah mencarinya. Biasanya terdapat beberapa kode, jika menggunkan template VioMagz pilih kode yang kedua.

4. Selanjutnya Copy Pastekan kode dibawah ini tepat diatasnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='coverImage'>
<b:if cond='data:post.firstImageUrl'>
<img class='firstimage' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
<b:else/>
<img class='firstimage' expr:alt='data:post.title' src='https://2.bp.blogspot.com/-eH7Gd4OsoIg/XqFM8dLvH-I/AAAAAAAAOcs/LZgrAIAE_4Y9ltAcmooyMaN2j790YL3ogCLcBGAsYHQ/s1600/no-image.jpg'/>
</b:if>
</div>
</b:if>

5. Selanjutnya, cari kode ]]></b:skin>, kemudian copy pastekan kode CSS berikut tepat di atas kode tersebut.

.separator:nth-of-type(1){display:none;visibility:hidden}
img.firstimage{position:relative;min-width:-webkit-fill-available;height:auto;margin-bottom:20px}

6. Simpan Tema


Sekarang coba kalian cek salah satu artikel pada blog kalian, seharusnya posisi gambar pertama akan berada di atas judul postingan. Bagaimana cukup mudahkan untuk Membuat Gambar Pertama Berada di Atas Judul Postingan pada VioMagz. Selanjutnya kita beralih ke Linkmagz.


Baca JugaCara Membuat Widget Popular Post Keren Mirip Arlina Design di Blogger


Membuat Gambar Pertama Berada di Atas Judul Postingan pada LinkMagz

1. Pertama kita masuk ke dashboard blogger

2. Klik pada Menu Tema, kemudian klik Edit HTML

3. Cari kode seperti ini: <b:include cond='data:view.isHomepage' name='recentPostTitle'/>, gunakan CTRL + F untuk mempermudah pencarian.

4. Selanjutnya Copy Pastekan kode dibawah ini tepat diatasnya.

<b:if cond='data:blog.postImageUrl'><div class='coverImage'><b:if cond='data:post.firstImageUrl'><img class='firstimage' expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' expr:title='data:blog.pageName'/><b:else/><img class='firstimage' expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' src='https://2.bp.blogspot.com/-eH7Gd4OsoIg/XqFM8dLvH-I/AAAAAAAAOcs/LZgrAIAE_4Y9ltAcmooyMaN2j790YL3ogCLcBGAsYHQ/s1600/no-image.jpg'/></b:if></div></b:if>

5. Selanjutnya, cari kode ]]></b:skin>, kemudian copy pastekan kode CSS berikut tepat di atas kode tersebut

.separator:nth-of-type(1){display:none;visibility:hidden}
.post img.firstimage{position:relative;min-width:-webkit-fill-available;height:auto;margin-bottom:20px}

6. Simpan Tema

<script type='text/javascript'>
//<![CDATA[
document.querySelectorAll(".separator")[0].style.display= "none";
//]]>
</script>

Jika terjadi double image, gambar pertama sudah di atas judul artikel tapi tidak hilang di dalam postingan. Silahkan tambahkan kode javascript berikut tepat di atas kode </body>.

7. Simpan Tema dan cek kembali postingan.


Catatan: Pada template LingMagz, cara di atas akan menempatkan gambar pertama tepat di atas breadcrumb.


Demikianlah artikel tentang Cara Membuat Gambar Pertama Berada di Atas Judul Postingan pada Viomagz dan Linkmagz semoga bermanfaat dan menambah pengetahuan kita semua khususnya seputer program coding blogger ini.

Tidak ada komentar untuk "Cara Membuat Gambar Pertama Berada di Atas Judul Postingan"