Cara Membuat Read More pada Blogspot

Posted by Unknown on 6/16/2009
17 komentar
This item was filled under ,

J
ika kita menulis posting pada blogspot, tulisan kita akan dimunculkan secara keseluruhan pada halaman depan. Ini mengakibatkan blog kita akan penuh dengan tulisan yang panjang ketika dibuka. Saat ini blogspot memang belum menyediakan fungsi "read more" ketika menulis posting. Harapannya sih bakal ada. Berbeda halnya dengan Wordpress CMS yang telah menyediakan tool pada bagian penulisan posting yang berfungsi untuk membagi tulisan yang akan tampil pada halaman utama (depan).

Fungsi "Read More" atau "Baca Selengkapnya", atau "Continue Reading" seperti pada blog ini adalah untuk membagi postingan menjadi 2 bagian sehingga yang muncul di halaman utama hanya sebagian saja, sedangkan untuk melihat isi keseluruhan bisa dilakukan dengan mengklik link "Read More" tersebut. Meskipun blogspot tidak menyediakan tool membuat Read More, kita masih bisa membuat Read More tersebut pada postingan kita dengan cara merombak sedikit template Blogspot yang kita gunakan. Ada 2 cara membuat Read More pada blogspot yang bisa kita gunakan:

CARA PERTAMA
  1. Login ke akun blogspot pembaca.
  2. Pada dasbor, klik link Tata Letak, kemudian pilih submenu Edit HTML.
  3. Back up terlebih dahulu template blogspot pembaca agar jika terjadi kerusakan, masih bisa mengembalikan ke kondisi semula. Klik link Download Template Lengkap.
  4. Beri centang pada bagian Expand Template Widget.
  5. Silahkan cari kode seperti dibawah ini pada template pembaca.
    <div class='post-body entry-content'>
    Perlu diketahui bahwa kode tersebut ada yang sama dan ada yang beda dengan template Anda. Saya menggunakan template standart blogspot, MINIMA. Untuk menyiasatinya, pembaca cukup memastikan bahwa terdapat struktur class='post-body'.
  6. Copy paste kode berikut pada kode yang Anda temukan pada langkah 5 di atas:
    <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>
  7. Selanjutnya cari kembali kode berikut ini:
    <data:post.body/>
  8. Copy paste kode berikut di bawah kode yang Anda temukan pada langkah 7 di atas:
    <a expr:href='data:post.url'>Read More...</a>
    </b:if>
    (NB: Anda boleh mengganti tulisan "Read More..." yang berwarna merah tersebut dengan tulisan "Baca selengkapnya...", "Lanjutkan...", dsb.
  9. Setelah itu klik tombol SIMPAN TEMPLATE.
  10. Masih pada dasbor blogspot pembaca, bukalah menu Pengaturan, kemudian pilihlah submenu Format. Pada bagian Template Posting yang ada di sebelah paling bawah, copy paste kode berikut:
    <div class="fullpost">

    </div>
  11. Setelah itu klik tombol SIMPAN SETELAN.
  12. Sekarang cobalah membuat sebuah posting baru. Pada tab Edit HTML pada kotak isian posting, pembaca akan melihat muncul tulisan yang Anda copy paste pada langkah 10 di atas.
  13. Untuk membuat Read More muncul pada postingan, tulis bagian artikel yang hanya ingin ditampilkan pada halaman utama blog di atas kode <div class="fullpost">. Sedangkan tulisan seterusnya ditulis diantara kode <div class="fullpost"> dan </div>.
CARA KEDUA

Cara kedua untuk membuat Read More pada blogspot adalah menggunakan javascript. Perlu diketahui bahwa selain berfungsi untuk membuat Read More pada blogspot, cara kedua ini juga bisa membuat thumbnail posting secara otomatis yang diambil dari gambar yang Anda masukkan pada posting. Thumbnail merupakan gambar berukuran kecil pada posting yang dibuat untuk merepresentasikan tulisan yang kita buat. Contohnya seperti gambar di atas. Gambar Teletubis tersebut bisa dikatakan sebagai sebuah thumbnail.
  1. Login ke akun blogspot pembaca.
  2. Pada dasbor, klik link Tata Letak, kemudian pilih submenu Edit HTML.
  3. Back up terlebih dahulu template blogspot pembaca agar jika terjadi kerusakan, masih bisa mengembalikan ke kondisi semula. Klik link Download Template Lengkap.
  4. Beri centang pada bagian Expand Template Widget.
  5. Selanjutnya cari kembali kode berikut ini pada template pembaca:
    <data:post.body/>
  6. Hapus kode yang Anda temukan pada langkah 5, kemudian ganti 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 == "item"'><data:post.body/></b:if>
  7. Setelah itu, copy paste javascript berikut di atas kode </head> pada template Anda:
    <script type='text/javascript'>
    var thumbnail_mode = "float" ;
    summary_noimg = 300;
    summary_img = 300;
    img_thumb_height = 250;
    img_thumb_width = 250;
    </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>
  8. Coba perhatikan bagian yang berwarna merah pada javascript di atas.


    • var thumbnail_mode = "float"; --> Untuk mendefenisikan letak thumbnail yang akan dibuat dan ditampilkan pada halaman utama blog berada disamping tulisan.
    • summary_noimg = 300; --> Untuk mendefenisikan jumlah karakter tulisan yang akan ditampilkan pada halaman utama jika thumbnail tidak ada. Silahkan ganti angkanya sesuai dengan keinginan Anda.
    • summary_img = 300; --> Untuk mendefenisikan jumlah karakter tulisan yang akan ditampilkan pada halaman utama jika ada thumbnail.
    • img_thumb_height = 250; --> Untuk mendefenisikan tinggi thumbnail yang akan dibuat. Silahkan ganti angkanya sesuai dengan keinginan Anda.
    • img_thumb_width = 250; --> Untuk mendefenisikan tinggi thumbnail yang akan dibuat. Silahkan ganti angkanya sesuai dengan keinginan Anda.
  9. Klik tombol SIMPAN TEMPLATE
Kedua cara di atas mempunyai fungsi yang sama namun ada kelebihan dan kekurangannya masing-masing. Berikut beberapa kelebihan dan kekurangan dari masing-masing cara membuat Read More di atas sehingga bisa Anda jadikan pertimbangan:

Cara Pertama
Kelebihan :
  • Kode yang dimasukkan tidak terlalu banyak sehingga tidak membuat blog kita semakin berat jika dibuka.
  • Kita bisa menentukan batas pembagian artikel yang akan dimunculkan di halaman depan, mau berapa huruf, mau berapa kalimat. Namun, bagi sebagian orang, ini bisa jadi kelebihan, bisa pula kekurangan.
Kekurangan :
  • Seperti yang saya sebutkan pada poin 2 kelebihan di atas, bagi sebagian orang, cara ini sedikit merepotkan karena harus menempatkan kode-kode tersebut secara manual pada postingan.
  • Hanya berfungsi untuk membuat "Read More", tidak bisa membuat thumnail seperti langkah kedua.
Cara Kedua
Kelebihan :
  • Bisa membagi tulisan yang ditampilkan pada halaman depan secara otomatis.
  • Bisa membuat thumnail posting dari gambar yang kita masukkan pada postingan.
Kekurangan :
  • Blog menjadi sedikit tambah berat karena menggunakan javascript.
  • Bagi sebagin orang, pembagian artikel secara otomatis tersebut membuat kita tidak bisa menentukan sampai batas mana yang akan dimunculkan di halaman depan ketika menulis posting.

Bookmark and Share

POSTINGAN LAIN YANG BERHUBUNGAN :




Dapatkan Tutorial Website Via Email:
Setelah membaca artikel diatas, jangan lupa ngasi komentar ya...

17 komentar on "Cara Membuat Read More pada Blogspot"



Post a Comment