Zaman serba cepat, termasuk blogging dan website, harus cepat jikalau ingin tetap terjangkau oleh pengunjung. Mengapa kecepatan itu penting salah satunya dalah karena ia menjadi salah satu faktor penting yang menjadi sinyal kuat bagi mesin pencari dalam menemukan halaman kita.
Nah di dalam Google Webmaster yakni bagian tool web inti atau web core vitals ia menjadi salah satu faktor penentu penting sebagai parameter tolok ukur perfomance halaman blog kita.
Untuk mencapainya tidaklah serumit yang kita pikirkan, cukup menjadi sederhana, karena halaman yang sederhana itu ringan dan ringan itu cepat loading. Jikalau dulu kita berlomba lomba pasang widget sekarang bukan zamannya lagi, kalau dulu berlomba lomba merwarnai latar blog, sekarang sudah bukan masanya lagi.
Jadilah normal dan sederhana. Cukup. Sederhana itu indah dan abadi. Sedangkan cantik itu pada akhirnya akan jadi jelek karena ia harus mengikuti trend dan selera manusia yang berubah dari waktu ke waktu.
Salah satu topik yang kita bahas adalah widget widget yang cukup penting keberadaannya di dalam blog seperti breadcrumb, scroll top, menu navigasi dan pembahasan kita jatuh ke Related Posts.
Kita tahu semakin cantik sebuah widget akan semakin beratlah ia membebani loading halaman blog, saya mencoba membahasnya melalui hape pada tangkapan layar video channel editblogtema berikut:
Di dalam video tersebut saya menyinggung sedikit secara teknis, namun intinya adalah cara menguji seringan apa sih related posts yang telah kita pasang pada halaman web atau halaman blog kita?
Saya menguji dua halaman template buatan mbak igniel dan Mas Sugeng, ternyata related posts mereka berat karena tampilan sederhana halaman pada akhirnya mengabaikan related posts mereka alias tidak menampilkannya.
Berdasarkan hal di ataslah akhirnya editblogtema memilih membuat related posts ringan dan sederhana yang dapat tampil pada saat browser dalam mode sederhana. Untuk mengujinya silahkan masuk ke browser Yandex dan masukan link atau URL halaman blog Anda ke kotak pencariannya:
Jika Anda perhatikan pada gambar di atas bar pencarian sebelah atas kanan terdapat gambar atau ikon warna hijau gembok di sebelahnya terdapat ikon tampilan sederhana yang apabila di klik akan mebuat halaman blog kita menjadi tampil sederhana (ditunjuk oleh coretan panah warna merah) dan ringan, dan...tentu saja jadi cepat loading.
Setelah halaman anda berubah menjadi tampilan sederhana scroll halaman ke abawah apakah disana masih terdapat related posts? jika tidak ada, maka berarti related posts halaman Anda berat. Jika tampil, itu berarti related posts Anda ringan dan memenuhi standar. Ingin lebih jelas gambarannya silhakan tonton video di channel editblogtema di atas.
Dan jika Anda ingin memasang related posts buatan atau modifikasi Adelina Sofyan ini silahkan mengunjungi salah satu artikel kami di halaman kami dan ia dapat di pasang pada semua template varian terbaru blogger blogspot.
1. Pasang CSS:
Masuk ke dasbor blogger, pilih tema, pilh edit HTML.
Setelah berada di halaman editor HTML copy kode CSS berikut dan dan letakan di atas kode </head>:
<style>/* dp baca juga 3 */
.bacajuga{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:33,33%;background:#fff;border:0px rgba(0,0,0,0.2)}
.bacajuga h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:16px;color:#555;border-top-color:#f0f0f0;border-radius:20px;top:-21px;left:2.5%}
.bacajuga ul{margin:5;padding:5}
.bacajuga ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.bacajuga ul li:before{content:'👉';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:100%;left:10px;transition:all .3s}
.bacajuga ul li:hover:before{content:'\👍';font-family:fontawesome;color:#0383d9;}
.bacajuga a{color:#000;font-size:14px;margin:0 0 0 30px;}
.bacajuga a:hover{color:#0383d9;}
.bacajuga ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.bacajuga{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.bacajuga h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.bacajuga a{font-size:14px;margin:0}.bacajuga a:hover{color:#e74c3c}
.bacajuga ul li{padding:5px 0}
.bacajuga ul li:before,.bacajuga ul li:hover:before{display:none}}
@media only screen and (max-width:414px){
.bacajuga{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.bacajuga h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.bacajuga a{font-size:14px;margin:0}.bacajuga a:hover{color:#e74c3c}
.bacajuga ul li{padding:5px 0}
.bacajuga ul li:before,.bacajuga ul li:hover:before{display:none}}</style>
<script type='text/javascript'>
//<![CDATA[
var Bacajuga=new Array,BacajugaNum=0,relatedUrls=new Array;function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var r=e.feed.entry[l];Bacajuga[BacajugaNum]=r.title.$t;for(var t=0;t<r.link.length;t++)if("alternate"==r.link[t].rel){relatedUrls[BacajugaNum]=r.link[t].href,BacajugaNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=Bacajuga[r]);Bacajuga=l,relatedUrls=e}function contains(e,l){for(var r=0;r<e.length;r++)if(e[r]==l)return!0;return!1}function printRelatedLabels(){var e=Math.floor((Bacajuga.length-1)*Math.random()),l=0;for(document.write("<ul>");l<Bacajuga.length&&l<20;)document.write('<li><a href="'+relatedUrls[e]+'">'+Bacajuga[e]+"</a></li>"),e<Bacajuga.length-1?e++:e=0,l++;document.write("</ul>")}
//]]>
</script> <b:if cond='data:blog.pageType == "item"'>
</b:if>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
2. HTML
Masih di halaman editor HTML, cari kode <data:post.body/> beruntungnya pada varian terbaru template blogger dengan layout ke 3, kode hanya terdapat satu, terutama pada essentials. Letakan kode berikut di bawah kode tadi:
<div class='bacajuga'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&min-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga: </h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
Save template.
Demikian cara memasang related posts ringan standar browser yang telah di buat oleh Adelina Sofyan, silahkan memberikan secangkir kopi untuk tim kami...
Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: