Judul Dan Gambar Postingan Di Atas Postingan Dan Sidebar

Awalnya aku melihat hal ini di beberapa blog wordpress, menampilkan judul dan gambar postingan di atas postingan dan sidebar.

Kemudian aku mencobanya di blogger dan selalu gagal alasannya yakni url gambar pertama blogger data:post.firstImageUrl tidak sanggup disimpan di luar post loop atau di luar aba-aba <b:includable dan akan menampilkan pesan error ibarat berikut:

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

Kemudian aku mulai berpikir untuk memindahkan html img postingan ke dalam sebuah tag div di luar kawasan postingan dan balasannya berhasil dengan javascript innerHTML.

DEMO

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

Langkah Pertama

Silahkan copy aba-aba 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 ibarat berikut:

Untuk template default Blogger:
Silahkan simpan sempurna di bawah kode

 <div class='main-outer'>

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

Langkah Kedua

Simpan aba-aba di bawah ini di atas aba-aba </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 aba-aba margin:0 30px silahkan sesuaikan dengan jarak sisi postingan blog Anda biar gambarnya rata dengan postingan.

Langkah Ketiga

Simpan aba-aba di bawah ini di atas aba-aba </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 sekarang giliran cara menciptakan postingan, silahkan buat sebuah gambar untuk ilustrasi postingan yang cukup besar namun perhatikan size-nya, usahakan mempunyai 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 aba-aba border="0" ibarat berikut di bawah ini, tambahkan juga title dan alt tag serta width dan height. Sebelumnya silahkan alihkan postingan ke mode HTML dan aba-aba gambar akan ibarat 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/AVvXsEiXYVKdZy8eqIzPaXs_AwLbEnpSo2GlVv8je6Zn0MVDsJSCSOfcSbfrctyCz1EVpIJhrSZDy4heYlKkAQadXjCvpLjZ5FbBmsSB8i_b8DOcA_aS_msYz6SrhgEXm99ICX7EFbBUquoulqf3/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXYVKdZy8eqIzPaXs_AwLbEnpSo2GlVv8je6Zn0MVDsJSCSOfcSbfrctyCz1EVpIJhrSZDy4heYlKkAQadXjCvpLjZ5FbBmsSB8i_b8DOcA_aS_msYz6SrhgEXm99ICX7EFbBUquoulqf3/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/AVvXsEiXYVKdZy8eqIzPaXs_AwLbEnpSo2GlVv8je6Zn0MVDsJSCSOfcSbfrctyCz1EVpIJhrSZDy4heYlKkAQadXjCvpLjZ5FbBmsSB8i_b8DOcA_aS_msYz6SrhgEXm99ICX7EFbBUquoulqf3/s1600/2.png" alt="Judul Dan Gambar Postingan Di Atas Postingan Dan Sidebar Judul Dan Gambar Postingan Di Atas Postingan Dan Sidebar" title="Judul Dan Gambar Postingan Di Atas Postingan Dan Sidebar" width="720" height="350"/></div>

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

 <div class="separator" id="items-thumbnail" style="clear: both; text-align: center;">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXYVKdZy8eqIzPaXs_AwLbEnpSo2GlVv8je6Zn0MVDsJSCSOfcSbfrctyCz1EVpIJhrSZDy4heYlKkAQadXjCvpLjZ5FbBmsSB8i_b8DOcA_aS_msYz6SrhgEXm99ICX7EFbBUquoulqf3/s1600/2.png" alt="Judul Dan Gambar Postingan Di Atas Postingan Dan Sidebar Judul Dan Gambar Postingan Di Atas Postingan Dan Sidebar" title="Judul Dan Gambar Postingan Di Atas Postingan Dan Sidebar" width="720" height="350"/></div>

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

Karena ini memakai javascript, tambahkan juga sebuah pesan kalau pengunjung tidak mengaktifkan javascript pada browser-nya biar mengaktifkan javascriptnya. Simpan aba-aba di bawah ini sempurna di bawah aba-aba <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.
Sumber https://www.kompiajaib.com/

Share this post