SiteCode Berbagi Tema dan Tips Seputar Blogger, SEO, Google AdSense, Media Sosial, Game, Komputer

Salah satu faktor yang menyumbang beban loading pada suatu blog adalah konten gambar, di sini Arlina Code akan memberikan tips tentang bagaimana Cara Menunda Pemuatan Gambar Sebelum Scroll Halaman . Menunda Pemuatan Gambar Sebelum Scroll Halaman di sini adalah saat memuat sebuah halaman gambar tidak akan dimuat sampai kita scroll halaman dan itu akan menambah kecepatan blog. Proses seperti ini pernah saya bagikan juga di sini Cara Meningkatkan Loading Blog dengan LazySizes .

Tips Blogger dari Arlina Code kali ini adalah Cara Memasang Widget Newsletter di Blogger . Tutorial ini saya buat atas permintaan sobat blogger yang ingin memasang Subscription Box di blognya. Sebetulnya bagi yang sudah faham dengan coding blog mungkin tidak akan kesulitan untuk mencari kode dalam suatu halaman blog, karena semua kode yang diinginkan akan sangat mudah sekali disalin lewat Inspect Elements atau Page Source dari halaman blog. Namun sebagai manusia yang memiliki etika, meminta izin adalah hal yang terbaik.

Di Blogger sebenarnya sudah disediakan widget Archive yang memuat arsip seluruh artikel blog berdasarkan waktu publish. Namun karena dikemas dalam bentuk widget, kustomisasinya sangat terbatas dan estetika tata letaknya pun sulit untuk diatur. Jadi agar lebih tertata, di sini Arlina Code akan berbagi Cara Menambahkan Widget Sitemap di Blogger . Adapun keuntungan Cara Menambahkan Widget Sitemap di Blogger ini adalah agar blog tampil lebih profesional dari sebelumnya. Selain itu, pengunjung juga bisa melihat dan mencari semua artikel blog kita dengan mudah. Tentunya itu akan menambah nilai plus untuk blog jika pengunjung membuka artikel tertentu pada widget sitemap ini.

Kemarin pas saya iseng-iseng memasang widget Featured Post di blog percobaan, pas di cek kenapa bentuknya berantakan ya? 😄 Saya baru ingat, itu karena tema yang digunakan sudah dioptimasi dengan menghilangkan JS dan CSS bundle bawaan Blogger. Otomatis widget Featured Post yang notabennya adalah widget bawaan Blogger tampilannya tidak seperti saat menggunakan tema bawaan Blogger. Kemudian saya coba untuk memodifikasi tampilan basic yang berantakan tersebut dengan menambahkan CSS dan markup yang diperlukan, untuk hasilnya bisa sobat lihat di halaman utama blog ini. Nah, bagi sobat yang ingin memasang Modifikasi Widget Featured Post Bawaan Blogger bisa ikuti langkah mudah di bawah ini.

Kali ini Arlina Code akan berbagi tentang cara Menghilangkan Tanda Panah di Atas Halaman Blog . Tanda panah di atas halaman blog ini muncul jika sobat sudah mengoptimasi tema dengan cara seperti ini Cara Menghapus CSS, Javascript, dan Widget Bundle Blogger .

Disqus merupakan sebuah platform online yang menyediakan sistem komentar yang bisa sobat gunakan di berbagai platform website, penggunaan komentar Disqus sekarang sudah menjadi pilihan terbaik karena memiliki fitur-fitur yang lebih baik jika dibandingkan dengan sistem komentar default yang ada di Blogger. Sistem komentar Disqus ini sudah umum kita temukan di situs-situs yang menyematkannya dan di blog Arlina Code pun saya menggunakannya. Dengan segala kelebihannya, adapun kekurangannya karena Disqus merupakan plugin pihak ke tiga maka dari itu Disqus akan menyumbangkan beban loading pada blog setiap kali kita membuka tautan artikel. Untuk mengatasi hal itu, di sini Arlina Code memberikan tips Cara Memasang Lazy Loading Disqus on Scroll yang cara kerjanya adalah kode Disqus tidak akan berfungsi sebelum kita scroll halaman sampai bagian (viewport) Disqus terlihat.

Beberapa waktu lalu Blogger update User Interface yang memiliki tampilan lebih modern dan menu yang responsive. Banyak hal positif setelah update UI Blogger dari versi klasik ke versi baru namun ada juga hal yang kurang khususnya pada format URL gambar yang diupload langsung dari postingan berbeda dengan sebelumnya. Untuk tema-tema yang saya bagikan di blog Idntheme sebagian besar sudah saya perbaiki untuk masalah ini namun hanya untuk versi premium saja dan untuk versi free baru beberapa tema yang saya perbaiki. Bagi sobat Arlina Code yang menggunakan tema free dari Idntheme atau tema lain yang menggunakan JavaScript untuk memunculkan thumbnail post pada halaman index bisa mengikuti tips berikut ini.

Pada kesempatan kali ini Arlina Code akan berbagi Tips Blogger tentang Cara Memasang Halaman Error 404 di Blogger . Halaman Error 404 'Not Found' adalah halaman yang dihasilkan oleh server untuk menginformasikan bahwa link yang sobat kunjungi di suatu halaman blog tidak dapat ditemukan. Biasanya sobat akan mengalami Error 404 ketika link telah diubah tanggal publikasinya atau dihapus, atau bisa juga ketika sobat klik sebuah link alamat blog dengan kesalahan penulisan didalamnya.

Kali ini Arlina Code akan berbagi tentang Cara Mengatasi Leverage Browser Caching Favicon di Blogger.

Kali ini Arlina Code akan berbagi tutorial Cara Menambahkan Image Lightbox dengan Fancy Box di blog. Apa itu Fancy Box? Fancy Box adalah sebuah JavaScript lightbox library yang dikembangkan oleh Fancyapps yang bisa sobat manfaatkan untuk mempresentasikan segala jenis media dengan tampilan yang menarik dan juga responsive. Fancy Box memiliki beberapa fitur yang menarik seperti autoplay slideshow, fullscreen, zoom, share, dowload dan juga navigasi untuk gambar. Fancy Box juga bisa digunakan untuk keperluan lain seperti menampilkan konten modal box video, iFrame, dan lainnya. Namun di sini saya hanya akan berbagi Fancy Box sebagai pengganti Image Lightbox standar dari Blogger.

Salah satu alasan kenapa sobat ingin Menghilangkan ?m=1 dan ?m=0 Saat Diakses Lewat Perangkat Mobile adalah sobat sudah menggunakan tema responsive pada blognya sehingga tampilan khusus mobile yang disediakan secara default sudah tidak digunakan lagi selain itu juga untuk menghindari duplikat title tag karena ada parameter lain yang memengaruhi SEO blog. Mungkin di sini ada juga dari sobat yang ingin memperbaiki komentar Disqus yang masuk, karena sistem Disqus membaca parametar dari halaman blog yang diakses dari ?m=1 dan ?m=0. Sehingga itu akan membuat perbedaan dari komentar Disqus yang masuk saat diakses lewat ?m=1 tidak bisa terbaca di desktop begitupun sebaliknya.

Beberapa waktu yang lalu ketika saya mencari sebuah artikel, saya melihat ada sesuatu yang baru yaitu tanda centang di belakang judul link suatu situs. Kemudian saya cari kenapa ada tanda centang tersebut dan menemukan bahwa tanda centang tersebut ditambahkan bertujuan agar judul postingan terlihat lebih menarik dan tentunya ada manfaat untuk optimasi SEO serta memiliki potensi klik yang besar dari penelusuran. Tanda centang (√) atau check mark sendiri adalah tanda universal yang biasanya digunakan untuk menggambarkan suatu konsep setuju, selesai, menandai, atau bisa juga terverifikasi.

Banyak cara untuk meningkatkan loading sebuah blog, salah satunya dengan menambahkan script LazySizes pada tema blog. Lazysizes adalah self-initializing lazyloader yang bisa dibilang cepat, junk-free dan juga SEO Friendly untuk gambar yang ada di dalam blog dan bisa juga dipakai untuk lazyload pada iFrame video seperti embed video Youtube dan video dari platform lainnya. Bagi sobat yang memiliki blog dengan banyak konten gambar dan video tentu ini merupakan salah satu solusi yang tepat untuk meningkatkan loading blog dengan memasang LazySizes karena konten gambar atau video tidak akan dimuat (off-screen) sebelum sobat scroll halaman ke bawah.

Kali ini Arlina Code akan berbagi tips Cara Memasang Tombol Back To Top dengan SVG . Tombol Back To Top dengan SVG ini fungsinya sama seperti tombol back to top seperti di tutorial sebelumnya di blog ini, perbedaannya hanya pada icon pada tombol ini menggunakan SVG yang lebih ringan dari icon format gambar. Ini adalah salah satu cara untuk mendorong pengguna menelusuri lebih banyak konten-konten yang lainnya dengan mudah.

Beberapa sumber menyatakan salah satu tujuan memasang auto refresh pada halaman blog adalah untuk membantu meningkatkan pengunjung blog. Bagaimana caranya? Maka di sini Arlina Code akan berbagi tips Membuat Auto Refresh pada Halaman Blog yang bisa sobat tambahkan dengan mudah. Berikut langkah-langkahnya :

Membahas tentang Syntax Highlighter tentunya tidak luput dari kode-kode rumit yang terdapat dalam sebuah Blog atau editor source code pada bahasa pemrograman. Apa itu yang dimaksud dengan Syntax Highlighter dan fungsinya? Saya akan menjelaskan tentang Syntax Highlighter.

Kali ini Arlina Code berbagi sebuah widget daftar isi yang disortir berdasarkan label dengan animasi menarik. Widget daftar isi atau sitemap ini sebelumnya pernah Saya bagikan di blog ini pada postingan cara menambahkan widget sitemap di blog .

Pada kesempatan kali ini Arlina Code akan berbagi tentang cara Memasang Widget Fixed Contact Form di Blog yang berarti widget ini akan muncul di halaman blog tepatnya di sudut kanan bawah.

Tutorial selanjutnya, Arlina Code akan berbagi tutorial Cara Memasang Slide Box Rekomendasi di Blog . Memasang widget slide box rekomendasi berdasarkan label yang akan muncul di sebelah kanan blog memang sangat mudah dan cocok untuk blog yang bertemakan berita atau bisa juga dipasang di blog pribadi. Selain itu dengan memasang widget ini akan memberikan pilihan kepada pengunjung untuk membuka artikel lain yang menurutnya menarik dan bermanfaat.

Bagaimana cara Redirect 301 URL atau permalink custom domain lama ke permalink custom domain baru? Sehingga jika pengunjung mengetikan alamat domain lama kita, apakah itu pada halaman utama ataupun halaman-halaman artikel maka secara otomatis akan mengarah ke alamat domain baru. Berikut ini beberapa alasan kenapa kita redirect domain, diantaranya :