03 April 2009

Membenahi Posting pada Magazine Theme

Setelah beberapa kali mencoba memodifikasi template dari minima menjadi bentuk magazine , beberapa kendala terutama cara pasang gambar agar nampak di homepage dan sub page berbeda membuat saya semakin antusias untuk mencari solusinya. Alhamdulillah kini terjawab sudah, dengan mencoba memasang script yang mana scrip ini berfungsi sebagai pengaturan pemenggalan artikel secara automatis.

Tutorial ini aku dapat dari Kang Jaloe ( Readmore Liberal ), namun disini penerapannya di template untuk scriptnya tidak saya upload. Jadi langsung saya masukkan pada bagian <head>. Disini saya juga akan menjelaskan berdasarkan pengalaman saya saat saya mencoba membantu mendesain blog ini maupun blog saya yang lain yang telah menggunakan readmore, termasuk blog ini

Oke, saya akan mencoba membahasnya secara bertahap :

LANGKAH BAGI YANG BELUM MEMASANG READMORE

1. Login ke blogger
2. Klik Layout
3. Klik Edit HTML
4. Download/ backup dulu template anda
5. Klik pada Expand Widget Templates.
6. Copas kode dibawah ini dan letakkan sebelum kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no- float&quot; ; summary_noimg = 350; summary_img = 250; img_thumb_height = 100; img_thumb_width = 120; </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");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:15px 10px 5px 0px;"><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>

7. Cari kode <data:post.body/> di template anda, gunakan Ctrl + F dan masukkan kode <data:post.body/> kemudian enter.

8. Setelah ketemu ganti kode tersebut dengan kode berikut :

<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>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

9. Simpan template anda.



Keterangan : Untuk kode dibawah ini, bisa anda sesuaikan selera anda.

summary noimg= 350 = Tinggi pemotongan artikel tanpa menggunakan gambar
summary img=250 = Tinggi pemotongan artikel menggunakan gambar


LANGKAH BAGI YANG SUDAH PASANG READMORE :

Kerjakan langkah 1 s/d 5
Cari kode <div class='post-header-line-1'/> , bila sudah ketemu perhatikan susunannya adalah sebagai berikut :

<div class='post-header-line-1'/>

<div class='post-body entry-content'>
<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Ganti kode berwarna merah dengan kode baru pada langkah ke 8.
Bila anda kesulitan, silahkan ganti semua kode dari

<div class='post-header-line-1'/>
sampai dengan
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Dengan kode dibawah ini :

<div class='post-header-line-1'/>

<div class='post-body entry-content'>
<data:post.body/>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Kemudian kerjakan langkah 7 dan 8.


Dengan demikian anda tidak perlu susah payah dalam mengupdate artikel dan secara otomatis bila dalam posting anda mengandung gambar, maka gambar akan muncul pada halaman utama sesuai ukuran yang anda format.

(Catatan : Bila anda ingin mempunyai blog dengan photo pribadi menghias pada headernya, bCOM siap membantu sepanjang tidak ada kata cela dan menyesal dihati anda. Ingat bCOM tidak mengharuskan anda untuk mengisi rekening Paypal bCOM, mengingat ini misi untuk memajukan blogger Indonesia... )

7 komentar:

  1. Bagus infonya...

    BalasHapus
  2. mantap tipnya mas

    BalasHapus
  3. Duuuh langkahnya panjang tenan...

    BalasHapus
  4. bagus banget tipsnya, sukses yah

    BalasHapus
  5. infonya berguna banget neh, mas

    BalasHapus
  6. gIMANA KALO MAU DIUBAH AGAR GAMBARNYA GAK TAMPAK, MAS

    BalasHapus
  7. Thank u soooooo much deh. Saya dah muter2 mau buat read more dari sekitar 20 blog sdh yang memberi solusi tdk ada satupun yang bisa digunakan di blog saya. Akhirnya dengan tanpa putus asa saya temukan juga blog ini yang benar2 sukses telah membantu saya. Makacih yaw :)

    BalasHapus

Mockup Hijab Adobe Photoshop Tutorial - FREE FILE PSD

  Mockup Hijab Adobe Photoshop adalah tutorial tentang bagaimana cara merubah warna hijab maupun coraknya. Jika anda ingin mendownload file ...