Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel

Tabel Konten
  1. Membuat Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel 
  2. Penyesuaian 

Pembaharuan 10 Juni 2015: Widget ini sudah usang. Lebih baik pakai yang ini.

artikel terkait blogspot

Gambar di atas adalah contoh hasil tampilan aplikasi artikel/posting terkait blogspot dengan gambar dan deskripsi. Selain artikel/posting terkait tipe ini juga terdapat tipe artikel/posting terkait yang hanya terdiri dari gambar dan judul saja. Kamu tinggal memilih mana yang menurutmu lebih menarik atau sesuai dengan karaktermu. Jika berminat dengan tipe aplikasi ini, tinggal ikuti langkah-langkah di bawah ini. Tapi jika tidak, mungkin kamu akan suka dengan tipe aplikasi artikel terkait thumbnail dan judul saja » baca tutorialnya di sini

Membuat Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel 

  • Masuk ke halaman Editor HTML, kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil.

  • Salin kode di bawah ini, kemudian letakkan tepat di atas kode </head>:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <style type='text/css'>
              #related_posts h4              {background:#1e4a76;color:#FFF;font:bold 11px Arial,Tahoma,Verdana;margin:0;padding:5px 7px 4px 10px;text-shadow:1px 1px #000;text-transform:uppercase;}
              #relpost_img_sum               {height:308px;overflow:auto;margin:0;padding:5px;line-height:16px;}
              #relpost_img_sum:hover         {background:none;}
              #relpost_img_sum ul            {list-style-type:none;background:none;margin:0;padding:0;}
              #relpost_img_sum li            {border-top:1px solid #fff;outline:1px solid #DDD5CD;background:#EDE9E4;overflow:hidden;margin:0;padding:5px;height:64px;list-style:none;}
              #relpost_img_sum li:hover      {background-color:#F0ECE9;}
              #relpost_img_sum .news-title a {color:#2C6BA8;}
              #relpost_img_sum .news-title   {font-family:Arial,Serif;font-weight:bold !important;display:block;margin-bottom:4px;}
              #relpost_img_sum .news-text    {display:block;text-align:left;font-weight:normal;text-transform:none;color:#333;}
              #relpost_img_sum img           {float:left;margin-right:14px;padding:4px;background:#fafafa;border:1px solid #ddd;width:55px !important;height:55px !important;}
         </style>
         <script type='text/javascript'>
              var relnojudul = 0;
              var relmaxtampil = 10;
              var numchars = 200;
              var morelink = "baca selengkapnya";
         </script>
         <script src='http://reader-download.googlecode.com/svn/trunk/atdeskripsi.js' type='text/javascript'></script>
    </b:if>
  • Selanjutnya temukan kode ini:

    <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:

    <!-- Artikel Terkait dengan Gambar dan Ringkasan -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <div id='related_posts'>
              <h4>Artikel Terkait</h4>
              <b:loop values='data:post.labels' var='label'>
                   <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'></script>
              </b:loop>
              <ul id='relpost_img_sum'>
                   <script type='text/javascript'>artikelterkait();</script>
              </ul>
         </div>
    </b:if>
    <!-- Akhir Artikel Terkait dengan Gambar dan Ringkasan -->
  • 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.

  • Jika sudah selesai, klik Simpan Template. Sekarang kita masuk ke tahap penyesuaian.

Penyesuaian 

  • Atur ukuran thumbnail dengan mengubah nilai dalam selektor #relpost_img_sum img{ … }, yaitu pada deklarasi width:55px dan height:55pxnya.
  • var relmaxtampil adalah variabel untuk menentukan jumlah posting yang akan ditampilkan.
  • var morelink adalah variabel untuk menentukan teks "baca selengkapnya". Kamu bisa mengganti "baca selengkapnya" dengan "read more" atau yang lainnya.
  • var numchars adalah variabel untuk menentukan jumlah karakter ringkasan.
  • Tentukan judul artikel terkaitmu dengan mengubah teks "Artikel Terkait" pada kode yang Saya beri tanda.

Sumber: http://modification-blog.blogspot.com

14 Komentar

  • Unknown

    nyoba pasang ahh . .

  • Yopi Hasopa

    mas, saya sudah pasang dan berhasil... tapi kok mucul dua kali yah... di bawah postingan sama di bawah footer... mohon bantuannya mas, udah saya utak atik tapi tak bisa :(

    tkp -> hsp21.com
    terima kasih :)

  • Yopi Hasopa

    mas, saya sudah pasang dan berhasil... tapi kok mucul dua kali yah... di bawah postingan sama di bawah footer... mohon bantuannya mas, udah saya utak atik tapi tak bisa :(

    tkp -> hsp21.com
    terima kasih

  • Taufik Nurrohman

    @Yopi Hasopa Artikel terkaitnya dobel di sebelah mana? Sudah diperbaiki ya?

  • Unknown

    mas, mau tanya ini pake jquery gk?? biar ringan gitu :D

  • Yopi Hasopa

    @Taufik Nurrohman sudah diperbaiki mas. Ternyata gara2 saya pasang kode jquery emoticon otomatis yang di taroh di atas </body>, kemudian saya simpan di atas div penutup footer, tapi efeknya kode emoticon untuk di sidebar gak jalan :(

    Saya kembaliin lagi kodenya di atas </body> ya mas? biar bisa dianalisis, mohon bantuaannya untuk masalah ini. Terima kasih :)

  • Taufik Nurrohman

    @Asmara Susanto Ini murni JSON Blogger, tanpa JQuery.

  • adaadad

    Widget yang stylish.
    Thanks

  • Unknown

    mas mau nanya blog saya kok separuh gambar postingannya gk muncul yahh ?
    mohon dibantu mas
    blabla...appfullversion[dot]blogspot[dot]com

    • Taufik Nurrohman

      Gambar sebisa mungkin harus berasal dari blog sendiri, bukan dari hasil salin tempel.

  • Anonim

    Sudah saya terapin mas :-bd

  • Anonim

    mas coba periksa lagi script yang ini
    http://reader-download.googlecode.com/svn/trunk/atdeskripsi.js
    kayaknya harus pakai password dlu ya...?

  • Unknown

    http://reader-download.googlecode.com/svn/trunk/atdeskripsi.js
    filenya mati nih

    • Taufik Nurrohman

      Pakai widget yang ini saja, lebih ringan, karena tidak semua posting dimuat. Tinggal pilih opsi thumbnail dan judul.

Komentar telah ditutup.