Cara Membuat Judul Dan Gambar Postingan Di Atas Breadcrumbs

Selamat siang sobat, disiang ini saya ingin posting tentang Cara Membuat Judul dan Gambar Postingan Diatas Breadcrumbs. Sebenarnya pertama kali saya melihat gambar dan judul postingan di atas breadcrumb ini di blog Mas Adhy yaitu blog Kompi Ajaib, Pastinya anda sudah sangat kenal donk dengan blog kompi ajaib ini. Setelah saya melihat gambar postingan yang ada diatas postingan ini saya langsung tertarik ingin membuat dan memasangnya di blog saya, Akhirnya saya cari di google dan ternyata ketemu tutorialnya dan tutorial itu dari blog kompi ajaib juga yang membahas. Dan saya coba praktekan akhirnya berhasil. Nah, Bagi anda yang berminat ingin membuat Judul Dan Gambar Postingan Diatas Bradcrumbs ini, Silahkan ikuti caranya dibawah ini. Dan Untuk Demonya seperti di blog ini Tetapi agak sedikit berbeda jika belum saya rubah. Hehe.

1. Seperti biasa anda harus masuk akun blogger anda terlebih dahulu.

2. Pilih Template ==> Edit HTML

3. Jika sudah, 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 ini:

Untuk template default atau bawahan Blogger:

Silahkan simpan tepat di bawah kode.
<div class='main-outer'>


Dan Untuk template custom atau template yang dapat anda download:

Simpan di dalam div yang menjadi tempat postingan dan sidebar. Kalo bingung silahkan anda lihat seperti gambar di bawah ini:



4. 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 anda sesuaikan sendiri dengan jarak sisi postingan di blog Anda agar gambarnya rata dan pas dengan postingan.

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


6. Karena ini menggunakan javascript, jadi tambahkan juga sebuah pesan untuk pengunjung jika pengunjung tidak mengaktifkan javascript pada browser yang di pakai dan agar pengunjung mengaktifkan javascriptnya.

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


Nah, Edit html sudah selesai, Sekarang tinggal save template Anda.

Stelah template di simpan tetapi belum selesai sampai disini, agar gambar postingan bisa tampil diatas breadcrumb kita harus mengatur saat kita upload gambar di postingan. Untuk cara membuat postingannya seperti ini, silahkan buat dulu sebuah gambar yang akan di jadikan gambar ilustrasi postingan, dan gambar ini yang cukup besar namun perhatikan size-nya juga, usahakan memiliki size gambar yang kecil namun tidak merusak kualitasnya.

Untuk membuat gambar ber size kecil tanpa merusak kualitas gambar bisa anda baca postingan saya tentang Cara Kompres Gambar Tanpa Merusak Kualitas Gambar

Coba anda 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, Dan silahkan anda hapus link-nya dan kode border="0" seperti di bawah ini, dan 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://lh3.googleusercontent.com/-PsUfDm1re8s/Vx2mBdtuXiI/AAAAAAAAAIM/xNJpGn8ptww/s1600/judul-dan-gambar-postingan-diatas-breadcrumbs.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" src="https://lh3.googleusercontent.com/-PsUfDm1re8s/Vx2mBdtuXiI/AAAAAAAAAIM/xNJpGn8ptww/s1600/judul-dan-gambar-postingan-diatas-breadcrumbs.jpg"/></a></div>


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

 <div class="separator" style="clear: both; text-align: center;">
<img src="https://lh3.googleusercontent.com/-PsUfDm1re8s/Vx2mBdtuXiI/AAAAAAAAAIM/xNJpGn8ptww/s1600/judul-dan-gambar-postingan-diatas-breadcrumbs.jpg" alt="keyword judul gambar postingan" title="nama judul gambar postingan" width="720" height="350" /></div>




Kemudian tambahkan kode id="items-thumbnail" pada div-nya, Dan akan tampak menjadi seperti ini.

 <div class="separator" id="items-thumbnail" style="clear:both; text-align: center;">
<img src="https://lh3.googleusercontent.com/-PsUfDm1re8s/Vx2mBdtuXiI/AAAAAAAAAIM/xNJpGn8ptww/s1600/judul-dan-gambar-postingan-diatas-breadcrumbs.jpg" alt="keyword judul gambar postingan" title="nama judul gambar postingan" width="720" height="350"/></div>


Nah, itulah Cara Membuat Judul Dan Gambar Postingan Diatas Breadcrumbs. Semoga bermanfaat.

Sumber: http://www.kompiajaib.com/2015/06/judul-dan-gambar-postingan-di-atas.html

Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • 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 Hide Parser