0 Cara Membuat Artikel Terkait Dengan Gambar Secara Vertikal

Dalam posting artikel dibawah ini menunjukkan bagaimana Cara Membuat Artikel Terkait Dengan Gambar Secara Vertikal yang biasanya ditambahkan di bawah postingan artikel sebuah blog. Fungsi dari Artikel Terkait Bergambar atau dengan thumbnail ini sendiri merupakan teknik untuk menambah tampilan halaman artikel, dari posting artikel yang terkait sesuai dengan label tertentu secara otomatis dan acak dari jumlah tertentu.

DEMO

Baca juga Artikel Terkait Versi Cepat Di Link Ini.

Artikel Terkait Versi Sederhana Di Link Ini.

Cara Membuat Artikel Terkait Dengan Gambar ini tidak sulit, hanya memerlukan waktu beberapa menit saja. Artikel Terkait Bergambar ini cukup bagus ditambahkan di bawah postingan artikel, karena loadingnya yang cukup cepat, dimana Artikel Terkait ini menampilkan judul dan gambar. Artikel Terkait tersebut dapat sedikit di modifikasi sesuai kebutuhan, baik mengganti namanya menjadi Related Post, Baca Juga, Mungkin Anda Juga Tertarik Dengan Artikel Ini, dan lain sebagainya.

Berikut Uraian Cara Membuat Artikel Terkait Dengan Gambar Secara Vertikal.

1. Login Ke Blogger.
2. Klik Template, Backup template terlebih dahulu, untuk jaga2,
    atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
3. Klik Edit HTML.
4. Klik Kiri 1 x Dimana saja dalam kotak template.
5. Klik Ctrl+F (Supaya mempercepat pencarian kode),
    Dan cari kode berikut  div class='post-footer'
    Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.
    Kode tersebut mungkin ada 2, pertama untuk versi mobile,
    kedua untuk versi web (biasanya yang kedua).
6. Copy Paste-kan Kode berikut diatas  <div class='post-footer'> yang kedua (versi web).

<!-- Artikel Terkait Dengan Gambar Start -->

<b:if cond='data:blog.pageType == "item"'>
<style>                        
#related_posts{padding:0;overflow:hidden;display:inline;}
#related_posts h4{padding-left:5px;padding-bottom:10px;color:#CC333B;font-family:Mistral;font-size:23px;line-height:23px;text-align:left; letter-spacing:normal;}
ul#relpost_img_sum{margin:0;padding:0;text-align:justify;display:inline;}
ul#relpost_img_sum li{list-style:none;padding:3px;margin:0;width:275px;height:70px; float:left;display:inline;}
ul#relpost_img_sum li a{display:block}
ul#relpost_img_sum li img{float:left;width:90px;height:65px;margin-right:7px;padding:0 auto;border:none;}
ul#relpost_img_sum li a.relinkjdulx{display:block;overflow:hidden;margin-bottom:3px;background-image:none;font-weight:normal;font-size:12px;width:160px;line-height:20px; float:left;text-align:left;}
</style>                          

<script type='text/javascript'>
//<![CDATA[
var relnojudul = 0;
var numpost = 6;
var numchars = 0;
var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicjX19eKN0_davJmu0K-JSaavZeZlZaxfJK06pMgiUKV7DAtM4jQGgfa2GaUMl61MaGMH-c9IkQO-KUEi7_pbD1sAYT8U_e2Zut2uBEdmRYDS6-6gAmGELCDzDFe23PmJlFIVB3U8Mnfo/s1600/grey.png"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<numpost){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==numpost){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>

  <div style='width:570px;height:250px; margin-bottom:10px; margin-top:15px;'>
        <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=19&quot;' type='text/javascript'/>
                </b:loop>
          <ul id='relpost_img_sum'>
               <script type='text/javascript'>artikelterkait();</script>
          </ul>
       </div>
</div>
</b:if>

<!-- Artikel Terkait Dengan Gambar End -->

    
Kira-kira tampilannya seperti ini

    ...Kodenya...
    <div class='post-footer'>

Keterangan:
Text berwarna pink: dapat diganti nama, warna, jenis huruf dan besarnya sesuai keinginan.
Text berwarna merah dapat dirubah angkanya untuk jumlah tampilan judul dan gambar.
Text berwarna Oranye Harap Diperhatikan, itu adalah pengaturan Lebar dan Tinggi Dari Fitur ini, coba disesuaikan dengan Lebar Posting Artikel, untuk tinggi (height) mungkin cukup jika jumlah postingnya 6.
Text berwarna Hijau Harap diperhatikan juga, untuk pengaturan maksimal-Lebar dan Tinggi Artikel Terkait yang ditampilkan.
Text warna Biru adalah pengaturan Lebar dan Tinggi Gambar dan Lebar Judul.
Jadi Pada Intinya, dapat dirubah semua dari pengaturan <style>...</style>
Namun Coba dahulu, tanpa diedit, setelah yakin baru di edit pengaturannya.

7. Save Template, dan lihat hasilnya.

Demikian Tutorial Cara Membuat Artikel Terkait Dengan Gambar / Thumbnail Versi Vertikal di bawah postingan artikel, mudah-mudahan bisa bermanfaat.

Rating: 3

Tweet

Komentar →