Memodifikasi Related Post Tengah Postingan Menjadi Thumbnail di Viomagz

www.azid45.web.id - Memodifikasi Related Post Tengah Postingan Menjadi Thumbnail di Viomagz. Assalamualaikum.Wr.Wb, pada kesempatan kali ini saya berekperiment terkait Cara Membuat Related Post With Thumbnail di Tengah Postingan. Script default membuat related post ini merupakan script mas Sugeng yang digunakan di template Viomgaz.

Saya menambahkan relatedImage=new serta menambahkan feed.entry[l].media$thumbnail.url agar bekerja dengan baik. Script tersebut saya ambil dari laman https://stackoverflow.com/ dan http://www.internetsmash.com/2016/01/related-posts-widget-with-thumbnail.html. Jika ingin mempelajari lebih lanjut menuju laman tersebut.

Baiklah untuk membuat related post thubmnail di tengah artikel di template viomgaz, langkah awal cari kode <div id='baca-juga'> nanti diataskan akan ada script seperti dibawah ini:

<script>
//<![CDATA[
var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array;function bacajuga(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;for(var r=0;r<t.link.length;r++)if("alternate"==t.link[r].rel){relatedUrls[relatedTitlesNum]=t.link[r].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=0;t<relatedUrls.length;t++)contains(e,relatedUrls[t])||(e.length+=1,e[e.length-1]=relatedUrls[t],l.length+=1,l[l.length-1]=relatedTitles[t]);relatedTitles=l,relatedUrls=e}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random());l=0;if(widgetBacaJuga==1&&relatedTitles.length>1){for(document.write("<div class='baca-juga-wrap'>" + judulbacajuga + "<ul>");l<relatedTitles.length&&l<20&&l<jumlahbacajuga;)document.write('<li><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>"),t<relatedTitles.length-1?t++:t=0,l++;document.write("</ul></div>")}relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>

Ganti saja kode tersebut dengan kode javascript dibawah ini

<script>
//<![CDATA[
var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array,relatedImage=new Array;function bacajuga(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;var r=e.feed.entry[l].media$thumbnail.url,a=r.replace("/s72-c/","/s100/");if(e.feed.entry[l].media$thumbnail)var r=e.feed.entry[l].media$thumbnail.url,a=r.replace("/s72-c/","/w75-h56-p-k-no-nu/");else if(null!=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/))var a=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];else var a="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5aWppDCpcsR1Jf6vP2O0PPxQkmSCwz0YGZ6VD8QkL9Leayn_rR6BwYSUCKFI1nX2HThkdQdphdJOjeIaKiEtvUqKJpSgAhhctyWpeN0-DClhLxd1f4WS8gRD5N00vQhNanUkD5712qjA/s250-Ic42/no-thumbnail.png";relatedImage[relatedTitlesNum]=a;for(var r=0;r<t.link.length;r++)if("alternate"==t.link[r].rel){relatedUrls[relatedTitlesNum]=t.link[r].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=0;t<relatedUrls.length;t++)contains(e,relatedUrls[t])||(e.length+=1,e[e.length-1]=relatedUrls[t],l.length+=1,l[l.length-1]=relatedTitles[t]);relatedTitles=l,relatedUrls=e}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random());l=0;if(widgetBacaJuga==1&&relatedTitles.length>1){for(document.write("<div class='baca-juga-wrap'>" + judulbacajuga + "<ul style='height: auto;'>");l<relatedTitles.length&&l<20&&l<jumlahbacajuga;)document.write('<li><span class="thumb"><img src="'+relatedImage[t]+'" title="'+relatedTitles[t]+'" alt="'+relatedTitles[t]+'"/></span><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>"),t<relatedTitles.length-1?t++:t=0,l++;document.write("</ul></div>")}relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>

Pada langkah ini jika Anda Save sudah muncul thumbnail post di tengah artikel Anda. Kurang lebih akan seperti pada gambar dibawah ini:

Agar tampilannya rapi tidak berantakan seperti gambar diatas Anda bisa mengubah kode CSS-nya. Cari cari /* BACA JUGA */ nanti akan menemukan kode CSS seperti dibawah ini

/* BACA JUGA */
#baca-juga {
display: none;
}
.post-body #baca-juga {
display: block;
overflow: hidden;
}
.post-body .baca-juga-wrap {
max-width: 75%;
margin: 1em 0 1.6em 2em;
font-size: 0.9rem;
}
#baca-juga h2 {
font-size: 15px;
text-transform: uppercase;
}
#baca-juga a {
font-weight: bold;
display: block;
padding: 0;
}
#baca-juga ul {
margin: 0 0 0 20px;
}
#baca-juga li {
padding: 0px;
margin: .8rem 0;
}

Jika sudah ketemu ganti dengan kode dibawah ini

/* BACA JUGA */
#baca-juga {
 display: none;
}
.post-body #baca-juga {
 display: block;
 overflow: hidden;
}
.post-body .baca-juga-wrap {
 max-width: 75%;
    margin: 1em 0 1.6em 2em;
    font-size: 0.9rem;
}
#baca-juga h2 {
    font-size: 15px;
    text-transform: uppercase;
}
#baca-juga ul {
 margin: 0 0 0 20px;
}
#baca-juga li {
    padding: 0px;
    margin: .8rem 0;
    display: -webkit-box;
}
.baca-juga-wrap span.thumb {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 60px!important;
    max-height: 60px!important;
    border-radius: 5px;
    margin-right: 10px;
}
.baca-juga-wrap span.thumb img {
    width: 100%;
    height: 100%;
    max-width: 80px!important;
    max-height: 60px!important;
    border-radius: 5px;
    transition: all .3s ease;
}
#baca-juga a {
    font-weight: bold;
    display: inline-block;
    padding: 0;
}
#baca-juga li:hover span.thumb img {
    transform: scale(1.1);
    filter: brightness(80%);
    -webkit-filter: brightness(80%);
}

Keterangan 

Kode yang dirubah

#baca-juga li {
    padding: 0px;
    margin: .8rem 0;
    display: -webkit-box;
}

Pada kode tersebut hanya menambahkan kode display: -webkit-box;

dan kode

#baca-juga a {
    font-weight: bold;
    display: inline-block;
    padding: 0;
}

Pada kode tersebut hanya menambahkan kode display: inline-block;

Kode yang ditambahkan

.baca-juga-wrap span.thumb {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 60px!important;
    max-height: 60px!important;
    border-radius: 5px;
    margin-right: 10px;
}
.baca-juga-wrap span.thumb img {
    width: 100%;
    height: 100%;
    max-width: 80px!important;
    max-height: 60px!important;
    border-radius: 5px;
    transition: all .3s ease;
}
#baca-juga li:hover span.thumb img {
    transform: scale(1.1);
    filter: brightness(80%);
    -webkit-filter: brightness(80%);
}

Kode ini adalah kode untuk setting tampilan gambar, Anda bisa mengubah kode tersebut sesuai dengan keinginan Anda.

Untuk penampilan setelah menggunkan CSS bisa lihat di gambar yang paling atas.

Baca juga: Cara mengubah tampilan template viomagz di homepage menjadi Grid Post

Peletakkan Kode Diatas

Bagi yang belum paham untuk eksekusi kode ini Anda bisa membuka blog - pilih menu tema - dan klik edit HTML

Demikianlah tutorial terkait Memodifikasi Related Post Tengah Postingan Menjadi Thumbnail di Viomagz. Semoga bermanfaat.