Tombol Back to Top dengan Efek Animasi Roket Meluncur

Tutorial berikut berguna untuk menghias tampilan blog menjadi lebih menarik. Kalau biasanya tombol back to top hanya berupa ikon panah, maka di artikel ini akan sangat berbeda. Kita akan menggunakan ikon roket yang diberi efek meluncur ke atas.

Baca Juga: Tombol Back to Top Smooth Scroll Hanya dengan CSS
Rocket Launch Back to Top Button Smooth Animation1. Pastikan di blog kamu sudah terpasang

Memasang Iklan AdSense Sebelum atau Sesudah Elemen Tertentu di Dalam Postingan Blogger

Satu lagi teknik penempatan iklan AdSense yang harus kamu coba, yaitu menyisipkan iklan sebelum atau sesudah elemen HTML tertentu. Soal elemen itu akan dijelaskan lebih lanjut di bawah. Sekarang kita langsung masuk ke script utamanya dulu.

Memasukkan Iklan Sebelum Elemen TertentuIklan akan diletakkan sebelum atau di atas elemen HTML yang dipilih, misalnya sebelum heading h2 seperti ini.
Lorem

Cara Memasang Banyak Iklan AdSense Sekaligus (Multiple) di Dalam Postingan Blogger

Hai, saya balik lagi dengan satu tutorial yang cukup berguna untuk para publisher, yaitu script untuk memasukkan banyak iklan AdSense sekaligus ke dalam postingan Blogger. Sepertinya script sejenis ini belum ada jadi saya penasaran ingin mencoba. Ini berbeda dengan script iklan AdSense di tengah postingan yang mentok hanya bisa dipasang satu buah saja.

Kamu bebas memasukkan 2, 3, 4 atau

Cara Memasang Iklan AdSense Di Tengah Postingan Blogger

Penempatan iklan di tengah artikel Blogger menjadi salah satu posisi favorit para publisher. Kenapa? Ketika pengunjung sedang asik baca, eh tau-tau di tengahnya ada iklan. Jelaslah keberadaannya pasti akan disadari dan tidak akan terlewat.

Tutorial ini sebenarnya sudah banyak dan pasaran banget. Tapi saya mau share saja script buatan igniel.com untuk meletakkan iklan di tengah isi postingan

Script Lazy Load Youtube Untuk Memuat Video Saat Klik

Ketika kamu meng-embed video dari Youtube, kodenya akan langsung berjalan begitu halaman dimuat yang menyebabkan banyak sekali script yang harus dieksekusi. Ini membuat kecepatan waktu muat halaman menjadi menurun.

Kali ini ada script yang bisa membantu untuk mempercepat loading blog, yaitu lazy load video Youtube. Nantinya video baru akan muncul setelah pengunjung melakukan klik. Ini bisa

Random Post dengan Thumbnail di Blogger Tampilan Keren dan Ringan

Jika di artikel sebelumnya dijelaskan tentang cara membuat related post, maka kali ini adalah tutorial untuk membuat random post. Dari judulnya saja sudah jelas bahwa postingan akan dimunculkan secara acak, bukan berdasarkan label atau kategori terkait.

Random post yang muncul bisa saja adalah yang terpopuler, terlama, atau terbaru. Ini bagus untuk mengangkat kembali postingan yang sudah

Infinite Scroll Blogger. Memuat Halaman Berikutnya Tanpa Reload

Biasanya ketika membuka halaman lain dari sebuah blog, khususnya yang berplatform Blogger (Blogspot), browser akan melakukan reload atau refresh terlebih dulu sebelum pergi ke halaman yang dituju. Script yang akan saya bagikan ini akan memuat halaman berikutnya dari Blogger tanpa perlu reload.

Ada dua jenis infinite scroll yang tersedia berdasarkan event yang dilakukan:
Auto load on scroll.

Mengganti Navigasi Next dan Previous dengan Judul Postingan

Secara default, menu blog pager atau navigasi Blogger pada halaman post hanyalah berupa tulisan "Next" dan "Previous" atau "Newer" dan "Older" saja. Mengganti tulisan tersebut menjadi judul postingan akan membuat struktur navigasi menjadi lebih baik. Juga akan membantu pengunjung untuk mengetahui apa pembahasan dari artikel sebelum atau selanjutnya. Tentunya ini akan menjadikan blog lebih SEO

Related Post dengan Thumbnail dan Snippet Model List di Bawah Postingan

Sebenarnya isi Javascript related post ini hampir dengan versi sebelumnya yaitu related post dengan thumbnail model grid. Yang berbeda adalah adanya penambahan beberapa baris script untuk memanggil snippet atau summary (ringkasan deskripsi) dan perombakan CSS yang membuat tampilannya menjadi model list.

Artikel Terkait dengan Gambar dan Ringkasan DeskripsiCara memasang related post dengan

Related Post dengan Thumbnail Model Grid di Bawah Postingan

Related post atau artikel terkait adalah sekumpulan link yang menuju ke postingan atau konten lain yang memiliki kesamaan topik dengan artikel yang sedang dibaca. Keberadaannya sudah cukup lumrah dan sepertinya belakangan ini menjadi wajib karena dapat membuat pengunjung tertarik untuk menjelajahi postingan lainnya.

Beberapa keuntungan memasang related post dari segi SEO adalah:
Meningkatkan

Membuat Video Youtube pada Blog Menjadi Responsif di Semua Perangkat (Script Terbaru)

Ketika kita mengambil video dari Youtube dan memasangnya di blog (embed) ada satu kekurangan yang cukup menyebalkan, yaitu ukuran bingkai iframe video tidak mengikuti ukuran layar alias tidak responsif. Padahal sekarang ini pengunjung blog tidak hanya datang dari komputer saja, tapi dari handphone pun banyak.

Seperti inilah perbedaan tampilan video embed Youtube jika blog dibuka dari komputer

Script Untuk Otomatis Menghapus Link Aktif di Komentar Blogger

Penyisipan link aktif dalam kolom komentar sebenarnya kurang baik. Kebanyakan dari mereka yang melakukan itu bertujuan untuk menanam backlink. Jika di kemudian hari linknya mati dan tidak bisa diakses alias berubah menjadi broken link, maka akan berakibat buruk bagi kesehatan blog.

Beginilah contoh penulisan ketika menyisipkan link aktif di dalam kolom komentar Blogger.


Hasil akhirnya akan

Membuat Kotak "Click to Tweet" Quote di Dalam Postingan Blogger

Widget "Click to Tweet" adalah sebuah kotak yang berisi kutipan menarik yang biasanya menjadi sorotan utama dalam paragraf. Banyak sekali website terkenal menggunakan plugin ini setiap mereka menyelipkan sepenggal kalimat keren agar bisa langsung dibagikan ke Twitter oleh pembacanya.

Awalya saya tidak sengaja melihat box keren ini di salah satu blog berbasis WordPress. Akhirnya kepikiran mau

Membuat Daftar Isi (Sitemap) di Blog Berdasarkan Label dengan Menu Dropdown

Sitemap adalah daftar isi blog yang dapat memudahkan pengunjung untuk memilih artikel berdasarkan label atau kategori. Seperti halnya buku, dalam blog pun diperlukan sebuah navigasi layaknya daftar isi agar pengunjung bisa menjelajah semua konten yang ada. Sitemap berguna seperti peta yang membantu pengunjung agar tidak tersesat. Langsung saja ya ke tutorial cara membuat daftar isi otomatis di

Cara Pasang jQuery di Blogger

1. Pengertian jQuery
2. Keuntungan dan Kelebihan
3. Kekurangan
4. Cara Pasang

1. Pengertian jQueryApa itu jQuery? Singkatnya, jQuery adalah sebuah library Javascript yang meringkas dan menyederhanakan penulisan fungsi sehingga pengembangan website bisa dikerjakan lebih cepat.

Contohnya dalam Javascript native untuk memanggil elemen berdasarkan id ditulis seperti ini.

Cara Membuat Navigasi Halaman Dengan Nomor di Blogger

Navigasi halaman berfungsi untuk membawa pengunjung ke artikel-artikel lama yang telah dipublish terlebih dulu. Secara default, Blogger memang sudah support page navigation. Tapi bentuknya masih standar sehingga tidak bisa langsung menuju ke artikel yang sangat lama, tapi harus di-klik satu persatu sampai akhirnya tiba di halaman yang dituju.


Dengan dibantu sedikit script, maka fungsinya akan

Membuat Tombol Back To Top Smooth Scroll di Blog

Dulu saya pernah membuat tutorial cara membuat tombol back to top pure Javascript, dimana seluruh scriptnya dibuat menggunakan JS murni alias tanpa jQuery. Kelebihannya adalah lebih ringan karena tidak perlu menyisipkan script external dari library jQuery. Namun ada kekurangannya, yaitu pergerakannya kurang lembut dan kadang agak "macet". Jadi saya mau menambahkan versi lain, yaitu smooth scroll

Cara Membuat Anti Noscript dan Sembunyikan Konten Blog Jika Javascript Dimatikan

Javascript menjadi elemen krusial dalam sebuah blog. Dengannya, kamu bisa menciptakan banyak efek "sihir" yang membuat tampilan halaman menjadi lebih menarik dan mempercepat waktu loading blog. Rasanya hampir tidak mungkin ada website yang tidak menggunakan Javascript di zaman sekarang ini, dimana teknologi pengembangan website sudah maju sangat pesat.

Maka akan muncul masalah besar jika

Cara Memasang Anti AdBlock di Blogger Ala Igniel

AdBlock adalah ekstensi browser yang berfungsi mencegah iklan untuk muncul. Tujuan instalasi Adblock biasanya agar pengunjung bisa membaca artikel dengan nyaman tanpa perlu melihat iklan yang berseliweran.

Bagi publisher AdSense dan pemilik blog, hal ini bisa menjadi masalah karena salah satu penghasilan utama sebagai blogger adalah dari iklan tersebut. Jika iklan tidak tampil, maka tidak ada

Cara Memasang Widget Contact Form di Halaman Statis Blogger

Salah satu widget yang menurut saya sangat penting adalah formulir contact me (hubungi saya) di halaman statis Blogger. Saya kurang nyaman kalau mesti menyebar nomor pribadi di tempat umum. Makanya memilih widget ini karena pesan masuk ke email. Calon client bisa langsung menghubungi tanpa perlu tahu nomor pribadi saya. Kecuali kalau mereka minta nomor baru saya kasih.

Dengan adanya widget ini