Artikel/Posting Terkait Dengan Gambar Dan Ringkasan Artikel

Published by Concept Phone Rabu, 08 Agustus 2018

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

baca tutorialnya di sini

Membuat Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel

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

• Salin arahan di bawah ini, lalu letakkan sempurna di atas arahan </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 arahan ini:

  <div class='post-footer'>

  TIP: Tekan CTRL + F lalu ketik class='post-footer' untuk mempermudah pencarian.

  Salin arahan di bawah ini, lalu letakkan sempurna 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 kau juga dapat meletakkan arahan tersebut di bawah arahan <div class='post-footer-line post-footer-line-1'> atau arahan <p class='post-footer-line post-footer-line-1'>. Intinya, kita akan meletakkan artikel terkait tersebut di bawah posting. Dan sebagian besar arahan 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 ialah variabel untuk memilih jumlah posting yang akan ditampilkan.
• var morelink ialah variabel untuk memilih teks "baca selengkapnya". Kamu dapat mengganti "baca selengkapnya" dengan "read more" atau yang lainnya.
• var numchars ialah variabel untuk memilih jumlah abjad ringkasan.
• Tentukan judul artikel terkaitmu dengan mengubah teks "Artikel Terkait" pada arahan yang Saya beri tanda.

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

Sumber https://www.dte.web.id/