Membuat Artikel/Posting Terkait Dengan Gambar/Thumbnail

Published by Concept Phone Rabu, 18 Juli 2018

Gambar di atas yakni pola hasil tampilan aplikasi artikel/posting terkait blogspot dengan gambar dan judul artikel. Selain artikel/posting terkait tipe ini juga terdapat tipe artikel/posting terkait yang terdiri dari gambar, judul beserta ringkasan artikelnya. Kamu tinggal menentukan mana yang menurutmu lebih menarik atau sesuai dengan karaktermu. Jika berminat dengan tipe aplikasi ini, tinggal ikuti langkah-langkah di bawah ini. Tapi jikalau tidak, mungkin kau akan suka dengan tipe aplikasi artikel terkait thumbnail dan deskripsi artikel » baca tutorialnya di sini

Membuat Artikel/Posting Terkait dengan Gambar/Thumbnail

• Masuk ke tab Rancangan, lalu pilih Edit HTML. Cek Expand Template Widget supaya seluruh elemen pembangun widget posting tampil.

• Salin isyarat di bawah ini, lalu letakkan di atas isyarat </head>

  
  

  <b:if cond='data:blog.pageType == &quot;item&quot;'>     <style>         #at-gambar         {text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}         #at-gambar a       {color:#895F30;overflow-x:hidden;text-align:left;}         #at-gambar a:hover {background-color:#EAE7DB;color:#666;}         #at-gambar img     {width:84px !important;height:84px !important;}     </style>     <script>         var defaultnoimage    = "//1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF";         var maxresults        = 5;         var splittercolor     = "#EBEBEB";         var relatedpoststitle = "Catatan Lainnya:";     </script>     <script src='http://reader-download.googlecode.com/svn/trunk/terkaitlib.js'></script> </b:if>

  
  

• Selanjutnya temukan isyarat ini:

  
  

  <div class='post-footer'>

  
  
  
  

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

  
  
  
  

• Jika sudah ketemu, salin isyarat ini lalu letakkan di atasnya:

  
  

  <!-- Artikel Terkait dengan Gambar --> <b:if cond='data:blog.pageType == &quot;item&quot;'>     <div id='at-gambar'>         <b:loop values='data:post.labels' var='label'>             <b:if cond='data:label.isLast != &quot;true&quot;'>             </b:if>             <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=999&quot;'></script>         </b:loop>         <script>             removeRelatedDuplicates_thumbs();             printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);         </script>     </div>     <div style='clear:both'/> </b:if> <!-- Akhir Artikel Terkait dengan Gambar -->

  
  
• Atau kau juga sanggup meletakkan isyarat tersebut di bawah isyarat <div class='post-footer-line post-footer-line-1'> atau isyarat <p class='post-footer-line post-footer-line-1'>. Intinya, kita akan meletakkan artikel terkait tersebut di bawah posting. Dan sebagian besar isyarat dengan perhiasan post-footer umumnya memang berada di bawah posting. Begitu saja logikanya. Titik.
  
• Jika sudah selesai, klik Simpan Template. Sekarang kita tinggal melaksanakan beberapa penyesuaian.

Penyesuaian-Penyesuaian

• Atur ukuran thumbnail dengan mengubah nilai dalam selektor #at-gambar img{ ... }, yaitu pada deklarasi width:84px dan height:84px.
• var defaultnoimage yakni tampilan untuk thumbnail cadangan jikalau posting yang dimaksud tidak mempunyai gambar (umumnya memakai gambar "No Image").
• var maxresults yakni variabel untuk menentukan jumlah posting maksimal yang akan ditampilkan.
• var splittercolor yakni variabel untuk menentukan warna garis batas.
• var relatedpoststitle yakni variabel untuk menentukan judul artikel terkaitmu (dalam hal ini yakni "Catatan Lainnya:").

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