Judul Dan Gambar Postingan Di Atas Postingan Dan Sidebar

Ditulis oleh: Adhy Suryadi

Ditulis pada: 6/19/2015

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:

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-FYQ4_WFsSEa2SK8Mk9yqh5xF00NKi2BNMb_Ce7ntoBv2u-4k23eu-oJuzoCMZXD0fsOs27sWUaOGZXt1GtrvwftRbepb-jWBtalSDlULqCkb1abvn9y9d3Tc1J2ALGTw6yRrzi3aBMg/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-FYQ4_WFsSEa2SK8Mk9yqh5xF00NKi2BNMb_Ce7ntoBv2u-4k23eu-oJuzoCMZXD0fsOs27sWUaOGZXt1GtrvwftRbepb-jWBtalSDlULqCkb1abvn9y9d3Tc1J2ALGTw6yRrzi3aBMg/s1600/2.png" /></a></div>

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

<div class="separator" style="clear: both; text-align: center;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-FYQ4_WFsSEa2SK8Mk9yqh5xF00NKi2BNMb_Ce7ntoBv2u-4k23eu-oJuzoCMZXD0fsOs27sWUaOGZXt1GtrvwftRbepb-jWBtalSDlULqCkb1abvn9y9d3Tc1J2ALGTw6yRrzi3aBMg/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-FYQ4_WFsSEa2SK8Mk9yqh5xF00NKi2BNMb_Ce7ntoBv2u-4k23eu-oJuzoCMZXD0fsOs27sWUaOGZXt1GtrvwftRbepb-jWBtalSDlULqCkb1abvn9y9d3Tc1J2ALGTw6yRrzi3aBMg/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.