Posts

Cara Lain Memasang Thumbnail Post di Homepage tanpa JavaScript

Salah satu item yang memberi sumbangsi vital terhadap loading blog untuk platform Blogger/blogspot ialah pemuatan gambar, tidak terkecuali thumbnail post di homepage. Lebih-lebih jika elemen gambar tersebut tidak di scale dengan benar.

Yang mana size atau resolusi gambar yang besar, ditampilkan dengan custom ukuran (lebar dan tinggi) yang lebih kecil. Cara tersebut tidak sepenuhnya mengubah dimensi gambar. Meskipun menggunakan trik resize image dengan JavaScript ataupun manipulasi CSS.

Nah, berikut ini ada satu trik lagi untuk menampilkan thumbnail post di homepage (halaman utama). Yaitu menempatkan gambar pertama dari postingan, sebagai background untuk dijadikan thumbnail. Yang akan dipanggil dengan background-image: url(CUSTOM_IMAGE_URL_HERE).

Cek DEMO berikut, lalu IE/buka sourcenya, perhatikan pengkodean pada bidang thumb-wrapper.

Demo
Cara bikinnya adalah sebagai berikut:

Langkah 1: Masuk ke Edit HTML, lalu ganti kode pemanggil thumbnail post (homepage) Anda dengan kode berikut in…

Merubah Warna Kata Pertama pada Title Widget Sidebar Menggunakan jQuery

Teknik mengubah warna text pada kata pertama di judul/heading digunakan untuk mempercantik tampilan template blog. Trik ini biasanya diterapkan pada title widget sidebar dan tag heading di blog. Sehingga akan terlihat style judul widget menjadi dua warna yang berbeda antara kata pertama dan kata selanjutnya.

Contohnya, sidebar di website/blog Anda terdapat widget yang berjudul “Postingan Terbaru”, maka jika diterapkan cara berikut ini, judul widget sidebar tersebut akan berubah menjadi “Postingan Terbaru”.

Demo
Cara menerapkannya  silahkan ikuti langkah-langkah pada tutorial berikut ini:

1. Masuk ke Edit HTML, tambahkan CSS berikut ini letakkan di atas kode </style>
.FirstWord{color:#ce0a46;}
2. Lalu cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; tambahkan kode jQuery berikut ini di atas kode tadi:
<script type='text/javascript'>
//<![CDATA[
$('#sidebar-wrapper h2').each(function(){var text = $(this).text().split(' …

Cara Menyembunyikan Iklan AdSense di Halaman Pencarian Blog dan Label

Menjalankan iklan di halaman search label dan terutama search blog post, adalah suatu tindakan yang sangat beresiko untuk kesehatan akun Google Adsense. Bisa-bisa akun Adsense akan kena banned.

Sebab, kita sebagai pemilik blog/website tidak dapat mengontrol keisengan pengunjung yang bisa saja memodifikasi URL pencarian label, dan memasukkan keyboard pencarian halaman blog, dengan kata kunci yang tidak ada hubungannya dengan konten blog, bahkan cenderung kurang pantas.

Lebih-lebih jika pengunjung yang marah karena masalah keluarga atau karena masalah hutang, dan melampiaskan kemarahannya tersebut pada akun Adsense yang terpasang di blog kita, melalui kolom pencarian blog (data:blog.searchQuery) atau memodifikasi link URL halaman pencarian label (data:blog.searchLabel) menjadi sesuatu yang berbau kata kunci dewasa atau18+.

Sebagai contoh, URL blog dari hasil keisengan pengunjung saat menggunakan widget pencarian blog, maka akan menjadi seperti ini:

https://setuplaptopgamingmurah.blogspot…

Cara Membuat Widget Sticky Sidebar Mengikuti Scroll ke Atas dan ke Bawah

Terdapat berbagai macam sticky widget (widget melayang) yang dapat diterapkan pada Blogger/Blogspot. Salah satunya ialah widget sticky sidebar: stick to bottom when scrolling down, and top when scrolling up. Artinya, widget yang menempel bagian bawah jika scrollnya ke bawah, dan widget yang menempel bagian atas jika kita scroll halaman blog/website ke atas.

Model widget sidebar seperti itu dapat Anda lihat langsung di website Jalantikus.com (halaman postingan), sangat keren bukan? Cara ini juga saya sudah terapkan pada template Viralisme Theme dan Risen Template (semua versi). Silahkan lihat demonya dengan klik tombol di bawah:

Demo
Nah melalui tutorial ini saya akan kasih tau bagaimana caranya pasang widget sticky sidebar seperti itu di platform Blogger/Blogspot.

Namun tidak menutup kemungkinan jQuery dari sticky sidebar ini bisa juga diterapkan pada platform lain seperti WordPress. Jika Anda tidak berminat menggunakan pluginnya.

Baca juga: Cara Pasang Museo @font-face, Font yang Digu…

Cara Memasang 3 Slot Iklan di Tengah Postingan Artikel

Jika rasa-rasanya memasang 2 slot iklan Adsense di tengah postingan masih kurang, maka tambahkan satu slot iklan lagi, sehingga akan nampak 3 slot iklan di tengah-tengah artikel blog/website.

Sebetulnya tutorial memasang tiga slot advertise di tengah postingan blog kali ini tidak benar-benar terletak Nampak di tengah postingan, melainkan posisinya berada di dalam postingan. Iklan bakal tampil menurut paragraph artikel yang kita tentukan di script.

Adapun script untuk tutorial ini adalah hasil modifikasi dari artikel yang sudah saya bagi sebelumnya, yaitu tentang cara pasang 2 iklan Google Adsense di tengah artikel.

Cara pemasangannya pun sama persis dengan langkah-langkah pada tutorial di artikel tersebut. Biar cara menerapkannya tidak bingung, alangkah baiknya cara pasangnya saya jabarkan disini juga. Berikut caranya!

Demo
Cara pasang 3 iklan Adsense di tengah postingan menurut paragraf1. Cari kode yang seperti ini (atau serupa, biasanya yang kedua)
<b:if cond='data:blog.pageType…

Membuat Komentar Disqus dengan Tombol Onclick Load

Tutorial Blogger kali ini tentang cara memasang widget Disqus comment dengan fungsi onclick load. Artinya, semua komentar di blog blogspot akan disembunyikan terlebih dahulu, dan kolom serta berbagai komentar tersebut akan ditampilkan jika pengunjung mengklik tombol untuk load komentar Disqus.

Memasang tombol load komentar Disqus dengan fungsi onclick event ini ialah salah satu cara mempercepat loading blog. Karena seperti diketahui, widget Disqus comment terkadang berkontribusi demikian besar pada size halaman postingan blog, saat halaman postingan tersebut dibuka. Apalagi jika komentar-komentar tersebut sudah demikian banyak, dan terdapat file lampiran berupa gambar dan lain sebagainya.

Dengan adanya tombol load Disqus comments, maka pemuatan komentar Disqus akan “tertunda”, lalu seluruh konten komentar tersebut akan terbuka seutuhnya setelah pengunjung mengklik tombol onload komentar Disqus.

Caranya memasangnya adalah sebagai berikut!

Cara memasang komentar Disqus dengan fungsi tomb…

3 Alat Penting Sebelum Update Postingan di Blog Bule

Dalam hal ini saya asumsikan Anda sudah punya artikelnya, baik itu artikel berbahasa Inggris, bahasa Spanyol, atau bahasa Korea. Termasuk juga, Anda sudah melakukan reset keyword dan embel-embelnya berdasarkan niche yang Anda pilih.

Pokoknya artikel-artikel tersebut sudah siap 100% untuk di posting, dengan segala konsep yang sudah direncanakan secara matang-matang. Serta penggunaan grammar yang menurut Anda cocok untuk niche yang sudah dipilih tersebut.

Adapun tiga alat tempur yang perlu disiapkan sebelum melakukan update postingan di blog bule akan dijabarkan seperti berikut ini.

3 tools yang harusnya digunakan sebelum update artikel unruk blog buleBagi sebagian Blogger mungkin tools berikut ini terlihat tidak penting-penting amat, atau bahkan bisa jadi ada yang akan bilang kalau toolsnya tidak berguna. Namun, menurut saya ini perlu dipertimbangkan untuk digunakan, mengingat target market kita adalah orang-orang nun jauh disana.

Adapun ketiga tools/alat tersebut adalah sebagai berikut…

Cara Pasang 2 Iklan Google Adsense di Tengah Artikel

Setelah membahas postingan tentang cara memasang kode iklan Adsense yang benar tanpa perlu di parse, berikut ini saya akan bahas tentang cara memasang dua unit/slot iklan Google Adsense ti tengah postingan dan tampil secara otomatis.

Sebetulnya konsepnya hampir sama dengan tutorial tentang cara memasang iklan Adsense di tengah artikel yang sudah saya buat sebelumnya. Persamaanya ialah, kita bisa menampilkan iklan pada paragraph manapun secara otomatis.

Adapun cara memasang 2 iklan Google Adsene di tengah artikel/postingan blogger/blogspot silahkan ikuti tutorialnya berikut ini.

Cari kode seperti ini:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <data:post.body/>
</b:if>
Atau yang seperti ini (khusus pengguna template Themeindie.com):
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='artbody'><data:post.body/></div>
</b:if>
Hapus kode tersebut, lalu ganti dengan kode berikut in…