Membuat background posting terakhir berbeda

Trik

Saya bertemu hal menarik ketika mengunjungi salah satu blog milik sahabat blogger, yaitu pada setiap posting/artikel yang di publikasikan terakhir/terbaru memiliki background/latar belakang yang berbeda dengan artikel yang di terbitkan sebelumnya. trik ini, di buat agar setiap pengunjung tertarik untuk membaca artikel yang di publikasikan terakhir tersebut dan setelah saya pahami dan teliti, saya menemukan rahasianya.

Kali ini saya akan menunjukkan cara untuk membuat warna latar belakang berbeda pada posting terbaru di Blogger.


Langkah 1: Membuat id warna latar belakang untuk posting/artikel terakhir. Tambahkan kode berikut sebelum kode tag ]]></b:skin> dalam template Anda.

#first-post{background:#DDD}

Langkah 2: Cari tag <b:include data='post' name='post'/>  kemudian ganti kode tersebut dengan kode berikut.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <div id='first-post'>
   <b:include data='post' name='post'/>
  </div>
 <b:else/>
  <b:include data='post' name='post'/>
 </b:if>
<b:else/>
 <b:include data='post' name='post'/>
</b:if>

Warna latar belakang/background ini bisa sobat ganti sesuai keinginan saya hanya menggunakan contoh warna #DDD, dan ini adalah sesuai dengan template saya.

Anda dapat menambahkan atribut lain untuk id pertama dengan tujuan posting/artikel terakhir memiliki banyak style, misal h3, gaya font, border, lebar, tooltip dan lain sebagainya tergantung imajinasi anda.

Selamat mencoba dan semoga berhasil :)

Tidak ada komentar :


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...