Cara Membuat Penggalan Artikel (Read More)



Setelah oketrik bagikan cara menulis artikel sekarang oketrik mau bagikan tentang cara Membuat Penggalan Artikel (Read More). Mungkin untuk sobat sekalian yang baru saja membuat blog dan baru selesai menulis artikel pastinya melihat tampilan artikelnya pada homepage (halaman depan). Setelah di lihat ternyata artikel sobat panjang sekali dan kurang enak dilihat apabila artikel sobat panjang di halaman depan. Nah oketrik punya solusinya agar postingan sobat tidak terlalu panjang apabila di lihat di homepage (halaman depan) yaitu dengan cara membuat penggalan artikel.








Oiya sebelumnya oketrik mohon maaf nih kalau baru update lagi, sekarang oketrik menulis lagi dan kemungkinan untuk kedepannya agak jarang update, bukan karena malas tapi karena ada kesibukan yang harus di selesaikan di dunia nyata, y sudah sekarang kita kembali ke pembahasan. Sebenarnya cara membuat penggalan artikel ini ada 2 cara yaitu cara yang menggunakan fasilitas dari blogger dan menggunakan sedikit script untuk menggunakan penggalan artikel. eh sobat kita langsung aja yuk ke langkah pembuatannya.



Cara yang menggunakan fasilitas dari blogger

  1. Pertama kita login dulu ke blogger






  2. Masuk ke entri baru, disana sobat tulis artikel
  3. setelah selesai menulis artikel jangan di terbitkan dulu apabila ingin menggunakan fasilitas penggalan artikel dari blogger
  4. nah kalau selesai menulis, silahkan sobat pilih dari mana saja artikel itu ingin di potong agar tidak terlihat semua pada halaman depan
  5. setelah memilih sobat klik icon seperti



    oketrik-readmore



  6. Setelah mengkliknya sobat dapat menerbitkannya
Sekarang coba lihat artikel yang tadi baru sobat terbitkan di halaman depan blog sobat, tidak panjangkan tampilannya? ini bukan berarti artikel sobat tidak bisa di baca sepenuhnya, nah kalau ingin membaca semuanya sobat dapat mengklik tulisan Baca Selengkapnya >> (Tampilan Default Blogger) Trus tulisan tersebut bisa diganti dengan tulisan yang lain tidak? tentu saja bisa sobat, mari kita lihat langkah mengganti tulisan Baca Selengkapnya >>

  1. mari kita menuju ke halaman Rancangan (dulunya tata Letak) >> elemen Halaman






  2. nah pada elemen posting sobat klik tulisan edit





  3. setelah itu cari tulisan Baca Selengkapnya dan ganti dengan tulisan yang ingin sobat tampilkan, misalnya : Lanjutin Yuk bacanya >> atau Baca lanjutannya






  4. nah kalau sudah sobat simpan deh
  5. selesai
Nah Cara Membuat Penggalan Artikel (Read More) yang menggunakan fasilitas dari blogger sudah sekarang kita lihat cara ke-2-nya.



Cara menggunakan dengan penambahan Script pada template

  1. Login ke blogger masuk ke Rancangan (dulunya tata letak) >> Edit HTML




  2. sebelum melakukan trik ini sebaiknya backup terlebih dahulu template sobat, agar tidak terjadi hal yang tidak dinginkan
  3. Setelah berada pada halaman Edit HTML sobat klik kotak kecil di samping tulisan Expand Template Widget (baca : Mengenal Edit HTML)
  4. setelah itu, cari kode </head> lalu tambahkan kode di bawah ini tepat di atasnya



    <script type='text/javascript'>

    var thumbnail_mode = "float" ;


    summary_noimg = 300;

    summary_img = 300;

    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>




    Penjelasan :







    • 300 >> ini menunjukan karakter artikel yang di penggal tanpa gambar, sobat dapat menentukan berapa karakter yang di tampilkan apabila tidak ada gambar
    • 300 >> ini menunjukan karakter artikel yang di penggal dengan gambar, sobat dapat menentukan berapa karakter yang di tampilkan apabila dengan gambar
    • 120 >> ini adalah ukuran tinggi dari gambar yang terdapat pada penggalan artikel apabila artikel sobat terdapat gambar, sobat dapat mengaturnya
    • 120 >> ini adalah ukuran lebar dari gambar yang terdapat pada penggalan artikel apabila artikel sobat terdapat gambar, sobat dapat mengaturnya
  5. setelah itu sobat cari kode <data:post.body/> lalu ganti dengan kode di bawah 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:right'><a expr:href='data:post.url'>Baca Selengkapnya >></a></span>


    </b:if>

    <b:if cond='data:blog.pageType == "item"'><data:post.body/><




    Penjelasan :







    • Baca Selengkapnya >> >> ini adalah tulisan yang akan muncul pada penggalan artikel sobat, sobat dapat menggantinya dengan kata-kata yang lain atau dapat sobat ganti juga dengan gambar, nah kalau untuk gambar sobat harus menulisnya seperti ini <img src="ALAMATGAMBARSOBATTARUHDISINI"/>


  6. Setelaj itu sobat dapat menyimpannya
Masing-masing trik di atas memiliki kekurangan dan kelebihan, cara yang pertama memiliki kekurangan yaitu tidak otomatis memenggal artikel sobat dan kelebihannya apabila sobat ingin mengganti template trik ini masih akan terus berfungsi, kekurang dari trik ke-2 yaitu apabila sobat mengganti template yang tidak tersedia fasilitas Read More-nya maka artikel sobat tidak akan terpenggal jadi akan terlihat sepenuhnya di halaman depan sedangkan kelebihannya yaitu apabila sobat sudah melakukan trik ke2 ini dengan benar maka apabila sobat menulis artikel, sobat dapat menerbitkannya tanpa harus menggunakan cara seperti pada langkah pertama. Mungkin hanya sekian dari oketrik, kurang lebihnya mohon dimaafkan. terima kasih dan Salam OT.





    Comments