Cara Memasang Auto Readmore Versi Baru

Untuk anda para blogger mungkin sudah tak asing lagi dengan tulisan Readmore, selengkapnya dan sejenisnya yang ada pada postingan. kali ini saya akan membahas tentang bagaimana caranya membuat Readmore versi terbaru pada postingan. Readmore versi terbaru kali ini memang agak berbeda dengan Readmore versi terdahulu.

Cara Memasang Shoutbox Di Blogger

Apa sih Shoutbox itu ? Shoutbox adalah sebuah widget yang mempunyai fungsi yang tidak jauh berbeda dengan chatting, dimana semua pengunjung ataupun pemilik blog itu sendiri.bisa saling mengirimkan pesan-pesan singkat seperti perkenalan, pemberitahuan dan lain sebagainya. Bila kita melihat blog ataupun website yang sudah memasang shoutbox, biasanya shoutbox ini terletak pada halaman depan blog ataupun website tersebut.

Cara Memasang Widget Mp3 Player pada Blog

Widget Mp3 Player ini mungkin akan sangat bermanfaat sekali bagi anda yang gemar mendengarkan musik. khususnya bagi para blogger mania yang pecinta musik. mungkin orang- orang sudah terbiasa mendengarkan musik melalui radio, Hp, tape dan lain sebagainya. sekarang bagaimana bila kita mendengarkan musik tersebut melalui blog kita sendiri, bisa jadi juga dengan adanya widget mp3 player pada blog anda ini.

Template 3D Dengan Slide Show Ala Zigmag Primuz

Template ini hampir sama dengan template Transformers yang sebelumnya saya buat. tapi yang membedakan template ini adalah dengan adanya Slide show bergaya Zigmag Primuz, dimana kita bisa menampilkan sebagian postingan kita atau biasa disebut Post summary kedalam tampilan slide show tersebut. selain itu kita bisa menampilkan gambar yang ada dalam postingan kita.

Cara Memasang Auto Readmore Terbaru Pada Postingan

Untuk anda para blogger mungkin sudah tak asing lagi dengan tulisan Readmore, selengkapnya dan sejenisnya yang ada pada postingan. kali ini saya akan membahas tentang bagaimana caranya membuat Readmore versi terbaru pada postingan. Readmore versi terbaru kali ini memang agak berbeda dengan Readmore versi terdahulu. karena pada system Auto Readmore ini kta tidak perlu lagi menulis sebagian postingan sebelum kode  seperti <div class="fullpost"> dan sebagiannya lagi setelah <div class="fullpost"> karena dengan system auto readmore terbaru ini semua postingan kita akan ter-cut otomatis. selain itu juga, dengan Auto Reamore terbaru ini, setiap postingan kita yang terdapat gambar didalamnya. akan langsung ditampilkan dengan bentuk thumbnail pada halaman depan secara otomatis, tanpa harus repot  menyetingnya lagi. contohnya seperti pada gambar dibawah ini.




Bagi anda yang berminat untuk memasang Auto Readmore Versi terbaru ini, silhkan anda ikuti langkah-langkah berikut ini.

Catatan : Bila anda pernah memasang system readmore versi lama sebelumnya. tolong anda kembalikan dulu seperti semula. yaitu dengan cara masuk kemenu tata letak/Layout >> Edit HTML. jangan lupa kasih tanda centang pada kotak "expand widget template" setelah itu hapus kode seperti yang berwarna merah dibawah ini pada system Readmore versi lama anda.

<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;'/>

Bila anda belum pernah memakai system Readmore versi sebelumnya untuk  postingan anda. caranya adalah sebagai berikut.

1. Setelah anda login ke blogger, terus anda masuk kemenu tata letak/Layout >> Edit HTML. beri tanda centang "expand widget template, setelah itu anda cari kode </head>.

2. Copy dan paste kode dibawah ini tepat di atas kode </head> yang anda cari tadi.


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


3. Setelah anda mempaste semua kode tersebut di atas kode </head>. selanjutnya yaitu masih pada halaman HTML. anda cari kode <data:post.body/>. bila anda sudah temukan kode tersebut. anda ganti, timpah atau hapus kode <data:post.body/> tersebut dengan 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>

4. Klik simpan/save template anda
5. Selesai.

Catatan : Kode yang dicetak tebal dan berwarna merah diatas yaitu dengan keterangan sebagai berikut ini.

var thumbnail_mode = "float";  (yaitu untuk menentukan posisi gambar di sebelah kiri.

summary_noimg = 250; (yaitu untuk menetapkan berapa banyak karakter atau huruf yang akan ditampilkan bila dalam postingan anda tanpa gambar. silahkan anda ganti sesuai keinginan anda)

summary_img = 250; (yaitu untuk menetapkan berapa banyak karakter atau huruf yang akan ditampilkan bila dalam postingan anda terdapat gambar, silahkan anda ganti sesuai keinginan anda)

img_thumb_height = 120; (yaitu untuk mengatur ukuran tinggi gambar yang akan ditampilkan)

img_thumb_width = 120; (yaitu untuk mengatur ukuran lebar gambar yang akan ditampilkan)

READ MORE = silahkan anda ganti misalnya menjadi selengkapnya,berikutnya dan sebagainya

Untuk lebih jelasnya silahkan anda praktekkan tips memasang Auto Readmore di atas pada blog anda.
Selamat mencoba dan semoga bermanfaat. salam blogger mania.

1 comments:

Azmi Cole Jr March 26, 2010 at 2:24 AM  

mantap bner gan... akhirnya ane ketmu juga ni trik.. thanxz berat sob. sklian ane follow y... follow back plz...


ShoutMix chat widget

Free Wallpaper|Blog Tutorial|Tips & Trik|SEO|Widget

  © Free Blogger templates The Robotic by Kang Oemar templates 2009

Kembali Ke : ATAS