Articles by "Desain Blogger"
Tampilkan postingan dengan label Desain Blogger. Tampilkan semua postingan

di Juni 14, 2018 1
Tutorial: Cara Backup, Mengimpor, dan Menyalin Blog di Blogger/Blogspot

Dalam beberapa kasus yang terjadi dikalangan blogger, kadang kita ingin menyelamatkan isi-isi (artikel/komentar) dari situs web tersebut apabila situs web itu dihapus oleh Google secara permanen.

Contoh studi kasusnya seperti ini, kita tidak pernah tahu... Mungkin dalam beberapa bulan ke depan, situs web kita akan di Banned oleh Google. Terserah apakah tujuan dan penyebabnya karena Jingling, atau memang akun Google AdSense di Suspend atau di Banned; dan kita ingin mengalihkan artikel-artikelnya ke blog baru.

Cara Mem-Backup Template Blogger, Artikel & Komentar Blogspot

Nah untuk berjaga-jaga, penting bagi kita untuk menyelamatkan semua file atau data-data yang ada di dalam situs web tersebut; contohnya gambar, tautan video dari pihak ketiga, komentar, artikel-artikel, dan semua konten yang ada di dalam situs web tersebut.

Cara Mem-Backup Template Blogger, Artikel & Komentar Blogspot


Sebagaimana keterangan resminya di laman Mem-backup, Mengimpor, atau Menghapus Blog, saya ingin menjelaskan tentang (1.) Cara mem-backup blog, (2.) Menyalin atau Copy tema Blogger, dan (3.) Mengimpor postingan dan komentar secara menyeluruh 100%.

1. Cara Mem-Backup Blog


Yang dimaksud mem-backup blog disini ialah kita menyelamatkan postingan dan komentar yang sudah ada di dalam situs web tersebut.

  • Login ke Blogger > Klik tanda panah ke bawah > Pilih salah satu blog
  • Masuk ke Setelan > Lainnya
  • Dibagian Impor & Backup > ketuk tombol Backup Konten
  • Simpan di komputer/laptop sobat

Hasilnya nanti akan berbentuk file yang bersifat .XML postingan dan komentar. Dan file .XML ini bisa di impor di blog mana saja; termasuk blog sobat, maupun blog orang lain.

2. Cara Menyimpan Salinan Tema Blogger


Menyimpan, menyalin, atau meng-Copas template blogger merupakan salah satu cara untuk berbagi template blogger dengan teman lainnya.

  • Masih halaman utama di Blogger
  • Ketuk tombol Theme > Klik tombol Backup/Pulihkan dibagian sudut kanan
  • Download tema blogger tersebut

Selain itu, tujuannya juga untuk menghindari hal-hal yang tidak diinginkan. Contohnya lupa bagian-bagian mana saja yang telah dimodifikasi dan ingin membatalkannya seperti semula.

3. Cara Mengimpor Konten/Postingan dan Komentar ke Blog


Kalau tutorial No. 1 diatas bertujuan untuk menyelamatkan postingan dan komentar; nah pada tutorial No. 3 ini, artinya kita memindahkan file .XML tersebut ke blog lain.

Praktisnya, semua artikel-artikel yang sudah, dan komentar yang telah ada di dalam file .XML tersebut, akan ter-upload secara otomatis ke blog yang telah sobat targetkan.

  • Masih di Blogger > Setelan > Lainnya
  • Dibagian Impor & Backup, klik Impor Konten
  • Ketuk tombol Impor dari Komputer
  • Pilih file .XML yang dimaksud dari komputer/laptop sobat
  • Tekan tombol Publikasikan

Cara ini tidak ada batasan ukuran file untuk mengimpor blog, akan tetapi jumlah impor dalam sehari dibatasi (tidak diketahui seberapa banyak, - tidak ada keterangan).

Nah itu dia cara mem-backup template blogger, artikel, dan komentar di blog untuk mengantisipasi dan menghindari adanya penghapusan blog yang dilakukan oleh Google secara permanen.*
Baca selengkapnya »

di Juni 11, 2018 0
Tutorial: Cara Membuat dan Memasang Iklan Tautan Teks (Anchor Text) Responsive 10 Baris 5/5 Berdampingan di Artikel Blog

Salah satu fakta menarik tentang Google AdSense adalah kita bisa memodifikasi tata letak atau tampilan dari tayangan iklan Google AdSense tersebut.

Contohnya membuat iklan tautan (Anchor Text) baris yang awalnya hanya 4 buah (2 di kiri, dan 2 di kanan) menjadi 10 buah tautan teks (5 di kiri, dan 5 di kanan).

Masalahnya, untuk membuat jenis iklan seperti ini membutuhkan yang namanya CSS dan HTML tambahan.

Cara Memasang Iklan Tautan Teks AdSense 10 Baris 5/5 di Artikel Blog

Nah... Yang menariknya adalah pada tutorial di artikel ini, kita tidak membutuhkan CSS sama sekali. Yang perlu dilakukan, memodifikasi sedikit HTML dari iklan Google AdSense yang dimaksud.

Cara Memasang Iklan Tautan Teks 10 Baris 5/5 di Postingan Blog


Perlu ditekankan disini ialah tutorial ini bekerja dengan sangat sempurna 100% pada template blogger SEO Kraken. Artikel ini pun berawal dari pertanyaan yang diajukan oleh salah satu pembeli template yang dimaksud.

  • Masuk ke akun Google AdSense
  • Ketuk menu My AdS (Iklan Saya), lalu ketuk Ads Unit (Unit Iklan), tambahkan +Unit Iklan Baru
  • Pilih jenis iklan Iklan Teks & Bergambar
  • Isi nama iklan (terserah)
  • Ketuk tayangan iklan dengan tipe Tautan Respnosive (Ukuran Otomatis)
  • Lalu ketuk tombol Simpan dan Dapatkan Kode

Untuk jenis iklan yang akan digunakan dan/atau yang ditampilkan nantinya, kita menggunakan jenis iklan Google AdSense yang Responsive agar bisa menyesuaikan dengan perangkat Smartphone; sebagaimana algoritma MobileGeddon.

Tutorial dengan gambar, cek gambar di bawah ini:

Cara Memasang Iklan Tautan Teks AdSense 10 Baris 5/5 di Artikel Blog

Pada tahap ini, kalau sobat sudah mendapatkan kode iklan Google AdSense-nya, silakan cocokkan kode data-ad-client dan data-ad-slot yang ada pada iklan AdSense milik sobat tersebut dengan kode dibawah ini:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Judul Iklannya Tertulis Disini -->
     <ins class="adsbygoogle"
     style="display:block;height:250px"
     data-ad-client="ca-pub-94286xxxx"
     data-ad-slot="94xxxx"
     data-ad-format="link"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Yang diartikan mencocokkan dengan kode diatas, maksudnya kode Ca-Pub dan Ad-Slot yang didapatkan tadi.

Cek juga kode diatas, saya menambahkan kode ini: style="display:block;height:250px. Tahu untuk apa fungsi kode ini? Agar iklannya memanjang ke bawah. Makanya, saya katakan bahwa penerapan, pembuatan, dan/atau penayangan iklan Google AdSense 10 baris diatas dibuat tanpa bantuan CSS.

CSS pada dasarnya memberatkan loading blog, tapi pengaruhnya tidak separah atau berpengaruh besar terhadap kecepatan loading situs web. Praktisnya, beratnya ukuran CSS tidak seberat kode HTML dan JavaScript.

Nah kalau dirasa ukuran 250px tersebut tidak cocok dengan template blogger sobat (template blogger selain SEO Kraken), bisa diganti dengan 300px atau 360px.

Cara Memasang Iklan Tautan Teks AdSense 10 Baris 5/5 di Artikel Blog
Contoh Gambar Iklan Tautan Teks Google AdSense

Kalau ingin menempatkan kode iklan di dalam artikel atau di tengah postingan blog, pastikan kodenya di Parse dulu. Silakan Googling, Parse HTML. Hasil kode iklan yang sudah di parse nantinya akan seperti ini:

&lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;
&lt;!-- Judul Iklannya Tertulis Disini --&gt;
     &lt;ins class=&quot;adsbygoogle&quot;
     style=&quot;display:block;height:250px&quot;
     data-ad-client=&quot;ca-pub-94286xxxx&quot;
     data-ad-slot=&quot;94xxxx&quot;
     data-ad-format=&quot;link&quot;&gt;&lt;/ins&gt;
&lt;script&gt;
(adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;

Tutorial yang cukup mudah pastinya, cukup Copas kode iklan Google AdSense milik saya; selanjutnya diimplementasikan ke template blogger dan cocokkan dengan kode unit iklan yang sobat miliki saat ini. Ok semoga berguna.*
Baca selengkapnya »

di Mei 28, 2018 0
Tutorial: Cara Mengubah (Mengganti) Jenis/Gaya Huruf di Template Blogger (Blogspot)

Pada laman Google Fonts, dengan mudahnya kita mendapatkan berbagai gaya atau jenis huruf yang disedikan oleh Google; dan dapat diimplementasikan langsung di blog yang kita miliki.

Contohnya ada Roboto, yang masih menjadi primadona dan paling banyak digunakan sampai saat ini; ada juga Lora, Droid Sans, Open Sans Condensed, Poppins, Raleway, Lato, dan berbagai teks lainnya dengan gaya Serif, Sans-Serif, Display, Handwriting, dan Monospace.

Pertanyaannya, bagaimana cara mengubah atau mengganti jenis gaya huruf yang sebelumnya sudah ada di dalam template blogger?

Cara Mengubah (Mengganti) Jenis Huruf di Template Blogger/Blogspot

Seandainya pun belum terpasang, bagaimana cara membuat dan memasang Google Fonts di dalam template blogger? Sebenarnya, tidak sulit yang dibayangkan. Praktisnya, sangat mudah kok.

Cara Memasang Google Fonts Fast Loading di Blog


Jika sebelumnya sobat belum pernah mencoba, menambahkan, atau memasang Google Fonts di template blogger; disini penulis akan menjelaskan tutorialnya.

Dikatakan dan/atau dikategorikan "Fast Loading", lantaran Google Fonts terkadang menimbulkan permasalahan Render Blocking CSS dan JavaScript sekaligus. Melalui tutorial di bawah ini, insya Allah tidak ada kesalahan; baik pada Render Blocking CSS maupun JavaScript.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Oswald|Raleway:400,400i,700,700i");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Copas kode di atas, TEPAT diatas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;. Selanjutnya simpan perubahan template blogger.

Note: Perhatikan kode warna merah diatas; dimana kasusnya, saya menggabungkan Google Fonts jenis Oswald dan Raleway menjadi SATU, dipisahkan tanda "|" tanpa tanda petik.

Kalau ingin memisahkannya, pasang kode di bawah ini -- 100% persis sama:

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Oswald");loadCSS("https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Hanya ada sedikit perbedaan diantara dua kode di atas, kan? Ketika salah satu diantaranya diimplementasikan di dalam template blogger, atau pun dibandingkan; HASILNYA tetap sama.

Cara Mengubah (Mengganti) Jenis Huruf di Template Blogger/Blogspot


Selanjutnya, tentang bagaimana cara mengganti gaya jenis huruf yang ada di template blogger. Sebelumnya, perhatikan bagaimana kodenya, apakah format Link-nya langsung seperti ini:

<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

...atau memang sudah dalam format Fast Loading sebagaimana No. 1 diatas? Contohnya seperti ini:

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Oswald|Raleway:400,400i,700,700i");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Ikuti beberapa instruksi dibawah ini:

  • Ubah atau ganti yang saya warna merahkan diatas; atau sebagaimana yang ditampilkan di template blogger sobat
  • Masuk ke Google Fonts > Cari jenis huruf yang ingin digunakan > Tambahkan

Pada tahap ini, sobat akan melihat berbagai informasi dari jenis Google Fonts yang telah dipilih; dimulai dari teks dengan gaya Normal (300/400), Italic (miring - 300i/400i)), dan hingga Bold (700) sampai Bold yang dimiringkan (700i).

Saran terbaik dari saya, gunakan jenis Google Fonts yang mendukung semua gaya teks seperti yang dijelaskan diatas, -- Normal, Italic, dan Bold.

Nah, misalkan Google Fonts yang ingin digunakan adalah jenis teks Raleway, bisa ditambahkan dengan gambaran kode seperti ini: Raleway:400,400i,700,700i.

Cara Mengaktifkan JavaScript Google Fonts di Blog dengan CSS


Nah diatas itu adalah beberapa cara membuat dan memasang JavaScript Google Fonts di blog. Selanjutnya, tentang bagaimana cara kita "memanggil" kode tersebut agar AKTIF di tampilan blog kita.

Selalu ingat, JavaScript itu "pemanis" tampilan blog, biasanya berpengaruh ke kecepatan loading blog yang semakin lambat apabila dipasangkan; sedangkan CSS mengatur gaya tampilan situs kita, sedangkan HTML hanyalah bentuk-bentuk dasar dari tampilan blog.

Sebenarnya agak rumit menjelaskan poin No. 2 ini karena setiap template blogger memiliki ciri khasnya masing-masing.

  • Cari kode .post-body atau .post atau .body atau main-wrapper atau body,.body-fauxcolumn-outer
  • Jika sebelumnya telah terpasang kode font-family: Roboto; atau font: 14px Roboto; atau font: 14px Roboto, sans-serif 
  • Silakan ganti nama CSS pada "Roboto" diatas dengan nama JavaScript Google Fonts yang telah sobat pilih

Contohnya, apabila ingin mengganti (mengubah) gaya teks Roboto dengan Raleway, maka hapus tulisan Roboto tersebut, dan ganti dengan tulisan/kata yaitu Raleway.

Oh kalau misalkan JavaScript dari Google Fonts tersebut mendukung gaya teks Normal Halus (disebut juga Light, 300 atau 300i) maka tambahkan kodenya seperti di bawah ini:

.post-body {background:#fff;font: 15px Raleway; font-weight: 300; line-height:1.2;color:#333}

Itu pun kalau sobat ingin menggunakan tampilan teks dengan gaya Normal Halus (Light). Kalau ingin menggunakan biasa (Medium), tidak perlu menambahkan kode "font-weight" lagi.

Cara Mengubah (Mengganti) Jenis Huruf di Template Blogger/Blogspot

Oh... kalau misalkan teks tersebut ingin ditebalkan (Bold), maka tambahkan kode "font-weight" dengan ukurannya tersendiri; apakah itu 400 atau 700.

Biasanya, teks yang ditebalkan (Bold), seringkali digunakan untuk kata-kata pada bagian Navigasi Menu yang ada di dalam blog tersebut. Contohnya: .navigasimenu {background:#3a89b9;list-style:none;margin:0;float:left;font:16px Oswald;text-transform:uppercase; font-weight: 400}

Nah, gampang banget, kan? Itu dia cara mengubah/mengganti gaya (jenis) teks huruf di template blogger. Semoga artikel ini membantu, wassalam.*
Baca selengkapnya »

di Mei 11, 2018 0
Pengertian Paypal, Tutorial Cara Membuat Tombol Donasi Paypal di Blogspot dan Cara Memasangnya Terbaru 2018

Paypal adalah sebuah alat transaksi jual beli yang dilakukan melalui jaringan internet (Online). Dengan Paypal, seseorang bisa membeli atau menjual suatu barang; baik dilakukan dalam jangkauan lokal maupun Internasional.

Selain itu, dengan Paypal, seseorang bisa mengirim atau menerima sejumlah uang kepada orang tertentu yang telah ditentukan; hanya bermodalkan sebuah email.

Semisal, kami mengirim sejumlah dana kepada suatu pihak, yang kami butuhkan adalah emailnya saja. Kami sebagai pihak mengirim, tidak akan pernah tahu informasi dari pihak tersebut seperti kartu kreditnya, maupun nomor rekening bank yang dimilikinya.

Cara Membuat Tombol Donasi Paypal di Blogspot dan Cara Memasangnya

Masih berkaitan dengan Paypal, kali ini Tom Cruise akan berbagi tutorial cara membuat tombol donasi Paypal di Blogspot.

Tombol ini sifatnya mengirim, dalam artian... kita menerima sejumlah uang yang dikirimkan seseorang kepada kita. Entah apa alasannya, mungkin menerima sedekah, transaksi jual beli template, atau lainnya.

Cara Membuat Tombol Donasi Paypal di Blogspot dan Cara Memasangnya


Jika belum memiliki akun Paypal, buat akunnya terlebih dahulu. Tutorialnya sendiri mudah. Yang paling penting itu adalah informasi kita.

Note: Sebelum melakukan tutorial ini, pastikan berbagai data dan informasi kita tertulis dengan jelas di Paypal. Jika tidak memiliki kartu kredit, daftarkan nomor rekening bank.

Pada tutorial membuat tombol donasi Paypal di blog dan cara memasangnya yang tertulis dengan jelas di artikel ini, saya anggap sobat sudah memiliki akun Paypal.

1. Masuk ke Paypal > Login
2. Masuk ke laman Ringkasan Paypal > Alat > Semua Alat

Cara Membuat Tombol Donasi Paypal di Blogspot dan Cara Memasangnya

Pada langkah ini, scroll halaman ke pertengahan dan cari menu yang bertuliskan Tombol Paypal. Lihat gambar di bawah ini:

Cara Membuat Tombol Donasi Paypal di Blogspot dan Cara Memasangnya

Sobat akan diarahkan ke halaman Tombol Simpanan Saya. Pada bilah menu sebelah kanan, tekan tombol Buat Tombol Baru. Lihat gambar di bawah ini:

Cara Membuat Tombol Donasi Paypal di Blogspot dan Cara Memasangnya

Selanjutnya, ikuti beberapa instruksi konfigurasi (settingan) tombol donasi Paypal di bawah ini:

  • Jenis Tombol: Donasi
  • Nama/Layanan Organisasi: Nama Pribadi Anda
  • ID Donasi: Penetapan ID Barang sebagai pengenal unik agar pelacakan lebih mudah
  • Menyesuaikan Tombol: Konfigurasi tombol yang akan ditampilkan nantinya bagaimana (diperbolehkan menggunakan gambar sendiri apabila ada)
  • Negara dan Bahasa untuk Tombol: Pilih bahasa Indonesia - Bahasa Inggris
  • Mata Uang: USD (Dollar) - Indonesia belum mendukung (IDR - Indonesia)
  • Jumlah Kontribusi: Centang OK pada "Donatur memasukkan jumlah sumbangan mereka sendiri"
  • ID Rekening Pedagang: Silakan pilih "Gunakan ID rekening aman pedagang saya"

Selanjutnya, sobat akan melihat (1.) Langkah 2: tentang perlindungan tombol, edit tombol, dan lain-lain sebagai Opsional... dan (2.) Langkah 3: Penyesuaian fitur lanjutan sebagai Opsional.

Abaikan kedua langkah-langkah tersebut, tapi boleh di modifikasi sebagaimana keinginan sobat sendiri.

Cara Membuat Tombol Donasi Paypal di Blogspot dan Cara Memasangnya

Di atas adalah kode HTML yang nantinya bisa kita tempatkan dimana pun; saran terbaik ialah ditempatkan di halaman Tentang Saya (About) atau Kontak Kami (Contact Us) dalam tulisan mode HTML (bukan Compose). Semudah itu, dan secepat itu, kan?

Hasilnya? Cek di bawah ini:


Itulah langkah-langkah bagaimana cara membuat tombol donasi Paypal dan cara memasangnya di blogspot. Ok semoga berguna.*
Baca selengkapnya »

di Mei 09, 2018 0
Tutorial: Cara Menghubungkan/Mengaitkan Akun Google AdSense dengan Google Analytics

Dalam materi pembelajaran Joint Venture Google AdSense, beberapa hal yang tidak boleh dilewati dan dilupakan adalah (1.) Otorisasi Situs, dan (2.) pengaitan akun AdSense dengan akun Google Analytics.

Otorisasi Situs adalah suatu layanan yang tersedia di program periklanan Google AdSense untuk memverifikasi suatu situs yang ingin menggunakan unit iklan dari akun Google AdSense yang kita miliki.

Ketika sebuah URL situs sudah terdaftar di Otorisasi Situs Domain, maka segala hal yang terjadi pada situs tersebut seperti CPC, RPM, BPK, dan segala hal lainnya; akan terdaftar dan di anggap SAH oleh Google AdSense.

Cara Menghubungkan AdSense dengan Google Analytics

Selain itu, tujuan Otorisasi Situs ialah untuk menghindari pencurian unit iklan Google AdSense, kerja sama Google AdSense (JV AdSense), dan bertujuan untuk menghindari adanya aktifitas tidak valid pada BPK atau CPC.

Cara Menghubungkan AdSense dengan Google Analytics


Dalam kasus ini, saya beranggapan bahwa sobat sudah menautkan blog/situsnya dengan Google Analytics. Jika belum, silakan ikuti tutorialnya: Cara Mendapatkan Tracking Code Google Analytics.

Setelah mendapatkan Tracking Code Google Analytics dan menghubungkannya dengan Google Analytics, dalam beberapa hari ke depan, Analytics akan menampilkan berbagai informasi kunjungan pembaca, berbagai sesi, pentalan situs, dan lain-lainnya yang diperoleh dari situs tersebut.

  • Masuk ke Google Analytics > Silakan Masuk atau Login
  • Ketuk Gear dibagian paling bawah (Baca: Admin - Setting)
  • Pilih salah satu Blogspot atau Situs Web
  • Pada sub-menu Buat Properti, ketuk Penautan AdSense
  • Silakan ikuti langkah-langkahnya lebih lanjut, dan klik menu Aktifkan Tautan AdSense
  • Tekan tombol Simpan yang berada di bagian paling bawah, Selesai.

Proses menampilkan data ini membutuhkan waktu kurang lebih 24 jam. Jadi, untuk melihat hasilnya, tunggu barang 1 hari atau kurang lebih dari itu.

Lihat gambar di bawah ini; tentang bagaimana cara mengaitkan atau menghubungkan akun Google AdSense dengan Google Analytics.

Cara Menghubungkan AdSense dengan Google Analytics

Cara Menghubungkan AdSense dengan Google Analytics

Manfaat, fungsi dan tujuan pengaitan atau penghubungan antara akun Google AdSense dengan Google Analytics di atas bertujuan untuk:

  • Menghindari kesalahan klik iklan yang tidak valid
  • Penghasilan yang ditampilkan akan tertata dengan rapi dan baik yang dilakukan secara Real-Time
  • Cocok diterapkan bagi mereka yang membuka jasa JV Google AdSense
  • Alternatif tombol Otorisasi Situs domain yang menghilang di Dashboard Google AdSense

Itulah tutorial cara menghubungkan akun AdSense dengan Google Analytics serta tujuannya, manfaatnya, dan fungsinya. Semoga berguna.*
Baca selengkapnya »

di Mei 05, 2018 3
Tutorial Cara Memperbaiki/Mengatasi Formulir Kontak (Form Contact) yang Gagal Mengirim Pesan Email

Salah satu cara optimasi SEO seperti mempercepat loading blog adalah menghilangkan atau menyembunyikan CSS, JavaScript dan Widget Bundle bawaan Blogger (Blogspot).

Pada dasarnya, terutama Bundle Blogger, akan termuat secara otomatis ketika situs di buka. Sedikit banyaknya, dengan adanya Bundle Blogger ini mempengaruhi kecepatan loading blog menjadi lambat.

Meski pun bagus untuk SEO, ternyata berdampak besar terhadap widget formulir kontak yang tidak bisa digunakan (tidak aktif), seperti gagal mengirim pesan email meski pun tombol SEND sudah di tekan (klik) berulang kali.

Tutorial Cara Mengatasi Formulir Kontak yang Gagal Mengirim Pesan Email

Untuk mengatasi widget Contact Form yang gagal mengirim pesan, ikuti beberapa langkah mudah perbaikannya di bawah ini.

Mengatasi Formulir Kontak yang Gagal Mengirim Pesan Email


Tutorial ini hanya berlaku untuk gadget Contact Form yang menggunakan HTML dan CSS seperti yang SEO KILLER gunakan saat ini (bukan Contact Form asli bawaan Blogger - tapi hasil modifikasi).

Kasusnya disini, sobat sudah mendapatkan kode HTML dan CSS yang mengatur Contact Form di Google; apapun dan bagaimana pun gayanya.

(1.) Copy atau Salin semua kode HTML dan CSS yang telah ditemukan. (2.) Paste (Tempel) di halaman statis kontak. (3.) Tepat di bagian bawah dari kode HTML dan CSS yang panjang tersebut, Copas kode di bawah ini:

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '8022617659375683714';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x8022617659375683714','//https://tipsseokiller.blogspot.com/','8022617659375683714');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '8022617659375683714', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

4. Simpan template blogger

Note: Copy kode di atas terlebih dahulu ke Notepad; ubah semua angka 8022617659375683714 dengan Blog ID dari situs sobat. Lihat di URL halaman Blogger untuk mendapatkan angka/nomor Blog ID.

Jangan senang dulu, praktekan! Coba dan lihat hasilnya, apakah bekerja dengan baik sebagaimana mestinya, atau email malah tetap gagal terkirim.

Tutorial di atas bekerja dengan baik pada template blogger SEO Kraken yang digunakan SEO Killer Tips saat ini. Ok semoga berguna.*

Thanks berat buat neng geulis, Arlina Design! ;)
Baca selengkapnya »

di April 27, 2018 0
Tutorial Cara Membuat dan Memasang Widget Komentar Facebook di Blog Blogspot

Membuat dan menampilkan Facebook Comment Box di blog tergolong sangat mudah.

Yang lebih praktisnya, Facebook juga telah menyediakan kodenya di Facebook Developer.

Pemasangan widget komentar Facebook di blog sebenarnya bagus buat SEO. Percaya atau tidak, para pengunjung akan masuk atau kembali lagi ke situs sobat lantaran ada yang membalas komentar seseorang.

Singkatnya, gadget komentar Facebook cocok untuk kolom komentar perdebatan :) Namun, beberapa blogger enggan memasangnya lantaran rawan Spam Comments.

Cara Pasang Gadget Komentar Facebook di Blog Blogspot

Kalau masalah Spam Comments, sebenarnya bisa di atasi dengan pemasangan Tracking Code dari FB Admins yang bisa sobat dapatkan melalui Cara Mendapatkan kode FB App ID dan FB Admins yang bertujuan untuk memoderasi komentar Facebook yang masuk.

So, tutorial ini bekerja dengan sangat baik pada SEO Kraken Blogger Theme, template blog premium yang saya jual. Apalagi sudah mendapat dukungan kode FB App ID dan FB Admins.

Cara Memasang Gadget Komentar Facebook di Blog Blogspot


Silakan masuk ke halaman Blogger seperti biasa, langsung masuk ke "Theme" dan ketuk menu "Edit HTML".

Cari <head/> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<script type="text/javascript">
//<![CDATA[
  $(window).bind("load resize", function(){
var url = location.protocol+'//'+location.host+location.pathname;
var containercm_width = $('#container-commentfb').width();
  $('#container-commentfb').html('<div class="fb-comments" ' +
'data-href="'+url+'"' +
' width="' + containercm_width + '" data-num-posts="10"></div>');
FB.XFBML.parse( );
});
//]]>
</script>

Copas kode di atas, TEPAT sebelum kode <head/> atau &lt;/head&gt;&lt;!--<head/>--&gt; atau... di atas kode <head/> atau &lt;/head&gt;&lt;!--<head/>--&gt;

Masih di dalam template blogger, cari kode id='comments. Tampilan kode lengkapnya, kurang lebih seperti di bawah ini:

<b:includable id='comments' var='post'>
<div class='comments' id='comments' itemscope='itemscope' itemtype='https://schema.org/Comment'>

Selanjutnya, Copas kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
   <div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/>
  </div>
</b:if>

Letakkan di bawah kode:

<b:includable id='comments' var='post'>
<div class='comments' id='comments' itemscope='itemscope' itemtype='https://schema.org/Comment'>

Sehingga hasilnya akan tampak seperti di bawah ini:

<b:includable id='comments' var='post'>
<div class='comments' id='comments' itemscope='itemscope' itemtype='https://schema.org/Comment'>
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
   <div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/>
  </div>
</b:if>

Silakan simpan template blogger dan lihat hasilnya.

Cara Pasang Gadget Komentar Facebook di Blog Blogspot

Jika terjadi error karena masalah "Object Valid" atau bagaimana, biasanya ada masalah di bagian Tracking Code FB Admins.

Agar komentar Facebook tidak terjadi error, harap ikuti instruksi Cara Mendapatkan Open Graph FB App ID dan FB Admins dengan benar.*
Baca selengkapnya »

di April 07, 2018 0
Tutorial Cara Mendapatkan dan Memasang FB Admin ID & FB App ID

Posting ini merupakan dokumen/file tambahan tentang bagaimana cara setting template blogger SEO Kraken, SEO high CTR Google AdSense.

Posting ini pula sebagai bahan media dokumentasi tentang dunia blogging, yang barangkali berguna bagi sobat di suatu hari nanti.

Oh iya... di dalam theme-nya, ada Meta Tags SEO Killer yang telah disematkan, -- yang merupakan All in One SEO Pack for Blogger Blogspot terbaru untuk saat ini (2018).

Tag Meta dengan jenis All in One SEO Pack merupakan jenis Tag Meta SEO terbaik yang pernah ada di muka bumi, paling update, dan terbaik di antara yang terbaik.

Dan... All in One SEO Pack sudah terpasang dengan sangat baik di dalam SEO Kraken blogger theme! ;)

Pengertian dan Fungsi Open Graph Facebook


Open Graph Facebook adalah sebuah kode HTML khusus yang bertugas menampilkan bagaimana konten itu ditampilkan ketika di share ke Facebook.

Mungkin sobat agak merasa heran ya ketika melihat sebuah artikel atau situs dibagikan ke Facebook, judulnya apa, artikelnya apa, dan gambar serta deskripsinya apa, semuanya tidak nyambung.

Itu dikarenakan karena situs web tersebut tidak menggunakan HTML khusus Open Graph Facebook.

Nah pengaturan situs web yang telah terpasang Open Graph Facebook, akan mengatur tampilan artikel ketika di share di Facebook; dimulai dari gambar artikel, snippet (summary text, atau ringkasan artikel) serta judul artikel tersebut.

Oh iya... kodenya cukup banyak, beda kode beda pula fungsi dan/atau tugasnya. Sobat bisa mencari referensi terkait kode ini diberbagai situs lainnya.

Yang perlu sobat ketahui adalah HTML khusus untuk Open Graph Facebook yang ada di SEO Kraken blogger theme telah siap digunakan. Jadi, sobat tidak perlu ragu. Ikuti saja panduannya.

Pengaruh FB Admin ID & FB App ID bagi SEO


Pada panduan No. 7 di dokumen setting SEO Kraken, saya menyuruh sobat untuk menambahkan FB Admin ID dan FB App ID.

Secara garis besar, memang kedua kode ini tidak wajib disertakan.

Namun, beberapa praktisi SEO menyarankan untuk memasang FB Admin ID dan FB App ID apabila dimungkinkan, selain itu fungsinya untuk memperkuat SEO blog sobat.

Oh iya! Kode FB Admin ID & FB App ID ini merupakan bagian dari All in SEO Pack for Blogger. Sudah seharusnya dimanfaatkan sebaik mungkin lho...

Tutorial Cara Mendapatkan FB Admin ID & FB App ID


1. Cara Membuat FB Admin ID


FB Admin ID atau fb:admin adalah identitas admin Facebook sobat, atau sang pemilik akun Facebook.

Tugasnya menghubungkan antara komentar blogspot yang menggunakan komentar Facebook; untuk melakukan moderasi komentar pada widget Facebook Comments.

  1. Masuk ke situs ini: https://findmyfbid.com
  2. Silakan input URL atau alamat Facebook anda; contohnya: https://www.facebook.com/algazaliofficial (URL Facebook saya)
  3. Ketuk Find Numeric ID
  4. FB Admin ID akan muncul secara otomatis

Tutorial dengan gambar, langkah pertama:

Tutorial Cara Mendapatkan FB Admin ID & FB App ID

Tutorial dengan gambar, langkah kedua:

Tutorial Cara Mendapatkan FB Admin ID & FB App ID

Selanjutnya, cari kode di bawah ini:

<meta content='Disini-Kode' property='fb:admins'/>

Pada tulisan yang saya warna-merahkan, ganti dengan FB ID Facebook yang telah sobat ketahui dan/atau didapatkan barusan.

2. Cara Mendapatkan FB App ID


FB App ID atau fb:app_id adalah sebuah kode aplikasi yang bertugas mengaitkan dan/atau mengintegrasikan BLOG sobat dengan Facebook.

Kodenya adalah ini:

<meta content='Disini-Kode' property='fb:app_id'/>

Fungsi kode aplikasi fb:app_id di atas adalah sebagai jembatan antara sobat dengan situs web untuk melakukan pengecekan interaksi link yang di share ke Facebook.

  1. Login to Developers Facebook Apps
  2. Daftar atau login kalau sobat belum pernah mencobanya
  3. Ketuk pilihan menu Add a New App ID
  4. Masukkan nama situs dan kontak berupa email > ketuk Buat ID Aplikasi
  5. Masukkan Captcha apabila muncul

Pada halaman dalam ID Aplikasi Facebook ini, sebenarnya sobat telah mendapatkannya. Lihat gambar di bawah ini:

Tutorial Cara Mendapatkan FB Admin ID & FB App ID

Tapi, alangkah baiknya apabila sobat mengubah (mengganti) status Dalam Pengembangan yang Mati menjadi AKTIF.

Tutorial Cara Mendapatkan FB Admin ID & FB App ID

Nah disinilah masalahnya. Ketika sobat mengaktifkannya, akan muncul pesan error yang mengatakan:

URL Kebijakan Privasi Tidak Valid: Anda harus memberikan URL Kebijakan Privasi yang valid agar aplikasi Anda dapat Aktif. Buka Pengaturan Dasar dan pastikan URL valid.

Maka, tutorial mengatasi pesan errornya dengan cara sebagai berikut:

  1. Ketuk menu Pengaturan > lalu ketuk Dasar
  2. Pada URL Kebijakan Privasi, masukkan URL static page halaman situs sobat; apakah Disclaimer atau Privacy Policy dari halaman blog sobat sendiri (pilih salah satu)
  3. Simpan perubahan!

Contoh URL yang saya maksud itu seperti ini:

https://tipsseokiller.blogspot.co.id/p/disclaimer.html

Selanjutnya, silakan tekan tombol Dalam Pengembangan tersebut; yang awalnya MATI menjadi AKTIF. Congrats...!!!

Bagaimana? Sebuah artikel tentang Tutorial Cara Mendapatkan FB Admin ID & FB App ID yang mudah untuk dimengertikan?

Jika ada hal-hal yang ingin ditanyakan, silakan bertanya di kolom komentar.

Oh iya... artikel ini merupakan konten dukungan untuk panduan setting SEO Kraken blogger theme. Untuk sobat yang belum membelinya, yuk buruan beli dari sekarang... ^^
Baca selengkapnya »

di Maret 31, 2018 0
Cara agar Foto (Image) Sejajar di dalam Artikel Blogspot

Menampilkan gambar dengan cara sejajar dan/atau berdampingan di dalam blogsposting menjadi kebutuhan beberapa blogger.

Biasanya, identik dengan situs yang berjualan secara online seperti baju, celana, produk kecantikan, template dan lainnya.

Pada tutorial kali ini, yang anda butuhkan adalah atribut HTML table, tr, td, href, rel tag, alt dan title tag dari gambar tersebut. Caranya sangat mudah kok! :)

Cara mudah Membuat Gambar Berdampingan di Postingan Blog


Kode dasarnya adalah:

<table>
<tr>
<td> gambar #1 </td>
<td> gambar #2 </td>
</tr>
</table>

Untuk meyakinkan para pembaca yang ingin menggunakan tutorial ini, maka kode yang perlu ditambahkan adalah:

<a href="Target Situs" target="_blank" rel="nofollow"><img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar"></a>

Sehingga apabila digabungkan akan menjadi seperti dibawah ini:

<table>
<tr>
<td> <a href="Target Situs" target="_blank" rel="nofollow"><img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar"></a> </td>
<td> <a href="Target Situs" target="_blank" rel="nofollow"><img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar"></a> </td>
</tr>
</table>

Cara mudah Membuat Gambar Berdampingan di Postingan Blog

Diatas adalah cara menampilkan 2 gambar dengan cara sejajar. Kalau ingin menampilkan 3 foto yang sejajar di artikel blog, cukup tambakan kode td seperti dibawah ini:

<table>
<tr>
<td> gambar #1 </td>
<td> gambar #2 </td>
<td> gambar #3 </td>
</tr>
</table>

Oh iya. Mungkin ukuran gambarnya yang terlalu besar atau bagaimana, bisa diatur kok dengan tambahan kode width dan height. Cara penerapannya sebagai berikut:

<a href="Target Situs" width="250px" height="200px" target="_blank" rel="nofollow"><img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar"></a>

Pada kode width dan height di atas, bisa anda atur sedemikian rupa sehingga cocok dengan tampilan blogger anda. Silakan sesuaikan dengan cara yang anda mau.

Target Situs adalah URL tujuan apabila gambar di klik; rel tag blank artinya apabila gambar di klik maka akan terbuka secara new tab; sedangkan rel nofollow sifat bagaimana backlink itu bekerja, jika ingin bersifat dofollow maka hapus kode rel nofollow.

Contoh tampilan yang berhasil saya buat nih! Seger ya! Hahaha... namanya furry citra delina, nggak tahu deh orang mana ^^

Foto Cewek Cantik Foto Cewek Cantik

Itulah tutorial bagaimana cara menampilkan 2 dan 3 gambar sejajar secara bersamaan di dalam artikel blogspot. Semoga berguna, good luck!
Baca selengkapnya »

di Maret 17, 2018 0
Cara Membuat dan Memasang Kotak Berlangganan di Blogspot

Apabila anda ingin mempunyai langganan pembaca, satu-satunya cara yang bisa anda lakukan adalah dengan menyediakan widget Kotak Berlangganan artikel.

Singkatnya begini, ketika ada seorang pembaca mendaftarkan emailnya ke Subscription Box yang anda punya, mereka akan mendapatkan artikel terbaru berdasarkan kapan artikel tersebut dipublikasikan.

Hari ini anda publikasikan atau posting artikel terbaru, dalam beberapa menit kemudian artikel tersebut akan masuk ke email mereka, -- tentunya bagi mereka yang sudah mendaftarkan emailnya ke Subscription Box yang anda pasang di blog.

Modifikasi Subscription Box Blogger Simple tapi Keren

Cara Membuat dan Memasang Kotak Berlangganan di Blogger


Pada langkah pertama, buat dulu akun anda ke FeedBurner. Selanjutnya, ikuti langkah-langkah dibawah ini:

  1. Masuk dulu ke Blogger, kemudian pilih menu Layout
  2. Pada kolom Sidebar, silahkan ketuk menu Add a Gadget untuk menambahkan widget
  3. Cari widget Follow by Email (geser sampai ke bawah)
  4. Ubah alamat atau URL default yang ditampilkan: http://feeds.feedburner.com/blogspot/Nixly
  5. Dengan URL atau Feed yang sudah anda buat, contohnya seperti ini: http://feeds.feedburner.com/tipsseokiller
  6. Simpan atau Save Arrangement

Modifikasi Subscription Box Blogger Simple tapi Keren

Agar tampilannya tertata rapi dan enak dipandang, maka pasang CSS dibawah ini di dalam template blogger anda.

1. Masuk ke Blogger, pilih Theme, selanjutnya ketuk Edit HTML
2. Copy kode dibawah ini:

.FollowByEmail .widget-content:before{content:"Nggak perlu bolak balik lagi. Cukup daftarkan email, anda akan mendapatkan artikel gratis disetiap harinya.";display:block; padding:0 0 15px 0;font-weight:300}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {background-color:#e74c3c}
.footer .FollowByEmail .follow-by-email-inner .follow-by-email-address {background-color:#000000;border:1px solid #e74c3c}
.FollowByEmail .follow-by-email-inner .follow-by-email-address {font-size: 13px;padding: 5px 0;padding-left: 5%;width: 100%}
input[type="submit"] {outline:0;border:0;padding:5px 8px;color:#FFFFFF;margin:0 20px}
input[type="submit"]:hover {background-color:#324353}
input[type="text"] {padding: 4px 5px;border: 1px solid rgba(219,219,219,1)}

3. Letakkan diatas kode ]]></b:skin>
4. Simpan perubahan yang terjadi pada template blogger anda

Note: Anda bisa mengubah kalimat diatas dengan kalimat yang ingin anda gunakan. Pastikan pula bahwa anda telah membuat atau memiliki akun FeedBurner.

Apabila tata letak, ukuran huruf yang terlalu kecil atau besar, atau hal lainnya yang tidak sesuai dengan yang anda inginkan; perhatikan pada kode font-size, padding, margin, background-color, dan border-radius.

Itulah tutorial cara modifikasi tampilan widget kotak berlangganan bawaan Blogger dari yang sederhana menjadi tampak keren dan gress.
Baca selengkapnya »

di Maret 03, 2018 0
Pengertian Breadcrumb, Cara Membuat dan Pasang Breadcrumbs SEO Friendly

Apa itu Breadcrumbs adalah suatu jejak atau navigasi blog yang bertugas untuk menampilkan pelacakan suatu artikel yang sedang dibaca oleh para pembaca.

Tujuannya, agar pembaca bisa tahu bahwasanya ada artikel lain yang terpasang pada label tersebut (sesuai topik); tentunya, dengan cara lain selain mengandalkan Related Posts.

Biasanya, posisi atau letak dari Breadcrumbs ialah dibawah navigasi menu, dan tepat diatas judul suatu konten blog.

Pada umumnya, pelacakan diawali terlebih dahulu oleh halaman awal (Home), label (Category), dan diakhiri dengan judul artikel (Content). Contohnya seperti ini nih: Home > Kue > Cara Membuat Kue.

Pengertian Breadcrumb dan Cara Membuat Breadcrumbs SEO Friendly

Cek Juga: Cara Membuat Redirect Otomatis ke Halaman Awal Blogspot

Menurut para pakar dan ahli master SEO, Breadcrumbs bagus buat blog; guna meningkatkan ranking situs dengan cepat. Apalagi, Breadcrumbs juga bagus untuk meningkatkan pageviews blog.

Nah, bagaimana cara membuat dan pasang Breadcrumbs SEO Friendly di blog?

Cara Membuat Breadcrumbs SEO Friendly di Situs


Apabila di blog anda sudah terpasang Breadcrumbs, hapus dulu; termasuk HTML dan CSS-nya secara keseluruhan. Jika perlu, lakukan backup template.

1. Pertama sekali, cari kode ini:

<div class='post hentry'>

Jika kode diatas tidak ada, cari kode dibawah ini (karena isi template blogger berbeda-beda):

<article class='post hentry'>

2. Selanjutnya, Copy kode dibawah ini:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:10px 5px 10px 0; margin-bottom:8px;font:12px Arial; line-height:1.2em; border-bottom:1px dotted #f2f2f2;'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag,noindex'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

3. Letakkan di bawah <article class='post hentry'> atau di bawah <div class='post hentry'>

Sehingga hasilnya akan seperti dibawah ini:

<div class='post hentry'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:10px 5px 10px 0; margin-bottom:8px;font:12px Arial; line-height:1.2em; border-bottom:1px dotted #f2f2f2;'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag,noindex'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

4. Simpan perubahan template blogger, Ok selesai.

Cek Juga: Cara Buat dan Pasang Markup HTML & Formatting

Pengertian Breadcrumb dan Cara Membuat Breadcrumbs SEO Friendly

Itulah cara membuat dan pasang navigasi menu Breadcrumbs SEO Friendly yang sudah sesuai anjuran SEO pada isi artikel SEO friendly Breadcrumbs.
Baca selengkapnya »

di Maret 03, 2018 0
Cara Membuat, Memasang, dan Modifikasi Contact Form (Contact Us) Responsive di Blogger

Contact Us (Kontak Kami) atau Formulir Kontak adalah salah satu media komunikasi antara anda sebagai penulis online (blogger) dengan para pembaca.

Formulir kontak seringkali digunakan sebagai media komunikasi yang bersifat privasi antara anda dengan orang lain.

Contohnya, buat saja halaman statis, masukkan saja kata-kata seperti, "hubungi saya via email: algazaliofficial@gmail.com", sudah bisa banget.

Nah, kalau dipikir-pikir, cara diatas kan tergolong ribet, tidak efisien, memakan banyak waktu. Untuk menghemat waktu, dan agar User Friendly, semuanya kita jadikan menjadi satu halaman.

Disitu tempat pengisian nama, input alamat email, dan komentar yang akan dikirimkan; dan akan diterima langsung oleh anda, tepat di kotak masuk, bagian sosial dari email anda.

Cara Membuat Contact Form (Contact Us) Responsive di Blogger

Cek Juga: Cara Membuat Sticky Widget Responsive di Blog

Cara Membuat Contact Form (Contact Us) Responsive di Blogger


Yang uniknya lagi, Formulir Kontak ini sudah di dukung dengan gaya Responsive dan Mobile Friendly, artinya adaptif terhadap berbagai tampilan smartphone.

1. Login to Blogger
2. Static Page > Edit / New Page
3. Copas kode berikut:

Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.

<form id="kontak-seokiller" name="contact-form">

<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
form.payforpal{margin:auto;text-align:center}
#kontak-seokiller{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}
#ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}
.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '8022617659375683714';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8022617659375683714','//tipsseokiller.blogspot.com/','8022617659375683714');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '8022617659375683714', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Cek Juga: Cara Menyembunyikan Iklan Adsense ketika Search Form Digunakan

Silakan ubah dan sesuaikan tulisan yang saya warna-merahkan pada kode diatas, dengan kepemilikan atas nama blog anda sendiri. Semoga berguna.
Baca selengkapnya »

di Maret 03, 2018 0
Rahasia SEO: Cara Membuat Breadcrumb di Blogspot agar Lebih SEO Friendly

Breadcrumb adalah navigasi atau internal link yang berada di atas judul postingan blog, dengan tulisan yang berukuran kecil, tepat di atas judul artikel.

Komposisi dari Breadcrumb berawal dari nama/tombol Home > Label (atau lebih dari satu label) > Judul Artikel. Contohnya seperti ini:

Home > Tips SEO > Cara Membuat Breadcrumb di Blogspot agar Lebih SEO Friendly.

Navigasi Breadcrumb ini sudah seharusnya dibuat, dipasang atau disematkan di blogspot. Mau tidak mau, harus dipasangkan agar blog jauh lebih SEO Friendly; alias bersahabat bagi mesin pencari mana pun, termasuk Google.

Rahasia SEO: Cara Membuat Breadcrumb di Blogspot agar Lebih SEO Friendly

Note:

Oh ya, sebelumnya, saya ingin menekan bahwa artikel bukan tentang cara membuat dan memasangkan Breadcrumb di blogspot, akan tetapi lebih mengarah ke "SEO Friendly".

Cek Juga: Tips SEO: Cara Menghapus Artikel SEO Friendly 100%

Rahasia SEO: Cara Membuat Breadcrumb di Blogspot agar Lebih SEO Friendly


Oleh karena suatu sebab dan hal lainnya, disini saya mengandalkan Photoscape untuk menggambarkan SEO Friendly yang saya maksud.

Perhatikan gambar berikut:

Rahasia SEO: Cara Membuat Breadcrumb di Blogspot agar Lebih SEO Friendly

Breadcrumbs yang tampil seperti pada gambar diatas memang sudah sesuai dengan pedoman SEO yang sebenarnya, akan tetapi SEO Breadcrumbs bisa ditingkatkan lagi.

Kira-kira, Breadcrumb yang telah kita terapkan akan tampil seperti berikut:

Rahasia SEO: Cara Membuat Breadcrumb di Blogspot agar Lebih SEO Friendly

Itulah yang saya maksud, SEO Friendly Breadcrumbs. Label pada Breadcrumb disembunyikan (noindeks), dan digantikan dengan titik-titik lalu judul artikel :)

Langkah-langkah pemasangannya, yang perlu diperhatikan disini adalah penambahan rel-tag noindeks pada kode Breadcrumb yang terpasang di template blogger anda.

Begini cara penyisipan kodenya:

<a expr:href='data:label.url' property='v:title' rel='v:url,noindex'><data:label.name/></a>

Untuk melakukan uji atau pengetesan, silahkan merujuk ke situs Structured Data Testing Tools.

Cek Juga: Cara Meningkatkan Pageviews Blog hingga 20x Lipat

Selain itu, percaya atau tidak, pemasangan Breadcrumbs akan membuat blog menjadi lebih User Friendly, singkatnya ialah memudahkan para pembaca untuk memilah-milah artikel yang barangkali ingin mereka baca sesuai dengan topik artikel tersebut; selain dengan cara mengandalkan Related Posts tentunya :)
Baca selengkapnya »

di Maret 01, 2018 0
Cara Menampilkan atau Menyembunyikan Gadget Blog hanya di Halaman tertentu di Blogger/Blogspot

Suatu widget atau Gadget di blogger yang dipasangkan begitu saja, secara default akan ditampilkan atau dimunculkan diberbagai halaman situs.

Nah, baru-baru ini, salah satu fakta menarik yang berhasil saya temukan ialah iklan AdSense yang muncul di Static Page, bisa membuat akun Google AdSense dinonaktifkan.

Static Page artinya adalah halaman statis, tempat dimana kita mengisi artikel dengan konten-konten sensitif seperti About, Contact, Sitemap dan Disclaimer yang ada di blogger blogspot.

Banyak yang belum tahu, kan? Sumber informasinya nggak banyak, lhooo...

Cek Juga: Cara Menghapus Judul Static Page di Blogger/Blogspot

Maka dari itu, salah satu cara agar akun iklan AdSense tidak dibanned (atau ditangguhkan) adalah dengan cara tidak menampilkan Gadget dari AdSense di dalam Static Page.

Yang perlu diperhatikan, tutorial ini adalah langkah-langkah bagaimana cara menampilkan dan menyembunyikan suatu Gadget di Blogger (blogspot) yang langsung dilakukan di dalam template blogger.

Saya harap anda bisa mempraktekkannya sendiri secara mandiri.

4+ Cara Menampilkan & Menyembunyikan Widget Blog Dihalaman Tertentu

Contoh Gadget yang ingin saya tampilkan atau sembunyikan di blog adalah kode Recent Posts dibawah ini:

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<!-- disini kode pembukanya -->
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<!-- disini kode penutupnya -->
</b:includable>
</b:widget>

Yang kita butuhkan pada penerapan teknik menyembunyikan atau menampilkan suatu Gadget di blog ini adalah tag kondisionalnya.

Cek Juga: Cara Menghapus Gadget yang tidak Bisa Dihapus

4+ Cara Menampilkan & Menyembunyikan Widget Blog Dihalaman Tertentu


1. Menampilkan Gadget hanya di Homepage (Beranda)


Gunakan kode awalnya, dibawah ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Dan kode penutupnya ini:

</b:if>

2. Menampilkan Widget Blog hanya Dihalaman dalam Postingan Blog (Single Post)


Gunakan kode tag kondisional dibawah ini:

<b:if cond='data:blog.pageType == "item"'>

Dan kode penutupnya:

</b:if>

3. Menyembunyikan Gadget Dihalaman dalam Posting Blog (Kebalikan Tutorial No. 2)


Kode pembuka:

<b:if cond='data:blog.pageType!= "item"'>

Kode tag penutup:

</b:if>

Cek Juga: Pengertian CNEUC dan Cara Memasangnya di Blog

4. Menampilkan Gadget Dihalaman Tertentu di Blogspot


Gunakan kode tag dibawah ini:

<b:if cond='data:blog.url == "URL of the page"'>

Dan kode penutupnya ini:

</b:if>

Catatan: Ganti kode URL of the page dengan alamat (URL) tempat dimana Gadget hanya dimunculkan dihalaman tersebut (di halaman tertentu di blog).

5. Untuk Cara Menyembunyikan Widget hanya Dihalaman Tertentu


Codenya ini:

<b:if cond='data:blog.url != "URL of the page"'>

Dan kode penutupnya adalah:

</b:if>

6. Memunculkan Gadget hanya Dihalaman Statis Blog (Static Page)


Kalau anda ingin menampilkan widget hanya di halaman dalam Static Page, penerapan kode tag yang dibutuhkan adalah:

<b:if cond='data:blog.pageType == "static_page"'>

Dan kode penutupnya dibawah ini:

</b:if>

Cek Juga: Apa itu Meta Tag Refresh? Bagaimana Cara Memasangnya?

7. Menyembunyikan Gadget hanya di Halaman Statis


Apabila sebuah Gadget hanya ingin disembunyikan di halaman statis, tag kondisionalnya adalah:

<b:if cond='data:blog.pageType != "static_page"'>

Dan penutupnya:

</b:if>

8. Menampilkan Gadget hanya di Halaman Arsip


Kalau blog anda punya halaman arsip, maka gunakan kode tag ini:

<b:if cond='data:blog.pageType == "archive"'>

Dan ini:

</b:if>

Nah, lengkap banget, kan? Banget.

Cek Juga: Pengertian Font Awesome, Cara Membuat dan Memasangnya di Blog

Cara pemasangannya sudah saya jelaskan diatas, dan mohon disesuaikan secara mandiri. Good luck, sebatang dulu, "Pria punya Selera."
Baca selengkapnya »

di Februari 26, 2018 0
Cara Menyembunyikan Iklan Google AdSense ketika Search Form Digunakan

Google telah menerangkan bahwa salah satu kriteria agar blog diterima oleh Google AdSense adalah dengan tidak menggunakan topik atau konten dewasa.

Content yang dimaksud, baik itu berupa gambar, video, bahasa, kata-kata, perjudian, pornografi, dan lainnya.

Masalahnya, saya mendapatkan informasi terbaru dari laman Sugeng Riyadi disini, beliau mengatakan bahwa sudah seharusnya kita menyembunyikan iklan Google AdSense pada widget pencarian blogger blogspot.

Mengapa? Sebab, sebagus dan sebaik apapun artikel yang Anda buat, entah itu soal agama sekali pun, kalau ada yang menyalahgunakan Search Form ini, bisa-bisa akun AdSense Anda di banned oleh Google sendiri.

Cara Menyembunyikan Iklan Google AdSense ketika Search Form Digunakan

Nah, pertanyaannya ialah bagaimana mungkin blog kita di banned atau ditangguhkan oleh Google padahal kita tidak menggunakan topik tersebut?

Masalahnya ada di Search Form yang kita pasang di blog. Search Form ini bisa disalahgunakan oleh oknum atau orang-orang yang tidak menyukai kita.

Contohnya, Anda mempunyai blog dan di blog tersebut sudah terpasang satu buah unit iklan AdSense. Saya menggunakan Search Form Anda, mengetik dengan kata-kata kotor seolah-olah sedang mencari sesuatu di blog Anda.

Ingat, Guys... disini saya mengetikkan kata-kata kotor.

Setelah melakukan itu, saya sebagai pelaku memang tidak merasakan keanehan pada blog tersebut; tapi Anda, sebagai pemilik blog, akan mendapatkan email peringatan dari Google bahwa akun Google AdSense Anda telah di Suspend atau di Banned saat itu juga.

Mengapa hal itu bisa terjadi? Itulah pintarnya Google; termasuk unit iklan mereka yang terpasang di blog kita.

Unit iklan ini akan merekam, melihat dan merasakan tiap-tiap gerakan dan hal-hal yang terjadi dan dialami oleh situs kita. Jadi, ketika ada hal-hal negatif yang ditemukan, unit iklan akan melaporkannya ke sistem Google; dan Google pun meresponnya dengan keras kepada kita sebagai pemilik blog.

Fitnah!

Maka dari itu, untuk mengatasi dan menghindari iklan Google AdSense di banned oleh Google secara tiba-tiba, lebih baik kita harus menghindarinya.

Cara Menyembunyikan Iklan Google AdSense ketika Search Form Digunakan


#1. Add a Gadget/HTML

Ini adalah langkah pertama; apabila di blog Anda terpasang iklan AdSense dengan tipe Gadget. Penerapannya sebagai berikut:

1. Login to Blogger
2. Edit HTML
3. Cari widget iklan Google AdSense
4. Selanjutnya, yang perlu dilakukan adalah menambahkan kode dibawah ini, tepat dibawah kode <b:includable id='main'>

<b:if cond='data:blog.searchQuery'><b:else/>

5. Tambahkan lagi kode di bawah ini, tepat diatas kode </b:includable>

</b:if>

Pada langkah pertama diatas, sudah selesai sampai disini. Selanjutnya adalah tutorial menyembunyikan iklan AdSense pada Search Form di dalam artikel (apabila ada).

#2. Iklan di Artikel

Kalau di dalam artikel ada unit iklan AdSense yang ditayangkan, maka penerapan kodenya seperti berikut:

<b:if cond='data:blog.searchQuery'><b:else/>
- - - - kode unit iklan AdSense disini - - - -
</b:if>

Selalu ingat dimana posisi widget iklan Google AdSense itu terpasang; atau Anda bisa melihat gambar dibawah ini:

Cara Menyembunyikan Iklan Google AdSense ketika Search Form Digunakan

Apakah cara diatas aman? Sangat aman. Sebenarnya pula, kita bukan menyembunyikan iklan AdSense tersebut, tapi menghilangkannya secara total. Jadi, memang 100% aman.

Cek juga beberapa artikel yang berkaitan dengan Google AdSense dibawah ini:


Oh ya, seluruh blog yang saya miliki, totalnya banyak, sudah saya implementasikan dengan tutorial diatas. Savage.
Baca selengkapnya »
Langganan: Postingan (Atom)