Cara Membuat Judul Posting Blog Dropdown. Saat link judul diklik, tidak membuka halaman baru, tapi membuka isi tulisan.

Demonya ada di Template Blog Help Desk. Silakan klik judul di sana, akan kebuka isi tulisan, tanpa membuka halaman gres (Single Post).

Cara Membuat Judul Posting Blog Dropdown Cara Membuat Judul Posting Blog Dropdown
Penampakan Judul Halaman Depan.

Cara Membuat Judul Posting Blog Dropdown Cara Membuat Judul Posting Blog Dropdown
Penampakan Judul & Isi Posting Setelah Diklik.*

Kalau Anda berminat memakai template tersebut, ada di Template Magazine Terbaru.

CB belum tahu apa nama istilah desain judul posting model unik begini. Yang jelas, di kodenya sih ada nama Archiv Post Head. Kita sebut saja desain Judul Posting Dropdown atau Toggle Post.

Jika blog judul-judul posting blog halaman depan Anda mau dibentuk menyerupai Help Desk itu, diklik judul keluar isi berita, maka berikut ini cara memasangnya:

1. Template > Edit HTML
2. Copas instruksi berikut ini di atas instruksi </head> atau </body>

    <script type='text/javascript'>
      //<![CDATA[
      $(document).ready(function(){
        $('.archivposthead').click(function(){
          postId = $(this).attr("id");
          $('#summary'+postId).toggle();
          link = $(this).attr("href");
          window.history.pushState("Just browsing", "Title", link);
          return false; 
        });
      });
      //]]>
    </script>

3. Cari instruksi judul posting halaman depan. Bisanya menyerupai ini:

<h2 class='post-title entry-title'>
                            <a expr:href='data:post.url' expr:id='data:post.id'>
                              <data:post.title/>
                            </a>
                          </h2>

4. Tambahkan kode class='archivposthead' menjadi begini:

<h2 class='post-title entry-title'>
                            <a class='archivposthead' expr:href='data:post.url' expr:id='data:post.id'>
                              <data:post.title/>
                            </a>
                          </h2>

5. Save Template!

Selesai. Good Luck! (http://www.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours