Meletakkan Judul Posting dan Gambar di atas Postingan dan Sidebar

Meletakkan Judul Posting dan Thumbnail di atas Postingan dan Sidebar

Meletakkan Judul dan Gambar di atas Postingan dan Sidebar. Postingan ini saya buat untuk mendokumentasikan tutorial blog yang saya dapat dari blokwalking. Dan kebetulan pada waktu itu saya ingin mencoba mengedit template yaitu dengan memindahkan Judul postingan dan gambar diatas postingan dan sidebar seperti pada template wordpress pada website national geographic.

Saya pikir jika di wordpress bisa, kenapa di blogger tidak? Kemudian saya mencoba membuat eksperimen-eksperimen namun hasilnya tetap saja gagal. Saya sempat frustasi, kemudian dari pada saya bingung, akhirnya saya teringat dengan salah satu master blog Indonesia favorit saya yaitu kang Adhy Suryadi dengan blog-nya kompiajaib.com. Ah..!! bukankah template Kang Adhy juga seperti yang saya maksud?

Bener juga, akhirnya saya coba ke blog kang Adhy Suryadi, alhasil saya menemukan tutorialnya dan saya coba dokumentasikan ke dalam blog ini agar saya dan juga pembaca bisa belajar bersama-sama. ^_^

Memindahkan judul posting dan gambar di atas postingan dan sidebar

Berikut tutorialnya dari blognya kang Adhy

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 dibawah <div id="outer-wrapper">
Biasanya kode tersebut terdapat dibawah header dan menu.

Langkah Kedua
Salin css dibawah ini

<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>

Simpan di atas kode </head>
Silakan otak-atik sendiri dan sesuaikan dengan template anda.

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>

Kemudian save templatenya.

Penting!
Cara Posting
Untuk mempostingkannya memerlukan beberapa langkah agar tampilan benar-benar seperti yang dimaksudkan dalam tutorial ini. Silakan ikuti petunjuk dibawah ini.

Pertama buat sebuah gambar thumbnail, usahakan memiliki size gambar yang kecil namun tidak merusak kualitasnya karena thumbnail diatas postingan ini memiliki ukuran tampilan yang besar. Coba buat gambar dengan dimensi 720px x 350px dan size di bawah 100kb, bisa anda buat dengan photoshop, crop dengan rasio 720px dan 350px lalu simpan menjadi ukuran dibawah 100kb agar loading blog anda tidak terganggu karena gambar ini.

Kemudian pada saat memposting, silakan upload gambar diawal postingan dan pilih size original. Setelah itu silahkan alihkan postingan dari mode Compose ke mode HTML dan cari kode gambar yang anda upload, kira-kira seperti di bawah ini.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv1vHt1FmQR9FU8fTx-ubwYnG4Ja70punKwTnjbqeydPkd7mm_vOaRsTQnC8BzRZkD25D71rZsirSCR-4hqlQWUjrQ6SvQtoKtJ5NZMadawwWaz8Ca01UX0COPzphyphenhyphenPbpxRx0E2gojVf33/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv1vHt1FmQR9FU8fTx-ubwYnG4Ja70punKwTnjbqeydPkd7mm_vOaRsTQnC8BzRZkD25D71rZsirSCR-4hqlQWUjrQ6SvQtoKtJ5NZMadawwWaz8Ca01UX0COPzphyphenhyphenPbpxRx0E2gojVf33/s1600/2.png"  width="720" height="350"/></a></div>

Silakan hapus yang berwarna orange!
Jika sudah selesai akan menjadi seperti dibawah ini.

<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv1vHt1FmQR9FU8fTx-ubwYnG4Ja70punKwTnjbqeydPkd7mm_vOaRsTQnC8BzRZkD25D71rZsirSCR-4hqlQWUjrQ6SvQtoKtJ5NZMadawwWaz8Ca01UX0COPzphyphenhyphenPbpxRx0E2gojVf33/s1600/2.png" width="720" height="350"/></div>

Kemudian tambahkan kode id="items-thumbnail" pada div class="separator, seperti yang berwarna orange dibawah ini

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

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv1vHt1FmQR9FU8fTx-ubwYnG4Ja70punKwTnjbqeydPkd7mm_vOaRsTQnC8BzRZkD25D71rZsirSCR-4hqlQWUjrQ6SvQtoKtJ5NZMadawwWaz8Ca01UX0COPzphyphenhyphenPbpxRx0E2gojVf33/s1600/2.png" alt="thumbnail postingan" title="Thumbnail Postingan Yang Ini" width="720" height="350"/></div>

Karena metode 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

Demikian postingan Meletakkan Judul postingan dan Gambar di atas postingan dan sidebar. Semoga bermanfaat, Wassalam..

Meletakkan Judul dan Thumbnail di atas Postingan dan Sidebar