Langsung ke konten utama

Cara menguji related posts ringan pada browser tampilan sederhana

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.

related posts dalam tampilan browser opsi sederhana
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:

tampilan halaman pada browser melalui opsi tampilan sederhana

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:&#39;👉&#39;;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:&#39;\👍&#39;;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 == &quot;item&quot;'>
</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 == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;min-results=10&quot;' 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:

Komentar

Populer

Cara memperbaiki add numbering dan add bullets yang tidak bisa tampil pada postingan blog

Hal ini terjadi pada tema editblogtema yang pada saat itu kami modifikasi untuk sementara berdasarkan tema sederhana bawaan blogger. Karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal postingan sudah terlanjur di publish. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering atau Numbered List dan Add Bullets atau Bulleted List" yang tidak bekerja. Sudah tentu ini pasti celah kelemahan template, jadi harus segera di perbaiki. Padahal kami tidak membuat template baru, lho. Hanya memodifikasi template tua bawaan dengan tajuk simple atau 'sederhana'. Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tersebut dan pada saat dilakukan penulisan dalam bentuk list keduanya tampak berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau li

PERIHAL GOOGLE PAGERANK dan ranking ALEXA

GOOGLE PAGERANK K alau dengan Google Pagerank jadi ingat saat membuka blogger tahun 2014 waktu itu Blog dengan Google Pagerank tinggi benar benar dijadikan "primadona"nya blogspot. Namun apa yang terjadi segalanya berubah. Google telah melakukan update algoritmanya secara besar besaran, dan kini walaupun pagerank masih penting namun telah berubah menjadi rahasia dapurnya Google. Selama bertahun tahun Google PageRank telah menjadi benchmark yang penting untuk menilai kualitas suatu website namun  pada April 2016 menjadi bulan yang penuh dengan kehebohan bagi komunitas pemasaran digital pada umumnya dan SEO (Search Engine Optimization) khususnya. Berbagai website dan blog terkemuka SEO sedunia banyak yang memberikan komentar mengenai hal tersebut. SearchEngineLand menyebutkan bahwa sejak Jumat, 15 April 2016, tiba tiba saja Google PageRank lenyap dari Google Toolbar! MASIH PENTINGKAH GOOGLE PAGERANK ITU? Ada yang berpendapat Google pagerank masih penting, tetapi tidak

JARINGAN INTERNET DAN TELEKOMUNIKASI TELKOMSEL RUSAK, PELANGGAN SANGAT DI RUGIKAN

Hey teman teman,  Aku di Indonesia sempat mau bikin konten tutorial dan itu seharusnya berjalan dengan baik, kalau tiba tiba saja jaringan internet tidak 'rusak'. Parahnya di tunggu berjam jam tidak juga aktif dari pukul satu atau pukul dua siang tadi. Mood aku buyar, karena ketika aku mendapatkan internet kembali draft aku sudah hilang separoh karena tidak ter-'save' pada saat internet hancur lebur tadi.  Sebagai gantinya aku menulis curhatan ini, maaf ya telkomsel, aku tidak menggunakan jaringan internetmu yang mahal, aku menulis sisi burukmu ini melalui jaringan internet Indosat. Kamu pasti mengerti mengapa aku marah. Karena jaringan internet terputus hingga sore tidak ada tanda tanda kehidupan. Awalnya aku menyangka karena quota internet sudah habis atau kartu halo belum bayar ya...eh gak mungkin! Tanya sama teman teman yang rata rata pengguna telkomsel. Yaaah sama. Mau tidak mau kalau masih terhubung harus beli kartu internet dari operator lain INDOSAT. Benar, dapa