rss

Supports

Just an ordinary blogger from urban city bekasi who want to be exist in cyberworld during learn and know bout blog also understanding internet world so i can share, study together in ensiblogpedia. Hanya seorang blogger biasa dari kota urban Bekasi yang berkeinginan untuk bisa eksis di dunia maya sambil belajar dan mengenal blog serta memahami dunia internet untuk bisa berbagi bercerita dan belajar bersama di ensiblogpedia ini.

Saturday, 9 January 2010

Cara membuat "read more" pada blogger (2)

Lanjutan dari postingan sebelumnya mengenai Cara membuat "read more pada blogger yang berisi tentang cara membuat read more dengan bantuan Jump break milik bloggernya sendiri. Membuat read more kali ini adalah dengan cara yang biasa disebut hack CSS atau mengutak atik kode CSS yang ada di bagian Edit HTML pada bagian layout pengaturan blog. Cara ini saya dapat setelah berkunjung dari 2 blog ternama yaitu blognya mas Isnaini dan blognya bang o-om.

Pasang read more manual
Ini adalah cara yang saya dapat dari blognya mas Isnaini, berikut langkahnya:
  • Login ke blogger, pilih blog yang ingin kamu pasang dengan model read more ini.
  • Masuk ke bagian layout - Edit HTML.
  • Centang kotak kecil "expand widget templates".
  • Masukkan kode berikut diatas kode </head> atau tepat dibawah kode ]]></b:skin>
Contoh :
]]></b:skin>
<style>
<b:if cond='data:blog.pageType == "item"'>
   span.fullpost {display:inline;}
<b:else/>
   span.fullpost {display:none;}
</b:if>
</style>
  • Selanjutnya cari kode <p><data:post.body/></p>, lalu tambahkan kode berikut ini dibawahnya.
Contoh :
<p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Read More...</a>
</b:if>

Kata Read more dapat kamu ganti dengan kata selengkapnya, bersambung, dan lain2.
  • Simpan hasil editan tersebut, lalu beralih ke bagian posting.
  • Pada mode Edit HTML, ketik kode <span class="fullpost"> Isi yang disembunyikan </span>.
  • Lihat contoh pada gambar berikut

Pasang read more Otomatis
Pemasangan read more versi yang satu ini sangat praktis, tidak perlu menuliskan kode-kode lagi dan juga tidak perlu repot-repot menentukan bagian mana yang harus di potong. Penasaran? Silahkan ikuti petunjuk yang saya ambil dari bang o-om berikut ini.

Oh ya, jika sebelumnya kamu menggunakan cara pertama atau kedua, kode-kode tersebut harus di kembalikan terlebih dahulu. Caranya adalah dengan menghapus kode-kode yang ada pada cara sebelumnya.

Untuk membuat fungsi read more otomatis seperti ini langkah-langkahnya adalah:
  • Masuk ke bagian layout - Edit HTML.
  • Centang kotak kecil "expand widget templates".
  • Masukkan kode berikut diatas kode </head>.
<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", temukan kode <data:post.body/>.
  • GANTI kode <data:post.body/> tersebut dengan kode berikut.
<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>

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)

Silahkan coba dan lihat hasilnya.

Sekedar tambahan tentang cara penghapusan kode yang lama sebelum mengganti yang baru.

Dalam contoh yang diberikan oleh o-om lakukan langkah berikut
<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;'/>

Yang berwarna merah harus dihapus.


Sedang dalam template saya

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

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

Karena setiap template berbeda-beda, silahkan dipelajari dan disesuaikan patokannya.



Related Post:



Enter your email address to get the newest article here:



Delivered by FeedBurner


2 comments:

Nevil MieGodok on 24 July 2014 at 21:31 said...

Mantap gan Berhasil 100%
kunjungi www.ninjasagaarmy.blogspot.com
Thanks

Poker Online on 1 December 2015 at 16:02 said...

Isi beritanya bagus banget.. Buat lagi yang lebih bagus gan thanks..


Agen Poker
Agen Poker Online
Agen Poker Terpercaya
Poker Online
Poker Terpercaya
Bandar Domino
Bandar Domino Online
Agen Domino
Judi Poker
Taruhan Poker
Bandar Poker



Post a Comment

Saran, kritik, masukan, berikan semuanya ke ensiblogpedia agar blog ini dapat lebih maju untuk belajar bersama.

The Newest article

Enter your email address to get the newest article here:



Delivered by FeedBurner


Followers