Selasa, 22 Mei 2018

Cara Membuat Gambar Post di Atas Judul (First Image)

Cara Membuat Gambar Post di Atas Judul (First Image)

Cara Membuat Gambar Post di Atas Judul (First Image)
Blog Mang Otep | Sempat bingung dengan Cara Membuat Gambar (Thumbnail) berada di atas judul artikel pada body postingan, Gambar (First Image) ini sebenarnya berkonsep keluar dari body sebuah postingan tersebut jadi perlu kode yang akan di tambahkan.

Di kesempatan kali ini saya akan membagikan bagaimana sih membuat Gambar atau Thumbnail Pertama pada postingan kita bisa berada di atas judul ya kira-kira akan menjadi seperti Arlina design atau bung frangki kurang lebih.

Keuntungan dari Penggunaan Cara ini adalah anda bisa meletakkan Iklan adsense tepat sebelum kata pertama pada sebuah artikel atau bisa disebut diatas postingan. Sehingga slot iklan kalian bisa bertambah tanpa harus merubah template yang sudah kalian kuasai. Ok langsung saja lihat tutorialnya di bawah ini.

Gambar Keluar dari Body Postingan :

1. Masuk Ke Menu Template >> Edit HTML
2. Masukkan Kode CSS dibawah ini untuk pengaturan tampilan nya. dan letakkan diatas ]]></b:skin> atau </style>

.firstimage{
  background:#fff;
  padding-bottom:10px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover
}
3. Cari kode <b:if cond='data:post.link'> (Permudah dengan menggunakan CTRL+F)
4. Letakkan Kode di bawah ini tepat di atas perintah No. 2 , Kemungkinan akan ada banyak jadi coba saja satu persatu.

<b:if cond='data:blog.pageType == "item"'><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='URL_GAMBAR_NOIMAGE'/></b:if></div>
</b:if>
5. Setelah selesai, Masukkan kode Javacript ini di atas kode </body>

<script type="text/javascript">
//<![CDATA[
$(function() {
   $(".separator:first").remove();
      $(".post-body > img:first").remove();
                      });
//]]>
</script>
6. Simpan Template Kalian

Itulah sedikit tutorial kali ini dari Blog Mang Otep, untuk live demo nya silahkan lihat pada postingan ini sudah diterapkan di blog mamang sendiri. Bila kurang mengerti bisa tanyakan lewat halaman kontak atau hubungi fb admin.

Demikan info dari artikel Cara Membuat Gambar Post di Atas Judul (First Image), semoga bermanfaat untuk anda dan jika menyukai artikel ini silahkan like, share, and subscribe untuk berlangganan artikel terbaru langsung dari email anda.

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments