Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
Lagi mau refreshing, k'ian nggak senganja kepikiran untuk cari info mengenai auto image style / style gambar otomatis untuk pola postingan. Setelah berburu kesana kemari dengan panduan dari "Mbah Google", k'ian nyerah karenanggak ada satu artikel ataupun tutorial yang menulisnya. iseng-iseng maen kerumah ( Blog-red ) o-om, k'ian akhirnya ketemu dengan apa yang k'ian cari-cari selama ini. bisa dibilang menyelam sambil minum air, mau cari image style sekalian dapat style readmore... heee heee heeee.

Seperti postingan k'ian yang terdahulu mengenai cara buat readmore pada template baru, kali ini k'ian mau share tentang Cara Buat Readmore ( baca selengkapnya) automatis. kenapa dibilang Readmore ( baca selengkapnya) automatis, karena kita tidak perlu menyisipkan penggalan <div class="fullpost"> atau <--more--!>

Nah daripada kelamaan mending kita langsung mulai, untuk kamu yang sudah menggunakan style "Readmore" versi lama sebaiknya kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Pertama, silahkan menuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu. Langsung copy paste aja kode dibawah ini:
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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:0px 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>
Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah
<data:post.body/>
Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini :
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
simpan dan lihat hasilnya..

Nb:
var thumbnail_mode = "float";
(kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250;
(Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250;
(Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120;
(Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120;
(Thumbnail 'lebar dalam piksel)

Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

7 Response to "Cara Buat Readmore ( baca selengkapnya) automatis"

  1. vhei Said,

    Pertamaxxx nih....!!! btw, ni postingan keren deh..mau akuw coba ach...!!! ...Replay

     

  2. Kian Coi Said,

    @ vhei : thank's da comment..selamat mencoba..!!! ...Replay

     

  3. saya senang dengan gambar readmorenya.. :)
    sangat modern.. ...Replay

     

  4. Anonymous Said,

    wahh
    asyik nih blog nya
    ngasih gue ilmu :D ...Replay

     

  5. Kian Coi Said,

    @ Yolanda : semoga bermanfaat yach, tq da comment...!!! ...Replay

     

  6. Heheh..alhamdulillah berhasil..makasih ya..kamu emang my best friend ...Replay

     

  7. MS Ilman Said,

    nais nih kang... eh dah tw belom, kalo skg bsa edit template ndiri... pke draft.blogger.com ...Replay

     

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |