• Madjongke.com
  • Kontak
  • Facebook

Madjongke

Bacaan Santai Kehidupan Sehari-hari

  • Beranda
  • Cinta
  • Kehidupan
  • Kesetiaan
  • Wanita/Cewek
  • Cowok/Pria
  • Kendaraan
  • Lainnya
    • Kata-kata
    • Travel
    • Berita
    • Komik
    • Suami
    • Mertua
    • Resep Masakan
    • Anak
    • Kisah nyata
    • Mantan
    • Lain-lain
Beranda » blog » Related Posts Gambar Jernih Valid Lighthouse, PageSpeed, Googleusercontent

Related Posts Gambar Jernih Valid Lighthouse, PageSpeed, Googleusercontent

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


related post blogspot


1. Kode css

 <!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:&#39;&#39;;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='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=99&quot;'/>
      </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

Rohmad Nur Hidayat, Rabu, 08 Desember 2021

Bagikan

#blog #Terbaru
Artikel Terkait
Lebih baru
Lebih lama
Beranda

10 Terpopuler

  • 10 Arti Kata Hmm Dari Wanita Saat Chat, Kamu Yang Mana?
    Penggunaan kata hmm sebenarnya digunakan untuk menunjukkan kondisi sedang berpikir. Seharusnya setelah menggunakan kata itu ada kalimat teru...
  • 12 Kalimat Pengganti Untuk Tanya 'Sudah Punya Pacar Belum?'
    Dengan teman satu aktivitas saja kadang kamu tidak bisa mengetahui secara pasti dia punya pacar atau tidak, apalagi dengan orang yang belum...
  • Cerita Cinta Terlarang Dengan Istri Orang (Nyata)
    ....Suaminya merantau untuk bekerja sehingga kami dengan leluasa menjalin hubungan. Dia begitu baik dan sangat dewasa hingga membuat aku ben...
  • 10 Tanda Cowok Cemburu Tapi Bukan Pacar
    Rasa cemburu itu bisa datang dari siapa saja, tidak harus selalu dari pacar atau pasangan. Bahkan sekedar pengagum pun bisa merasakan cembur...
  • 10 Kata-kata Halus Tapi Nyindir Orang Suka Nyinyir, Ghibah, Gosip
    Punya teman suka gosip, nyinyir, julid, dan sebagainya?. Atau bisa juga tetangga yang suka melakukan hal-hal tersebut dan sering bikin kupin...
  • 6 Arti Lain Dibalik Kata 'Ciee Ciee' Dari Seseorang Untukmu
    Dalam menapaki kehidupan Kamu tentu sudah tidak asing lagi dengan kata "ciee ciee". Ini bukan kata yang asing untuk Kamu dan memi...
  • Wajib Tahu, 7 Macam Sistem Dan Jumlah Komisi Makelar Mobil
    Berapa komisi makelar mobil?, sehingga tampaknya mereka sangat antusias menekuni profesi semacam itu. Hingga rela menghabiskan banyak waktu ...
  • 5 Alasan Bank Menanyakan Nama Gadis Ibu Kandung, Bukan Ayah
    Menggunakan nama Ibu kandung sebagai sandi pertanyaan keamanan perbankan sudah dilakukan sejak tahun 1882. Diadopsi dari luar negeri, Indone...
  • 10 Kata Sindiran Untuk Orang Yang Suka Mencampuri Kehidupan Orang Lain
    Dalam kehidupan sehari-hari, kita sering dihadapkan dengan orang usil yang suka mencampuri urusan orang lain. Sepertinya ingin membantu, tap...
  • Kata-kata Untuk Yang Sering Jadi Bahan Omongan Orang
    Karena diawali oleh dugaan yang belum tentu benar, kadang banyak pihak yang meyakini bahwa hal itu benar. Kemudian menjadikan hal itu menjad...
Beranda | Tentang | Kontak | Privacy Policy | Syarat Dan Ketentuan | Sitemap
Copyright © 2012-2022 Madjongke - All Rights Reserved
Powered by Blogger