Judul Dan Gambar Postingan Di Atas Postingan Dan Sidebar

Judul Dan Gambar Postingan Di Atas Postingan Dan Sidebar

Bola Hero Gawai

Judul Dan Gambar Postingan Di Atas Postingan Dan Sidebar

Judul Dan Gambar Postingan Di Atas Postingan Dan Sidebar
Awalnya saya melihat hal ini di beberapa blog wordpress, menampilkan judul dan gambar postingan di atas postingan dan sidebar. Kemudian saya mencobanya di blogger dan selalu gagal karena url gambar pertama blogger data:post.firstImageUrl tidak bisa disimpan di luar post loop atau di luar kode <b:includable dan akan menampilkan pesan error seperti berikut:

TEMPLATE ERROR: Invalid data reference post.firstImageUrl: No dictionary named: '' in: ['blog', 'skin', 'view']

Kemudian saya mulai berpikir untuk memindahkan html img postingan ke dalam sebuah tag div di luar daerah postingan dan akhirnya berhasil dengan javascript innerHTML.


Bagi yang ingin mencobanya silahkan ikuti langkah-langkahnya di bawah ini:

Langkah Pertama


Silahkan copy kode di bawah ini:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-upper'>
<p class='title'>
          <data:blog.pageName/>
        </p>
<div class='thumb-post'/>
  </div>
</b:if>

Dan simpan seperti berikut:

Untuk template default Blogger:
Silahkan simpan tepat di bawah kode


<div class='main-outer'>

Untuk template custom:
Simpan di dalam div yang menjadi tempat postingan dan sidebar seperti gambar di bawah ini:

Judul Dan Gambar Postingan

Langkah Kedua


Simpan kode di bawah ini di atas kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#items-thumbnail{display:none}
.post-upper{text-align:center;margin:0 30px;padding:20px 0 20px;border-bottom:1px solid #ddd}
.post-upper p.title{font-size:42px;font-weight:500;line-height:1.3em;color:#fff;margin:0;padding:0}
.post-upper .thumb-post{text-align:center;margin:0;padding:0}
.post-upper .thumb-post img{width:100%;max-width:100%;height:auto;margin-top:15px}
h3.post-title,.post-header,.post h1,.post h2{margin:0!important;padding:0!important;height:0!important;font-size:0!important;line-height:0!important;}
p.att-javascript{font-size:150%;text-align:center}
</style>
</b:if>

Untuk kode margin:0 30px silahkan sesuaikan dengan jarak sisi postingan blog Anda agar gambarnya rata dengan postingan.

Langkah Ketiga


Simpan kode di bawah ini di atas kode </body>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
var items=document.getElementById("items-thumbnail"),divs=document.getElementsByClassName("thumb-post");[].slice.call(divs).forEach(function(e){e.innerHTML=items.innerHTML});
//]]>
</script>
</b:if>

Sekarang tinggal save template Anda.

Membuat Postingan


Nah kini giliran cara membuat postingan, silahkan buat sebuah gambar untuk ilustrasi postingan yang cukup besar namun perhatikan size-nya, usahakan memiliki size gambar yang kecil namun tidak merusak kualitasnya. Coba buat gambar dengan dimensi 720px x 350px dan size di bawah 100kb.

Kemudian upload gambar di awal postingan dan pilih size original. Agar gambar postingan valid HTML5, silahkan hapus link-nya dan kode border="0" seperti berikut di bawah ini, tambahkan juga title dan alt tag serta width dan height. Sebelumnya silahkan alihkan postingan ke mode HTML dan kode gambar akan seperti di bawah ini

Sebelum dihapus link-nya:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-yuhkNIOq2R4/VYO_WxjYNFI/AAAAAAAAhWA/xIyww87X5s0/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-yuhkNIOq2R4/VYO_WxjYNFI/AAAAAAAAhWA/xIyww87X5s0/s1600/2.png" /></a></div>

Setelah dihapus link-nya dan border="0":

<div class="separator" style="clear: both; text-align: center;">
<img src="http://4.bp.blogspot.com/-yuhkNIOq2R4/VYO_WxjYNFI/AAAAAAAAhWA/xIyww87X5s0/s1600/2.png" alt="thumbnail postingan" title="Thumbnail Postingan Yang Ini" width="720" height="350"/></div>

Kemudian tambahkan kode id="items-thumbnail" pada div-nya menjadi seperti ini


<div class="separator" id="items-thumbnail" style="clear: both; text-align: center;">
<img src="http://4.bp.blogspot.com/-yuhkNIOq2R4/VYO_WxjYNFI/AAAAAAAAhWA/xIyww87X5s0/s1600/2.png" alt="thumbnail postingan" title="Thumbnail Postingan Yang Ini" width="720" height="350"/></div>

Biasanya akan terdapat kode <br/> di bawah kode gambar di atas, silahkan hapus kode tersebut agar tidak menyebabkan jarak antara tepi atas postingan dengan paragraf pertama postingan.

Karena ini menggunakan javascript, tambahkan juga sebuah pesan jika pengunjung tidak mengaktifkan javascript pada browser-nya agar mengaktifkan javascriptnya. Simpan kode di bawah ini tepat di bawah kode <body>.


<noscript>
<p class='att-javascript'>
This site requires JavaScript. This message will only be visible if you have it disabled.
</p>
</noscript>

Selesai...selamat mencoba.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

1 Comment

mas coba cek blog saya mas, tadi saya mengikuti cara di atas tapi judulnya malah ngga kelihatan. jadi tadi saya ngambil seoenggal css dari mas adhy. tapi tetep hasilnya kaya gini mas. apa yang sang salah yah mas? kalo di lihat di hp juga ukuran judulnya terlalu besar. saya pasang di warim.id mas.

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×