Home Trik Blogger Tutorial Membuat Redmore Otomatis Di blog

Tutorial Membuat Redmore Otomatis Di blog

by Mas Admin

Cara Membuat Redmore Otomatis di Blog– Readmore merupakan salah satu upaya untuk menciptakan template kelihatan bagus dan keren readmore atau juga kerap di buat dengan tulisan “baca sekompleksnya”, atau lanjut membaca, atau next read, dan lain sebagainya merupakan kode untuk merubah tampilan artikel blog di hompage sesampai kemudian artikel lebih ringkas dan lebih pendek, seperti ada di blog admin ini menggunakan script readmore dan sebenarnya kaya sekali blogger yang memasang readmore di blog mereka dan mereka pada umumnya terdapat readmore yang berbeda-beda dan ini merupakan salah satunya berikut merupakan cara menciptakan nya apabila anda ingin melihat hasilnya.

 Readmore merupakan salah satu upaya untuk menciptakan  Tutorial Membuat Redmore Otomatis Di blog

Berikut merupakan

Cara Membuat Readmore / Baca Sekompleksnya 

  1. Pertama merupakan masuk ke blogger milik anda
  2. Pilih TEMPLATE dan “EDIT TEMPLATE” lalu cari kode </head> gunakan tombol CTRL + F pada keyboard  untuk mencari kode </head>  nya, lalu copy kode warna biru di awah ini pastekan di atas kode </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; //kayanya huruf apabila tak ada gambar
    summary_img = 190; //kayanya huruf apabila 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 mengganti kode yang berwarna merah dengan mengatur sesuai keinginan anda.
  3. Lalu berikut merupakan dengan mencari kode <data:post.body/> (cara mencarinya sama dengan cara pada nomer 2 dengan menekan tombol pada keyboard CTRL + F ) apabila sudah ketemu silahkan mengganti kode  <data:post.body/> dengan kode warna biru di bawah ini. note : sebab setiap template berbeda sebab kode  <data:post.body/> ini ada lebih dari satu maka anda 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 mengganti kata readmore dengan kata sesuka anda
  4. Jangan lupa untuk menyimpan template nya. . 

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

You may also like