BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

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
  1. <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>
  2. <script type='text/javascript'>
  3. //<![CDATA[
  4. function removeHtmlTag(strx,chop){
  5. if(strx.indexOf("<")!=-1)
  6. {
  7. var s = strx.split("<");
  8. for(var i=0;i<s.length;i++){
  9. if(s[i].indexOf(">")!=-1){
  10. s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
  11. }
  12. }
  13. strx = s.join("");
  14. }
  15. chop = (chop < strx.length-1) ? chop : strx.length-2;
  16. while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
  17. strx = strx.substring(0,chop-1);
  18. return strx+'...';
  19. }
  20. function createSummaryAndThumb(pID){
  21. var div = document.getElementById(pID);
  22. var imgtag = "";
  23. var img = div.getElementsByTagName("img");
  24. if(img.length<=0) {
  25. 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>';
  26. var summ = summary_noimg;
  27. }
  28. if(img.length>=1) {
  29. 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>';
  30. summ = summary_img;
  31. }
  32. var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
  33. div.innerHTML = summary;
  34. }
  35.  
  36.  
  37. //]]>
  38. </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
  1. <div class='post-body entry-content'>
  2. <data:post.body/>
  3. <div style='clear: both;'/> <!-- clear for photos floats -->
  4. </div>
Parsed in 0.005 seconds at 27.82 KB/s

 

dengan script berikut ini

Javascript, using GeSHi 1.0.8.8
  1. <div class='post-body entry-content'>
  2. <b:if cond='data:blog.pageType != &quot;item&quot;'>
  3. <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
  4. <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
  5. </script>
  6. </b:if>
  7. <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
  8. </b:if>
  9. <div style='clear: both;'/> <!-- clear for photos floats -->
  10. </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
  1. .post h3 {
  2. margin:.25em 0 0;
  3.  
  4. dst
  5.  
  6. }
Parsed in 0.009 seconds at 4.81 KB/s

 

menjadi

CSS, using GeSHi 1.0.8.8
  1. .post h3 {
  2. margin:.25em 0 0 140px;
  3.  
  4. dst
  5.  
  6. }
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
  1. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  2. <style>
  3. .post h3 { margin:.25em 0 0 0;
  4.  
  5. dst
  6. }
  7. </style>
  8. </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

23 komentar:

boyanis sos cili said...

SELAMAT BERPUASA BUAT AKANG

Vivieck said...

prosesnya panjang juga ya kang...
jadi bingung juga..
tapi saya pelajari dulu deh...
mudah2an bisa...

Hidup sederhana said...

bingung kang bacanya, pengen bisa,tapi liat segini aja udah pusing.

Ceritaku said...

tengkyu tutorialnya kang..

Zippy said...

Wadow...saya udah migrasi kang ke WP :D
Tapi keren tutornya.
Btw, met puasa kang :)

chugyGOGOG said...

Thanks untuk tutorialnya.
menarik sekali.

selamat puasa, siang , selamat beristirahat, tetap semngat dan happy blogging.

anak nelayan said...

asyik memang bisa kutak kutik lagi

eliana said...

trims untuk sharing nya :)
jadi terbantu sekali saya..

Blogger Newbie said...

ane juga belum ngerti gan. :hammer:

sul said...

terlebih dahulu saya mengucapkan slamt menunaikan ibadah puasa KANG, walapun dah terlambat...
dan tapi maksih ya atas tipsnya....

Vivieck said...

selalu nggak ngerti...
but...thxs kang...

Niammuddin Mz said...

halo kawan kawan blogger semuanya salam hangat akan lebih baik jika kalian mau mampir ke blog saya:
http://www.niamblog.co.cc

tyas said...

belum terlalu ngerti :(

yongki said...

otak atik lagi gan.haha

tas etnik said...

wah info bagus nih... ikut nimbrung ahh

Android Phone Tips said...

emang ga ngaruh buat serpnya gan kalo misalnya blog kita udah banyak keindex...??
maaf ane masih newbie neh.

hot mobile news said...

banyak amat ya kode-kodenya.. bingung nih...

kvvargask said...

http://hubpages.com/hub/After-bankruptcy-are-you-looking-for-updating-your-credit-report
After Bankruptcy discharge
After receiving your bankruptcy discharge papers the first thing you will want to do is get bankruptcy discharge updated and make sure that the information reported on it is correct.

Acehommegazen said...

Nice Info guy,benar2 membuahkan hasil.. ane salut sama agan... acehomgezen,adseller..
adseller
saatnya kita bergerak maju
bersatu kita teguh
bercerai kita Runtuh
Seandainya kita benar benar jujur
Kita akan selalu di percayai
Teman Sejati Selalu Setia
Selalu terpecaya
Selalu Ada
Saat
Kita Perlu
Selalu Setia menemani

wuufi said...

Numpang promosi gan hehe ... www.wuufi.co.cc
Gan hnya artikel anda yang agak manjur dari sbagian besar di blog lain hehe

DNA Photography said...

agak ribet sih tutorialnya... tp mau aku coba dulu

cahbatik said...

bisa gak bisa harus coba

Purwa Sedana Rawks said...

suksma :)

purwa-sedana.blogspot.com

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial