Claim Today: Tutorial Blog for Newbi

Tampilkan postingan dengan label Tutorial Blog for Newbi. Tampilkan semua postingan

Sabtu, 03 Februari 2018

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.

</head>

Langkah 3. Simpan Tema

Alasan tetap menggunakan blogspot.com

Alasan untuk tetap menggunakan alamat domain blogspot.com daripada redirect ke domain negara tertentu dimana pengunjung blog berasal ada beberapa:

1. Iklan adsense yang hanya menampilkan background putih blank space pada url khusus negara. Mungkin dikarenakan tidak tersedianya layanan iklan yang tepat sesuai dengan konten dan negara tersebut. Karena ada banyak laporan kasus, menurut opini saya karena low traffic dan demand pada negara itu atau postingan artikel memang baru.

Cara Agar Domain Blog Tetap blogspot.com Tidak Dialihkan

setelan jika tidak tersedia layanan iklan

Server blogspot url khusus negara overload

Saya berpendapat seperti ini karena melihat blog lain yang memang memiliki konten bagus meskipun menggunakan domain khusus negara pengunjung (misal blogspot.co.id), iklan google adsense tetap muncul. Bisa juga karena IP address yang digunakan menampilkan iklan google berkali-kali (biasa terjadi pada webmaster blog untuk memeriksa iklan) sehingga secara otomatis iklan akan tidak ditampilkan. Seperti memang cara kerja mekanis google adsense sendiri.
Contoh kasus di grup diskusi:
https://productforums.google.com/forum/#!topic/blogger/mpb9Ll3W6ck
https://productforums.google.com/forum/#!msg/adsense/ENUwp4WBOPw/3tXWc-UMAQAJ

2. Memang webmaster blog lebih prefer menggunakan blogspot.com daripada url khusus negara tertentu. Munkin karena lebih familiar dan simpel.

List url domain tiap negara

No	url	Negara
1	blogspot.ae	UAE
2	blogspot.al	Albanian
3	blogspot.am	Armenia
4	blogspot.ba	Bosnia & Herzegovina
5	blogspot.be
6	blogspot.bg	Bulgaria
7	blogspot.bj
8	blogspot.ca	Canada
9	blogspot.cf
10	blogspot.ch
11	blogspot.cl
12	blogspot.co.at
13	blogspot.co.id	Indonesia
14	blogspot.co.il
15	blogspot.co.ke
16	blogspot.co.nz
17	blogspot.co.uk	United Kingdom
18	blogspot.co.za	South Africa
19	blogspot.com	United States
20	blogspot.com.ar
21	blogspot.com.au
22	blogspot.com.br
23	blogspot.com.by	Belarus
24	blogspot.com.co	Colombia
25	blogspot.com.cy	Cyprus
26	blogspot.com.ee	Estonia
27	blogspot.com.eg	Egypt
28	blogspot.com.es
29	blogspot.com.mt	Malta
30	blogspot.com.ng	Nigeria
31	blogspot.com.tr
32	blogspot.com.uy	Uruguay
33	blogspot.cv
34	blogspot.cz
35	blogspot.de
36	blogspot.dk
37	blogspot.fi
38	blogspot.fr	France
39	blogspot.gr
40	blogspot.hk	Hongkong
41	blogspot.hr	Croatia
42	blogspot.hu
43	blogspot.ie
44	blogspot.in	India
45	blogspot.is	Iceland
46	blogspot.it
47	blogspot.jp	Japan
48	blogspot.kr
49	blogspot.li	Liechtenstein
50	blogspot.lt	Lithuania
51	blogspot.lu	Luxembourg
52	blogspot.md	Moldova
53	blogspot.mk	Macedonia
54	blogspot.mr
55	blogspot.mx
56	blogspot.my	Malaysia
57	blogspot.nl	German
58	blogspot.no
59	blogspot.pe	Peru
60	blogspot.pt
61	blogspot.qa	Qatar
62	blogspot.re
63	blogspot.ro
64	blogspot.rs	Serbia
65	blogspot.ru	Rusia
66	blogspot.se	Slovenia
67	blogspot.sg	Singapore
68	blogspot.si
69	blogspot.sk
70	blogspot.sn	Senegal
71	blogspot.td
72	blogspot.tw	Taiwan
73	blogspot.ug	Uganda
74	blogspot.vn	Vietnam

Senin, 29 Januari 2018

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:post.body/>

Langkah 2. Tambahkan kode yang berwarna biru diantara <data:post.body/>

<div id='adsense-target'><data:post.body/></div>

Langkah 3. Copy dan Paste kode pengkondisian berikut diatas <data:post.body/> yang sudah diedit pada langkah 2. Tentunya kode iklan google adsense kamu sudah di parse >> https://opinionatedgeek.com/Codecs/HtmlEncoder

<b:if cond='data:blog.pageType == "item"'>
<div id='adsense-content' style="display:block;text-align: center">
Kode adsense yang telah diparse
</div></b:if>

Seperti gambar berikut:

Note :
Untuk mengubah posisi iklan menjadi menjorok ke kiri silahkan ganti kode pengkondisian yang bergaris bawah pada Langkah 3. dengan kode berikut. float:left; artinya ke kiri, jika ingin menampilkan ke kanan tinggal kamu ganti dengan float:right;

<div id='adsense-content' style="display: inline-block;float:left; margin:15px 15px 15px 0px">

Langkah 4. Tambahkan kode berikut tepat dibawah <div id='adsense-target'><data:post.body/></div> seperti contoh gambar diatas.

<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;
if (parent.lastChild == target) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition,target.nextSibling);
}
}
var adscont = document.getElementById("adsense-content");
var target = document.getElementById("adsense-target");
var linebreak = target.getElementsByTagName("br");
if (linebreak.length > 0){
insertAfter(adscont,linebreak[0]);
}
</script>

Note :
~ Untuk menampilkan iklan adsense pada paragraf kedua ganti angka 0 menjadi 2 pada tulisan berwarna merah
~ Untuk menampilkan iklan adsene dibawah heading tag h2 atau h3 ganti br menjadi h2 atau h3 pada tulisan berwarna biru

Langkah 5. Simpan Tema
Silahkan lihat tampilan iklan google adsense kamu akan muncul pada paragraf pertama di postingan dengan meggunakan kondisi br enter.

Minggu, 28 Januari 2018

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 postingan blogger dengan encode kode iklan htmlnya.

Untuk menampilkan iklan google adsense pada tampilan mobile blogger kamu harus menggunakan tema seluler. Hal ini wajib dilakukan baik untuk cara 1 maupun cara 2.
~ Pada dashboard blogger pilih Tema >> klik icon gear pada tampilan seluler >> pilih Ya. Tampilkan tema seluler di perangkat seluler dan pilih tema seluler Khusus >> Simpan.

Cara Menampilkan Iklan Adsense di Mobile Blog

Cara 1. Untuk iklan adsense yang menggunakan fitur Gadget Blogger

Langkah 1. Tambahkan Gadget >> HTML/JavaScript >> Paste kode adsense dan Simpan.

Langkah 2. Setelah itu buka lagi Edit HTML/JavaScript adsense tadi >> Klik kiri alamat bar widget adsense dan geser ke Kanan. Kamu akan temukan nama HTML untuk widget itu.

Caranya sama seperti -->> Menampilkan Gadget Blogger di Mobile

Langkah 3. Lanjut ke Tema >> Edit HTML >> Klik kiri kotak kosong Edit HTML dan cari (ctrl+f) nama ID HTML adsense yang kamu buat.
Dengan menambahkan mobile='yes' (tampil di tampilan seluler), mobile='no' (tidak tampil di tampilan seluler), mobile='only' (hanya akan tampil di mobile) pada widget iklan adsense yang diinginkan seperti contoh dibawah ini.

<b:widget id='HTML4' locked='false' mobile='yes' title='Advertisement' type='HTML'>

Saran, jangan lupa gunakan tag kondisi blogger untuk menampilkan atau menyembunyikan iklan pada beranda, postingan dan laman statis di Cara Menyembunyikan dan Menampilkan Gadget di Blog.
Langkah 4. Simpan Tema

Cara 2. Untuk iklan adsense yang disematkan pada postingan blog

Namun untuk kode adsense yang disematkan ditengah postingan, dibawah judul postingan atau diakhir artikel blog silahkan mengikuti cara dibawah berikut:
Langkah 1. Cari kode dibawah ini :

<data:post.body/>

untuk template default blogger kode itu ada dua, untuk tampilan desktop dan mobile. Untuk tampilan mobile cari yang dekat

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>

seperti gambar berikut:

Langkah 2. Letakkan kode iklan adsense yang telah diparse diatas atau dibawah <data:post.body/>. Kamu dapat kunjungi https://www.opinionatedgeek.com/codecs/htmlencoder untuk memparse kode iklan google adsense.

Kode <data:post.body/> merupakan postingan dari blog sendiri, jadi ketika kamu meletakkan kode iklan adsense yang telah diparse diatasnya berarti iklan akan muncul diatas postingan atau dibawah judul postingan. Jika kamu meletakkan kode iklan adsense yang telah diparse dibawahnya berarti iklan akan muncul diakhir postingan. Tapi untuk ditengah postingan silahkan baca Menampilkan Iklan Google Adsense ditengah Postingan Blog.

Saran, jangan lupa gunakan tag kondisi blogger untuk menampilkan atau menyembunyikan iklan pada beranda, postingan dan laman statis di Cara Menyembunyikan dan Menampilkan Gadget di Blog.

Langkah 3. Simpan Tema
Silahkan lihat blog kamu pada tampilan mobile melalui smartphone atau dengan mengunjungi https://alamatblog.blogspot.com?m=1

Jumat, 19 Januari 2018

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 loading blog agar rendering kode eksternal ditunda dulu sehingga konten utama blog dapat ditampilkan untuk pengunjung. Karena loading yang lama dapat membuat pengunjung pergi dari blog.

Cara Defer Kode CSS

Langkah 1. Copy kode script defer dibawah ini dan gantikan url link kode css yang ingin di defer.

<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://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
//]]>
</script>

Langkah 2. Letakkan kode yang telah di copy, diatas </head> blog kamu dan Simpan.

Sangat mudah bukan? Silahkan kamu cek dengan pagespeed insight milik google apakah kode css eksternal masih memblokir render konten paruh atasnya.

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. Karena alasan yang sudah saya sebutkan diatas sehingga mereka menggunakannya. Menurut anda logis bukan? Karena saya sendiri juga menggunakannya walaupun disisi lain Dewa Inside blog ini menampilkan iklan dari google adsense sebagain revenue tambahan.

Memasang Script Anti-Adblock Universal

Langkah 1. Copy kode script dibawah ini

<script>
window.onload = function(){
setTimeout(function() {
var ad = document.querySelector("ins.adsbygoogle");
if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {
ad.style.cssText = 'display:block !important';
$(".adsbygoogle").after('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuxGhYPvaaowrTP4-8tGTSrNbDe1MCHEt9dlqqgFJkbZieO_JpMcD35CoJoNWLqyZk66PPKCddOtw5rae6509LiCYzstGtfcdpJh7XBtfE_Er8ikqRY6UgKtusDd7viMROSrfXCydydxBH/s320/anti-ablock.jpg" alt="anti-adblock" width="300" height="250"/>');
}
}, 1000);
};
</script>
<script async='async' src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Jika kamu lihat ada script jquery, jika di blog kamu sudah ada cukup gunakan satu. Dan diatas sudah ditambahkan asinkronnya.

Langkah 2. Paste kode script diatas bisa diatas </body> atau </head> ataupun juga dengan Tambahkan Gadget >> HTML/JavaScript.

Note:
~ url link gambar dapat kamu ganti dengan gambar kreasimu sendiri.
~ width dan height dapat kamu sesuaikan keinginan.
~ 1000 = 1 detik delay setelahnya gambar akan dimunculkan.

Selamat mencoba dan tinggalkan komentar jika ada yang dirasa sulit atau error. Mudah bukan?

Rabu, 17 Januari 2018

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 kode berikut :

<header>

Dan gantikan dengan kode dibawah ini:

<header itemscope='itemscope' itemtype='http://schema.org/Organization'>

Jika memang keduanya tidak ditemukan. Carilah secara hati-hati kode header yang menyerupai kedua kode diatas dan tambahkan itemscope='itemscope' itemtype='http://schema.org/Organization'>.

Langkah 3. Temukan kode gambar header blog yang hanya menampilkan gambar saja, cari yang sama atau seperti kode comment dibawah ini :

Show the image only

Tepat dibawah Show the image only kamu akan menemukan kode serupa seperti dibawah ini dan gantikan yang hanya dalam tag <a href=..... </a>

<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

Gantikan kode diatas yang didalam tag <a> dengan kode dibawah ini yang sudah dioptimasi heading seo untuk gambar header blogger.

<b:if cond='data:blog.pageType == "index"'>
<h1 itemprop='name'><a expr:href='data:blog.homepageUrl' itemprop='url' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:title='data:blog.title' expr:width='data:width' itemprop='logo' style='display: block'/><span><data:blog.pageTitle/></span></a>
</h1>
<b:elseif cond='data:blog.pageType == "archive"'/>
<h1 itemprop='name'><a expr:href='data:blog.homepageUrl' itemprop='url' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:title='data:blog.title' expr:width='data:width' itemprop='logo' style='display: block'/><span><data:blog.pageTitle/></span></a>
</h1>
<b:else/>
<h2 itemprop='name'><a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:title='data:blog.title' expr:width='data:width' itemprop='logo' style='display: block'/><span><data:blog.title/></span></a></h2></b:if>

Dapat kamu lihat kode yang diberi warna biru merupakan judul dari blog kamu yang memakai gambar header. Sehingga dapat kamu modifikasi sesuai dengan keinginan. Untuk membuat judul artikel H1 pada postingan dan H2 pada beranda, karena sebelumnya saya telah publish terlebih dahulu makanya tidak diikut serkatan disini.
Silahkan lihat >> Cara Optimasi SEO Heading Tag Blogger

Langkah 4. Secara default tema blogger, biasanya untuk css heading H1 dan H2 dibedakan font-size dan colornya. Untuk itu jangan lupa merubahnya pada ]]></b:skin>. Pada langkah 4 akan saya berikan contohnya.
Cari kode css berikut atau yang serupa tanda bisa #(pagar) ataupun .(titik):

#header h1 {

Gantikan dengan :

#header h1, #header h2 {

Cari kode ini:

#header h1 a {

Gantikan dengan :

#header h1 a,#header h2 a {

Dan yang paling penting adalah menambahkan kode berikut diatas ]]></b:skin>

#header h1 a,#header h2 a, #header h1 a:visited, #header h2 a:visited{color:#fff; font-size:10px;text-decoration:none;margin:0;padding:0}
.header h1 span, #header h2 span{text-indent:-999em; display:block;}

Langkah 5. Simpan Tema.
Kamu bisa cek apakah heading H1 muncul pada blog kamu yang hanya menampilkan gambar header saja tanpa text dan deskripsi di situs seperti:

https://www.seocentro.com/tools/seo/seo-analyzer.html
http://www.seoreviewtools.com/html-headings-checker/

Sedikit panjang namun worth untuk dicoba karena nilai SEO yang dicari dimana ketika gambar header display:block text judul blog dan deskripsi tapi masih dapat menggunakan heading H1 pada beranda dan H2 pada postingan dan laman statis. Selamat mencoba dan apabila ada kesulitan silahkan tanyakan pada kolom komentar dibawah.

Minggu, 14 Januari 2018

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. Script ini sangat membantu untuk memilih text ataupun kode yang terlalu panjang di blog seperti tutorial select blockquote di blog ini menggunakan fungsi double click mouse.

Pilih semua tulisan pada tag blockquote atau pre

Langkah 1. Pada dashboard blogger >> Tema >> Edit HTML

Langkah 2. Klik kiri didalam kotak Edit HTML >> dan cari (ctrl+f) kode

</body>

Langkah 3. Copy kode berikut diatas atau sebelum kode </body>

<script type='text/javascript'>
var pres = document.getElementsByTagName("blockquote");
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script>

Note:
~blockquote dapat diganti dengan tag pre apabila blog kamu menggunakannya namun sepertinya jarang pada blogger default.
~dblclick adalah fungsi select text dengan 2x klik kiri mouse. Untuk menggantinya hanya dengan 1x klik mouse, ganti kode dblclick dengan -->> click.

Jumat, 12 Januari 2018

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 membuka fiturnya

Langkah 3. Konfigurasi bentuk, warna, posisi dan tulisan dari notifikasi cookie kamu

Langkah 4. Copy kode yang sudah digenerate otomatis oleh cookieconsent

Langkah 5. Letakkan kode script dan css notifikasi cookie yang sudah dicopy diatas </head> pada Edit HTML blogger dan Simpan Tema.

Memeriksa Fungsi Notifikasi Cookie

Untuk mengecek pemberitahuan notifikasi cookie berfungsi dengan baik, tentu kita tinggal mengunjungi alamat blog yang sudah dipasang kode script dan css cookie. Tunggu loading sampai selesai dan jika muncul pop notifikasi pemberitahuan penggunaan cookie maka kamu sudah berhasil memasang notifikasi cookie di blog.
Semoga artikel ini bermanfaat. Selamat mencoba.

Selasa, 12 Desember 2017

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) kode

]]></b:skin>

Langkah 1b. Letakkan kode css berikut diatasnya

.quickedit{display:none;}

Maka akan terlihat seperti ini:

.quickedit{display:none;}
]]></b:skin>

Langkah 1c. Simpan Template
jika cara diatas tidak berhasil silahkan coba cara ke 2 untuk menghapus gambar obeng dan kunci.

Cara 2 : menyembunyikan atau menghapus kode html

Langkah 1.a Dengan mencari dan menghapus satu per satu kode dibawah berikut sebanyak jumlah widget blog kamu pada kotak Edit HTML.

<b:include name='quickedit'/>

Kalau saya pribadi lebih prefer dengan menambahkan . Karena lebih mudah untuk mencarinya lagi ketika dibutuhkan. Berlaku untuk semua yang ada didalam <body> Edit HTML blogger. Sehingga untuk quick edit blogger akan menjadi seperti ini :

Fungsi dari  ini sendiri adalah "comment" atau bisa disebut sebagai keterangan dan biasa digunakan pada html body dari suatu blog untuk memberi keterangan pada suatu kode html. Karena kode html apapun yang ada didalamnya akan diabaikan untuk berfungsi atau tampil.

Minggu, 10 Desember 2017

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.

Selasa, 05 Desember 2017

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;
}

kolom komentar tidak muncul di tampilan mobile

Edit HTML

Langkah 4. Simpan

Selanjutnya kamu dapat memeriksa apakah kode css-nya bekerja dengan benar menggunakan smartphone android, iphone atau windows phone kalian ataupun pada komputer desktop dengan menambahkan ?m=1 pada akhir alamat blog kamu seperti contoh : https://dewainside.blogspot.com/?m=1

Jumat, 09 Juni 2017

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. Anda dapat menghilangkannya dengan cara berikut : Menghilangkan gambar obeng dan kunci atau menghapus gambar pensil.

Menghilangkan widget css bundle yang memblokir perenderan di konten paruh atas

Cara 1. Menghilangkan dengan b:css='false'

Cukup dengan menambahkan kode b:css='false' pada html template awal blog kamu.

b:css ='false'

Cara 2. Menghilangkan dengan mengubah tag head

Langkah 1. Mengganti kode html tag pembuka dan penutup head

<head> dengan <head>

dan pada tag penutup head :

</head> dengan </head>

**Kalau dicek lagi masih ada bundle.css yang memblokir maka lanjut ke langkah 2. Biasa hal ini terjadi untuk template default bawaan blogger. Umumnya tidak terjadi pada template external.

Langkah 2. Memasukkan kode css ke dalam format html

Lihat link widget bundle.css blogger di pengujian pagespeed insight pada situs yang sobat uji.

link widget bundle.css blogger

Untuk lebih mudahnya berikut di bawah sudah saya cantumkan alamat link kode bundle.css dari blogger untuk tampilan desktop ataupun mobile.

https://www.blogger.com/static/v1/widgets/1171200566-widget_css_mobile_2_bundle.css

https://www.blogger.com/static/v1/widgets/3213516723-css_bundle_v2.css

Setelah sobat membuka dua link css berbeda di atas, copy konten dari kode css blogger tersebut dan paste sesuai dengan pengkondisian tampilan mobile dan desktop pada tulisan yang saya beri warna merah di bawah ini :

Untuk lebih mudahnya, sobat dapat menggunakan notepad++ atau langsung buka Edit HTML pada Tema blog sobat.

<head>
.
.
.
<b:if cond="data:blog.isMobile">
<style type="text/css">
------KODE CSS_Mobile_2_Bundle.css DISINI --------------
</style>
<b:else/>
<style type="text/css">
------KODE CSS_2_Bundle.css DISNI --------------
</style>
</b:if>
.
.
.
</head>

Masukkan kode di atas yang sudah sobat maksimalkan sesudah tag pembuka <head> atau sebelum tag penutup </head> yang sobat edit pada Langkah 1 seperti gambar berikut:

Langkah 3. Simpan Tema blogger sobat.

Selamat blog anda sudah terhindar dari JavaScript dan widget CSS bundle yang memblokir perenderan di konten paruh atas.

Sabtu, 18 April 2015

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("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfLIP-gCxrJOOZKWH9nO5sgWNSG36r2j1bbSbkp1Jpif7U3Fv8sR_Po33UyVDhkiy5tLsCqw97B34yAqGBAcZHXN7Ih4Z7JvGjaa2K3Q2vOvixeK1wiG5ERu-a8P1uGzSmJ2oj37d1xwn0/s1600/Facebook+Icon.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img alt='blogger tab' class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEise0v9yW4lJwF2zUKpbN9uQsKZ9hd6rQgaorRpQeqCwLZ7viT9ap7HSlDkXXlKnygMNlgKjaDgdsB7F-bqE8JgJ63oDmcDmo5D_VNGKIf0j0OdUwQY4o2F2JbUZYwIx_Hf2cisqXQNQCKw/s1600/Blogger+Icon.png'/> <data:post.numComments/> Comments</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'><div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='550'/></b:if></div>
<div class='comments comments-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='187715554575764' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comments-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}</script>
<style>.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}</style>

Catatan: Ganti tulisan Merah dengan ID Fans Page Facebook anda. Untuk mengetahui ID dari laman penggemar berikut saya berikan contoh: https://www.facebook.com/pages/Dewa-Inside/187715554575764

Langkah 3. Simpan Template

Silahkan lihat blog dan apabila berhasil, Selamat anda telah memasang kolom komentar facebook di blog anda dengan model tab. Sekian dan semoga bermanfaat bagi sobat blogger semua. :)

Jumat, 17 April 2015

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. Kunjungi situs --> Pembuat Tombol Pin It pinterest

Langkah 2. Pilih Tombol Pin It --> Gambar Mengambang, anda dapat mengedit (Tipe Tombol dan Tampilan) yang disediakan oleh developer pinterest dan dapat dipratinjau. Lalu Copy kode yang ada pada bagian bawah.

Langkah 3. Buka akun blogger --> Template --> Edit HTML --> klik kiri area kosong Edit HTML dan Cari (CTRL+F) kode berikut:

</head>

Langkah 4. Paste kode tombol pin it diatasnya dan Simpan Template.

Catatan : Perlu untuk diketahui bahwa gambar yang memiliki dimensi lebar dan panjang yang terlalu kecil tidak akan memiliki tombol hover pinterest. Dikarenakan tombol pin it sendiri yang lebih besar dari gambar yang akan dipasangkannya.

Selesai dan sekarang setiap gambar yang ada pada blog anda akan memiliki tombol pin it pinterest yang hover ketika kursor mouse didekatkan ke gambar. Selamat mencoba dan semoga bermanfaat bagi sahabat blogger semua.

Rabu, 15 April 2015

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.

Menghapus Plusone.js

Dengan menghapus script itu, maka akan mempercepat loading blog dengan domain blogspot anda. Untuk menghapus script tersebut dari platform blogger silahkan anda ikuti langkah-langkah dibawah ini:
Langkah 1. Pada Template --> Edit HTML --> Cari (CTRL+F) url berikut:

https://apis.google.com/js/plusone.js

Namun apabila alamat url javascript pluone.js untuk widget blogger diatas tidak ada, langsung lihat langkah 3.

Langkah 2. Hapus semua kode navbar dari <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> sampai dengan </b:section>. Seperti gambar yang tampil dibawah ini:
Atau cara paling mudah adalah menggunakan fitur pada Edit HTML yaitu Lompat ke widget --> Nanvbar1

Klik Untuk Memperbesar Gambar

Langkah 3. Selanjutnya Cari (CTRL+F) kode:

</body>

Ubah kode diatas menjadi

</body>

Langkah ini perlu dilakukan karena apabila anda memiliki extensions PageSpeed Insights (by Google) di chrome, maka apabila anda check pada developer tools maka plusone.js tetap ada.

Langkah 4. Simpan Template

Langkah 5. Selanjutnya uji kecepatan menggunakan --> PageSpeed Insights. Untuk memastikan bahwa script plusone.js telah dihapus dari template blog anda. Untuk memudahkan dan memastikan lebih jauh anda juga dapat meng-install --> extensions PageSpeed Insights (by Google).

Selamat anda telah lebih mempercepat loading blog anda dengan menghilangkan script plusone.js yang memblokir perenderan konten paruh atas :). Silahkan tinggalkan komentar pada kolom komentar dibawah apabila anda memiliki masukan lainnya.

Senin, 13 April 2015

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 sisi buruk yang saya alami (belum tentu orang lain mengalaminya juga) dari menggunakan tool ini adalah ada salah satu dari posting saya yang terdahulu hilang dari dindeks. Saya dapat berkata demikian karena saya mengalaminya. Setelah AMBIL sebagai google bot dan Kirim ke Indeks (mungkin saya tidak sadar double submit). Saya periksa beberapa menit kemudian dengan mencarinya pada mesin pencari google. Dan memang terbukti postingan saya langsung diindex oleh google. Namun ketika saya melihat peta situs saya, ternyata jumlahnya sama dengan sebelumnya.

Disini terjadi miss atau hilangnya salah satu dari artikel saya di mata google bot. Mungkin itu hanya bug yang terjadi pada saya dan belum tentu orang lain mengalaminya juga. Dengan kejadian seperti itu, saya lebih sering update postingan dan membiarkannya secara alami agar google bot mengindeks postingan saya. Saya tetap gunakan tool ambil sebagai google bot ini tapi tanpa mengirim alamat url yang berkaitan agar diindex oleh google bot.

Batasan Submit Alamat Posting

Ada batasan submit URL dari postingan yang dapat disubmit secara langsung setiap bulannya. Untuk setiap 1 URL berbeda dari setiap postingan yang kita ambil atau render oleh google bot secara langsung melalui alat webmaster dapat dikirim agar diindex dengan maksimal jumlah adalah 500 URL per bulan.

Sedangkan untuk URL yang terkait langsung pada setiap URL posting berbeda yang kita ambil atau render dapat dikirim agar dindex dengan maksimal jumlah adalah 10 URL per bulan.

Cara Menggunakan Fetch as Google

Akhirnya kita sampai pada fungsi Ambil sebagai Google Bot. Maksudnya adalah google bot akan secara langsung melihat konten yang kita ingin perlihatkan kepadanya melalui alamat yang kita cantumkan lalu mengambil ataupun merendernya.

Langkah 1. Kunjungi Ambil sebagai Google --> Pilih situs yang diinginkan. Atau anda dapat membukanya pada Alat Webmaster --> Perayapan --> Ambil sebagai Google.

Cara Agar Posting Cepat Terindeks Google

Klik untuk Memperbesar

Langkah 2. Masukkan alamat postingan yang ingin kita render. Yaitu bagian tengah dari URL posting tanpa mencantumkan alamat blog dan tanpa slash (/). Contoh: https://dewainside.blogspot.com/2010/05/cara-agar-blog-terdeteksi-search-engine.html Bagian yang berwarna Biru yang anda copy dan paste.

Langkah 3. Pilih tampilan yang ingin dirayapi oleh google bot. Ada 4 tampilan yang tersedia: Desktop, Seluler: Ponsel Cerdas, Seluler: XHTML/WML dan Seluler: cHTML.

Langkah 4. Klik AMBIL atau AMBIL DAN RENDER. Perbedaannya sederhana. AMBIL = hanya merayapi posting terkait. Sedangkan AMBIL DAN RENDER = merayapi dan menampilkan posting terkait. Namun aslinya tidak ada tampilan apapun. lol.

Langkah 5. Kirim ke Indeks URL posting yang anda telah ambil atau render sebelumnya.

Silahkan anda tunggu beberapa menit dan cari URL posting yang telah anda kirim untuk diindeks melalui mesin pencari google. Dapat dipastikan akan muncul pada SERP.

Sekian tutorial dari Cara Agar Posting Cepat terindex Google dalam hitungan detik. Semoga dapat bermanfaat bagi sahabat blogger sekalian.

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 seperti ini :

https://dewainside.blogspot.com/?m=1

Sebelumnya anda harus menggunakan template khusus (custom) untuk Template Seluler Blog. Pada Template --> Khusus --> Simpan

Menampilkan Widget pada Tampilan Mobile

Ada dua cara untuk menampilkan widget pada tampilan mobile. Silahkan pilih salah satu untuk anda terapkan pada gadget yang diinginkan. Carilah letak gadget blogger kamu dan tinggal tambahkan kode seperti contoh dibawah :
Cara 1. Tambahkan mobile='only' (hanya tampil pada mobile view dan tidak tampil pada dekstop) :

<b:widget id='HTML1' locked='false' mobile='only' title='ARTIKEL TERBARU' type='HTML'>

Cara 2. Tambahkan mobile='yes' (tampil pada versi mobile juga)

<b:widget id='HTML1' locked='false' mobile='yes' title='ARTIKEL TERBARU' type='HTML'>

Menyembunyikan Widget pada Tampilan Mobile

Ada dua cara untuk menyembunyikan widget blogger pada tampilan mobile device. Carilah letak gadget blogger kamu dan cukup tambahkan kode seperti contoh dibawah :
Cara 1. Menambahkan mobile='no' pada kode widget yang diinginkan :

<b:widget id='HTML1' locked='false' mobile='no' title='ARTIKEL TERBARU' type='HTML'>

Cara 2. Menggunakan kode kondisi :

<b:if cond='data:blog.isMobile == "false"'>
//Widget yang disembunyikan
</b:if>

Note:
Khusus tag kondisi data:blog.isMobile dapat digunakan universal selain daripada widget. Sehingga dengan mengganti kodisi "false" (menyembunyikan pada tampilan mobile) menjadi "true" (menampilkan pada tampilan mobile).

Jangan lupa untuk Simpan Template. Untuk memeriksa apakah kode itu berhasil. Silahkan tambahkan kode https://dewainside.blogspot.com/?m=1 pada alamat blog anda agar tampil secara seluler. Cara ini juga sama seperti Cara Menampilkan Iklan Adsense di Mobile Blog.

Sekian.
Semoga bermanfaat untuk sahabat blogger.

Sabtu, 11 April 2015

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()>500) { $('#ScrollToTop').fadeIn()}
else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);
return false})});
</script>

Simpan Template

Langkah 2. Tata Letak --> Tambahkan Gadget --> HTML/JavaScript. Masukkan kode berikut di dalamnya.

<style type='text/css' scoped='scoped'> #ScrollToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSh9A6v1f73E440Zv4S_qfQCH2cOgqcra1IUCgonigjzQPfLdyrq1tDDYOajK1zp2TuQ2pMIlfZMFHP_But-fTMPerWTDGfnjc9esIGB5B7DOc03bo2puqJSbM3qIra9yA38zFH0naXXrI/s1600/arrow-up_basic_blue.png'/></div>

Simpan

2. Membuat Tombol Kembali ke Atas dengan Efek Memantul

Penjelasan dari efek memantul ini adalah ketika tombol back to top di klik maka layar akan terlihat memantul sesaat layaknya seperti bola.

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()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

Simpan Template

Langkah 2. Lihat ke Tata Letak --> Tambahkan Gadget --> HTML/JavaScript. Letakkan kode berikut didalamnya.

<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSh9A6v1f73E440Zv4S_qfQCH2cOgqcra1IUCgonigjzQPfLdyrq1tDDYOajK1zp2TuQ2pMIlfZMFHP_But-fTMPerWTDGfnjc9esIGB5B7DOc03bo2puqJSbM3qIra9yA38zFH0naXXrI/s1600/arrow-up_basic_blue.png'/></div>

Simpan

3. Membuat Tombol Kembali ke Atas dengan Efek Fading

Penjelasan dari efek fading ini adalah ketika tombol di klik maka visibilitas dari objek akan secara perlahan muncul. Biasa pada editing video kita mengenal fade in dan fade out.

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'/>

Simpan Template
Langkah 2. Pilih Tata Letak --> Tambahkan Gadget --> HTML/JavaScript. Letakkan kode berikut didalamnya.

var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSh9A6v1f73E440Zv4S_qfQCH2cOgqcra1IUCgonigjzQPfLdyrq1tDDYOajK1zp2TuQ2pMIlfZMFHP_But-fTMPerWTDGfnjc9esIGB5B7DOc03bo2puqJSbM3qIra9yA38zFH0naXXrI/s1600/arrow-up_basic_blue.png
" />',
controlattrs: {offsetx:5, offsety:5},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

Simpan

Catatan: Text Merah adalah gambar tombol yang dapat anda ganti sesuai keinginan.
Text Biru adalah kode jQuery, cukup anda tambahkan 1 kali apabila menggunakannya.
Tips: Anda dapat mengkompres kode diatas sebelum diaplikasikan pada template blog.

Selamat Mencoba..