Langsung ke konten utama

Postingan

Menampilkan postingan dengan label Tutorial Blog for Newbi

Cara Agar Domain Blog Tetap blogspot.com Tidak Dialihkan

Cara agar domain blog tetap blogspot.com tidak dialihkan ke alamat blogspot.co.id atau negara lain pada blogger. Menurut google pada dasarnya tidak akan ada perubahan pada konten blog, yang berubah hanya alamat url blog dari blogspot.com ke blogspot dimana pengunjung itu berasal. Semisal dari Indonesia (blogspot.co.id), dari kanada (blogspot.ca) dan lain sebagainya. Untuk lebih lengkapnya kamu dapat baca notice dari google di https://support.google.com/blogger/answer/2402711?hl=id . Cara agar domain blog tetap blogspot.com Langkah 1. Copy kode dibawah ini <script type="text/javascript"> var blog=document.location.href.toLowerCase();if(!blog.match(/\.blogspot\.com/)){blog=blog.replace(/\.blogspot\..*?\//,".blogspot.com/ncr/");window.location.replace(blog)} </script> Langkah 2. Login akun blogger >> Tema >> Edit HTML >> Klik kiri kotak kosong Edit HTML dan cari (ctrl+f) </head>. Lalu Paste kode pada langkah 1 tepat diatasnya. ...

Cara Menampilkan Iklan Adsense di Paragraf Pertama Postingan

Cara menampilkan iklan adsense di paragraf pertama postingan artikel blogger merupakan salah satu penempatan memasang iklan yang baik. Cara ini membuat iklan google adsense agar muncul setelah enter pertama artikel atau dapat dikatakan pada alinea pertama artikel ketika kamu mengeditnya. Iklan akan muncul pada posisi atas tepatnya setelah paragraf pertama selain daripada dibawah judul postingan, diakhir postingan ataupun ditengah postingan . Sehingga akan mudah dilihat oleh pengunjung blog. Untuk itu langsung saja ikuti cara menampilkan iklan google adsense pada paragraf pertama postingan blogger. Cara Menampilkan Iklan Adsense di Paragraf Pertama Postingan Langkah 1. Login akun blogger >> Tema >> Edit HTML >> Klik kiri kotak Edit HTML dan Cari (ctrl+f) kode dibawah ini. Secara default template blogger, kamu akan menemuinya dua kali. Ada yang untuk tampilan mobile  (kode pertama) ataupun desktop (kode kedua). Jika ketemu kodenya lagi coba yang terakhir. <data...

Cara Menampilkan Iklan Adsense di Mobile Blog

Cara menampilkan iklan google adsense di tampilan mobile blogger pada perangkat seluler smartphone hp sangat diperlukan. Berhubung semakin majunya teknologi sehingga semakin banyaknya orang yang menggunakan smartphone android dan iphone mereka untuk menjelajah dunia maya. Dengan memasang iklan adsense di tampilan mobile adalah suatu kesempatan bagi blogger untuk menambah revenue. Untuk google adsense sendiri tersedia layanan Page-Level ads dimana iklan google akan muncul secara overlay sticky dan full screen pada layar hape. Namun iklan responsive, 300x250 dan mobile banner 320x100 dapat digunakan juga. Untuk itu dapat kamu baca Cara Memasang Iklan Google Adsense ditengah Artikel Postingan dan Memasang Iklan dibawah dan diatas Posting Blog . Penempatan Kode Iklan Google Adsense Ada dua cara menampilkan iklan google adsense berdasarkan cara meletakkan kodenya. Cara 1. Kode yang diletakkan melalui Tambahkan Gadget >> HTML/JavaScript Cara 2. Kode yang disematkan pada body posting...

Cara Defer Async Kode CSS Blogger

Kali ini saya bagikan cara menggunakan defer atau async kode css di blogger. Karena selain dari  widget css bundle yang memblokir perenderan konten paruh atas di blog. Ada kode css lain yang biasa dipanggil untuk mempercantik tampilan blog seperti dari maxcdn dan font awesome. Biasanya kode css eksternal itu ada karena menggunakan template luar selain dari template default bawaan blogger. Dan sudah pasti kamu sering melihatnya. Pertanyaannya bagaimana kita menggunakan async atau defer kode css eksternal itu? Biasanya untuk font awesome bisa disematkan inline pada ]]></b:skin> blogger, namun apabila kode external css lainnya tidak dapat disematkan didalam Edit HTML blogger dan tetap ingin kamu defer, itu juga bagus karena akan lebih simpel dan menghemat ukuran HTML blog. Baca juga: ~ Cara menghilangkan javascript yang memblokir rendering di konten paruh atas ~ Cara menghilangkan css yang memblokir blogger Tujuan Defer Kode CSS Tujuannya jelas karena ingin mempercepat loadi...

Cara Memasang Anti Adblock di Blog

Kali ini saya akan membagikan cara untuk memasang script anti-adblock dengan menampilkan konten alternatif berupa gambar ketika pengunjung menggunakan extension atau add-ons adblocker pada browsernya. Sehingga iklan google adsense anda yang tidak muncul akan digantikan dengan konten alternatif berupa gambar dengan tujuan pengunjung blog mau menonaktifkan adbcloker untuk domain pada blog kita. Mengapa user menggunakan Adblocker? ~ Iklan yang tidak tertata rapi sehingga menyulitkan pengunjung blog membaca konten atau bahkan konten tertutupi oleh iklan. ~ Loading yang lebih cepat, karena memang script dari iklan terhalang sehingga tidak perlu menampilkannya di tampilan blog. ~ Iklan pop up dan under. Banyaknya situs yang belum diterima Google Adsense membuat webmasternya memasang iklan pop up dan under dari penyedia jasa iklan selain google adsense. Sehingga sangat membuat risih pengunjung blog. Sebelumnya saya telah membagi Bagaimana menyikapi pengunjung yang menggunakan adblocker . Kare...

Membuat Heading H1 pada Gambar Header Blog

Cara membuat gambar header blog menjadi heading H1 pada beranda dan H2 pada postingan atau laman statis di blogger. Karena pada dasarnya logo blog dengan platform blogger tidak memiliki heading tag, sehingga sangat buruk untuk SEO. Hanya judul blog yang menggunakan text saja yang memiliki heading H1. Untuk kombinasi dengan tutorial Heading Tag H1 pada Gambar Header Blog ini, kamu dapat membaca >> Cara Optimasi SEO Heading Tag Blogger untuk membuat judul postingan H1 pada postingan dan membuat judul postingan H2 pada beranda. Membuat Heading H1 pada Gambar Header Blog Langkah 1. Pada dashboard blogger Tema >> Backup dulu tema blog kamu. Setelah itu Edit HTML . Langkah 2. Klik kiri didalam kotak Edit HTML dan cari (ctrl+f) <div id='header'> Gantikan dengan kode berikut : <div id='header' itemscope='itemscope' itemtype='http://schema.org/Organization'> Seandainya kode <div id='header'> tidak ada, coba cari dengan ...

Klik Select Otomatis Semua Text Kode Blockquote Blogger

Fungsi Blockquote Blogger Kita biasa menggunakan fungsi klik kiri mouse dan menggeser kursor untuk memblok tulisan. Entah itu pada microsoft office ataupun di peramban ketika kita sedang browsing online. Sehingga memudahkan kita untuk menyalin dan menempel ataupun menghapus semua text kode dan alamat link yang telah di select tadi. Dan pada posting kali ini saya akan membagikan cara memblok semua text secara otomatis yang menggunakan fungsi tag <blockquote> ataupun <pre> di blog dengan 1x atau 2x klik mouse agar terpilih semua. Pada blogger sendiri menggunakan fungsi quote kutipan, yaitu menandai suatu konten tulisan dengan tanda petik pada dasarnya. Namun disini secara default fungsi quote blogger lebih membuat center konten yang dikutip agar lebih eye catching. Namun semua itu dapat disesuaikan menggunakan css atau kode html. Biasa kita juga sering menggunakan fungsi quote kutipan untuk membalas dan menjawab pertanyaan atau komentar tertentu pada forum, semisal kaskus. Sc...

Cara Memasang Notifikasi Cookie di Blog

Memasang cookie pada blog dengan platform blogspot blogger ini diwajibkan oleh google. Karena mengikuti aturan hukum yang berlaku di negara Uni Eropa. Gunanya adalah meningkatkan pelayanan informasi lebih baik. Lebih lengkapnya --> https://www.google.com/policies/technologies/cookies/. Apalagi kamu menggunakan iklan layanan google adsense yang notabene menggunakan cookie untuk meningkatkan pelayanan iklan yang lebih sesuai untuk pemirsanya. Ketika sedang membuka home blogger muncul pesan tentang kewajiban menampilkan notifikasi penggunaan cookie untuk pengunjung blog. Dan sebagai webmaster, kita bener-benar diwajibkan untuk memastikan bahwa pesan notifikasi pemberitahuan penggunaan cookie dapat tampil di pengunjung blog. Memasang Kode Notifikasi Cookie Blogger Kali ini saya akan membagikan alat generate plugin notifikasi cookie dari cookieconsent karena memang sangat mudah diterapkan. Langkah 1. Kunjungi --> https://cookieconsent.insites.com/ Langkah 2. Klik download untuk...

Menghilangkan gambar obeng dan kunci di Blog

Apa itu gambar obeng dan kunci? Gambar icon obeng dan kunci merupakan fitur quick edit gadget blogger yang muncul ketika kita sedang dalam keadaan login dengan akun google. Sehingga memudahkan kita untuk mengedit widget blogger dengan cepat tanpa harus menuju dashboard blogger --> layout. Namun sayangnya gambar obeng dan tang itu dapat muncul juga di pengunjung blog seperti halnya gambar pensil , apabila kita telah menghapus widget.css bundle blogger untuk menambah kecepatan blog setelah mengujinya di pagespeed insight milik google. Sehingga dapat mengurangi nilai estetika tampilan blog di pengunjung. Menghilangkan gambar obeng dan kunci Untuk menghilangkan gambar obeng dan tang di blog dapat dilakukan 2 cara dengan menyembunyikan menggunakan kode css atau menghapus / menyembunyikan kode html, yaitu sebagai berikut : Langkah 1. Untuk itu langsung saja buka dashboard blogger > Tema > Edit HTML Cara 1 : menyembunyikan dengan css Langkah 1a. Pada kotak Edit HTML cari (CTRL+F...

Menghapus Gambar Pensil di Blog

Gambar icon pensil di blog merupakan fitur quick edit postingan yang memudahkan blogger untuk mengedit postingan yang diinginkan tanpa harus menuju dashboard Postingan blogger terlebih dulu. Sama halnya dengan Gambar obeng dan kunci yang muncul pada tampilan pengunjung blog karena kita telah menghapus widget bundle.css blogger . Menghapus gambar pensil Langkah 1. lihat pada Tata Letak --> Edit Blog Posts Langkah 2. pada Opsi Halaman Entri --> hilangkan  tanda centang pada Tunjukkan Pengeditan Cepat Langkah 3. Simpan perubahan.

Kolom Komentar Tidak Muncul di Tampilan Mobile Blog

Berikut saya akan bagikan cara memperbaiki kolom kotak komentar blogger yang tidak muncul pada versi tampilan kustom template mobile blogger dengan menambahkan kode css. Kesalahan ini bisa terjadi karena template yang kamu gunakan bukan bawaan default dari blogger atau sebelumnya pernah menggunakan template eksternal lalu kembali ke template default blogger. Sehingga terjadi kesalahan yang menyebabkan tidak munculnya kolom kotak komentar pada tampilan mobile view. Memperbaiki Kolom Komentar Langkah 1. Pada dasbord blogger Tema > Edit HTML Langkah 2. Klik di dalam kotak Edit HTML dan CTRL + F kode berikut ]]></b:skin> Langkah 3. Letakkan kode berikut di atas ]]></b:skin> .mobile .blogger-iframe-colorize { display: block !important; }.blogger-iframe-colorize { display: block !important; } Edit HTML Langkah 4. Simpan Selanjutnya kamu dapat memeriksa apakah kode css-nya bekerja dengan benar menggunakan smartphone android, iphone atau windows phone kalian a...

Menghilangkan CSS yang Memblokir di Blog

Ketika sobat menggunakan pagespeed insights dari google untuk memeriksa kecepatan loading blog sobat, dan memakai blogger sebagai hosting blog sobat, pasti muncul saran pengoptimalan yang memungkinkan yaitu menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas. Karena memang ada kode  javascript  (.js) atau cascading style sheets  (.css) bawaan blogger yang dirender dari luar dan disematkan dalam bentuk link alamat pada template default dari blogger. Untuk menghapus kode css widget blogger dan membuat loading blog menjadi lebih cepat, kita dapat memperbaikinya dengan memasukkan kode css eksternal itu ke dalam tema html dari blog kita pada tubuh dari tag head. Seperti yang saya lakukan pada blog dewainside ini. Sobat dapat memeriksanya sendiri kalau memang penasaran. Note : Dengan menghapus kode widget bundle.css blogger biasanya akan membuat munculnya gambar obeng dan kunci serta pensil yang dapat muncul di tampilan pada pengunjung blog. And...

Cara Memasang Kotak Komentar Facebook di Blog

Memasang Kotak Komentar Facebook di Blogger Memasang kotak komentar facebook di blogger dengan model tab. Dimana kolom komentar akan terbagi menjadi 2 tab, yaitu tab komentar blogger dan tab komentar facebook. Widget ini sangat cocok untuk meningkatkan interaksi dan komunikasi media sosial facebook. Apalagi kita ketahui bahwa semua orang pasti memiliki akun facebook dan biasanya selalu login " ingat saya " di browser komputer atau laptop pribadi mereka. Contoh gambar seperti yang terlihat pada gambar dibawah ini: Cara Memasang Kolom Komentar Facebook Langkah 1. Pada dashboard blogger --> Template --> Edit HTML --> klik kiri area kosong kotak Edit HTML dan Cari (CTRL+F) kode  berikut: <div class='comments' id='comments'> Langkah 2. Copy dan Paste kode berikut dibawah dari kode <div class='comments' id='comments'> <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&...

Cara Memasang Tombol Pin it Pinterest di Blog

Memasang Tombol Pin It Pinterest Memasang tombol pin it pinterest pada setiap gambar di blogger itu cukup mudah. Walapun anda tidak harus memiliki akun pinterest terlebih dahulu. Namun ada baiknya anda membuat akunnya ya di  https://www.pinterest.com/ . Kenapa? Karena kita dapat mendaftarkan blog yang kita miliki di akun pinterest, sehingga nantinya dapat muncul tulisan " situs terverifikasi ". Selain itu tentunya menambah backlink ke blog dan apalagi anda memiliki banyak teman di akun pinterest anda. Tentu sangat disayangkan kalau ada kesempatan emas seperti itu. Tidak seperti facebook dan twitter yang harus memiliki popularitas yang tinggi dan mengirimkan beberapa persyaratan untuk verifikasinya. Fungsi Tombol Pin it Fungsi dari tombol ini adalah sharing ke sosial media untuk setiap gambar yang ada pada blog anda. Sama halnya seperti tombol g+1, like facebook ataupun retweet twitter. Namun pinterest ini terbatas khusus untuk gambar saja. Memasang Tombol Pin it Langkah 1. K...

Menghilangkan Script plusone.js di Blogger

Menghilangkan plusone.js Blogger Menghilangkan javascript plusone.js dengan URL  https://apis.google.com/js/plusone.js pada blogger itu dapat untuk dilakukan. Plusone.js  merupakan javascript bawaan blogger untuk widget dan navigasi bar yang ada pada posisi floating diatas. Selain itu sebelum google+1 button menggunakan versi asinkron (async) yang baru (platform.js), plusone.js lah yang digunakan walaupun dapat diasinkronkan juga. Namun dengan seiring berkembangnya developer google dengan kemunculan PageSpeed Insights, banyak pengguna domain blogspot yang memeriksa kecepatan blog mereka. Dan dengan hasil yang kurang memuaskan dimana adanya javascript plusone.js yang memblokir perenderan di konten paruh atas. Karena bawaan langsung dari blogger, apabila script itu dihilangkan maka ada beberapa widget yang tidak berfungsi, seperti arsip blog. Namun widget tersebut jarang digunakan dan selain itu widget lainnya yang saya gunakan pada dewa inside blog ini berfungsi dengan baik. ...

Cara Agar Posting Cepat Terindeks Google

Cara agar postingan artikel cepat terindex google sehingga dapat muncul pada halaman hasil mesin pencari serp dengan menggunakan Fetch as Google dari Alat Google Webmaster. Alasannya sudah jelas karena google merupakan mesin pencari yang dipakai oleh seluruh orang di dunia. Dengan menggunakan fitur fetch as google, postingan dapat cepat terindex oleh google dalam hitungan detik dan menit. Tentunya kamu juga sudah menambahkan blog ke search engine google . Berdasarkan pengalaman saya menggunakan tool ini, artikel yang saya publikasikan langsung tampil pada SERP google apabila saya periksa dengan menggunakan alamat postingan yang berkaitan itu dalam waktu yang singkat. Tool ini sangat bermanfaat apabila anda memiliki situs yang setiap harinya harus mempublikasikan puluhan artikel sekaligus. Seperti situs-situs selebritis, berita dan politik. Video SEO Startup Maile Ohye (Pimpinan Teknologi Developer Programs di Google) tentang kegunaan fetch as google tool. Dampak Negatif Namun ada sis...

Menampilkan Gadget Blogger di Mobile View

Pada tahun 2015 ini mobile friendly website sangat diperhatikan karena google sendiri memperhatikan Mobile SEO pada setiap blog. Pada tampilan seluler device blogger, widget tidak ditampilkan dan yang ditampilkan hanya laman (pages). Jika anda ingin menampilkan ataupun menyembunyikan gadget tertentu (semisal, kotak pencarian) pada versi seluler di blogspot caraya sangat mudah. Secara otomatis blog dengan platform blogger akan memiliki kode meta tag seperti ini: <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0' name='viewport'/> Maksudnya agar blog dapat menjadi tampilan mobile apabila diakses melalui mobile, tablet atapun iphone sehingga menjadi mobile friendly (faster, padat dan ringkas). Anda dapat melihatnya pada template blogger anda sendiri. Seandainya kode diatas tidak ada maka perlu ditambahkan pada area setelah <head> Untuk memeriksa apakah tampilan blog anda mobile friendly cukup anda tambahkan ?m=1 jadi akan ...

Cara Membuat Tombol Kembali ke Atas di Blog

Membuat tombol kembali keatas (back to top) pada blog dengan menggunakan kode HTML, Javascript, CSS atapun jQuery. Fungsi dari tombol ini adalah apabila pengunjung blog scroll kebawah maka akan muncul tombol back to top yang memudahkan pengunjung untuk kembali pada posisi atas dari posting blog tanpa susah menggunakan mouse untuk keatas. Memasang Tombol Kembali ke Atas Pada dashboard blog, pilih Template --> Edit HTML --> Klik pada area kosong kotak Edit HTML dan Cari (CTRL+F) kode berikut: </head> Selanjutnya ikuti langkah dibawah ini. Silahkan anda pilih salah satu efek dari tombol ke atas berikut: 1. Membuat Tombol Kembali ke Atas dengan Efek Halus Langkah 1. Letakkan kode berikut diatas  </head> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/> <script type='text/javascript'> $(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#Scrol...