Cara Menciptakan Redmore Otomatis Di Blog

Diposting pada

Cara Membuat Redmore Otomatis di Blog– Readmore ialah salah satu upaya untuk menciptakan template kelihatan anggun dan keren readmore atau juga sering di buat dengan goresan pena “baca selengkapnya”, atau lanjut membaca, atau next read, dan lain sebagainya ialah instruksi untuk merubah tampilan artikel blog di hompage sehingga artikel lebih ringkas dan lebih pendek, menyerupai ada di blog aku ini memakai script readmore dan bersama-sama berbagai blogger yang memasang readmore di blog mereka dan mereka pada umumnya mempunyai readmore yang berbeda-beda dan ini ialah salah satunya berikut ialah cara menciptakan nya kalau sahabat ingin melihat hasilnya.

 Readmore ialah salah satu upaya untuk menciptakan  Cara Membuat Redmore Otomatis Di blog

Berikut adalah

Cara Membuat Readmore / Baca Selengkapnya 

  1. Pertama ialah masuk ke blogger milik sobat
  2. Pilih TEMPLATE dan “EDIT TEMPLATE” kemudian cari kode </head> gunakan tombol CTRL + F pada keyboard  untuk mencari instruksi </head>  nya, kemudian copy instruksi warna biru di awah ini pastekan di atas instruksi </head>  
    <b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
    <b:if cond=’data:blog.pageType != &quot;item&quot;’>
    <style>
    .post-body{text-align:justify;}
    .post-body img{max-width:none;width:auto;}
    .read-more{float:left; padding-top: 10px;}
    .read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
    .read-more a:hover{text-decoration:none;background:#666;}
    .pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
    .grow img{height:165px;width:250px;transition: all 2s ease;}
    .grow img:hover{width:300px;height:250px;}
    </style>
    <script type=’text/javascript’>
    var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
    summary_noimg = 200; //banyaknya karakter kalau tidak ada gambar
    summary_img = 190; //banyaknya karakter kalau ada gambar
    img_thumb_height = 165;
    img_thumb_width = 250;
    </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 = ‘<div class=”grow pic”><img src=”‘+img[0].src+’” width=”‘+img_thumb_width+’px” height=”‘+img_thumb_height+’px”/></div>’;summ = summary_img;}}var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;div.innerHTML = summary;}
    //]]></script>
    </b:if>
    </b:if>

    Keterangan : Silahkan ganti instruksi yang berwarna merah dengan mengatur sesuai impian sobat.
  3. Lalu berikut ialah dengan mencari instruksi <data:post.body/> (cara mencarinya sama dengan cara pada nomer 2 dengan menekan tombol pada keyboard CTRL + F ) kalau sudah ketemu silahkan ganti kode  <data:post.body/> dengan instruksi warna biru di bawah ini. note : karena setiap template berbeda karena kode  <data:post.body/> ini ada lebih dari satu maka sobat dapat mencoba dari mulai yang paling bawah
     <b:if cond=’data:blog.pageType == &quot;item&quot;’>
    <data:post.body/>
    <b:else/>
    <b:if cond=’data:blog.pageType == &quot;static_page&quot;’>
    <data:post.body/>
    <b:else/>
    <div expr:id=’&quot;summary&quot; + data:post.id’><data:post.body/></div>
    <script type=’text/javascript’> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
    </script>
     <div class=’read-more’>
     <a expr:href=’data:post.url’>Read More.. &#187;</a>
     </div>
    </b:if>
    </b:if>

    silahkan ganti kata readmore dengan kata sesuka sobat
  4. Jangan lupa untuk menyimpan template nya. . 

Terima kasih selamat memasang kode read more nya di blog biar blognya tambah keren dan tambah