Cara Membuat Gambar Post di Atas Judul Pada Blogger
First Image merupakan gambar paling pertama yang digunakan sebagai Thumbnail dalam sebuah artikel. First Image kebanyakan digunakan sebagai Cover dari sebuah artikel dengan ilustrasi yang sederhana agar mudah dipahami oleh pengunjungnya.
Pada saat ini banyak sekali para blogger yang meletakkan First Image ini di Atas Judul artikel blog mereka. Memang tidak ada yang terlalu spesial sekali disini tapi untuk mereka yang suka mempercantik blognya bisa dibilang "kalian harus coba ini".
Untuk kalian yang menggunakan platform WordPress itu merupakan hal mudah karena kalian hanya perlu mengubahnya di menu pengaturan. Tapi untuk yang menggunakan platform Blogger kalian pasti bingung agar Gambar tersebut bisa berada di Atas Judul.
Jadi disini kita akan gunakan javascript untuk mengatasi permasalahan tersebut. Kita langsung saja ke langkah-langkahnya.
1. Masuk Ke Menu Tema > 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;
width:100%;
height:auto
}3. Cari kode <b:includable id='post' var='post'> atau <article class='post'> (Permudah dengan menggunakan CTRL+F).
4. Letakkan Kode di bawah ini tepat di bawah kode tersebut, 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:if></div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
//]]>
</script>
</b:if>5. Simpan Template Kalian.
Penutup
Semoga bermanfaat buat kalian semuanya dan terima kasih juga sudah berkunjung ke blog kecil ini. Jika ada hal yang ingin ditanyakan silakan berkomentar saja dibawah.
Bro, caranya supaya header templatenya bisa kayak di blog ini gmn? Ada kotak2 yg bergerak2 gitu
BalasHapusKalau udah make Template Jagoan Magz
HapusTinggal masukin kode yang ada di bawah ini ajah tepat di bawah kode <div id='header-container'>
=======================
<ul class='circles'><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
=======================
Halo teman, bisakah kita menyembunyikan tag tertentu di beranda? apakah ada kode untuk itu?
BalasHapusTag ini seharusnya tidak terlihat di beranda.
Label?
HapusSaya Lihat Anda Menggunakan Google Translate Disini
HapusJadi Saya Tidak Terlalu Bisa Membacanya Dengan Benar
okay then i will write in english my problem.
HapusDude, I want to hide articles from a particular tag on the home page of my blog. How can I do that?
So, for example, sponsored articles will not appear on the homepage, so how do I hide the articles added to the sponsor tag on the homepage?
i don't really know how they can make this using conditional blogger tag
Hapusif you want to learning, you can see that code they are using on LinkMagz Blogger Template version 1.3
sayang bngt d'link magz gk bisa, btw kodenya kurang < / b:id > sebelum < / div >
BalasHapusklo blh, request buat show/hide koment di linkmagz gan.. :D
Oh iyakah
HapusMakasih koreksinya