Cara Membuat Artikel Terkait Dengan Gambar Secara Vertikal

Aura Ilmu » Blog » Cara Membuat Artikel Terkait Dengan Gambar Secara Vertikal
Oleh: Gunawan | Update Terakhir: 16 April 2017 | 8 Comments

Artikel Terkait, Dalam posting artikel dibawah ini menunjukkan tentang 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.

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 vertikal

Image: artikel terkait vertikal

Cara Membuat Artikel Terkait Dengan 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 scoped='scoped'>
#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="http://1.bp.blogspot.com/-Xz4yd0i8yX0/UWmBGpGDn4I/AAAAAAAAELY/b-BxtwST5cE/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 Cara Membuat Artikel Terkait Dengan Gambar Secara Vertikal
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 Biru 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.

(No Ratings Yet)
loadingstarsLoading...

8 Komentar: Cara Membuat Artikel Terkait Dengan Gambar Secara Vertikal

  1. Aditia Novit

    terima kasih sob ­čśÇ
    berhasil lol

    Reply
  2. Najwa Salsabila

    saya terapkan kok gk bisa ya di web saya, apa karena templatenya atau gimana… ini situs saya http://www.berjodoh.com

    Reply
  3. alief

    Trims kak atas infonya

    Reply
  4. Index Apk

    oke deh, langsung menuju blognya mas kholis,,,
    kali aja ketemu tutorialnya… lol

    Reply
  5. lukione

    makasih kk jadi lebih bagus blog saya Thanks. kunjungi balik ya di http://www.blogg-ilmukomputer.blogspot.com

    Reply
  6. Tatang Gunawan S

    sepertinya itu sulit untuk artikel terkait, paling bisa dibuat di sidebar-nya artikel berdasarkan label bisa dibuat, saya pernah melihat tutornya di blog maskolis

    Reply
  7. free apk

    mas, cara ganti artikel terkait berdasarkan label gimana ya caranya????

    Reply

Leave a Reply

Your email address will not be published.