Masuk
Share

11 February 2012

Related Posts Slide Out Boxes

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

↑ Ke Konten ↑ 18 Komentar:

  1. hahay akhirnya makasih banget mas.................

    ReplyDelete
  2. gimana cara pakainya ay=tau penempatannya dimana scrip itu yang no.4 kolom ke 2 apa dibuatkan widget HTML

    ReplyDelete
    Replies
    1. script nomer 4 diletakan daitas kode </body>
      bukan sob itu hanya jika anda menambahakn sebua post lagi dalam realted post... karena realted post slide out box ini memang secara manual..?

      Delete
    2. This comment has been removed by the author.

      Delete
    3. saya sudah coba tapi scrip no 3 bari 1 apa harus dihapus...kalu dihapus maka related postnya tidk muncul....bentrok dengan scrip yang sama tapi cmn versinya aja yang beda.....jadi gimana mas donor...mohon pencerahannya

      Delete
    4. bukan begitu sob. jika anda hapus kode no 3 bris 1 maka betul reatednya tidak akan muncul... kode tersebut seharusnya bukan di hapus melainkan harus di edit seperti menganti image, judul dan link.. jika anda bingung bagaimana mengeditnya pada cara ke 4 pada kode baris ke 2 di situ di jelaskanya.. dan kode trsbut juga bisa anda tambahkan lagi diatsa kode </ul>

      Delete
    5. This comment has been removed by the author.

      Delete
    6. hmmmm jadi scrip no 3 ngga papa dan bisa diganti dengan scrip no 4 kolom ke 2 itu mas....atau gimana karena saya sudah coba,,berhasil memang jalan tapi ada efek yang tidak jalan kalau scrip no 3 bris 1 q pasang....tapi klu q hapus efek itu ajlan tapi relatednya ga jalan.....itu saja

      Delete
    7. script ke 4 itu bisa kamu tambahkan di script no 3 sebelum kode </ul>

      Delete
    8. wahh dah berhasil gan....makasih infonya

      Delete
  3. Keren abiss Broder.... suweeeeeerrr.. :))

    ReplyDelete
  4. Mas, boleh requestgak?? Cara bikin navbar kayak di blog ini gimana?? pengen banget punya navbar seperti di blog ini.

    ReplyDelete
  5. ini dia baru tutorial yang bagus,,,,
    mantab kang donor,,,,,,,

    ReplyDelete
  6. mampir dong pada mas bro di blog saya ' bnyak kok tips-tips blog yng perlu anda letehui check TKP >>>>>
    http://putrapatiwara.blogspot.com/

    ReplyDelete
  7. abang, misalkan diganti menjadi entri populer bisa gak bang?

    ReplyDelete