Minggu, 24 April 2011

More Read Not

1 dengan membuat "Read More" atau semacamnya, postingan yang tampil pada halaman utama hanya bagian-bagian tertentu saja. Dan untuk menampilkan semua bagian postingan, harus masuk ke halaman postingan tersebut. Tutorial ini aku dapat dari www.isnaini.com.
Caranya:


  • Masuk ke account blogger, pilih "Layout" dan "Edit HTML",



  • Centang "Expand widget Template",



  • Masukkan kode di bawah sebelum tag </head> dan setelah ]]></b:skin>
    <style>
    <b:if cond='data:blog.pageType == "item"'>
     span.fullpost{display:inline;}
    <b:else />
     span.fullpost{display:none;}
    </b:if>
    </style>



  • Kemudian, untuk menambahkan tulisan "Read More" atau semacamnya, cari kode <data:post.body/>, dan tambahkan di bawahnya:
    <b:if cond='data:blog.pageType != "item"'>
    <a expr:href='data:post.url'>Read More</a>
    </b:if>



  • Untuk mengatur postingan yang "tersembunyi", tambahkan tag <span class="fullpost"> Postingan yang disembunyikan </span> di postingan Anda.
    Contoh:
    Ini adalah pembuka dari postingan saya, dan saya ingin menampilkannya di halaman depan. <span class="fullpost">Dan ini adalah isi dari postingan saya, saya tidak ingin menampilkannya di halaman depan</span>
    Dan hasilnya akan seperti ini:
    Ini adalah pembuka dari postingan saya, dan saya ingin menampilkannya di halaman depan. Read More
    2 kita sudah membahas tentang bagaimana membuat "Read More" pada postingan sebelumnya. Tapi "Read More" pada postingan ini berbeda. Cukup dengan mengklik tulisan "Read More" posting yang disembunyikan langsung akan terlihat.
    Caranya:
    1. Masuk ke account Blogger, pilih "Layout" dan "Edit HTML",
    2. Centang "Expand widget Templates",
    3. Masukkan kode di bawah sebelum tag </head> dan setelah ]]></b:skin>
      <style>
      <b:if cond='data:blog.pageType == "item"'>
        span.fullpost{display:inline;}
      <b:else />
        span.fullpost{display:none;}
      </b:if>
      </style>
      
      <script type="text/javascript">
      function showHidePost(obj){
       var sib = obj;
       while(sib.previousSibling){
           sib = sib.previousSibling;
           if(sib.className != "fullpost"){continue;}
           sib.style.display = obj.showed ? "none" : "inline";
           obj.showed = !obj.showed;
           obj.innerHTML = obj.showed ?
                          "[-] sembunyikan" : "[+] selengkapnya...";
       }
      }
      </script>
    4. Kemudian, untuk menambahkan tulisan "Read More" atau semacamnya, cari kode <data:post.body/>, dan tambahkan tepat di sampingnya:
      <b:if cond='data:blog.pageType != "item"'>
      <a href='javascript:void(0)'
         onclick='showHidePost(this)' >
          [+] selengkapnya...
      </a>
      </b:if>
    5. Sama seperti "Read More" versi pertama, masukkan tag <span class="fullpost"> Konten yang disembunyikan </span> pada postingan kamu. Contoh:
      Ini adalah konten yang ingin aku tampilkan di halaman utama. <span class="fullpost"> Sedangkan yang ini adalah konten yang ingin aku sembunyikan. </span>
      Dan hasilnya akan seperti ini:
      Ini adalah konten yang ingin aku tampilkan di halaman utama. [+] selengkapnya...
  • Tidak ada komentar:

    Posting Komentar