Membuat Auto Read More di Blog

Trik Membuat Auto Read More

data:post.snippet ► berfungsi untuk menampikan potongan artikel

data:post.jumpText ► Sebagai link read more, selengkapnya atau jump link text.

data:post.thumbnailUrl ► miniatur gambar dengan ukuran 72x72.

Nah sudah tau sedikit kode dasarnya, solusi untuk memodifikasi ukuran gambar tentunya menggunakan sedikit pemakaian java script. sebagai berikut :

    <script type='text/javascript'>
    //<![CDATA[
    function redimthumb(url,title,image,size){
    var imagen=image;
    var devolver ='<a href="'+url+'"><img src="'+imagen.replace('/s72-c/','/s'+size+'-c/')+'" title="Leer post completo" alt="'+title+'"/></a>';
    if(imagen!="") return devolver; else return "";
    }
    //]]>

Kode java script yang simple diatas berfungsi untuk menerima alamat posting, gambar, dan ukuran gambar yang kita inginkan. Kode java diatas pun menjadikan gambar miniatur lebih SEO dengan penambahan alt dan title pada kode gambar. Untuk memanfaatkan java script tentunya membutuhkan panggilan berikut adalah kodenya:

    <script type='text/javascript'>document.write(redimthumb(&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;,&quot;<data:post.thumbnailUrl/>&quot;,150));</script>

Keterangan kode untuk yang berwarna merah adalah ukuran gambar untuk memperbesar dari normal 72px ke 150px. Nah bagaimana memsang di template blogger, berikut caranya.

Masuk ke Template ► Edit HTML ► Proceed ► Expand Widget Templates (jangan lupa backup template sobat dulu) kemudian cari kode :

    <p><data:post.body/></p>

Ganti dengan kode :

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <p><data:post.body/></p>
       <b:else/>
          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
            <p><data:post.body/></p>
         <b:else/>
    <b:if cond='data:post.thumbnailUrl'>
       <div class='image-post'>
    <script type='text/javascript'>document.write(redimthumb(&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;,&quot;<data:post.thumbnailUrl/>&quot;,220));</script>
       </div>
          </b:if>
    <b:if cond='data:post.snippet'>
    <p><data:post.snippet/></p>
       <b:else/>
    <p><data:post.body/></p>
      </b:if>
       </b:if>
        </b:if>

Setelah itu masukan kode java scriptnya di atas kode </head>,

    <script type='text/javascript'>
    //<![CDATA[
    function redimthumb(url,title,image,size){
    var imagen=image;
    var devolver ='<a href="'+url+'"><img src="'+imagen.replace('/s72-c/','/s'+size+'-c/')+'" title="Leer post completo" alt="'+title+'"/></a>';
    if(imagen!="") return devolver; else return "";
    }
    //]]>
    </script>

Dan sedikit sentuhan kode CSS taruh diatas kode ]]></b:skin>

    .image-post img {float: left; margin: 0 10px 10px 0;}

Jika sudah klik Save Template dan lihat hasilnya.