cara membuat readmore dan memasang adsense yang muncul dalam halaman posting

Artikel ini seharunya dipisah menjadi dua, tetapi karna aan ingin rekan-rekan tahu bahwa pada artikel yang selanjutnya masih bertautan dengan artikel yang sekarang, maka sengaja judulnya aan buat jadi panjang.

Yang akan aan jelaskan adalah cara membuat readmore atau baca selengkapnya seperti yang ada dalam blog ini, ketika baca selengkapnya di klik maka akan terbuka seluruh artikel dan muncul adsense. Uuniknya, iklan adsense dalam halaman posting tidak muncul ketika postingan artikel masih sepenggal. Cara ini sepenuhny aan temukan sendiri.Cara ini juga aan gunakan di sebagian besar situs blog milik aan seperti di cominfo-indonesia blog.

Untuk readmore yang akan kita pasang kali ini adalah readmore buatan Hans (www.hackosphere.blogspot.com) yaitu selective expandable post. Bila anda pernah membaca artikela kang rohman (http://kolom-tutorial.blogspot.com/2007/06/read-more-versi-baru.html)yang berjudul " readmore versi baru"(yang notabene artikel-artikelnya mengenai readmore adalah copas terjemahan dari buatan hans juga). Maka fungsi readmore kali ini adalah peyempurnaan dari itu.dan lagi, iklan adsense yang akan dimunculkan dalam halaman postingan lengkap yangkan saya terangkan di artikel selanjutnya tidak akan bisa diterapkan dalam blog anda bila anda menggunakan readmore yang dijelaskan oleh kang rohman tersebut.

untuk kelebihan readmore yang akan saya terankan dengan yang di jelaskan kang rohman disini, silahakan anda cari sendiri, yang jelas fungsi readmore-nya lebih oke yang ini karna ini adalah versi peyempurnaan..

Cara membuat :

• Login ke akun blogger anda, dari Dasbor pilih tab 'Tata Letak" dari blog yang akan dipasang fungsi readmore


• Pilih tab "edit html".


• Setelah halaman edit html terbuka, beri tanda centang pada kotak kecil disamping tulisan"expand template widget" yang berada dipojok kanan atas dari kotak template blog.


• Cari kode di bawah ini dalam kotak template blog
  
  </head>


• Copy kode dibawah ini dan pastekan tepat di atas kode </head> tadi.
  
  
  
  
  <!--script untuk readmore-->
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
  <script type='text/javascript'>
  
  var fade = false;
  function showFull(id) {
  var post = document.getElementById(id);
  var spans = post.getElementsByTagName(&#39;span&#39;);
  for (var i = 0; i &lt; spans.length; i++) {
  if (spans[i].id == &quot;fullpost&quot;) {
  if (fade) {
  spans[i].style.background = peekaboo_bgcolor;
  Effect.Appear(spans[i]);
  } else spans[i].style.display = &#39;inline&#39;;
  }
  if (spans[i].id == &quot;showlink&quot;)
  spans[i].style.display = &#39;none&#39;;
  if (spans[i].id == &quot;hidelink&quot;)
  spans[i].style.display = &#39;inline&#39;;
  }
  }
  
  
  function hideFull(id) {
  var post = document.getElementById(id);
  var spans = post.getElementsByTagName(&#39;span&#39;);
  for (var i = 0; i &lt; spans.length; i++) {
  if (spans[i].id == &quot;fullpost&quot;) {
  if (fade) {
  spans[i].style.background = peekaboo_bgcolor;
  Effect.Fade(spans[i]);
  } else spans[i].style.display = &#39;none&#39;;
  }
  if (spans[i].id == &quot;showlink&quot;)
  spans[i].style.display = &#39;inline&#39;;
  if (spans[i].id == &quot;hidelink&quot;)
  spans[i].style.display = &#39;none&#39;;
  }
  post.scrollIntoView(true);
  }
  
  function checkFull(id) {
  var post = document.getElementById(id);
  var spans = post.getElementsByTagName(&#39;span&#39;);
  var found = 0;
  for (var i = 0; i &lt; spans.length; i++) {
  if (spans[i].id == &quot;fullpost&quot;) {
  spans[i].style.display = &#39;none&#39;;
  found = 1;
  }
  if ((spans[i].id == &quot;showlink&quot;) &amp;&amp; (found == 0))
  spans[i].style.display = &#39;none&#39;;
  }
  }
  
  </script>
  </b:if>
  
  
  <!--end of script redamore-->
  
  



• selanjutnya scroll kebawah dan cari kode seperti dibawah ini:
  
  

  <div class='post-body'  expr:id='"post-" + data:post.id' >
  
     <b:if cond='data:blog.pageType == "item"'>
        <style>#fullpost{display:inline;}</style>
        <p><data:post.body/></p>
     <b:else/>
        <style>#fullpost{display:none;}</style>
  
        <p><data:post.body/></p>
  
       <span id='showlink'>
        <a expr:href='data:post.url'>Read More......</a>
       </span>
       <script type='text/javascript'>
         checkFull("post-" + "<data:post.id/>");
       </script>
     </b:if>
  
     <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>

  
  
  kode yang warna hitam adalah kode asli dari template blog yan harus anda cari. sedangkan kode yang warna merah adalah kode yang harus di tambah kedalam template blog rekan-rekan.


• Klik tombol "simpan template."


• Selanjutnya, klik menu "pengaturan"


• Klik menu "format"


• Scroll kebawah, lalu cari kotak kosong disamping tulisan "template posting"


• Copy kode berikut dan pastekan kotak kosong tersebut
  
  

  tulis ringkasan posting artikel disini
  
  <span id="fullpost">
  
  tulis lanjutan posting artikel disini
  
  </span>

  
  


• Klik tombol "simpan setting"


• Selesai.

CARA POSTING ARTIKEL

Pada saat rekan rekan ingin memposting artikel dan berada di halaman posting, pilih tombol menu yang 'EDIT HTML", jangan memilih tombol yang "COMPOSE". maka, secara otomatis, kode tadi akan terlihat di kotak postingan blog.

tulis ringkasan posting artikel disini

<span id="fullpost">

tulis lanjutan posting artikel disini

</span>

Tulis ringkasan artikel yang mau ditampilkan dimuka sebelum atau diatas kode

<span id="fullpost"> dan sisa keseluruhan artikel di tulis setelah kode tersebut dan sebelum kode </span>. Untuk artikel yang pendek, rekan-rekan tinggal menghapus kode tersebut, maka secara otomatis tulisa "readmore" akan hilang dari artikel rekan-rekan.

SELAMAT NGEBLOG...

LET'S ROCK INDONESIA WITH BLOGGING ACTIVITY!!!!! VIVA BLOGGER!