Menempatkan Gambar di Atas Judul Postingan Menggunakan Edit HTML

adscblog

Cara Agar Gambar Pertama Postingan Berada di Atas Judul Dengan Edit HTML - Mungkin bagi Sebagian ANda Pernah melihat Ada Gambar di bagian Postingan Salah Satu Blog Yang ANda kunjungi Posisi nya Berada di bagian Atas Postingan Blog

Selain Kelihatan Nya Rapi Postingan Pun Akan terlihat Keren Di bandingkan dengan Postingan Yang Gambar nya Berada di bagian tengah Ataupun Yang lain nya

Bagi Para Pembaca Blog Atau Pembaca Artikel Hal tersebut Tidak Di Permalsahkan Mungkin ya,Mau Posisi gambar berada di Atas Judul Postingan Blog Atau Berada di bagain bawah postingan Blog

Namun Bagi Kami para Blogger hal tersebut Ternyata Sangat penting dan Sangat di butuh kan Untuk memberikan kenyamanan kepada Para pembaca Blog

Selain memberikan Konten yang Berkualitas atau Yang di Butuhkan Oleh para pengunjung Blog,Kerapihan pun Sangat di perlukan bagi Para Pemilik blog Tersebut untuk menarik para pengunjung agar Betah berada di blog Tersebut

Nah Untuk ANda Yang mempunyai Blog,Dan Menginginkan Penempatan Image Atu Gambar Pertama berada di bagian Atas Judul postingan (bukan bagian HomePage) di bawah ini Anda dapat Mengikuti Tutorial Cara Penempatan nya

Dan Untuk ANda Yang memiliki template VioMagz Tentunya Akan Melihat Image Atau Gambar Pertama Postingan Nya Yang berada di bagian Atas Judul Postingan,Nah untuk Anda Yang Menginginkan Gambar berada di bagian Atas Seperti Template Viomagz Bisa Ikuti Tutorial nya di Bagian Bawah ini

Cara Memasang Gambar Pertama Berada di Atas Judul Postingan Blog

• Silahkan ANda Masuk ke Blogger milik ANda
• Lalu kebagian Dashboard
• Lalu pilih Thema/Tema
• Lalu Kemudian Klik Edit Html
• Setelah Berada di bagian Edit Html

  <h1 class='post-title entry-title'> 

• Untuk Mempercepat pencarian Anda Silahkan Tekan tombol Ctrl+F
• Setelah ketemu Silahkan ANda Letakan Kode Berikut Tepat di Atas Kode tersebut

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65JJuFTcNT5rOH5Jqw536uOfb8p75uDrDIr-ea-wl5O1hVhPFdOGvp0NC5pr3enARF0AHDghNffNA6SAcSpL60Vk0b7KI2RrwHt9Vjcm-w_-fa6jdprMjSvRbr6SGw7GK-lZ6tpxCqJQ/s1600/no-image.jpg'/>
</b:if>
</div>
</b:if>

• Lalu Silahkan Anda Letakan Kode CSS Berikut

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

• Kemudian Save Template

Selain Anda Dapat melihat Contoh di bagian VioMagz anda juga Bisa Melihat Trik ini di template LinkMagz

Dan Untuk penerapan nya dapat ANda Ikuti Tutorial nya seperti di bawah ini

•  Masuk ke Dashboard Blogger Milik ANda
• Klik Tema
• Lalu kemudian edit Html
• Setelah berada di bagian Edit Html silahkan anda cari kode berikut

  <b:include cond='data:view.isHomepage' name='recentPostTitle'/>

• Setelah Ketemu Silahkan Anda letakan Kode Berikut Tepat diatas Kode Tersebut

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65JJuFTcNT5rOH5Jqw536uOfb8p75uDrDIr-ea-wl5O1hVhPFdOGvp0NC5pr3enARF0AHDghNffNA6SAcSpL60Vk0b7KI2RrwHt9Vjcm-w_-fa6jdprMjSvRbr6SGw7GK-lZ6tpxCqJQ/s1600/no-image.jpg'/></b:if></div></b:if>

• Dan Untuk Pemanis Nya silahkan Anda Pasang CSS berikut

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

• Lalu Save Template

Namun Jika Anda Telah memasang kode Di atas Dan Mengalami Double Image atau gambar nya ada dua,Silahkan ANda Letakan kode Javascript ini di Atas kode </body>

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

Lalu Save Template

Setelah itu Bisa Anda Lihat hasil nya dengan mengklik Salah satu postingan milik Anda,

Nah Itulah Cara Memasang Image Atau Gambar Pertama di Atas Judul postingan Blog Milik Anda,Dengan Begitu Semoga Artikel Ini Bisa Membantu Sobat blogger Semua Selamat mencoba

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 19 Mei and have 0 komentar