Blog Kang Miftah

miftah

Auto Readmore Untuk Blogger/Blogspot Otomatis – banyak para sobat blogger yang masih kebingungan bagaimana cara membuat readmore secara otomatis di blog mereka, walaupun banyak sekali artikel-artikel yang membahas dan mengulas bagaimana cara membuat readmore otomatis. Hal ini disebabkan karena banyaknya artikel yang copas padahal si pemilik blog sendiri tidak faham dengan caranya dan lucu kalau kita komentari di blog mereka-mereka si pemilik blog hanya bengong mau berbuat apa. Disini saya akan menjelaskan cara membuat readmore otomatis secara detail sehingga blogger pemula sekalipun bisa membuatnya tentu dengan tutorial yang mudah dan singkat.

Auto Readmore Untuk Blogger/Blogspot Otomatis-Giga Watt

Sebelumnya kita bahas Cara Membuat Auto Readmore mungkin para blogger pemula atau newbie bingung dan bertanya apa itu readmore?. Read more adalah penggalan dari sebuah artikel blog yang kegunaannya untuk merapikan artikel beberapa potongan artikel yang kita tulis dan tentu potongan gambar yang rapi sehingga terkesan akan simple di bagian Beranda atau Home di blogspot, Auto readmore biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata “READMORE”, “BACA SELENGKAPNYA”, ” LANJUTKAN MEMBACA”, dll. mungkin sudah pada paham ya... kalaupun belum paham bisa dilihat di halaman muka blog Giga Watt ini.

Mari kita lanjut kepembahasan pokok serta tutorial Auto Readmore ini.silahkan sobat langsung saja menuju halaman Edit Templat Blogspot. kalau sobat masih bingung dengan Edit Templat Blogspot terbaru silahkan sobat browsing dulu ke google dengan kata kunci Tutorial Edit Template Blogspot Versi Terbaru, saya anggap sobat sudah paham untuk cara edit template, sekarang lihat script dibawah ini

Buka Kodenya >>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-body {text-align:justify;}
.post img{transition:all 400ms ease-in-out;}
.post img:hover{opacity:.7;}
.read-more{float:left; padding-top: 10px;border:0}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#aa0000; text-decoration:none;font:bold 13px Arial;padding:5px; }
.read-more a:hover{text-decoration:none;background:#333;}
</style>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 130;//ukuran tinggi gambar
img_thumb_width = 180;//ukuran lebar gambar
</script>
<script type='text/javascript'>
//<![CDATA[
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(thumbnail_mode == "yes") {
    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>
</b:if>
</b:if>

NB :pada warna merah diatas sobat bisa ganti dengan warna yang sobat suka dan waarna itu adalah warna auto readmore yang akan terlihat dihalaman homepage blog kalian untuk mengetahui warna gambar HTML sobat bisa buka halaman Tool Kode Warna Giga Watt. untuk yang berwarna biru sudah saya tandai dengan artikel yang akan ditampilkan serta ukuran gambar yang bisa sobat sesuaikan sendiri.

kalau sobat sudah paham dengan script yang saya paparkan diatas sekarang silahkan sobat cari kode </head> di edit templat kalian tadi. kalau sudah menemukan kodenya soba taruh kode diatas tepat diatasnya. saya anggap sobat sudah menaruh kodenya, sekarang kita lanjutkan.

untuk melanjutkan tutorial ini sobat lihat dulu gambar dibawah ini agar tak bingung.

1.klik drop down LOMPAT KE WIDGET pada Edit templat kalian.
2.silahkan pilih menu BLOG1

3.cari kode id='post' var='post' seperti gambar diatas kalau sudah silahk klik panah yang berada di kiri script tersebut maka akan terbuka beberapa script.

4.cari kode <data:post.body/> kalau sudah menemukan kodenya ganti dengan kode script dibawah ini.

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
      <div class='read-more'>
      <a expr:href='data:post.url' expr:title='data:post.title'>Baca Selengkapnya »</a>
      </div>
</b:if>
</b:if>

5.kalau kode <data:post.body/> sudah sobat ganti dengan kode script diatas sekarang silahkan save/simpan dan lihat hasilnya di halaman blogspot kalian.

itulah tutorial cara membuat Auto Readmore Untuk Blogger/Blogspot Otomatis ala si admin Giga Watt. kelihatannya mungkin agak sulit namun aslinya kalian tak akan kesulitan kalau kalian cermati dengan tutorial diatas, semoga artikel yang saya bagikan kali ini bermanfaat buat sobat blogger. untuk mengetahui updatan terbaru dari blog Giga Watt sobat bisa ikuti dengan menembahkan email di kolom bawah postingan ini. sobat akan selalu mendapat kiriman artikel terbaru dari gigawatt ke email sobat. silahkan mencoba semoga berhasil. untuk yang masih bingung silahkan hubungi saya di halaman kontak

Blog Kang Miftah

Tips Blogspot - Teknik Listrik

Auto Readmore Untuk Blogspot Otomatis

0 komentar:

Posting Komentar