Judul dan gambar postingan berada di tengah-tengah

Sahabat sudah lama anna g berbagi tutorial buat pemula.
nah sahabat anna berbagi kali ini mengenai judul postingan yang berada di tengah - tengah menyertakan gambar anna berbagi ini setelah melihat dan menggunakan serta mmengutak atiknya sehingga anna bisa mendapatkan seperti yang anna gunakan secara otomatis judul postingan dan gambar langsung timbul.
Awalnya anna berkunjung pada situs kompiajaib.com yang memposting judul dan gambar di atas sidebar.

Namun sahabat yang kang Adhy S. selaku admin tidak nyertakan gambar secara otomatis entah kenapa alasanya.kalau anna berpikir biar postingan gambar pertama tidak ada di dalam postingan melainkan gambar pertama berada sama dengan judul postingan silahkan sahabat bisa tinjau ke kompiajaib.com.

Bila sahabat malas untuk berkunjung ke kompiajaib.com ini anna bagikan lagi
langsung ajja sahabat ediet HTML blog sahabat.
setelah itu

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


silahkan sahabat simpan kode di atas setelah di copy terlebih dahulu dan pastekan di template blog sahabat.
nah dalam blog sahabat bermacam-maccam menggunakan kode
kalau sahabat menggunakan kode yang < div class='main-wrapper'> atau sejenisnya atau juga
sahabat menggunkan kode <div class='main-outer'> setelah ketemu silahkan sahabat pastekan kodenya di  bawah kode tersebut. bila sahabat tetap juga belum menemukan jangan putus assa sahabat karna kode-kode berwarna biru tadi di template blog yang anna gunakan tidak di temukan sehingga anna terus berusaha dan anna meletakananya di atas kode di bawah ini

<b:section class='main' id='main' showaddelement='no'>
          <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1'


setelah itu sahabat  temukan kode </head>
letakan kode di bawah ini tepat di atas kode tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#items-thumbnail{display:none}
.post-upper{text-align:center;margin:0 70px;padding:20px 0 20px;border-bottom:1px solid #ddd}
.post-upper p.title{font-size:42px;font-weight:500;line-height:1.3em;color:#008E00;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:5px}
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>

Sahabat silahkan ganti untuk warna #kuning biar sama dengan postingan sahabat begitu juga dengan warna #merah silahkan sahabat ganti untuk warna judul postingan


selanjutnya sahabat temukan kode </body>
tempelkan kode berikut tepat di atasnya


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

lalu save.

catatan: di atas belum tampil gambarnya secara otomatis .nah biar tampil secara otomatis sahabat tinggal tambahkan kode berikut ini

<img expr:src='data:blog.postImageUrl'/>

agar sahabat tidak bertanya  - tanya letakanya di kode pertama alias yang pailng atas.
silahkan sahabat berexperiment 

Share this post