Kamis, 07 November 2013

Cara membuat Readmore Otomatis

Kawan Blogger semua sudah pasti tahu apa itu Readmore / selengkapnya atau apalah namanya yang berfungsi untuk memotong / memenggal isi Artikel, :q; di Home Page, yang pada Template Modern sudah terisi secara tak langsung, begitu juga pada Editor [tempat menulis artikel] juga sudah ada fasilitas dimaksud :z; seperti gambar berikut


karena sifatnya default dan manual yang menyebabkan banyaknya suka kata yang kita potong besar kemungkinan tidak sama :y;
Readmore / Selengkapnya yang saya bahas sekarang ini khusus untuk kawan Blogger yang Blognya tidak berisi Readmore atau untuk kawan Blogger yang ingin mencoba ber-Kreasi dengan Readmore Otomatis seperti yang saya pakai pada Blog ini
Caranya :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML - Lanjutkan
  • Copas Kode berikut diatas ]]></b:skin>
.jump-link a{-moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;float:right;padding: 0 12px; background: transparent; color: #456069;font-style: normal;border:0px solid #333;margin: 0 5px;text-decoration:none;  text-shadow: 2px 2px 2px #FFF; font-family: Segoe Print;font-size: 14px;} 
.more a:hover, .jump-link a:hover{background: transparent;color:#F00;text-shadow: 2px 2px 2px #FFF;text-decoration:none; }
  • Selanjutnya copas script berikut diatas </head>
<SCRIPT type=text/javascript> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 250; img_thumb_height = 50; img_thumb_width = 50; </SCRIPT> <SCRIPT src=https://sites.google.com/site/blogbegocreation/javascript/readmore-otomatis.js type=text/javascript/> 
  • Simpan sementara Template kawan
  • Beri tanda check  disamping Expand Template Widget
  • Cari <data:post.body/> yang pertama yang kode kurang lebih sebagai berikut 

    <div class=post-header-line-1/>
    <div class=post-body entry-content>

      <data:post.body/>
<b:if cond=data:post.hasJumpLink>
      <div class=jump-link>
        <a expr:href=data:post.url + &quot;#more&quot;><data:post.jumpText/></a> 
      </div>
    </b:if> 
      <div style=clear: both;/> <!-- clear for photos floats -->
    </div>
  • Ganti semua script yang saya beri warna Biru dengan script berikut

 <div class=post-body entry-content>
<b:if cond=data:blog.pageType == &quot;item&quot;>
<data:post.body/>
<b:else/>
<DIV expr:id=&quot;summary&quot; + data:post.id><p><data:post.body/></p></DIV> <SCRIPT type=text/javascript>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</SCRIPT>    
</b:if></div>
<b:if cond=data:blog.pageType != &quot;item&quot;>
<div style=float:right; padding: 0 5px; margin: -5px 0 -15px 0; >
                  <div class=jump-link><a expr:href=data:post.url target=_blank>Selengkapnya..... </a>
</div></div></b:if>

  • Simpan Template kawan
Ini hanyalah salah satu contoh Readmore Otomatis dari sekian banyak model yang ada, silahkan kawan men-Kreasikan sesuai seninya masing-masing :w;



0 komentar:

Posting Komentar