Related Posts Slide Out Boxes

Langsung aja Berhubung postingan kali ini permintaan dari teman facebook saya, karena fitur ini dari Tympanus.net dan di tutorial tersebut tidak dijelaskan bagaimana cara menerapkanya di Blogger jadi disini saya akan membahas bagaimana cara memasang Related Posts Slide Out Boxes di Blogger.
Baiklah, fitur kali ini menurut saya sedikit kurang pengunaan feed jadi proses pengantian related posts harus secara manual, Berikut screenshot dari Tympanus dan Demo
Screenshot di ambil dari tympanus.net
  1. Pergi ke Template/Rancangan > Edit Html
  2. Cari kode <b:skin> dan letakan kode CSS berikut diatas kode <b:skin>
    <link href='http://tympanus.net/Tutorials/RelatedPostsSlideOuts/css/style.css' media='screen' rel='stylesheet' type='text/css'/>
  3. Selanjutnya cari </body> dan letakan kode JS berikut diatas kode </body>
  4. Sekarang letakan struktur HTML ini juga diatas kode </body>

    Struktur diatas hanyalah sebuah contoh jika anda ingin merubah thumbnail image, judul dan link. yang perlu Anda rubah adalah seperti struktur berikut
    <li>
    <div>
    <img height='72' width='72' alt='JUDIL-IMG' src='URL-IMAGE'/>
    <span class='rp_title'>JUDUL-POST</span>
    <span class='rp_links'>
    <a href='LINK-ARTIKEL' target='_blank'>Article</a>
    <a href='LINK-DEMO' target='_blank'>Demo</a>
    </span>
    </div>
    </li>
    Anda bisa menambahkan struktur tersebut minimal 5. Dalam JavaScript kita akan mendefinisikan bahwa hanya menampilkan 5 posting pada suatu waktu. Tentu saja, Anda harus mengganti teks berwana dengan link dan judul Anda.
  5. Terakhir Klik Save Template

0 komentar:

No Spam
And
Live Link