Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel

artikel terkait blogspot

Ada Tiga Jenis Aplikasi Artikel terkait:

  1. Alikasi artikel/Posting terkait tanpa gambar/thumbnail.
  2. Alikasi artikel/Posting terkait dengan gambar dan judul saja.
  3. Alikasi artikel/Posting terkait dengan gambar, judul, dan deskripsi.(Yang akan anda baca saat ini)

perbedaannya hanya pada tiga komponen penting yaitu Gambar/Thumbnail, Judul Artikel, dan Deskripsi Artikel.
Gambar di atas adalah contoh hasil tampilan aplikasi artikel/posting terkait dengan gambar, judul dan deskripsi. Anda tinggal memilih mana yang lebih menarik atau sesuai dengan Anda. Jika berminat dengan tipe aplikasi ini, tinggal ikuti langkah-langkah di bawah ini.

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

Pos ini dipublikasikan di Tak Berkategori. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s