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 == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</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'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<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'>
</div></div>
</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 == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</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'>
<div class="date-posts">
</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 == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<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'>
</div></div>
</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:
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:
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...?
Taufik Nurrohman
Blogspot tidak secanggih itu.
Libra Yanada Sembiring
Terima kasih gan, sudah saya terapkan, dan hasilnya mantap :)
IslamnyaMuslim
gan kalau di wordpress caranya bagaimana yah?
Taufik Nurrohman
Coba Mecha CMS dulu deh mas, ntar Saya ajari hehe… :D
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.