468x60 Ads

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 Kommentare:

Kommentar veröffentlichen