Mecha versi 2.6.3 sudah dirilis!

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...?

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.