Menciptakan Tampilan yang Berbeda Hanya Pada Posting Pertama

Ini adalah contoh tampilan pembangun deret posting yang masih normal (loop posting):

<!-- posts -->
<div class='blog-posts hfeed'>
  <b:include data='top' name='status-message'/>
  <data:defaultAdStart/>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.isDateStart'>
      <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-outer&quot;&gt;
    </b:if>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-posts&quot;&gt;
    </b:if>
    <div class='post-outer'>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
      <b:if cond='data:post.isFirstPost'>
        <data:defaultAdEnd/>
      <b:else/>
        <data:adEnd/>
      </b:if>
      <div class='inline-ad'>
        <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
  </b:loop>
  <b:if cond='data:numPosts != 0'>
    &lt;/div&gt;&lt;/div&gt;
  </b:if>
  <data:adEnd/>
</div>

Dan ini adalah loop posting yang sudah dimodifikasi:

<!-- posts -->
<div class='blog-posts hfeed'>
  <b:include data='top' name='status-message'/>
  <data:defaultAdStart/>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.isDateStart'>
      <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-outer&quot;&gt;
    </b:if>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-posts&quot;&gt;
    </b:if>
    <div class='post-outer'><b:if cond='data:post.isFirstPost'>
      <div class='first-post'><b:include data='post' name='post'/></div>
    <b:else/>
      <b:include data='post' name='post'/>
    </b:if>    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
      <b:if cond='data:post.isFirstPost'>
        <data:defaultAdEnd/>
      <b:else/>
        <data:adEnd/>
      </b:if>
      <div class='inline-ad'>
        <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
  </b:loop>
  <b:if cond='data:numPosts != 0'>
    &lt;/div&gt;&lt;/div&gt;
  </b:if>
  <data:adEnd/>
</div>

Kode di atas akan secara otomatis meliputi posting pertama dengan elemen <div class='first-post'>, sehingga kita bisa melakukan sesuatu dengan kelas itu untuk mengubah tampilannya:

.first-post {border:10px solid red}
.first-post .post {font-size:150%}

Kuncinya ada pada kondisional <b:if cond='data:post.isFirstPost'>

18 Komentar

  • abang ichal

    oo itu 'hanya' yaa..
    klo untuk berbeda smuanya, mesti edit lagi nh di tiap postnya. hehe

  • Beben Koben

    seperti yg ada disini ya artistutorial :D

    • Taufik Nurrohman

      Saya dapatnya dari Vagabundia. Cuma modelnya dia menggunakan ini untuk menciptakan posting “read-more” selain pada posting pertama. Yang penting tahu dulu mengenai data:post.isFirstPost. Mengenai pengambangan bisa ditulis lain waktu.

      Sebenarnya sih, kalau cuma ingin membedakan tampilan posting pertama dibandingkan dengan posting yang lain, memakai selektor CSS yang sudah ada juga bisa:

      #main .post:first-child {}
      #main .post:first-child .post-title {}
      #main .post:first-child .post-body {}
      • Beben Koben

        oo dr sana toh :D
        yg ini gmn nih buatnya
        loseasi.blogspot.com/2011/05/agregar-una-id-unica-cada-post-o.html
        hihihi :D

  • Unknown

    Mas, mau tanya gmn cara mengembalikan Gadget Header/Judul yg ada di tata letak yg sudah hilang, maaf ini mas soalnya masih pemula. :D

  • azewdsignet

    mas`taufik numpang tanya kalau di blog saya saat di klik lebel setiap isi posting tampil artikel ya !! :( kalu bingung bisa liat dulu mas Blog saya || http://zewdsignet.blogspot.com/ terimakasih sebelumnya.

  • azewdsignet

    jadi setiap klik lebel contohnya lebel CSS itu pas di klik keluar semua sampe artikel ya, mksud saya jadi cuman waktu di klik hanya keluar Judul saya thumbail saja..!! mohon bantuanya mas taufik :D

  • Unknown

    saya udah pake cara ini tapi kok postingan pertama nya jadi ada dua ya? yang pertama yang udah di edit css nya, sedangkan yang kedua yang postingan bawaan nya. cara ngapus first post yang kedua (bawaan) gimana ya?

    • Taufik Nurrohman

      Coba seperti ini:

      <b:if cond='data:post.isFirstPost'>
      &lt;div class=&#39;first-post&#39;&gt;
      </b:if>
      <b:include data='post' name='post'/>
      <b:if cond='data:post.isFirstPost'>
      &lt;/div&gt;
      </b:if>
      • Randy

        masih jadi dua bang post pertamanya

        • Anonim

          wah iya mas, postingan pertama masih ada dua :(

  • Randy

    bang masih bingung gimana kalo dia itu old post sama recent pos :) ? bisa gak dimanipulasi kayak b templates itu loh ada kayak ribbon diatasnya

  • RizkyKR

    lalu bagaimana kode untuk memasukkan elemen setelah posting ke-2 atau ke-3 dan seterusnya...?

  • Libra Yanada Sembiring

    Terima kasih gan, sudah saya terapkan, dan hasilnya mantap :)

  • IslamnyaMuslim

    gan kalau di wordpress caranya bagaimana yah?

  • Mas Iwan

    Kalau Kode di artikel ini akan Secara otomatis meliputi posting pertama, gimana kalau kita mau buat tag yang berbeda untuk posting kedua dan ketiga mas..? Tapi menggunakan class khusus seperti ini mas.

Komentar telah ditutup.