Lagi Tentang Meratakan Img Dengan Post-Body

Lagi pertanyaan masuk tentang “ meratakan img dengan post-body “, via my facebuuk. Pada post sebelumnya saya lebih menyarakan untuk mendownload template Hybrid News, karena trik yang saya gunakan pada blog bloon mengunakan apa yang ada pada template hybrid news tersebut.

Baiklah ada beberapa yang perlu di lakukan agar img dengan post-body kurang lebih sejajar ( pada halaman depan-nya saja ).

Langkah Pertama

Memasukan script read more otomatis versi 3 ( versi sebelumnya juga bisa red. )

simpan di bawah tag;

]]></b:skin>

Javascript, using GeSHi 1.0.8.8
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 140; summary_img = 140; img_thumb_height = 110; img_thumb_width = 110; </script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 20px 5px 0px; margin:-50px 0 0 0 !important;"><img src="http://i584.photobucket.com/albums/ss289/hemingways-studio/Have_Images_TEXT.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 20px 5px 0px; margin:-50px 0 0 0 !important;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
 
 
//]]>
</script>
Parsed in 0.019 seconds at 73.30 KB/s

 

( gunakan script read more otomatis di template Hybrid News, jika script di atas tidak berfungsing )

kemudian ganti script Html ini

Javascript, using GeSHi 1.0.8.8
<div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
Parsed in 0.005 seconds at 27.82 KB/s

 

dengan script berikut ini

Javascript, using GeSHi 1.0.8.8
<div class='post-body entry-content'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
Parsed in 0.008 seconds at 52.12 KB/s

 

Langkah Kedua :

Tambahkan margin left untuk .post h3 + 140px ( merupakan syntax CSS untuk judul artikel - bisa saja untuk template lain adalah post h2 atau post h1 red )

CSS, using GeSHi 1.0.8.8
.post h3 {
  margin:.25em 0 0;
 
dst 
 
}
Parsed in 0.009 seconds at 4.81 KB/s

 

menjadi

CSS, using GeSHi 1.0.8.8
.post h3 {
  margin:.25em 0 0 140px;
 
dst
 
}
Parsed in 0.009 seconds at 5.35 KB/s

 

Langkah Ketiga :

Karena ini hanya pada halaman depan saja, untuk menormalkan kembali pada halaman postingan maka kita harus menambahkan script css ini. ( simpan di bawah javascript read more otomatis di atas red ).

CSS, using GeSHi 1.0.8.8
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.post h3 { margin:.25em 0 0 0;
 
dst
}
</style>
</b:if>
Parsed in 0.009 seconds at 12.96 KB/s

 

 

Quote of the day:
Tuhan Yang Maha Mulia dan Maha Besar berfirman : “Barang siapa yang sibuk membaca Al Qur’an dan dzikir kepada Ku dengan tidak memohon kepada Ku, maka ia Aku beri sesuatu yang lebih utama dari pada apa yang Aku berikan kepada orang yang minta – hadist qudsi

Page views this post: reader