2017
2 Cara Mengatasi Menu Simplify yang tidak Bisa di KLIK

Navigasi Menu Simplify Blogger Templates Error? Nggak bisa di klik sama sekali pada?

Bagaimana cara memperbaiki dan mengatasi navigasi menu Simplify yang tidak bisa di klik, ya?

Simplify dan Simplify 2 merupakan template blogger premium (berbayar) karya Arlina Design.

Simplify versi pertama merupakan template paling laris menurut saya, lagi pula fiturnya sudah sangat banyak, fenomenal banget. Dihargai 300.000,- pun juga cocok kok! :)

Jadi, sangat disayangkan kalau Simplify V1 sudah di beli, gara-gara error di bagian Navigasi Menu, kita nggak jadi menggunakannya lagi.

Jangan berkecil hati gara-gara persoalan Navigasi Menu, Guys. Arlina Design juga manusia, pasti bisa atau pun pernah berbuat kesalahan.

2 Cara Mengatasi Menu Simplify yang tidak Bisa di KLIK

Di bawah ini, ada tutorial bagaimana cara memperbaiki navigasi menu Simplify 2 yang tidak berfungsi atau tidak bisa digunakan.

Baca Juga: Memperbaiki dan Mengatasi Google+ Badge tidak Muncul di Blog

2 Cara Mengatasi Menu Simplify yang tidak Bisa di KLIK


Dari berbagai informasi, saya temukan kalau Simplify 2 hanya beberapa pengguna yang mengadu Error. Sedangkan Simplify 1, hampir semuanya mengalami kerusakan.

Secara pribadi, saya sudah kontak Arlina Design melalui email.

Mba-mba-nya sih ngomong begini, kategori (label) yang terpasang di Sub-Menu (navigasi menu) memang bekerja, akan tetapi kode di Menu biasa tidak bisa di klik.

Kok bisa, sih? Sebab, settingan dalam pembuatan template blogger Simplify 1 ini memang begitu.

Kalau pun pada akhirnya mau meng-klik di bagian Menu biasa, kita harus KLIK KANAN lalu buka secara "Open New Tab". Baru deh, Work.

Nah, agar Navigasi Menu-nya bekerja dengan baik, baik itu Menu biasa maupun Menu Dropdown, silahkan aplikasikan 2 cara di bawah ini di dalam template blogger.

#1. jQuery Library

Cari kode dibawah ini:

function loadCSS

Kode lengkapnya yang muncul adalah:

<script type='text/javascript'>
(function() { var ad = document.createElement(&#39;script&#39;); ad.type = &#39;text/javascript&#39;; ad.async = true; ad.src = &#39;//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js&#39;; var sc = document.getElementsByTagName(&#39;script&#39;)[0]; sc.parentNode.insertBefore(ad, sc); })();
//<![CDATA[
//CSS Ready
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("//fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic"); loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css");
//]]>
</script>

Ganti kode di atas, dengan kode di bawah ini; bahasa lainnya, REPLACE:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
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("//fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic"); loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css");
//]]>
</script>

Silahkan Anda simpan perubahan template blogger.

2 Cara Mengatasi Menu Simplify yang tidak Bisa di KLIK

Baca Juga: Cara Membuat Tahun Copyright di Blog berubah Otomatis

#2. Pengaturan Toggle Code

Cari kode di bawah ini:

// Slide toggle

Nantinya muncul kode seperti dibawah ini:

// Slide toggle
$(function(){$(&quot;#simplify-click &gt; li&quot;).click(function(i){var l=$(&quot;ul&quot;,this);return $(&quot;#simplify-click &gt; li &gt; ul&quot;).not(l).slideUp(),l.stop(!0,!0).slideToggle(400),!1}),$(&quot;#simplify-click &gt; li &gt; ul &gt; li&quot;).click(function(i){i.stopPropagation()})});

Hapus kode diatas, ganti dengan kode dibawah ini:

// Slide toggle
$(function(){$(&quot;.dropdown-toggle&quot;).click(function(i){var l=$(&quot;ul&quot;,this);return $(&quot;#simplify-click &gt; li &gt; ul&quot;).not(l).slideUp(),l.stop(!0,!0).slideToggle(400),!1}),$(&quot;#simplify-click &gt; li &gt; ul &gt; li&quot;).click(function(i){i.stopPropagation()})});

Simpan lagi perubahan template blogger untuk kedua kalinya.

Kalau di dalam template ada menampilkan Navigasi Menu Dropdown (atau Sub-Menu), gunakan kode dibawah ini:

<li class='dropdown-toggle'><a href='#' itemprop='url'><span itemprop='name'>Judul Label Navigasi Menu Dropdown<i class='fa fa-angle-down fa-fw'/></span></a>

Cara penerapan lengkapnya seperti ini:

<li class='dropdown-toggle'><a href='#' itemprop='url'><span itemprop='name'>Judul Label Navigasi Menu Dropdown<i class='fa fa-angle-down fa-fw'/></span></a>
<ul>
<li><a href='/search/label/disinilabel' itemprop='url'><span itemprop='name'>Nama Label 1</span></a></li>
<li><a href='/search/label/disinilabel' itemprop='url'><span itemprop='name'>Nama Label 2</span></a></li>
<li><a href='/search/label/disinilabel' itemprop='url'><span itemprop='name'>Nama Label 3</span></a></li>
</ul>
</li>

Ok sampai disini simpan semua perubahan atau editing yang sudah dilakukan di dalam blogger template.

Silahkan tap tombol "View Blog" untuk melihat hasil secara keseluruhan. Sangat disarankan untuk klik dan klik pada Navigasi Menu apakah berhasil atau tidak.

Baca Juga: Cara Membuat Gambar Header H1 di Blog

Sampai disini, tutorial perbaikan mengatasi dan perbaikan Navigasi Menu di template Simplify karya Arlina Design sudah berhasil dilakukan.
Cara Mengganti URL Google Plus Lama dengan URL Khusus Baru
Well sebelumnya saya telah posting cara mendapatkan atau membuat link URL Google Plus dengan link sendiri.

Kali ini tentang bagaimana cara kita mengubah atau menggantinya link URL khusus yang sudah dibuat, tapi kita ganti lagi dengan link URL pribadi lainnya.

Dengan kata lain, atau singkatnya... kita mengubah URL khusus pertama dengan versi terbarunya.

Contohnya seperti ini:

https://plus.google.com/+AlgazaliOfficials (versi pertama)

Namun akan saya ubah (untuk kedua kalinya) sehingga menjadi:

https://plus.google.com/+ariefghozaly

Hmm... Kira-kira bisa nggak ya? Kebetulan ketika artikel ini ditulis, sekaligus juga saya mengujinya. Apapun hasilnya, setidaknya saya sudah mencobanya!

Cara Mengganti URL Google Plus Lama dengan URL Khusus Baru


1. Masuk terlebih dahulu ke laman https://aboutme.google.com/
2. Pada kotak dialog "Situs", klik menu "Edit"
3. Klik tombol atau ikon silang (X dalam lingkaran) untuk menghapus URL khusus sebelumnya

Akan muncul pesan peringatan seperti dibawah ini:

Hapus URL?

Yakin ingin menghapus URL khusus? Jika tetap melanjutkan, URL AlgazaliOfficials tidak akan mengarah lagi ke profil Google+ Anda. Jika masih menginginkan URL khusus, Anda harus mengunjungi Google+ untuk mengklaim URL yang baru.

Atau lihat gambar peringatannya dibawah ini:

Cara Mengganti URL Google Plus Lama dengan URL Khusus Baru

Selanjutnya klik tombol "OKE" tanpa ragu-ragu! Ingat ya, jangan ragu! Hehe... (Jujur disini saya ragu, nggak tau hasilnya bagaimana nantinya, sebab artikel ini ditulis tepat ketika tutorialnya dijalankan)

Selanjutnya tutup kotak dialog "Situs" tersebut dengan menekan tombol "OKE". Ini mengindikasikan kalau kita sudah yakin 100% menghapus URL khusus tersebut.

Hasilnya bagaimana?

https://plus.google.com/+AlgazaliOfficials (versi pertama)

Setelah saya hapus, beralih ke URL default:

https://plus.google.com/u/0/117523514165520896557

Selanjutnya bagaimana mas? Lihat gambar dibawah ini:

Cara Mengganti URL Google Plus Lama dengan URL Khusus Baru

Ah! Muncul pesan peringatan, alhamdulillah... "Kami telah memberikan persetujuan awal untuk beberapa URL khusus profil Anda, termasuk: plus.google.com/+AlgazaliOfficials"

Klik tombol "Klaim URL" seperti gambar diatas ya!

Akhirnya... Ada 3 opsi yang bisa kita pilih, sesuai gambar dibawah ini:

Cara Mengganti URL Google Plus Lama dengan URL Khusus Baru

Disini saya bisa memilih menggunakan nama "AlgazaliOfficials" seperti sediakala, ada URL khusus dengan nama pribadi saya "AriefGhozaly"; atau menggantinya dengan nama tambahan diakhiran.

Pada tutorial kali ini, kebetulan nama asli saya muncul.

Jadi, singkatnya, URL khusus "AlgazaliOfficials" sebelumnya, mau saya gantikan dengan nama asli saya yakni "AriefGhozaly".

Selanjutnya? Pilih salah satu opsi, seperti gambar diatas, setujui atau centang OK persyaratan layanan. Lalu, klik tombol "Simpan URL".

Selanjutnya muncul pesan peringatan ke sekian kalinya, lihat gambar dibawah ini:

Cara Mengganti URL Google Plus Lama dengan URL Khusus Baru

Silahkan klik "Konfirmasikan URL" yang ditampilkan. Muncul pesan lagi, "Anda berhasil mengklaim URL khusus!" Ok tugas kita sudah selesai!

Akhirnya, URL khusus pribadi yang kedua ini, yang masih dalam satu akun Google Plus, berhasil saya lakukan! Alhamdulillah... silahkan klik deh kalau nggak percaya: Arief Ghozaly.

URL khususnya tidak mengarah lagi ke:

https://plus.google.com/+AlgazaliOfficials

Tapi sudah dialihkan ke:

https://plus.google.com/+AriefGhozaly

Ibarat kata, kita telah mengalihkan URL khusus versi pertama ke versi keduanya yang terbaru. Sujud syukur wkwk... tutorial cara mengganti URL khusus Google Plus berhasil dilakukan.

Kebetulan saya nggak tahu kalau ada fitur pergantian URL khusus ini. Toh, tutorial ini pun saya dapatkan secara tidak sengaja.

Oh ya... Dalam satu tahun, kita hanya diperbolehkan mengganti URL khusus ini sebanyak tiga kali. Singkatnya, setahun bisa dilakukan 3 kali.

Tapi... alangkah baiknya sih ya jangan diubah-ubah. Cukup sekali ganti saja. Kasihan blogger atau teman-teman blogger lainnya, pasti sulit menemukan kita. Ok semoga berguna.*
Cara Membuat Link URL Google Plus dengan Link Sendiri
Sebenarnya sudah lama saya kepikiran untuk membuat artikel tentang cara mendapatkan atau mengganti link/URL khusus untuk Google Plus.

Namun berhubung banyaknya ide2 lain yang lebih menarik, artikel ini pun terabaikan selama bertahun-tahun lamanya. Bayangin, terlupakan selama bertahun2.

Ok sekarang kita bahas. Disini kita merujuk ke laman resmi Google, Mendapatkan URL khusus untuk profil Google+ yang menerangkan bahwa kita diperbolehkan untuk membuat URL singkat yang berkesan untuk profil Google+ yang kita gunakan.

Untuk mendapatkannya sendiri, tentu tidak mudah. Ada kriteria yang harus dipenuhi seperti:

  1. Akun harus memiliki 10 pengikut atau lebih (orang yang menambahkan Anda ke lingkaran mereka)
  2. Akun setidaknya berumur satu bulan (sebulan / 30 hari)
  3. Memiliki foto profil (ditambahkan background, tentu lebih baik - menurut saya)
  4. Akun memiliki performa yang baik (dalam artian, aktif secara berskala)

Satu hal yang pasti, akun Google+ harus memenuhi kebijakan perilaku dan konten pengguna Google+; serta persyaratan penggunaan URL khusus Google+.

Berikut ini cara mengganti link URL Google+ dengan link URL sendiri, atau link URL khusus.

Cara Membuat Link URL Google Plus dengan Link Sendiri


Umumnya, sebuah akun Google+ yang sudah dibuat, akan menampilkan link URL default-nya seperti ini:

https://plus.google.com/u/0/100675891xxxxxxxxxx

Untuk menggantinya, setidaknya harus memenuhi kriteria yang sudah diatas agar tutorialnya berhasil. Kalau ingin memaksakan kehendak, gunakan cara dibawah ini:

1. Masuk ke laman aboutme.google.com
2. Pada kotak dialog "Situs", pilih menu "Edit"
3. Hapus link URL lama (angka)
4. Silahkan ganti dengan link URL yang Anda inginkan

Contohnya seperti admin dari blog SEO Killer ini dengan link URL khususnya:

https://plus.google.com/+AlgazaliOfficials

Nah ada juga beberapa kasus seperti munculnya pemberitahuan, "Laman Anda memenuhi syarat untuk mendapatkan URL khusus".

Itu artinya, Anda telah memenuhi syarat untuk membuat link URL khusus yang dibuat sendiri. Biasanya kita akan diarahkan ke laman "Dapatkan URL".

Well kebetulan saya tidak punya gambarnya, tapi yang pasti... pemberitahuan tersebut akan muncul tepat dibagian profil Google Plus kita nantinya, itu pun kalau sudah memenuhi syarat yang sudah saya katakan diatas.

Singkatnya, ngebloglah sesuai passion! Link URL itu tidak penting, itu hanya "kesan" saja. Ok semoga berguna.*
Cara Pasang Iklan AdSense di Atas Samping Kiri, Tengah dan Akhir Postingan
Penempatan atau pemasangan unit iklan Google AdSense bisa kita taruh diawal artikel tepat di samping kiri atau kanan, di tengah maupun dibagian akhir postingan blog.

Singkatnya, dalam satu halaman dalam blog atau "Single Posts", kita menampilkan 3 buah unit iklan Google AdSense dalam sekaligus. Untuk dibagian Sidebar dan disamping Header blog tidak dihitung.

Apakah ini melanggar peraturan dan kebijakan Google AdSense, bro? Tidak, selama iklan Google AdSense yang Responsive hanya satu buah.

Lagi pula kita boleh kok memasangkan 4 buah unit iklan dalam satu halaman postingan blog. Saya sudah mencobanya, tidak ada teguran tuh! Aman-aman saja...

Saya sendiri pernah memasangkan 5 buah unit iklan yang terdiri dari samping header blog (banner 720 x 90), diawal artikel dan diakhir artikel berukuran 300 x 250, lalu saya tambahkan pula di sidebar dengan ukuran 300 x 250.

Nggak lupa juga, saya selipkan sedikit satu buah unit iklan jenis tautan responsive. Wuih aman-aman saja, lho! Kalau dihitung-hitung, ada 5 buah unit iklan Google AdSense! Wkwk... Ya, kalau ada teguran, otomatis saya mematuhinya dong. Tapi aman-aman saja tuh!

Nah by the way, bagi blogger yang ingin memasangkan jenis iklan dalam bentuk apa pun dan ditempatkan dimana pun di dalam artikel, sangat mudah.

Disini saya berusaha membuatkan tutorialnya sebaik dan sedetail mungkin, semoga membantu ya!

Cara Pasang Iklan AdSense di Atas Samping Kiri, Tengah dan Akhir Postingan


#1. Iklan AdSense di atas Samping Kiri dan di akhir Postingan

Gunakan kode dibawah ini untuk mengatur tata letak unit iklan AdSense yang akan ditampilkan nantinya:

Iklan untuk penempatan di kiri artikel blog:

<div style="float:left; margin-right:15px;margin-bottom:10px">
// kode unit iklan parse HTML //
</div>

Kode iklan yang posisinya kita arahkan ke tengah (bukan di tengah postingan):

<div style="margin-left:15px;margin-bottom:15px">
<center>
// kode unit iklan parse HTML //
</center>
</div>

Iklan untuk penempatan di kanan artikel blog:

<div style="float:right; margin-right:15px;margin-bottom:10px">
// kode unit iklan parse HTML //
</div>

Nah pertanyaannya ialah peletakkan kode tersebut tepatnya dibagian mana? Toh, akan kita tempatkan di HTML template kan? Ya, benar.

Cari kode ini: <data:post.body/>. Letakkan kode diatas, tepat diatas kode <data:post.body/> ini.

Nah disini pula, Anda bakal melihat setidaknya (paling banyak) ada 4 buah kode <data:post.body/>. Jadi, tolong disesuaikan.

Selanjutnya? Save template!

Untuk kode iklan Google AdSense yang ingin dipasangkan di dalam template, harus di "Parse"-kan terlebih dahulu. Silahkan gunakan HTML Parser ini.

Cara Pasang Iklan AdSense di Atas Samping Kiri, Tengah dan Akhir Postingan

Untuk para pengguna blogger template Simplify karya Arlina Dzgn, bagi yang ingin memasangkannya di awal postingan blog, tepat di sisi kiri, silahkan contek penempatan kodenya seperti dibawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div style=&quot;display:block;text-align:center;margin:0 auto;&quot;&gt;
<!-- Kode Banner/Iklan Anda Di sini -->
&lt;/div&gt;
</b:if>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<p><data:post.body/></p></b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div itemprop='description'>
<div style='float:left; margin-right:15px;margin-bottom:10px'>
// kode unit iklan parse HTML //
</div>
<p><data:post.body/></p></div></b:if>
<div class='clear'/> <!-- clear for photos floats -->
</div>

Note: Yang paling penting itu pada "Float"-nya. Anda juga diperbolehkan untuk mengatur margin berapa PX nantinya. Silahkan dicoba-coba sesuai selera.

#2. Pemasangan Iklan AdSense tepat di tengah-tengah Postingan Blog

Untuk penempatan iklan AdSense yang diletakkan di tengah-tengah artikel blog, usahakan dan upayakan untuk melakukan back-up template terlebih dahulu, takutnya malah error.

Lagi pula, ada kode template yang harus kita hapus, dan nantinya akan kita ganti dengan kode khususnya. Jadi, harus berhati-hati.

Seperti diatas, cari kode ini: <data:post.body/>

Ganti kode tersebut, dengan salah kode dibawah ini (pilih salah satu):

<div expr:id='"ads1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">
// kode unit iklan parse HTML //
</div>
<div expr:id='"ads2" + data:post.id'><data:post.body/></div>
<script type="text/javascript">
var obj0=document.getElementById("ads1<data:post.id/>");
var obj1=document.getElementById("ads2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(" ");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1);}
</script>

Atau bisa juga menggunakan kode ini:

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisher' style='margin:20px 0'>
<center>
// kode unit iklan parse HTML //
</center>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

Note: Perhatikan pada kode ini: var t=s.substr(0,s.length/2);

Angka "2" tersebut artinya lokasi penempatan unit iklan. Kalau angkanya 2, itu artinya ditempatkan diseper-dua artikel.

Contohnya, misalkan dalam satu artikel tersebut memiliki 1.000 kata atau huruf, maka unit iklan akan muncul secara otomatis - tepat di tengah-tengah pembagian artikelnya, tepat diantara 500 huruf diawal, dan di 500 huruf diakhir, tepat di tengah.

Namun kalau angka 2 tersebut diubah menjadi 3 atau 4 dan seterusnya, kalau 3 artinya sepertiga, kalau 4 artinya seperempat. Sudah mengerti?

Yang pasti, semakin besar atau nilai pada kode var t=s.substr(0,s.length/2); ini, maka unit iklan yang akan ditayangkan nantinya akan semakin naik ke atas.

Jadi, bagusnya yang mana? Pilih angka 2 atau 3 saja, itu sudah bagus kok.

#3. Menampilkan Iklan AdSense Bebas, Dimana Saja di Postingan Blog

Nah khusus untuk blogger yang ingin menempatkan iklan di dalam postingan blog - dimana saja, di paragraf dimana saja, alias bebas; gunakan saja kode dibawah ini:

<div style=”float: left; margin-right: 10px; margin-bottom: 5px;”>
// kode unit iklan parse HTML //
</div>

Singkatnya, kode ini untuk menampilkan iklan AdSense secara manual, bisa kita letakkan dilokasi mana saja, bebas!

Sedikit pertanyaan yang barangkali muncul dibenak para pembaca, "Kenapa ya Script <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> tidak disertakan?"

Hal ini berlaku apabila sebelumnya di dalam template sudah terpasang kode tersebut. Jadi tidak perlu disertakan lagi. Kalau belum ada bagaimana? Ya harus ditambahkan lagi.

Karena lokasi unit iklannya di dalam template, semua kode iklan Google AdSense harus di parse terlebih dahulu. Tools yang bisa kita gunakan: Blog Crowds HTML Parser.

Nah itulah cara membuat dan menampilkan iklan AdSense di atas kiri samping postingan blog, di tengah dan di akhir artikel blog. Silahkan bertanya apabila ada keraguan. Semoga berguna.*
Cara Menampilkan Deskripsi Author Box Widget di Simplify Template
Pada posting blogger template premium terbaik, saya menyertakan Simplify sebagai salah satu template terbaik dan rekomendasi untuk dibeli.

Dari berbagai sisi, Simplify merupakan satu-satunya template yang saya anggap paling lengkap akan fitur dan layanan yang bisa kita gunakan untuk berbagai keperluan.

Tulisan dibagi menjadi dua kolom di dalam satu postingan? Bisa! Apalagi 3 sampai 4 kolom, tentunya bisa. Tersedia pula fitur "button" untuk demo dan download.

Bukan cuma itu saja, fitur video yang menjadi responsive pun sudah tersemat di dalamnya, dokumentasinya sangat lengkap dibandingkan template premium lainnya.

Nah detik ini saya mempunyai Simplify versi gratis dan berbayar. Saya ubek-ubek sendiri deh apa bedanya template gratis dan premium versi Arlina Dzgn. Eh ketemu, oh ini ya, oh itu ya. Hehehe ^^

Tapi diantara semua itu, ada satu masalah yang saya temukan di Simplify ini. Deskripsi pada Author Box widgetnya tidak bekerja! Ok cara memperbaikinya sangat mudah.

Cara Menampilkan Deskripsi Profil Google+ di Simplify Template


Kurang lebih tampilan kodenya seperti ini:

<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a> <i class='fa fa-check-circle' style='color:#f1c40f;font-size:16px;margin:0 0 0 3px' title='Verified Author'/></h4>
<p>
<data:post.authorAboutMe/>
</p>
<div class='social-links'>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a></li>
<div class='clear'/>
</div>
</div>
</div>
</div>

Hapus kode dibawah ini yang tampil pada kode diatas:

<data:post.authorAboutMe/>

Silahkan isi secara manual deskripsi author box penulis yang diinginkan antara kode <p> sampai </p>. Contohnya seperti ini:

<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a> <i class='fa fa-check-circle' style='color:#f1c40f;font-size:16px;margin:0 0 0 3px' title='Verified Author'/></h4>
<p>
Menulis karena peduli, sekaligus mendokumentasikan berbagai ilmu pengetahuan yang kita anggap menarik. Subscribe blog kita, dan jangan lupa follow sosial media kita lainnya! Thank you!
</p>
<div class='social-links'>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a></li>
<div class='clear'/>
</div>
</div>
</div>
</div>

Insya Allah tampilannya akan sangat sempurna. Untuk lainnya bagaimana? Sejak awal penulisan artikel ini, Simplify tergolong template yang paling lengkap fiturnya.

Bahkan lolos uji structure data testing tools yang terdiri dari 8 item. Cuma ada sedikit kendala pada pemblokiran Render-Blocking JavaScript, tapi sudah saya perbaiki sendiri. Ok semoga berguna.
4+1 Tips Membuat Artikel Pertama di Blog: Basic Article

Istilah lain dari artikel atau konten yang di buat pertama kali di blog ialah "Basic Article".

Bagi blogger pemula, bahkan blogger senior sekali pun, seringkali lupa membuat Basic Article; padahal Basic Article ini adalah perwakilan dari seluruh postingan yang ada di dalam blog.

Contohnya? Posting pertama di blog ini adalah "Tips SEO dan Blogging".

Content tersebut bisa dikatakan sebagai perwakilan lebih dari 350 artikel yang sudah dipublikasikan di blog ini. What a beautiful game, Gan!

Percaya atau tidak, blogger luar negeri telah menerangkan bahwa Basic Article sangat penting, sangat penting sekali di awal-awal ngeblog.

I Wanna Be a Blogger: First Blog Post menerangkan bahwa sudah menjadi rahasia umum kalau tulisan pertama di blog itu cukup membingungkan; takut salah tulis dan kadang agak merasa tertekan.

Secara pribadi, saya akui apa yang di tulis pada artikel tersebut memang benar. Dari dulu ngeblog, salah satu hal yang agak sedikit sulit bagi saya adalah pembuatan Basic Article di blog.

Baca Juga: EFEK Menghapus Akun Google+ bagi Blog dan SEO

Di bawah ini ada beberapa tips yang perlu diketahui tentang panduan bagaimana cara membuat artikel pertama kali di blog.

4+1 Tips Membuat Artikel Pertama di Blog: Basic Article


Blog Post Idea #1: Who are you?

Seandainya saya bertemu dengan Anda di warung kopi, dan saya menanyakan profil pribadi Anda, apa yang harus Anda jawab?

Nah posisikan diri Anda saat ini sedang ditanyakan dengan pertanyaan tersebut. Anggaplah percakapan itu sedang terjadi, pikirkan dan renungkan, lalu tulislah di artikel pertama blog Anda.

Nggak masalah kalau pada akhirnya Anda membual, yang penting tunjukkan kalau Anda itu yakin dan memenuhi syarat serta kriteria kenapa Anda pantas membuat blog dan menjalani blog tersebut, berkaitan dengan topik blog pastinya.

4+1 Tips Membuat Artikel Pertama di Blog: Basic Article

Blog Post Idea #2: Why you?

Ceritakan secara singkat kepada pembaca blog Anda; kenapa harus Anda, kenapa tidak orang lain yang melakukannya (membuat blog tersebut).

Contohnya, Anda membuat blog tentang Psikologi, lalu ceritakan saja bahwa Anda adalah orang yang sudah menyelesaikan S1 Psikologi.

Dengan membuat pengakuan yang demikian, bukan berarti Anda sombong. Malahan, itu menunjukkan Anda itu siapa, dan kenapa harus Anda yang membangun serta menulis topik Psikologi tersebut.

Dari sini saja, itu sudah cukup meningkatkan kredibilitas artikel yang Anda dipublikasikan di dalam blog Anda. Semudah itu, kok! :)

Blog Post Idea #3: Common Questions

Setelah membuat posting untuk perdana kalinya di blog, pada langkah sekarang adalah saat yang tepat untuk menanyakan pertanyaan umum kepada pembaca.

Anda bisa menanyakan suatu hal kepada pembaca dengan kalimat, "Adakah pertanyaan?" di bagian akhir artikel pada Basic Article tersebut.

Selain itu pula, dengan cara ini pun Anda telah membangun komunikasi dengan pengunjung blog agar mau memberi komentar pada konten pertama di blog Anda.

Blog Post Idea #4: Create a "how to" list

"How to" yang artinya "bagaimana". Jika topik blog Anda tentang sebuah tutorial yang membahas kesehatan atau dunia blogging misalnya, sisipkan link Internal (Hypertext) barang 5 buah.

Contohnya blog tentang tutorial blogger.

Pada posting pertamanya, bisa disisipkan dengan artikel "Cara Membuat Blog", "Cara Mengganti Tema Blog" dan lainnya.

Getspokal mengatakan melalui artikelnya, "Starting a Blog? Here are Ideas for Your 1st 5 Blog Posts":

Keywords are the words people type into Google when they’re looking for something. Some of the blogs you write will be focused around keywords, so you have a higher chance of ranking in Google when someone is looking for that topic.

Blog Post Idea # 5: Your top 5 favorite blogs

Singkatnya, pada artikel pertama di blog tersebut kita disarankan untuk menyisipkan 5 buah link dari situs web yang kita sukai.

Kita juga harus menyertakan deskripsi dari masing-masing blog tersebut tentang apa dan bagaimana; serta konten apa yang di buat pada situs web tersebut.

Mungkin agak terkesan klise dan aneh, kita baru saja membangun blog dan ingin mendapatkan pembaca, eh malah menyisipkan 5 buah situs link.

Satu kata, Cerdas! Pertanyaan yang bagus. Tahu kenapa?

Salah satu alasan kenapa Anda harus menambahkan 5 buah situs web di dalam artikel pertama blog Anda adalah untuk meningkatkan otoritas.

Spokal mengatakan seperti ini:

It will help establish your authority because you’re providing valuable resources, plus it shows you’re part of the community and up to date with current trends – that will help you build trust online, which will help you close customers.

Baca Juga: Berapa Jumlah Blog dalam Satu Akun Google+ yang Bisa di Buat?

Thanks Spokal... terima kasih sudah juga sudah membuat tulisan tersebut sehingga banyak orang yang tercerahkan dengan baik.
Ngeblog itu Mudah, tapi Menulis adalah Bagian yang Paling Sulit
Ngeblog atau blogging itu sebenarnya bisa dilakukan oleh banyak orang dalam satu waktu, tapi menulis adalah bagian yang paling sulit dalam aktifitas blogging.

Ya Anda tidak salah baca. Setelah saya lihat-lihat alias blogwalking, masih banyak gaya penulisan yang kacau balau.

Contohnya masih ada yang main singkat-singkatan, tidak sesuai EYD atau pedoman bahasa Indonesia, dan yang lebih parahnya lagi salah mengartikan sebuah istilah atau definisi.

Dalam kasus ini saya mengambil sample situs web atau contoh blog yang memuat isi atau posting tentang konspirasi.

Pada blog yang bertemakan "konspirasi", tentu tidak jauh dengan istilah-istilah yang sering digunakan seperti Liberalisme, Komunisme, Imperialisme, Isolasionisme, Proteksionisme, Non-Intervensionisme, Unilateralisme, Doktrin dan masih banyak lagi.

Kebanyakan blogger yang memuat isi artikel tentang "konspirasi", masih belum paham tentang istilah yang demikian, tapi anehnya berani memuat isi posting yang demikian pula.

Itulah alasan kenapa menulis itu sulit, karena kita tidak menguasai bidang tersebut.

Melalui tulisan ini pula, saya sarankan untuk Anda agar menulis artikel blog yang memang Anda kuasai selama ini. Jika Anda masih mempelajari suatu hal, silahkan pelajari terlebih dahulu.

Apabila sudah cukup yakin dengan kemampuan Anda, silahkan buat dan posting artikel yang Anda mau. Itulah sedikit "kultum" tentang ngeblog itu mudah, tapi menulis adalah bagian yang paling sulit. Semoga berguna.*
Cara Menghapus widget Komentar bawaan Blogger secara Permanen
Salah satu alasan kenapa orang ingin menghapus widget komentar asli bawaan blogger adalah ingin menggantinya dengan widget komentar Disqus.

Ya memang Disqus lebih baik ketimbang komentar bawaan asli blogspot, karena dengan menggunakan Disqus, para pembaca bisa mengomentari sebuah artikel lebih leluasa.

Mereka bisa Login dengan akun sosial medianya, tidak serta merta dengan akun Google Plus. Disinilah menangnya komentar Disqus.

Namun sulitnya menggunakan Disqus menurut saya adalah kita harus mengecek setiap komentar yang masuk melalui laman resmi Disqus.

Lagi pula, komentar spam bisa sembarangan masuk tanpa dimoderasi lebih lanjut oleh kita. Hanya saja kita bisa memblokir kata-kata yang menurut kita tidak pantas. Saya rasa pun itu belum cukup dan masih rentan masuknya komentar spam.

Tapi apa pun alasannya, yang penting Disqus kan? Ok dibawah ini adalah tutorial menghapus widget komentar blogger bawaan default. Untungnya, ini dilakukan secara permanen.

Cara Menghapus widget Komentar bawaan Blogger


Seperti biasa, Login to Blogger. Langsung masuk ke Template dan cari semua kode dibawah ini:

<b:includable id='comment-form' var='post'>...</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>...</b:includable>
<b:includable id='comment_count_picker' var='post'>...</b:includable>
<b:includable id='comment_picker' var='post'>...</b:includable>
<b:includable id='threaded-comment-form' var='post'>...</b:includable>
<b:includable id='threaded_comment_js' var='post'>...</b:includable>
<b:includable id='threaded_comments' var='post'>...</b:includable>

Setiap daftar atau list dari kode-kode diatas punya kepanjangannya lagi, artinya tanda 3 titik tersebut merupakan kode yang disingkat. Kalau di klik, pasti menampilkan kode yang panjang.

Kalau agan menemukan kode yang cukup panjang, ciutkan saja menjadi singkat seperti kode yang saya tampilkan diatas. Atau langsung eksekusi saja di tempat :)

Hapus semua kode tersebut, semua kode yang terpasang di dalam template blogger agan sesuai kode-kode yang saya sertakan diatas. Selanjutnya ya simpan perubahan template.

Nggak ada error sama sekali kok, hanya saja komentar blogger bakal menghilang selamanya.

Oh ya... sebelum benar-benar menghapusnya, pastikan agan impor dulu semua komentar yang ada di widget blogger comments ke Disqus. Baru deh menghapus widget komentar bawaan asli bloggernya. Gudlak.*
Jangan Hapus Artikel yang Ada di dalam Blog! Jangan, Bung...
Perlu saya tekankan disini bahwa Anda tidak perlu menghapus artikel atau posting yang ada di dalam blog.

Apapun alasannya, jangan hapus artikel. Apa dampak dan efeknya?

Stephanie Le Vonne, salah satu praktisi SEO terkenal di dunia menjelaskan bahwa penghapusan posting di blog bisa mempengaruhi tinggi dan rendahnya trafik organik yang didapatkan oleh sebuah situs web.

Le Vonne menyatakan bahwa posting lama tidak perlu dihapus agar menjaga ekuitas link (Link Equity) yang bertujuan agar peringkat dan lalu lintas situs (trafik organik atau pageview) tidak hilang.

Yang paling penting itu ialah peringkat. Semakin banyak artikel yang diihapus, tentu peringkat (atau Ranking) akan menurun. Tentu ini nggak baik bagi blog tersebut di masa depannya nanti.

Sebenarnya bukan hanya itu saja, soalnya ada lebih dari 4 faktor yang menentukan banyak atau sedikitnya Organic Traffic yang didapatkan. Topik tersebut pun sudah saya bahas tahun lalu.

Contohnya sebuah posting dirasa tidak menghasilkan banyak baca, entah itu dari sisi ON-Page apalagi OFF-Page, bukan berarti kita harus menghapusnya. Kita bisa kok mengeditnya! Artinya kita memperbaharui tulisan yang ada di artikel tersebut.

Kalau pun tidak mau memperbaharuinya, kita bisa melakukan redirect ke artikel baru. Caranya pun sudah saya bahas seminggu yang lalu.

Well saya pun juga sudah menerangkan bagaimana dampak dan efek ketika sebuah artikel yang sudah lama dipublikasikan, tapi di edit kembali isi postingannya.

Nah itu dia alasan kenapa jangan menghapus artikel yang ada di dalam blog! Jangan bung. Semoga berguna.*
Pengertian Link Juice dan Cara Menggunakan Link Juice
Secara umum, Link Juice merupakan istilah lain dari pertukaran link. Penyebutan kata "Link Juice" berawal dari praktisi SEO luar negeri.

Link Juice pun bisa dikatakan Outbuond Link; atau menempatkan, menyisipkan atau menyematkan sebuah link di dalam blog tapi mengarahkannya ke luar halaman blog. Bahasa lainnya, Link Juice adalah memberikan Backlink.

Pertukaran link yang dimaksud bukan seperti Outbound Link, Hypertext atau link yang sengaja dibuat di dalam artikel lalu diarahkan ke luar blog. Bukan seperti itu.

Yang dimaksud Link Juice adalah pertukaran link antara satu blog dengan blog lainnya, baik kasusnya hanya terdiri dari 2 buah blog, maupun lebih dari pada itu.

Link Juice itu membuat atau memasangkan Outbound Link akan tetapi memanfaatkan bagian Sidebar atau Footer blog.

Contohnya, saya memasang widget artikel dari blog orang lain di Sidebar blog saya sendiri. Terserah deh, entah itu widget Feed artikel terbarunya atau artikel berdasarkan label / kategori.

Ketika widget yang menampilkan artikel-artikel dari pihak ketiga tersebut di klik oleh pembaca, otomatis blog tersebut mendapatkan backlink dari saya, entah itu NoFollow atau pun DoFollow.

Jadi itulah definisi dari Link Juice. Cukup sederhana.

Cara Menggunakan Link Juice


Ok diatas tadi sudah dijelaskan pengertian atau definisi dari Link Juice. Sekarang bagaimana cara membuat dan menggunakan Link Juice?

Cukup memasang widget artikel dari blog orang lain, dan letakkan di Sidebar atau pun Footer. Nah sudah jadi. Semudah dan segampang itu ternyata.

Nah meski pun pemasangannya mudah, kita juga harus tahu bagaimana dampak dan pengaruhnya jika memasang atau menggunakan Link Juice.

Apa Dampak, Efek dan Pengaruh Link Juice?


Yang pertama sekali yang harus di ingat anak-anak blogger jaman sekarang adalah algoritma mesin pencari sudah mengalami pengembangan atau perkembangan dalam menentukan blog dan artikel berkualitas di SERPs.

Semakin bagus dan informatif suatu tulisan atau sebuah situs web, maka semakin mudah untuk ditemukan di hasil pencarian penelusuran (Search Engine Result Page, SERPs).

Dulu, mungkin akan sangat bagus ketika sebuah blog melakukan pertukaran link dengan blog lainnya, apalagi waktu itu Link Juice bisa memancing naiknya PageRank (PR) dari sebuah situs web.

Nah masalahnya adalah PR sudah mati, kini digantikan dengan Domain Authority dan Page Authority, ditambahkan lagi dengan algoritma UX Factor (Experience). 2 bulan yang lalu pun, muncul lagi algoritma Fred dari Google.

Mati satu, tumbuh 4. Lenyap satu penentu ranking, muncul 4 penentu ranking dalam satu waktu. Selamat!

Singkatnya, setelah saya Googling pun, menggunakan Link Juice di jaman sekarang, tidak bagus lagi bagi SEO dan blog.

Kini jika sebuah situs ketahuan melakukan Link Juice, akan dikenakan sanksi oleh Google seperti blog di banned, ranking artikel menurun drastis, atau minimal posting-posting blog malah No-Indeks (Deindeks).

Masalah lainnya adalah jika blog A dan blog B melakukan Link Juice, namun blog A menghapus Link Juice, sekarang siapakah yang rugi?

Tentu saja blog B karena blog B masih memberi atau memasangkan Link Juice untuk blog A; sedangkan blog A telah menghapus Link Juice alias melakukan pencurangan.

Itu baru masalah kecil. Terlalu kecil malah.

Masalah besarnya ialah Google melalui bot atau spidernya melakukan Crawl (index) setiap 2 hari sekali. Jika ketahuan, blog B akan ditetapkan sebagai "tersangka" karena dianggap telah melakukan penjualan slot beriklanan di Sidebar. Tentunya ini nggak baik.

Sudah jatuh, tertimpa tangga pula. Jadi usahakan sejak awal untuk tidak melakukan Link Juice.

Nah melalui posting Link Juice diatas, bisa kita lihat bahwa Link Juice itu kebanyakan sisi negatifnya dari pada untungnya. Maka dari itu, jangan menggunakan Link Juice. Semoga berguna.*
Media Queries CSS Code

Media Queries CSS Code

/* Smartphones portrait landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones landscape */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones portrait */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads portrait landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads portrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktop laptop */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Cara Membuat Spoiler Button Tulisan, Gambar & Video di Blog
Sebelumnya saya sudah share cara membuat Spoiler Button. Namun kalau dilihat kurang menarik rasanya. Nggak menggigit gitu.

Barangkali masih ada yang bertanya bagaimana bentuk atau masih belum ngeh Spoiler Button itu seperti apa.

Pernah main-main ke forum Kaskus nggak? Setiap thread yang diterbitkan pasti ada tombol Show Content atau Hide Content, atau Show or Hidden.

Masih bingung dan nggak tau juga? Nih contoh Spoiler Button-nya ada dibawah:

Joko Widodo adalah Presiden Indonesia

Ok langsung saja.

Cara Membuat Spoiler Button Tulisan, Gambar & Video di Blog


Gunakan kode dibawah ini:

<div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" value="Show" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;"> <div style="display: none;">Joko Widodo adalah Presiden Indonesia</div> </div> </div>

Kalau mengisi Spoiler Button dengan isi gambar, gunakan kode ini:

<div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" value="Show" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;"> <div style="display: none;"><img class="aligncenter" src="https://scontent-sea1-1.cdninstagram.com/t51.2885-15/s480x480/e15/10864912_835435436537200_1140592696_n.jpg?ig_cache_key=ODc3MTk2MDAzMTkyMTE4NTE5.2" alt="Syima Eima" width="410" height="300" /></div> </div> </div>

Hasilnya seperti ini, di dukung oleh foto mantan:

Syima Eima

Kalau mau mengisi Spoiler Button dengan Video yang berasal dari Youtube, bagaimana?

Kodenya tetap sama seperti kode diatas yang telah dibagikan, namun pada tulisan yang saya warna-merahkan tersebut, hapus dan ganti (atau sisipkan) dengan kode embed video youtube. Cara membuatnya seperti berikut:

<div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" value="Show" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;"> <div style="display: none;">Sisipkan Video Youtube yang di Embed</div> </div> </div>

Contohnya seperti ini nih:

<div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" value="Show" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;"> <div style="display: none;"><div class="videoyoutube"><div class="video-responsive"><div class="video-youtube loader" data-src="disini link embed video youtube"></div></div></div></div> </div> </div>

Untuk pemasangan video youtube tersebut, silahkan simak Cara Praktis Membuat Video Youtube Responsive agar tutorialnya bekerja dengan baik, Responsive pula! Ok semoga berguna.*
Cara Membuat Spoiler Button (Show/Hidden) di Posting Blogger
Spoiler Button adalah tombol yang menampilkan atau menyembunyikan keterangan dari suatu cerita.

Sebagai pengguna internet yang sering berkunjung ke situs Kaskus, tentu Anda nggak asing dengan penampilan Spoiler Button itu bagaimana.

Tombolnya kaya gimana sih? Begini nih, dibawah ini:



Arief Ghozaly

Nah itulah Spoiler Button. Kalau di klik pasti muncul, kalau di klik sekali lagi pasti disembunyikan. Show or Hidden, bahasanya.

Ok dibawah ini tutorialnya, sekaligus mendokumentasikan pengetahuan saya untuk keperluan pribadi - yang saya kutip langsung dari blog... Ada deh, rahasia pribadi :p

Cara Membuat Spoiler Button (Show/Hidden) di Posting Blogger


Kode yang Anda perlukan adalah kode dibawah ini:

<div><input value="Show" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Hide Content';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show Content';}" type="button" />

<div style="display: none;"> ahh... ahh... ahh... </div></div>

Ubah tulisan yang saya warna-merahkan tersebut dengan tulisan atau kalimat yang ingin Anda tuliskan di dalam artikel blog.

Cara memasangnya sendiri melalui HTML (bukan Compose). Ok segitu aja dulu. Semoga berguna, happy blogging.*
Lagi dan lagi, blog yang baru saja saya buat bermasalah, sitemap.xml blog error ketika mau di submit ke Google Webmaster Tools.

Muncul pesan "Errors: Missing XML Tag." Pada deskripsnya muncul informasi, "This required tag is missing. Please add it and resubmit". Issuses Count berjumlah 1 (satu), dan Example: Parten Tag: urlset; Tag: url.

Lihat gambar dibawah ini:

Cara mengatasi ERROR Sitemap XML di Google Webmaster Tool

Kronologisnya, blog baru saja dibikin. Nggak ada artikel atau posting di blog sama sekali, hanya laman (static page) yang baru saja dibikin.

Saya sendiri juga udah Googling, nggak nemu jawaban yang tepat. Terpaksa harus mengobservasi pribadi, lagi dan lagi.

Cara mengatasi ERROR Sitemap XML di Google Webmaster Tool


Akhirnya setelah menguji dan mengobservasi, ternyata penyebab sitemap.xml error ketika di submit adalah blog masih dalam keadaan kosong, tidak ada posting di blog sama sekali.

Maka dari itu, setelah saya coba memposting satu buah artikel, lalu melakukan re-submit sitemap.xml di Google Webmaster, langsung FIX. Berhasil.

Singkatnya, cara agar error sitemap.xml bisa diperbaiki ialah posting satu buah artikel saja. Lalu lakukan re-submit kembali. Semoga berguna.*
Cara Mengatasi Kode Iklan Google AdSense diambil Orang Lain
Sebagai blogger yang menikmati template blogger gratis, pasti sering menemukan "peninggalan" unit iklan Google AdSense yang dimunculkan.

Umumnya, si pembuat template bakal menerima pesan atau notifikasi bahwa unit iklannya telah digunakan oleh blog lainnya.

Blog lain yang dimaksud tentu saja si pemakai blogger template gratis yang dibagikan tersebut.

Antara disengaja atau pun tidak kode unit iklan yang terpasang, unit iklan tersebut memang sangat mengganggu. Apalagi bukan punya kita. Jadi memang sebaiknya dihapus saja.

Nah itu masalah pertama. Masalah keduanya ialah bagaimana dampak dan pengaruhnya jika iklan Google AdSense diambil oleh blog orang lain?

Balik lagi ke topik diatas, kita bakal mendapatkan email notifikasi bahwa iklan kita telah digunakan oleh blog orang lain.

Jika iklan Google AdSense tersebut terpasang di suatu blog yang dianggap berbahaya dan menyalahi peraturan serta kebijakan Google AdSense (Penyalahgunaan), bisa saja akun Google AdSense Anda di banned pada hari itu juga.

Namun nggak perlu khawatir karena kini sudah ada fitur dan layanan yang dinamakan Authorize Your Verified Sites to Display Ads, atau seringkali disebut dengan istilah Otorisasi Situs.


Apa itu Otorisasi Situs? Bagaimana cara kerja dan membuatnya?

Cara Mengatasi Kode Iklan Google AdSense diambil Orang Lain


Untuk persoalan ini sudah jauh-jauh hari saya posting pada artikel Cara Claim di Otorisasi Situs dan Authorize Verified.

Ada 2 artikel yang penjelasan dan maksudnya sama, tapi sengaja saya pisahkan lagi agar lebih mudah dimengerti dan lebih luas pembahasannya.

Silahkan di baca-baca atau di ubek-ubek. Pembahasannya sudah menyeluruh, detail dan lengkap.

Baca Juga: Cara Memblokir (Mencekal) Iklan AdSense yang Tidak Diinginkan.

Kalau pun ada yang kurang dimengerti, silahkan komentari pada artikel yang telah saya sertakan tersebut agar isi komentar "sinkron" dengan topik artikel. Semoga berguna.*
Cara Membuat Tulisan Bold, Italic, Underline & Strikethrought
Cara membuat Bold (tebal), Italic (miring), Underline (garis bawah) dan Strikethrought (garis tengah) di posting blog bisa dilakukan dengan mudah.

Masalahnya kebanyakan dianggap sulit karena harus berhadapan dengan yang namanya HTML.

Sebenarnya gampang kok.

Bahkan kita sendiri bisa tentuin kata-kata atau kalimat yang akan ditargetkan, apakah itu bold atau pun yang dianggap paling sulit yakni Strikethrought karena nggak tersedia di edit posting blog.

Cara Membuat Tulisan Bold, Italic, Underline & Strikethrought


Bold atau tulisan yang ditebalkan:

<strong> disini kata / kalimatnya </strong>
<b> disini kata / kalimatnya </b>

Contoh: Saya Blogger dan Saya Bangga.

Italic atau tulisan yang dimiringkan:

<em> disini kata / kalimatnya </em>
<i> disini kata / kalimatnya </i>

Contoh: Saya Blogger dan Saya Bangga.

Underline atau tulisan yang digarisbawahi:

<u> disini kata / kalimatnya </u>

Contoh: Saya Blogger dan Saya Bangga.

Strikethrought atau garis yang menggarisi sebuah kata atau tulisan:

<strike> disini kata / kalimatnya </strike>

Contoh:

Saya Blogger dan Saya Bangga.

atau

saya, hanya spasi pemisah Strikethrought, entah dimana, seokiller.

Nah itu dia caranya, sekaligus untuk mendokumentasikan ilmu alakadar yang saya pelajari secara otodidak. Semoga berguna.*
Cara Praktis Membuat Video Responsive di Blog (Blogger / Blogspot)
Barangkali ada yang bertanya bagaimana cara membuat dan pasang video menjadi responsive di blog.

Kebetulan saya baru saja membuat blog baru yang memposting video-video apabila isi artikelnya mengarah dan mendukung ke video yang ada di youtube.

Masalahnya ketika meng-embed video dari youtube langsung melalui "Insert a Video" pada bagian menu posting blog, pasti nggak responsive. Malah ukurannya kecil nggak karuan.

Saya kutip nih langsung dari Arlinadzgn, sekaligus untuk mendokumentasikan biar nggak balik lagi blog Arlina.

Cara Praktis Membuat Video Responsive di Blog


1. Login to Blogger
2. Template > Edit HTML
3. Cari kode </b:skin> atau </style>
4. Copy (salin) kode dibawah ini:

.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}

5. Paste (tempel) diatas salah satu kode yang barusan kita cari tersebut
6. Selanjutnya letakkan kode dibawah ini, diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>

Save perubahan pada blogger template. Ok sampai disini sudah selesai. Sekarang cara pasangnya bagaimana?

Kronologisnya artikel sudah dibuat, dan ingin ditambahkan video yang bakal menjadi responsive di blog. Gunakan kode dibawah ini pada gaya penulisan HTML (bukan Compose):

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="disini link embed video youtube">
</div>
</div>
</div>

Untuk cara pengisian link embed yang akan disisipkan, diawali dengan kode garis miring ke kanan. Contoh:

//www.youtube.com/embed/29sfdf83

Pastikan link embed tersebut bukan singkatan seperti "youtu.be" atau singkatan lainnya. Saya sudah mencobanya, gagal! Jadi harus sesuai dengan link embed diatas. Ok semoga berguna.*
Bahaya Memasang Kode Anti-Copas di Blog: Gadget Blog tidak Bekerja
Cara membuat dan pasang kode anti-copas di blog memang mudah dan bisa dilakukan sekarang juga, masalahnya ada beberapa hal yang harus diketahui.

Pertama, pemasangan kode anti-copas tidak User Friendly. Sebenarnya niat baik kita agar artikel tidak bisa di copas, disalahartikan oleh para pembaca.

Lagi pula pun pemasangan kode anti-copas meminimalisirkan tindakan copas dari blog pesaing lainnya. Tapi teteepp juga disalahartikan. Katanya , "Apa-apaan neh, blog kampungan!"

Kedua, Gadget atau widget blog tidak bekerja dengan baik. Contohnya? Kolom pencarian atau widget berlangganan, misalnya widget subscribe box for blogger yang pernah dibagikan.

Gadget blog tersebut tidak bekerja. Jangankan bekerja, di klik saja tidak berfungsi, apalagi untuk mengisi kata-kata pencarian atau pun menuliskan email.

Ok katakanlah Anda masih keukeuh ingin memasangkan kode anti-copas di dalam template blogger. Dibawah ini kodenya:

onmousedown='return false' oncontexmenu='return false' onselectstart='return false'

Hapus kode <body> ganti dengan kode diatas, sehingga menjadi seperti ini:

<body onmousedown='return false' oncontexmenu='return false' onselectstart='return false'>

Atau misalkan kodenya <body ......blabla> cukup disisipkan saja diawal kode atau diakhir kode. Contohnya:

<body blabla='blabla' blabla='blabla' onmousedown='return false' oncontexmenu='return false' onselectstart='return false'>

Kode tersebut saya dapatkan langsung dari CB Style Blogger Template yang saya gunakan saat ini. Salah satu template blogger premium terbaik yang pernah ada. Namun sudah saya hapus :)

Bahaya Memasang Kode Anti-Copas di Blog


Sebenarnya pun pemasangan kode anti-copas ini kurang efektif, nggak berjalan baik. Semua pengamanan seperti mengatasi atau melindungi tulisan artikel di blog bisa di jebol dengan mudah. Caranya? Banyak banget, silahkan Googling.

Jangankan menggunakan aplikasi, begitu buka blog lalu mengklik tombol X sebelum loading blog selesai dimuat, kita masih bisa melakukan copas artikel yang ada di dalam blog tersebut.

Sebegitu mudahnya.

Namun ingat sekali lagi, kalau masih keukeuh ingin memasangkannya, silahkan gunakan kode diatas. Jangan kode yang lain. Semoga berguna.*
Cara Menghapus Element/Widget di Blog secara Permanen
Pernah berkeinginan untuk menghapus element yang ada di dalam blog? Seperti menghapus Popular Posts bawaan blogger template premium yang keren abisss? Atau... Menghapus "Section" yang muncul di Layout Blog?

Saya awali dengan pengakuan pribadi bahwasanya saya nggak begitu paham persoalan isi template seperti jQuery, CSS dan lainnya. Hanya sedikit yang saya tahu, itu pun belajar secara otodidak.

Belajar membuat template blogger pun seringkali kacau balau, toh belajarnya otodidak hehe... Tapi saya nggak pernah patah arang, sikat terus sampai mampus :)

Nah topik kali ini tentang menghapus element-element yang ada di dalam template blogger seperti FeedLinks, FeedLinksBody, iFrame_Comments, Comment-Form, Section di Layout Blog dan lainnya.

Contoh penampakkannya? Nih ada dibawah:

<b:includable id='main' var='top'>...</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>...</b:includable>
<b:includable id='backlinks' var='post'>...</b:includable>
<b:includable id='breadcrumb' var='posts'>...</b:includable>
<b:includable id='comments' var='post'>...</b:includable>
<b:includable id='comment-form' var='post'>...</b:includable>
<b:includable id='comment_count_picker' var='post'>...</b:includable>
<b:includable id='feedLinks'>...</b:includable>
<b:includable id='feedLinksBody' var='links'>...</b:includable>

Beberapa kode yang saya sebutkan diatas, ada kaitannya dengan widget komentar default Blogger (Blogspot). Tapi bukan itu yang kita bahas, bukan cara menghapus widget komentar default dari Blogger.

Ok misalkan, kronologisnya kita ingin menghapus kode yang berkaitan dengan Comment. Contoh kodenya ini:

<b:includable id='comments' var='post'>...</b:includable>

Itu baru ciutannya (singkatan) saja. Baik mari kita klik 3 buah titik tersebut untuk memperbesar lagi kode yang disembunyikan. Dibawah ini tampilannya:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h3><b:if cond='data:post.numComments == 0'> 0 Response to &quot;<data:blog.pageName/>&quot;</b:if> <b:if cond='data:post.numComments == 1'> 1 Response to &quot;<data:blog.pageName/>&quot; </b:if> <b:if cond='data:post.numComments &gt; 1'> <data:post.numComments/> Responses to &quot;<data:blog.pageName/>&quot; </b:if></h3>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<b:if cond='data:post.hasOlderLinks'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
&#160;
</b:if>

<data:post.commentRangeText/>
<b:if cond='data:post.hasNewerLinks'>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</b:if>
</span>
</b:if>

<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</p>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

Panjang banget kan? Namun karena persoalannya kita mau menghapus salah satu element yang ada di dalam blogger template, mau tidak mau ya harus mengikuti tutorial dibawah ini.

Cara Menghapus Element/Widget di Blog secara Permanen (Blogger Blogspot)


Kita gambarkan dulu bagaimana kinerja dari sebuah blogger template. Yang saya tahu dan pahami selama ini, di dalam template ada 2 jenis kode yang berbeda tapi mengatur untuk satu element atau widget di blog.

Nah 2 jenis kode ini terdiri dari <header>, <b:section....., <div class='clear'/>, kode Navigasi Menu dan lainnya yang terletak di ruang lingkup <body> sampai penutupnya yakni </body>.

Kode yang berada di antara <body> hingga </body> bertugas untuk menjalankan perintah yang kita mau.

Satunya lagi ialah jenis kode CSS Style untuk mengatur tinggi, lebar atau pun ukuran dari element widget tersebut. Seringkali letaknya di ruang lingkup <style> sampai penutupnya, maupun <b:skin><![CDATA[ sampai penutupnya.

Ok itu dia.

Sebenarnya ada 3 jenis kode, satunya lagi ialah kode yang mengatur Responsive dan Mobile Friendly dari sebuah template. Biasanya diawali dengan kode "@media screen", letaknya bisa jadi di bagian <b:skin> sampai akhir, maupun <style> sampai akhir.

Ingat ya gan... disini saya membahas dan menuntaskan artikel ini bermodalkan 2 jenis kode saja, artinya situasi kita saat ini berada di template blogger yang belum Mobile Friendly dan Responsive. Masih template jadul, alias punya lama.

Nah kalau misalkan kode templatenya sudah mendukung Responsive, bagaimana? Nanti saya bahas dibagian paling bawah.

Ok ini dia topiknya. Kita contohkan kode diatas!

Pada kode diatas kita bakal melihat beberapa kode utama seperti:

<div class='comments' id='comments'>

dan;

<a name='comments'/>

dan;

<span class='paging-control-container'>

dan;

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

dan;

<span class='deleted-comment'><data:comment.body/></span>

dan;

<dd class='comment-footer'>

dan;

<span class='comment-timestamp'>

dan;

<a expr:href='data:comment.url' title='comment permalink'>

dan;

<span class='paging-control-container'>

dan;

<p class='comment-footer'>

dan;

<b:include data='post' name='comment-form'/>

dan;

<div id='comment-popup'>

Dan diakhiri dengan penutup kodenya yakni </b:includable>.

Ok sudah kita tandai.

Cara Menghapus Widget di Blog secara Permanen

Setelah kita tandai kode yang mana-mana saja, saatnya melakukan eksekusi.

Cari semua kode (atau nama) CSS yang sama kode (atau namanya) dengan kode (atau nama) dari kode perintah tersebut. Misalnya kode perintah yang ingin dihapus ialah:

<span class='comment-timestamp'>

Pada bagian CSS Style, sudah pasti ada kode comment-timestamp. Hapus semua kode tersebut. Ok! Begitulah caranya.

Antara percaya atau tidak, semua kode diatas yang diawali dengan nama-nama seperti 'paging-control-container', 'comment-footer', 'comment-popup', 'comment-form' dan lainnya punya kode CSS nya masing-masing.

Letak kode CSS nya pun berada diantara <b:skin> sampai penutupnya, maupun berada di kode <style> sampai bagian akhirnya. Berbeda-beda sesuai pembuatan dari desainer templatenya.

Note: Nggak semua kode perintah tersebut punya kode CSS nya. Tergantung dari desain template yang dikerjakan dan dibuat oleh desainer blogger template.

Atas nama bertujuan untuk menghapus sebuah element berupa widget atau pun Section yang muncul di Layout Blog, kedua jenis kode tersebut harus dihapus. Arti lainnya, kita telah mencoba cara menghapus widget blogger secara permanen.

Ingat sekali lagi gan...

Menghapus widget blog berarti kita harus menghapus kode CSS nya juga. Kalau hanya menghapus widgetnya saja tapi kode CSSnya tidak dihapus, malah itu menyebabkan lambatnya loading blog.

Contoh kasus lainnya?

Agan sendiri pasti melihat ada begitu banyak Styles atau bermacam gaya Popular Posts yang dibagikan secara gratis oleh Blogger luar negeri.

Biasanya pun Style dari widget Popular Posts tersebut menggunakan kode CSS tambahan agar tampilan Popular Posts sesuai dan terbentuk seperti yang dimunculkan dimulai dari Background, Font, Tinggi, Lebar atau pun Ukurannya.

Nah suatu waktu agan mau menghapus widget Popular Posts tersebut. Ternyata, yang agan hapus hanya widgetnya saja. Namun kode pengatur CSS nya belum dihapus, itulah salah satu penyebab lambatnya loading blog!

Percaya atau tidak, boleh di cek di tool-tool gratis seperti CSS Drive atau Compress CSS / JavaScript. Kalau kasusnya sudah demikian, otomatis bakal terdeteksi banyak CSS yang tidak terpakai, dan itulah mengapa blog agan begitu lambat.

Ok sampai disini sudah dipahami dan dimengerti. Jika ada yang kurang dimengerti, mohon ditanyakan.

Kode ini:

<b:includable id='comments' var='post'>...</b:includable>

...merupakan kode pengatur komentar default blogger. Usahakan jangan dihapus agar blog tidak error. Kode tersebut yang saya sertakan di posting ini, hanya gambaran penghapusan saja.

Oh ya... dengan cara diatas pun, kita bisa menghapus atau menghilangkan Section yang muncul di Layout Blogger, tempat dimana kita memasangkan Gadget HTML atau Feed dan lainnya.

Satu lagi, saya juga mohon maaf apabila ada kekeliruan di dalam artikel kali ini. Ini semua hanya gambaran saja bagaimana cara menghapus widget atau element di blog secara permanen dan dilakukan dengan benar. Semoga berguna.*