Cara membuat related post dengan gambar yang jernih valid Lighthouse Report Viewer, Googleusercontent untuk blogspot. Tentunya ini penting sekali karena untuk saat ini performa blog menjadi prioritas utama.
Lighthouse Report Viewer serta Pagespeed Instights yang mengutamakan performa loading web, seo dan sebagainya tentu harus benar-benar dimaksimalkan.
Didalam cara membuat related posts atau artikel terkait untuk blogspot dengan gambar yang jernih berikut ini, sudah menambahkan tag alt, width, height, dan juga lazyload.
Sehingga akan benar-benar valid untuk blogspot yang kita kelola. Kombinasi kode css yang ada pun benar-benar dibuat semaksimal mungkin agar tidak ada pergeseran tata letak. Dengan gambar yang jernih, berikut cara membuat related post untuk blogspot.
Related Post Gambar Jernih Valid Lighthouse, PageSpeed, Googleusercontent Untuk Blogspot
1. Kode css
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style>
#relatedmadjongke{z-index:10;background:#fff;display:block;margin:20px 10px;line-height:1.5em}#relatedmadjongke h2.title{font-size:16px;color:#c00;font-weight:600;text-align:center;text-transform:uppercase;line-height:initial}#relatedmadjongke h2.title span{background-color:#fff;padding:0 15px;position:relative;z-index:1}#relatedmadjongke h2.title:before{content:'';display:block;position:relative;top:10px;width:100%;border-top:2px solid #ccc}#relatedmadjongke ul{margin:20px 0 0;padding:0;display:flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap}#relatedmadjongke ul li{list-style:none;width:calc((100% / 3) - 15px);text-align:left;margin-right:20px;margin-bottom:20px;padding:0;-webkit-margin-start:0px!important}#relatedmadjongke ul li .thumb{height:120px;overflow:hidden;line-height:0;border-radius:7px}#relatedmadjongke ul li:nth-of-type(3n){margin-right:0}#relatedmadjongke ul li a{display:block}#relatedmadjongke ul li a.judul{color:#515150;font-weight:600;margin-top:7px}#relatedmadjongke ul li a.judul:hover,#relatedmadjongke ul li:hover a.judul{color:#c00}#relatedmadjongke ul li a img{width:100%;transition:all .3s ease;border:0;margin:0}#relatedmadjongke ul li a img:hover,#relatedmadjongke ul li:hover img{transform:scale(1.1);filter:brightness(75%);-webkit-filter:brightness(75%)}#relatedmadjongke .norelated{text-align:center;font-weight:600}
@media screen and (max-width:480px){#relatedmadjongke ul li .thumb{height:100px;}#relatedmadjongke{margin:20px 10px;}#relatedmadjongke ul li{width: calc((100% / 2) - 7.5px);margin-right:15px;margin-bottom:15px;}#relatedmadjongke ul li:nth-of-type(3n){margin-right:15px;}#relatedmadjongke ul li:nth-of-type(2n){margin-right:0px;}}
</style>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Letakkan kode css diatas kode </head>
2. Javascript
Selanjutnya cari kode <data:post.body/> dan letakkan kode berikut dibawahnya
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:view.isPost'>
<div id='relatedmadjongke'>
<h2 class='title'><span>Artikel terkait</span></h2>
<script>//<![CDATA[
var jumlah = 6;
eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('38 37=["<","126","92",">","120","118","","111","108","107","$106","78","104","109","113$117","99","125:116/101;100,89/86+84","124","54","119","69","114","110","112","<74>","<72 71=\\\'105\\\'><60 69=\\\'","\\\' 78=\\\'","\\\'><121 122=\\\'","/115-103-102-85-87-88","90","\\8-91-83\' 93=\\\'","\\\' 94=\\"95\\" 96=\\"123\\" 97=\\"98\\"/></60></72>","<60 69=\\\'","\\\' 71=\\\'41\\\'>","</60>","</74>","127"];38 54=0,41=49 50(),45=49 50(),47=49 50();59 129(44,57){38 39=44[37[1]](37[0]);52(38 40=0;40<39[37[2]];40++){46(39[40][37[4]](37[3])!=-1){39[40]=39[40][37[5]](39[40][37[4]](37[3])+1,39[40][37[2]])}};39=39[37[7]](37[6]);39=39[37[5]](0,57-1);64 39}59 133(57){52(38 39=0;39<57[37[9]][37[8]][37[2]];39++){38 44=57[37[9]][37[8]][39];41[54]=44[37[11]][37[10]];68=37[6];46(37[12]67 44){68=44[37[12]][37[10]]}63{46(37[13]67 44){68=44[37[13]][37[10]]}};46(37[14]67 44){66=44[37[14]][37[15]]}63{66=37[16]};47[54]=66;52(38 40=0;40<44[37[17]][37[2]];40++){46(44[37[17]][40][37[18]]==37[19]){45[54]=44[37[17]][40][37[20]];62}};54++}}59 76(65,39){52(38 40=0;40<65[37[2]];40++){46(65[40]==39){64 132}};64 131}59 130(){38 51=49 50(0);38 55=49 50(0);38 77=49 50(0);38 56=49 50(0);52(38 42=0;42<45[37[2]];42++){46(!76(51,45[42])){51[37[2]]+=1;51[51[37[2]]-1]=45[42];55[37[2]]+=1;55[55[37[2]]-1]=41[42];77[37[2]]+=1;56[37[2]]+=1;56[56[37[2]]-1]=47[42]}};41=55;45=51;47=56;52(38 42=0;42<41[37[2]];42++){38 48=58[37[22]]((41[37[2]]-1)*58[37[21]]());38 79=41[42];38 80=45[42];38 81=47[42];41[42]=41[48];45[42]=45[48];47[42]=47[48];41[48]=79;45[48]=80;47[48]=81};38 61=0;38 43=58[37[22]]((41[37[2]]-1)*58[37[21]]());38 70=43;38 53;38 82=75[37[23]];128(61<73){46(45[43]!=82){53=37[24];53+=37[25]+45[43]+37[26]+41[43]+37[27]+47[43][37[29]](/\\/134[0-9]+(\\-135)?/,37[28])+37[30]+41[43]+37[26]+41[43]+37[31];53+=37[32]+45[43]+37[33]+41[43]+37[34];53+=37[35];75[37[36]](53);61++;46(61==73){62}};46(43<41[37[2]]-1){43++}63{43=0};46(43==70){62}}}',10,136,'|||||||||||||||||||||||||||||||||||||_0|var|_1|_2|judul|_3|_4|_5|urls|if|gambar|_6|new|Array|_8|for|_7|rel|_9|_11|_10|Math|function|a|_12|break|else|return|_13|postimg|in|postcontent|href|_19|class|div|jumlah|li|document|contains|_16|title|_14|_15|_17|_18|c150|AX7vOF2TAAAAAElFTkSuQmCC|k|gAAAADElEQVQImWOor68HAAL|no|nu|iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U|replace|s243|length|alt|width|191|height|loading|lazy|url|base64|png|p|h150|content|thumb|t|feed|entry|summary|floor|join|URL|media|random|w243|image|thumbnail|substring|alternate|indexOf|img|src||link|data|split|write|while|filter|madjongkeGrid|false|true|relpostimgcuplik|s|c'.split('|'),0,{}))
//]]></script>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=99"'/>
</b:loop>
<ul>
<script>madjongkeGrid();</script>
</ul>
<b:else/> Tidak ada postingan lain dalam kategori ini.
</b:if>
</div>
<div class='clear'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Simpan template dan lihat hasilnya.
3. Kelebihan related posts diatas
1. Responsive sehingga bisa menyesuaikan sendiri dengan ukuran blog baik versi mobile atau dekstop.
2. Gambar jernih, tidak blur atau buram dan support file gambar dengan server blogger.googleusercontent.com
3. Sudah ada tag alt sesuai judul artikel serta width dan height yang disesuaikan
4. Kode sudah di enkripsi sehingga tidak menimbulkan peringatan 'Hindari document.write()'
5. Dan kelebihan lain yang bisa kalian rasakan sendiri nanti