Artikel ini menjelaskan bagaimana cara memasang artikel terkait dengan gambar/thumbnail di blogspot/blogger. Dengan tampilan yang berbeda dari yang sudah ada serta menggunakan jQuery ajax sehingga pemanggilannya dapat lebih cepat.

Artikel Terkait dengan Gambar/Thumbnail - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Artikel ini menjelaskan bagaimana cara memasang artikel terkait dengan gambar/thumbnail di blogspot/blogger. Dengan tampilan yang berbeda dari yang sudah ada serta menggunakan jQuery ajax sehingga pemanggilannya dapat lebih cepat.

Artikel Terkait dengan Gambar/Thumbnail

Artikel Terkait dengan Gambar/Thumbnail


Bagi seorang blogger widget seperti ini tidaklah asing. Memunculkan suatu artikel yang terkait pada artikel yang sedang dibaca dapat pula meningkatkan pageview seta menurunkan bounce rate (dalam google analytic(lebih kecil lebih baik)).

Nah kali ini saya akan membagikan cara menampilkan artikel terkait dengan Gambar/Thumnail. Mungkin kalian sudah banyak melihat widget seperti ini. Tapi ini sedikit berbeda, pada code dari widget ini jika tidak ada artikel yang sejenis (memiliki label yang sama/hanya satu artikel dengan pada label tersebut) maka yang akan tampil adalah artikel terbaru.
Bagi yang berminat untuk menggunakannya silahkan ikuti langkah berikut:

Cara Pemasangan di Blogspot

  1. Masuk ke halaman editor HTML, kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
  2. Salin kode di bawah ini, kemudian letakkan tepat di bawah kode ]]></b:skin>:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type="text/css">
    #related-postsx h4{margin:0;padding:2px 5px;font-size:14px}
    #related-postsx ul,#related-postsx li{list-style:none;margin:0;padding:0;overflow:hidden}
    #related-postsx ul.loadingnya{width:100%;height:50px;background:transparent url(http://4.bp.blogspot.com/-qqwrk3XjD_8/UOMrfs1B5CI/AAAAAAAAHqs/ahtUZYGxN3E/s1600/loading-32-v1.gif) no-repeat 50% 50%}
    #related-postsx li{position:relative;float:left;width:19%;margin:0.5%;height:124px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height: 15px}
    #related-postsx img,#related-postsx .gmbrrltd{width:100%;height:100%;display:block}
    #related-postsx strong,#related-postsx img{-webkit-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s}
    #related-postsx img{-khtml-opacity:0.3;-moz-opacity:0.3;-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(opacity=30)&quot;;filter:alpha(opacity=30);opacity:0.3}
    #related-postsx li:hover img{-khtml-opacity:0.8;-moz-opacity:0.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";filter:alpha(opacity=80);opacity:0.8}
    #related-postsx strong{position:absolute;z-index:2;left:0;top:0;padding:0 5px;height:100%;color:white}
    #related-postsx .gmbrrltd{background:black}
    #related-postsx .jkmt a{position:absolute;z-index:2;bottom:5px;right:5px;padding:0 20px 0 0;background:transparent url(http://4.bp.blogspot.com/-r-w4MiSddGw/UOMtopRek8I/AAAAAAAAHrM/aZkJD0wLnjU/s20/comment.png) no-repeat 100% 0;line-height:20px}
    #related-postsx .dt{position:absolute;bottom:5px;z-index:3;left:5px;color:white;line-height:20px}
    </style>
    </b:if>

  3. Selanjutnya pemasangan kode JS (ada 2 cara):
    CARA 1
    Temukan kode berikut:
    <div class='post-footer'>
    TIP: Tekan CTRL + F kemudian ketik class='post-footer' untuk mempermudah pencarian.
    Salin kode di bawah ini, kemudian letakkan tepat di atasnya:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script defer='defer' src='https://ivyth.googlecode.com/svn/js/related-post-image.js' type='text/javascript'/>
    <div id='artikelterkaitmkr'>
    <script type='text/javascript'>
    //<![CDATA[
    $(window).load(function(){
    relatedPostsWidget({
    related_title: "Artikel Terkait",
    recentTitle: "Artikel Terbaru",
    containerSelector: "#artikelterkaitmkr", 
    blogURL: "URL_BLOGmu",
    maxPosts: 5,
    maxPostsPerTag:5,
    rlt_thumb: 120
    });
    });
    //]]>
    </script>
    </div>
    </b:if>

    Atau kamu juga bisa meletakkan kode tersebut di bawah kode <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'>.
    Intinya, kita akan meletakkan artikel terkait tersebut di bawah posting. Dan sebagian besar kode dengan frase post-footer umumnya memang berada di bawah posting. Begitu saja logikanya.

    CARA 2
    Selain cara di atas juga bisa dengan cara menargetkan didalam class post-body.

    Jika ingin menggunakan cara ini kode diletakkan sebelum </body> dan kode yang digunakan seperti berikut:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script defer='defer' src='https://ivyth.googlecode.com/svn/js/related-post-image.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    $(window).load(function(){
    relatedPostsWidget({
    related_title: "Artikel Terkait",
    recentTitle: "Artikel Terbaru",
    containerSelector: "div.post-body", 
    blogURL: "URL_BLOGmu",
    maxPosts: 5,
    maxPostsPerTag:5,
    rlt_thumb: 120
    });
    });
    //]]>
    </script>
    </b:if>

  4. Jika sudah selesai, klik Simpan Template dan lihat hasilnya

Opsi-opsi Pengaturan

  • blogURL:'' | diisi dengan url Blog anda contoh http://mkr-site.blogspot.com
  • maxPosts:5 | Jumlah maksimal artikel terkait yang muncul (defaultnya 5)
  • maxTags:5 | Jumlah maksimal tag/label yang dicari untuk dijadikan artikel terkait (defaultnya 5)
  • maxPostsPerTag:5 | Jumlah maksimal artikel untuk setiap tag/label (akan terlihat jika hanya satu label/ketika tidak memiliki tag(artikel terbaru yang muncul)). (defaulnya 5))
  • containerSelector:'' | Dimana artikel terkait ini akan dipanggil contoh: <div id="artikelterkaitmkr"></div> maka dituliskan #artikelterkaitmkr
  • relatedTitle:'Related Posts' | Judul Heading dari Artikel terkait (defaultnya Related Posts)
  • rlpBlank:'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif' | Gambar yang tampil jika artikel tidak memiliki gambar (defaultnya http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif)
  • rlt_thumb:70 | Ukuran gambar yang dimuat (defaultnya 70)
  • rlt_monthNames:["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Dec"] | Nama bulan yang tampil
  • recentTitle:'Recent Posts' | Judul Heading dari Artikel terbaru (defaultnya Recent Posts)
NB: Perhatikan tanda "" atau '' pada setiap ingin menambahkan tambahan Opsi kecuali yang angka seperti maxPosts. Juga untuk setiap tambahan opsi diakhiri tanda , (koma) kecuali pada bagian akhirnya

Sumber kode : Moretechtips
Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

25 comments:

  1. Hello MKR, Can you explain to us how you can make a professional responsive blogger template like the tuts for example (in English and with video IF YOU CAN!) because i must use this occasion to learn how to convert or design a responsive blogger template.. and thanks for all your efforts x-)

    BalasHapus
    Balasan
    1. i don't know how to explain it..
      i just use google chrome Inspect element to see HTML code and make custom CSS from that.

      Hapus
    2. ass Wr Wb.
      widget yang bagus mas ,
      o ia mas ,
      cara memberikan efek background hitam transparent pada bagian tanggal dan komentarnya gimana mas ,

      sekalian tuliskan cssnya yah mas ,
      hehehe, :-d
      Ass Wr Wb. :)

      Hapus
    3. @Rizky Ritonga:
      Klo mau memberikan efek hitam sebaiknya juga di atur padding serta diberikan border-radius..
      klo bagian tgl:
      tambahkan kode ini:
      padding: 0 3px;
      border-radius: 2px;
      background: black;
      background: rgba(0, 0, 0, 0.57);

      di dalam :#related-postsx .dt{....}

      klo bagian komentar (#related-postsx .jkmt a{...}):
      ganti paddingnya dari padding:0 20px 0 0 menjadi padding:0 20px 0 3px lalu tambahkan kode ini:
      border-radius: 2px;
      background: black;
      background: rgba(0, 0, 0, 0.57);

      Hapus
    4. Ass Wr Wb.
      ok mas , sudah work , (o)
      o ia mas ,

      Aku Ingin Bertanya Tentang Maintenace,
      Kira" di blog bisa gak mas klok bikin system maintenace ,
      saya cari dari mbah google mah saya gak yakin ,

      efeknya hanya menampilkan gambar menjadi layar penuh saja ,
      apakah blog bisa dibuat menjadi seperti itu..?

      kira" skeksanya begini mas : http://launcher-coolbthemes.blogspot.com/

      apakah bisa saat kita mengedit blog akan ada tampilan seperti ini ketika kita sedang mengeditnya..?
      apakah tidak bisa,,..?

      atau mungkin Bisa dengan menggunakan redirect ke blog lain ketika blog kita ada pertanda maintenace..?

      Hehehe ,
      Perlu Mas , :))
      Saya Sempat Berfikir kalo Ternyata Wordpress JUga Paling Lengkap Disegala Bidang ,
      saya ingin menanyakan ini di Blog DTE:] , namun komentar saya yang kurang berbobot sebelumnya tak terbalas. sedih aku dikacangi disitu. ;((


      Sekian TErima Kasih,
      Ass Wr Wb.

      #Curhat

      Hapus
    5. klo di blogspot sepertinya sulit klo mau membuat maintenance...
      n klo http://launcher-coolbthemes.blogspot.com/ itu sih dalam bentuk file template juga..
      Wordpress (self hosting) memang memiliki kelebihan.. karena dari segi jumlah pengguna WP juga lebih unggul...makanya banyak pengembang web membuat themes premium unutk WP..

      klo merubah tampilan blog sebaiknya buat blog baru dan nanti temanya di ambil dari blog inti..
      dan di blog inti itu dibuat dulu yang sistem maintenance yang layar penuh..
      sedangkan di blog yang baru itu dibuat tampilan yang diinginkan klo sudah yah tinggal upload deh di blog inti templatenya..


      Hapus
    6. hmm ,

      Rumit Bener yah mas ,
      kalo pake redirect(Mengalihkan) ke blog lain ketika blog maintenace bisa gak mas..?

      Hapus
  2. ok! take a video screen shoot when you design next template

    BalasHapus
  3. Template selanjutnya dipasangin fitur related post kaya gini ya.. : (o)

    BalasHapus
  4. mas`kalau mau bikin gambar mewakili gimna pada Thumbnail posting.??
    Contoh:
    http://1.bp.blogspot.com/-KPXSuutz4nc/USCnyKwivgI/AAAAAAAAAg8/L_SFfzwDnGw/s400/zewBz1.jpg

    mksudnya`dalam artikel walaupun tidak di sisipkan gambar utama tapi ada gambar mewakili..!! untuk menutupi text pada Thumbnail posting

    BalasHapus
    Balasan
    1. tergantung JS yang digunakan..
      klo saya lihat blog punya mas menggunakan js seperti ini:
      <script type="text/javascript">
      var thumbnail_mode = "float" ;
      summary_noimg = 400;
      summary_img = 430;
      img_thumb_height = 150;
      img_thumb_width = 150;
      </script>
      <script type="text/javascript">
      //<![CDATA[
      function removeHtmlTag(strx,chop){
      if(strx.indexOf("<")!=-1)
      {
      var s = strx.split("<");
      for(var i=0;i<s.length;i++){
      if(s[i].indexOf(">")!=-1){
      s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
      }
      }
      strx = s.join("");
      }
      chop = (chop < strx.length-1) ? chop : strx.length-2;
      while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
      strx = strx.substring(0,chop-1);
      return strx+'...';
      }

      function createSummaryAndThumb(pID){
      var div = document.getElementById(pID);
      var imgtag = "";
      var img = div.getElementsByTagName("img");
      var summ = summary_noimg;
      if(img.length>=1) {
      imgtag = '<div class="crop"><img src="'+img[0].src+'" width="300px;" /></div>';
      summ = summary_img;
      }

      var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
      div.innerHTML = summary;
      }
      //]]>
      </script>

      klo tdk salah utk memberikan gambar backup seperti ini:
      <script type="text/javascript">
      var summary_noimg = 400;
      summary_img = 430;
      img_thumb_height = 160;
      img_thumb_width = 250;
      backThumbimg = "url gambar jika artikel tidak memiliki gambar";

      //<![CDATA[
      function removeHtmlTag(strx,chop){
      if(strx.indexOf("<")!=-1)
      {
      var s = strx.split("<");
      for(var i=0;i<s.length;i++){
      if(s[i].indexOf(">")!=-1){
      s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
      }
      }
      strx = s.join("");
      }
      chop = (chop < strx.length-1) ? chop : strx.length-2;
      while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
      strx = strx.substring(0,chop-1);
      return strx+'...';
      }

      function createSummaryAndThumb(pID){
      var div = document.getElementById(pID);
      var imgtag = "";
      var img = div.getElementsByTagName("img");
      var summ = summary_noimg;
      imgtag = '<div class="crop"><img src="'+backThumbimg+'" height="'+img_thumb_height+'" width="'+img_thumb_width+'" /></div>';
      if(img.length>=1) {
      imgtag = '<div class="crop"><img src="'+img[0].src.replace(/\/s[0-9]+(\-c)?\//,'/s'+img_thumb_width)+'" height="'+img_thumb_height+'" width="'+img_thumb_width+'" /></div>';
      summ = summary_img;
      }

      var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
      div.innerHTML = summary;
      }
      //]]>
      </script>

      sy mencoba menyatukan 2 JS jadi 1 dan membuang var yang mas tdk pake, serta menambahkan var utk backup jika tdk ada gmbr yg dtmukan.. (backThumbimg)..

      Hapus
  5. wow`berhasil..!!
    mantab lah kang makasih nie udah berbagi ilmu..!!

    BalasHapus
  6. gan ko related post nya ada 2 ya ? :? tapi yg 1 ga muncul2, malah gambar loading terus... cek dong ke blog saya :)
    http://nandarious.blogspot.com

    BalasHapus
    Balasan
    1. saya tdk lihat script dari related post diatas??
      anda letakkan di sebelah mana??

      Hapus
    2. wkwkw saya udah ganti lagi gan :D
      tapi makasih ya atas tutorialnya :)

      Hapus
  7. Ini yang saya cari2. :)
    sudah beberapa kali saya cari Code kyk gini gak WORK sama sekali. [-(
    Pas coba pake yg ini Cihuy bisa :-d
    TQ mass Ilmunya :>)

    BalasHapus
  8. Gan , gimana caranya agar Related Postnya dibawah/diluar area posting ??
    monggo di cek http://blogger-yay.blogspot.com/2013/04/complete-sample-post.html (o)

    BalasHapus
  9. Keren bos tutorialnya... Semua disertai dengan Demonya.. ane yang ga ngerti apa apa tentang dunia bloging apalagi dalam hal coding2 jadi sedikit ngerti...

    BalasHapus
  10. Gan, ane sudah ikutin dan menerapkan semua petunjuk ke blog ane
    tapi kok gak muncul ya? ;-( apa karena template yang ane pake? soalnya setelah ane ganti lg ke template yang standar blogger bisa gan / related postnya muncul
    sebelumnya ane pake template yang responsif, gimana ya gan agar bisa memunculkan related post ini di template custom ane? ane bingung gan hehe.... masih nubie

    oia, ane berkomentar pake open id... dan itu blog ane

    ditunggu jawabannya,

    makasih.

    BalasHapus
  11. kok di blog saya cuma muter aja ya mas setelah saya apply itu script?

    BalasHapus
  12. :) kang ini responsive ?m=1 apa ga???

    BalasHapus
  13. I can't put it to my template ? why always error code ?

    BalasHapus
  14. mas kenapa y suka ada halaman muncul pake user name sama password.. jadi g work nih,.

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP