Januari 2018
Penyebab Iklan Google AdSense Kadang Muncul, Kadang Hilang

Apa sih penyebab iklan Google AdSense kadang ada, kadang hilang?

Dalam beberapa hari terakhir ini, blog seo killer sudah mengganti 4 kali template blogger dengan rincian 2 hari per template.

Template-template blog yang saya maksud ialah Infinite Premium Blogger Template, MagOne Premium (Sneeit), dan yang terakhir adalah Sang SEO Premium.

Dari kejadian tersebut, awalnya saya berasumsi kalau keseringan ganti template blog membuat iklan AdSense kadang muncul dan kadang hilang.

Ternyata, asumsi saya itu SALAH. Pertanyaannya, apa yang menjadi penyebab iklan Google AdSense kadang ada, kadang hilang yang sebenarnya?

Baca Juga: Kesalahpahaman tentang Google AdSense tipe Hosted

Penyebab Iklan Google AdSense Kadang Muncul, Kadang Hilang


Dari hasil observasi yang saya lakukan... ternyata, ada 2 faktor yang menyebabkan tayangan iklan AdSense kadang ada dan kadang tidak ada di blog.

#1. Pertama, Kekayaan Kosa-Kata di Dalam Artikel

Yang pertama adalah kekayaan kosa-kata di dalam postingan blog tersebut.

Contohnya, Anda membuat postingan tentang kue. Biasanya, postingan seperti tutorial membuat kue hanya memiliki kosa kata yang tidak begitu banyak.

Di sini saya berasumsi kalau Anda ingin iklan AdSense muncul di blog Anda sendiri, maka kosa-kata yang wajib diadakan di dalam konten tersebut adalah sebanyak 100 kata yang berbeda-beda.

Namun, apabila kata-kata yang berbeda tersebut di bawah angka 100, iklan AdSense tidak muncul.

Saya sudah membuktikannya sendiri, ternyata fakta!

Penyebab Iklan Google AdSense Kadang Muncul, Kadang Hilang

Baca Juga: Tombol Back to Top Menurunkan Penghasilan AdSense

Pernah main ke situs-situs Sinonim, Akronim atau Antonim, Gan? Itu setiap artikel yang diterbitkan tergolong sangat-sangat singkat; tapi iklan AdSense-nya tetap muncul.

Sebenarnya sih saya penasaran, kok bisa gitu yaaa... Apa mungkin artikelnya sudah ribuan makanya AdSense mengecualikan situs-situs seperti situs web Sinonim, Akronim atau Antonim tersebut?

#2. Kedua, Program Periklanan Google AdWords sedang Sepi

Bisa dikatakan, Google AdWords adalah perantara antara kita sebagai Publisher AdSense dengan pemilik perusahaan yang mempromosikan bisnisnya melalui AdWords.

Ketika AdWords sedang sepi, maka otomatis Query-nya pun juga sepi.

Sebaik, serapi dan sebagus apa pun tulisan yang Anda buat, kalau Query artikel blog Anda tidak ada hubungannya dengan Query dari program periklanan AdWords, maka jangan harap iklan Google AdSense akan muncul di blog Anda.

Baca Juga: Fakta Aneh Google AdSense dan Forum Kaskus

Catatan:

Ini sih pendapat saya ya, Gan. Jangan di ambil pusing.

Untuk kebenaran lebih lanjutnya, nggak ada salahnya Anda untuk mencoba-cobanya di blog sendiri.
Kode Script Anti Blokir Iklan Blog UC Browser

Siapa yang tidak tahu dengan UC Browser, sebuah aplikasi "Searching" paling banyak di download dan paling populer di Play Store (Android).

Hampir setiap orang menggunakannya. Jangankan teman Anda atau keluarga Anda, keluarga saya pun menggunakan UC Browser.

Sebagai blogger, sudah lama banget saya sadar dan tahu bahwa UC Browser ini memang aplikasi yang sangat merugikan bagi banyak blogger di luar sana; termasuk saya.

Bagaimana tidak, penghasilan kita yang berasal dari iklan - yang terpasang di blog; UC Browser malah mengaktifkan fitur atau ekstensi utamanya yakni memblokir iklan Google AdSense.

Baca Juga: Cara Merapikan Layout Blog yang Berantakan

Cape-cape nulis, berharap penghasilan Google AdSense terus mengalir di angka normal, eh UC Browser malah merusak rezeki kita. Astaghfirullah...

Kode Script Anti Blokir Iklan Blog UC Browser

Di satu sisi, UC Browser memberikan pengalaman yang lebih enak dan nyaman bagi para penggunanya; sedangkan pihak UC Browser malah merugikan kita sebagai penulis atau penerbit artikel di blog.

Kode Script Anti Blokir Iklan Blog UC Browser


Di bawah ini hanya ada satu buah kode JavaScript yang mampu mematikan fungsi Anti Blokir Iklan dari UC Browser.

<script type='text/javascript'>
//<![CDATA[
var noUC = navigator.userAgent;
var redirect = noUC.search("UCBrowser");
if(redirect>1) {
var axefo = window.location.assign("googlechrome://navigate?url="+ window.location.href);
var activity = axefo;document.getElementsByTagName('head')[0].appendChild(activity);}
//]]>
</script>

Pasang kode di atas, TEPAT di atas kode </head>

Cara Kerja Script Anti Blokir Iklan Blog UC Browser


Cara kerja dari JavaScript di atas ialah ketika para pembaca mengunjungi blog kita menggunakan UC Browser, maka sistem akan melakukan Redirect (pengalihan) ke aplikasi Google Chrome secara otomatis.

Baca Juga: Cara Membuat Redirect Otomatis ketika Page Not Found

Lagi pula, Script di atas tentu tidak merugikan bagi kedua pihak; antara kita sebagai pemilik web blog, situs atau website; mau pun para pembaca sekali pun.
Alternatif Cek SEO: Situs Chkme.Com Error, Server Down

Masih dalam pengembangan sebuah template blogger, baru-baru ini saya menemukan kenyataan bahwa situs Chkme.Com mengalami Error.

Berdasarkan informasi yang diterbitkan oleh Down or No Right Now, dikatakan bahwa situs Chkme.Com mengalami Down.

Untuk mengatasi problem tersebut, di bawah ini ada beberapa situs alternatif yang bisa kita gunakan untuk mengecek skor SEO 100% atau tidak.

Baca Juga: Situs untuk Membantu Memilih Nama Domain Blog yang Keren

Alternatif Cek SEO: Situs Chkme.Com Error, Server Down


1. https://www.seocentro.com/tools/seo/seo-analyzer.html

Berdasarkan perhitungan dan penilaian yang saya lakukan dari situs SEO Centro di atas, ternyata SEO Score blog ini berada di angka 60% dari 100%.

Sedangkan Speed Score-nya mencapai 78% dari 100%. Alhamdulillah, lumayan... dari pada lu manyun ^^

Webpage has 14 heading tags. The search engines uses the heading tags for the keywords. For best practice try not to use more than 30 heading tags in the webpage and no heading tags longer than 120 characters.

2. https://www.cekseo.com/

Beda situs, beda pula hasilnya. Berdasarkan analisa dari sistem situs web Cek SEO, Score Rank blog ini berada di angka 44.

  • Success: 74% of passed verification steps
  • Warning: 13% of total warning
  • Errors: 13% of total errors, require fast action
  • Page Speed: 91%
  • Page Speed Mobile: 73%
  • Usability Mobile: 99%
  • Domain Authorit: 1 (Satu, karena Blogspot.Com)

Daily

  1. Unique Visits: 3,049
  2. Pages Views: 5,640
  3. Income: $4

Monthly

  1. Unique Visits: 85,372
  2. Pages View: 160,740
  3. Income: $100

Yearly

  1. Unique Visits: 987,876
  2. Pages View: 1,895,040
  3. Income: $1,056

Sebenarnya, ada begitu banyak situs web yang bisa kita pilih sebagai alternatif Chkme.Com yang Error.

Akan tetapi, kedua situs web di atas merupakan pilihan terbaik menurut saya karena informasinya sangat lengkap. Lumayan akurat gitu, deh! :)

Alternatif Cek SEO: Situs Chkme.Com Error, Server Down

Tambahan! Coba gunakan situs web ini: https://seositecheckup.com/

Cara Mengatasi Situs Chkme.Com yang ERROR


A. Down or No Right Now: Troubleshooting Tips

If Chkme is Up but you are having trouble with accessing the website, Try one of the steps below and then reload the website you're having trouble with.

  • Refresh the website you're trying to load by pressing CTRL + F5 keys at the same time on your browser.
  • Delete all cookies from Chkme.com and clear your web browser's cache to make sure you have the latest version of the website.
  • If you have recently installed a new firewall program, browser extension/add-on or Internet security software that might be causing problems with the website, Try disabling it temporarily.

B. Fix your DNS issues

Domain Name Server (DNS) transforms human-readable domain names into computer-readable IP Addresses.

When you try to visit Chkme.com, your computer contacts its DNS server to retrieve Chkme.com's IP address. The default DNS servers are usually provided by your ISP.

1. Try accessing Chkme.com via its IP address directly, this bypasses the DNS lookup and DNS filtering. If this method works and you still unables to access Chkme via its domain, then it is a DNS issue. It might not necessarily be the ISP's fault. It could be your DNS cache corrupted or outdated.

2. Turn off your router or modem for 30 seconds and then turn it on again. This should resolve most of your DNS issues.

3. Clear your DNS cache to force your computer to retrieve most recent DNS information from your ISP. For windows: Click the start button > Open Command Prompt > Type "ipconfig /flushdns" and press enter.

4. If you can access Chkme.com from another network but the problem still persists on your computer or device, it could be a DNS fault. Rather than waiting for your ISP to fix their DNS problem, you can try using an alternative DNS provider like OpenDNS or Google Public DNS.

Begitulah kata Down or No Right Now. Ngerti? Google Translate, dong! Hahaha...

Baca Juga: Cara Mengatasi Pesan Error "Redirect" di Fetch as Google

Itulah pembahasan artikel kali ini tentang alternatif situs Chkme.Com yang sedang Server Down. Semoga berguna, Gan!
Kode Script Anti Copas, Melindungi, Menjaga, Mengantisipasi Artikel Blog agar Tidak Bisa di Copas Blogger Lain.

Bahasa lainnya ialah melindungi, menjaga, atau mengantisipasi agar konten atau postingan blog kita tidak di curi oleh orang lain.

Mengapa harus di jaga? Karena membuat konten orisinil itu sangat sulit, belum lagi membutuhkan waktu dan observasi yang cukup banyak memakan waktu.

Pertanyaannya, kenapa artikel di blog ini tidak di Protect? Males aja, males banget itu lagi enak makan eh di ajak ngomong. Hehehe...

Cara Melindungi Tulisan agar Tidak Bisa di Copas (Copy Paste)


Di bawah ini, setidaknya tersedia 4 jenis kode Script anti copas untuk melindungi tulisan agar tidak bisa di Salin orang lain.

#1. Kode Anti Copas

<script language='JavaScript1.2'>
function disableselect(e){
return false
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
function reEnable(){
return true
}
</script>

Kode di atas merupakan Script mematikan fungsi klik kanan, Ctrl + C dan tidak bisa "Select Text".

Permasalahannya ialah Script di atas tidak akan berguna ketika Oknum tersebut menekan tombol Ctrl + P alias Print.

Ketika mereka menekan tombol Ctrl P, mereka tetap bisa dan leluasa melakukan Copas artikel dari blog kita.

Cara Melindungi Tulisan agar Tidak Bisa di Copas (Copy Paste)

Untuk mengantisipasi permasalahan di atas, coba deh tambahkan kode di bawah ini, letaknya TEPAT di atas kode </body>.

<style type="text/css" media="print">
* { display: none; }
</style>

Di dalam template blogger saya, kedua Script anti copas postingan blog di atas, bisa disandingkan di dalam satu template blog. Praktekin saja! :)

Kalau mau mematikan semua fungsi klik kanan, Select Text, Ctrl + P, ini dan itu segala macam, maka gunakan kode di bawah ini.

Caranya, hapus kode <body> dan ganti (atau, Replace) dengan kode di bawah ini:

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

Kode di atas ini sebenarnya membuat para pembaca blog menjadi tidak nyaman. Bagaimana mungkin, kotak pencarian artikel saja tidak bisa digunakan.

Tapi ya terserah deh...

Kalau di hitung-hitung, ketiga Script di atas itu sudah lama sekali tersimpan di laptop saya.

Mumpung lagi menghapus file-file yang tidak penting di laptop, mungkin file berupa Script di atas berguna bagi banyak orang.

UPDATE!

Kode di bawah ini sebenarnya cuma "Candaan" doang buat para pelaku Copas. Kode di bawah ini tidak seperti ketiga kode diatas.

Nyatanya, kode di bawah ini masih memfungsikan Ctrl + C... Namun, ketik di klik kanan, muncul tulisan peringatan bahwasanya tidak boleh Copas.

Penasaran? Cobain, deh!

<script language=JavaScript>
var message="Mau Copas? Baca Bismillah dulu...";
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
</script>

Toh, mana tau suatu waktu bisa saya gunakan kembali untuk keperluan pribadi. Semoga berguna...
2 Cara Membuat Redirect Otomatis ketika 404 Page Not Found

"Redirect" artinya pengalihan link URL dari suatu laman ke laman lainnya.

Sedangkan Redirect ketika 404 Page Not Found adalah pengalihan suatu laman yang telah rusak (Error) ke laman yang masih bagus dan menampilkan konten (Gambar, Video, Visualisasi atau lainnya).

Sebenarnya, apa pun itu definisi dari Redirect, tujuannya tetap satu kok...! Kembali ke halaman yang masih bagus dan bisa digunakan.

Pengalihan ini bisa kita lakukan melalui Dashboard Blogger atau pun menggunakan Code khusus yang sering saya pakai.

Baca Juga: Cara Mendapatkan Featured Snippets di Google

2 Cara Membuat Redirect Otomatis ketika 404 Page Not Found


#1. Redirect (Dashboard Blogger)

Cara ini sudah saya jelaskan di postingan Cara Mengalihkan Link Artikel Lama ke Artikel Terbaru.

  1. Blogger > Setting (Setelan / Pengaturan)
  2. Tap "Search Preferences" (atau, Preferensi Penelusuran)
  3. Tap "Custom Redirect" (atau, Pengalihan Khusus)
  4. Klik "Edit"
  5. Silahkan isi sesuai dengan link URL artikel

Caranya mengisi kolom Pengalihan Khusus (Custom Redirect) ini gimana?

Contoh link URL artikel yang lama:

http://tipsseokiller.blogspot.co.id/2015/08/cara-menghilangkan-titik-bullets-layout-blog.html

Contoh link URL artikel baru yang akan dialihkan kemari adalah:

http://tipsseokiller.blogspot.co.id/2017/04/cara-menghapus-titik-bullets-layout-blog.html

2 Cara Membuat Redirect Otomatis ketika 404 Page Not Found

Langkah-langkahnya adalah pada kolom "Dari" (atau From:), silahkan Anda isi dengan link URL posting yang lama yakni:

/2015/08/cara-menghilangkan-titik-bullets-layout-blog.html

Nah pada kolom "Ke" (atau To:) agan isi dengan link URL konten terbaru yang akan dialihkan kemari:

/2017/04/cara-menghapus-titik-bullets-layout-blog.html

NB: Awali dengan garis miring terlebih dahulu.

Tap tombol "Permanent" apabila pengalihan yang dilakukan untuk selamanya. Ingat! Sekalinya di setting ke Permanent, link URL yang telah di Redirect tidak akan bisa dikembalikan seperti semula.

#2. Redirect Otomatis di Blog

Inilah cara yang paling sering saya gunakan dan paling saya sukai, Gan!

Gak perlu Redirect-Redirect-Club, begitu kodenya dipasangkan di dalam template blogger, langsung WORK 100% tanpa masalah, Gan.

Kronologisnya, kalau misalkan ada sebuah postingan blog yang rusak (Page Not Found), maka kode ini akan bekerja dan melakukan Redirect otomatis ke halaman awal (Home Page) dari blog kita.

1. Copy kode di bawah ini:

<!--Redirect jika 404 Start -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<script type='text/javascript'>
BSPNF_redirect=setTimeout(function() {
location.pathname= &quot;/&quot;
}, 1);
</script>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
</b:if>
<!--Redirect jika 404 End -->

2. Paste (Tempel) diatas kode:

</body>

Atau kode:

&lt;!--</body>--&gt;&lt;/body&gt;

Apabila sebelumnya ada kode seperti di bawah ini, silahkan hapus kode di bawah ini terlebih dahulu. Selanjutnya, ikuti tutorial No. 2 di atas.

<div id='error-page'>
<div id='error-inner'>
<div class='box-404'>404</div>
<h1>Halaman tidak ditemukan</h1>
<p>Kemungkinan halaman yang ingin dibaca telah dihapus; atau Anda salah menulis URL.</p>
<p>Hubungi pihak admin apabila ada suatu hal yang ingin dibahas. Silahkan kembali ke halaman utama: <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p>
<p>Silahkan gunakan kolom pencarian dibawah ini untuk menelusuri artikel lainnya.</p>
<p>Terima kasih, Admin dari <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p>
<div id='search-box'>
<form action='/search' id='cse-search-box' method='get'>
<input id='search-text' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Cari di sini ...'/>
<button id='search-button' type='submit'/>
</form>
</div>
</div>
</div>

Apabila kode-kode seperti di atas tidak di hapus, maka Script untuk Redirect Otomatis tidak akan bekerja.

Kode di atas pun, merupakan laman untuk Redirect 404 Page Not Found versi JAMAN. Bagus? Bagus, dong! Tapi saya lebih suka Redirect Otomatis :)

Baca Juga: Cara Membuat Bold, Italic, Underline dan Strikethrough

Itulah tutorial membuat atau memasang Script Redirect otomatis di blog ketika artikel, konten atau posting blog mengalami Error. Semoga berguna, Gan!
Salah Paham Soal Google AdSense Jenis Hosted

Ya, Gan! Itulah judul postingan kita kali ini. Coba Anda tanyakan ke blogger-blogger yang sudah SENIOR, tanyakan apa bedanya Hosted dan Non-Hosted.

95% orang yang menjawabnya akan salah. Mengapa? Karena dirinya cuma melakukan sesuatu tanpa tahu fakta Google AdSense yang sebenarnya.

Baca Juga: Apa itu Otorisasi Situs?

Hosted adalah jenis akun yang masih "terikat" dengan Google dan pembayarannya di bagi sepihak untuk Google, sedangkan Non-Hosted tidak berkaitan lagi dengan Google serta mendapatkan penghasilan penuh 100% dari AdSense.

Salah Paham Soal Google AdSense Jenis Hosted


Permasalahannya adalah banyak blogger yang menulis asal Copy Paste tulisan orang lain tanpa tahu hal yang sebenarnya.

Banyak tulisan yang saya baca, yang mengatakan kalau Hosted hanya bisa dipasangkan di SATU BLOG gratis. Benar? SALAH, Gan!

Salah Paham Soal Google AdSense Jenis Hosted

Menggunakan satu jenis akun Hosted, faktanya unit iklan kita, bisa dipasangkan sampai di 500 Blogspot lainnya!

Kendalanya, akun berjenis Hosted hanya bisa memasangkan iklan di BANYAK BLOG akan tetapi blog yang dimaksud masih berstatus Blogspot alias GRATISAN.

Contohnya, saya punya akun Hosted. Saya ingin menggunakan unit iklannya di blog-blog saya yang masih Gratisan (Blogspot) juga.

Bisa? Ya, BISA DONG!

Penghasilannya akan tercatat dengan rapi dan detail di Dashboard AdSense. Tentunya, setelah melakukan Autorisasi Situs :)

Singkatnya seperti ini, iklan Google AdSense jenis Hosted hanya bisa digunakan untuk banyak blog tapi domainnya "Blogspot" (Gratis)... tidak bisa di pasang di web blog ber-domain TLD...

...sedangkan domain TLD bisa dipasangkan di banyak blog, baik itu domain TLD mau pun di banyak blog Blogspot (Gratisan).

Baca Juga: Pengertian Template Blog AdSense Ready

Itulah sedikit "KULTUM" kita pada hari Jum'at yang barokah ini, dari saya untuk para blogger-blogger di luar sana. Semoga berguna, Gan!
Cara Membuat Markup: HTML Tags and Formatting

Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web.

Selain itu, HTML juga menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.

Membuat Markup HTML Tags di Blogger tentunya sangat mudah karena apa yang kita butuhkan telah disediakan oleh Blogger.

Contoh yang paling dasar dalam pembuatan Heading Tag di dalam postingan blog seperti H2 (Heading), H3 (Sub Heading) dan H4 (Minor Heading).

Sedangkan, kalau dalam kasusnya di Home Page, Heading Tag akan berubah secara otomatis menjadi H1 untuk Nama Blog, H2 untuk widget dan H3 untuk widget-widget yang berada di Footer.

Contoh di atas adalah Header Tag yang telah menganut SEO Dinamis, artinya Tag-Tag akan berubah secara otomatis mengikuti suatu laman dan sesuai anjuran SEO Search Engine.

Cara Membuat Markup: HTML Tags and Formatting


Pembuatan Formatting sebenarnya lebih rumit dibandingkan pembuatan HTML Tags di atas.

Itu semua karena Formatting menggunakan rumusnya masing-masing seperti tag atau atribut <pre>, <sup>, <i>, <e>, <em>, tab b, tag b strong, dan masih banyak lagi.

Cara Membuat Markup: HTML Tags and Formatting

Lihat HTML Tags dan Formatting di bawah ini:

Headings

Header one

Header two

Header three

Header four

Header five
Header six

Blockquotes

Single line blockquote:
Stay hungry. Stay foolish.
Multi line blockquote with a cite reference:
People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs - Apple Worldwide Developers' Conference, 1997

Tables

EmployeeSalary
John Doe$1Because that's all Steve Jobs needed for a salary.
Jane Doe$100KFor all the blogging she does.
Fred Bloggs$100MPictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs$100BWith hair like that?! Enough said...

Definition Lists

Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher "Big Black" Boykins, "Do Work" works as a self motivator, to motivating your friends.
Do It Live
I'll let Bill O'Reilly will explain this one.

Unordered Lists (Nested)

  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

Ordered List (Nested)

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

HTML Tags

These supported tags come from the WordPress.com code FAQ. Address Tag
1 Infinite Loop Cupertino, CA 95014 United States
Anchor Tag (aka. Link) This is an example of a link. Abbreviation Tag The abbreviation srsly stands for "seriously". Acronym Tag (deprecated in HTML5) The acronym ftw stands for "for the win". Big Tag (deprecated in HTML5) These tests are a big deal, but this tag is no longer supported in HTML5. Cite Tag "Code is poetry." --Automattic Code Tag You will learn later on in these tests that word-wrap: break-word; will be your best friend. Delete Tag This tag will let you
strikeout text, but this tag is no longer supported in HTML5 (use the <strike> instead). Emphasize Tag The emphasize tag should italicize text. Insert Tag This tag should denote
insertedtext. Keyboard Tag This scarsly known tag emulates keyboard text, which is usually styled like the <code> tag. Preformatted Tag This tag styles large blocks of code.
.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}
Quote Tag Developers, developers, developers... --Steve Ballmer Strike Tag (deprecated in HTML5) This tag shows strike-through text Strong Tag This tag shows bold text. Subscript Tag Getting our science styling on with H2O, which should push the "2" down. Superscript Tag Still sticking with science and Isaac Newton's E = MC2, which should lift the 2 up. Teletype Tag (deprecated in HTML5) This rarely used tag emulates teletype text, which is usually styled like the <code> tag. Variable Tag This allows you to denote variables.

Untuk membuat HTML Tags dan Formating seperti di atas, silahkan COPAS kode di bawah ini dan buatlah artikel terbaru untuk HTML (bukan Compose) di blog Anda.

<h2>Headings</h2><h1>Header one</h1><h2>Header two</h2><h3>Header three</h3><h4>Header four</h4><h5>Header five</h5><h6>Header six</h6><h2>Blockquotes</h2>Single line blockquote: <br /><blockquote>Stay hungry. Stay foolish.</blockquote>Multi line blockquote with a cite reference: <br /><blockquote>People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things. <cite>Steve Jobs - Apple Worldwide Developers' Conference, 1997</cite></blockquote><h2>Tables</h2><table><thead><tr><th>Employee</th><th>Salary</th><th></th></tr></thead><tbody><tr><th><a href="http://example.org/">John Doe</a></th><td>$1</td><td>Because that's all Steve Jobs needed for a salary.</td></tr><tr><th><a href="http://example.org/">Jane Doe</a></th><td>$100K</td><td>For all the blogging she does.</td></tr><tr><th><a href="http://example.org/">Fred Bloggs</a></th><td>$100M</td><td>Pictures are worth a thousand words, right? So Jane x 1,000.</td></tr><tr><th><a href="http://example.org/">Jane Bloggs</a></th><td>$100B</td><td>With hair like that?! Enough said...</td></tr></tbody></table><h2>Definition Lists</h2><dl><dt>Definition List Title</dt><dd>Definition list division.</dd><dt>Startup</dt><dd>A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.</dd><dt>#dowork</dt><dd>Coined by Rob Dyrdek and his personal body guard Christopher "Big Black" Boykins, "Do Work" works as a self motivator, to motivating your friends.</dd><dt>Do It Live</dt><dd>I'll let Bill O'Reilly will <a href="https://www.youtube.com/watch?v=O_HyZ5aW76c" title="We'll Do It Live">explain</a> this one.</dd></dl><h2>Unordered Lists (Nested)</h2><ul><li>List item one <ul><li>List item one <ul><li>List item one</li><li>List item two</li><li>List item three</li><li>List item four</li></ul></li><li>List item two</li><li>List item three</li><li>List item four</li></ul></li><li>List item two</li><li>List item three</li><li>List item four</li></ul><h2>Ordered List (Nested)</h2><ol><li>List item one <ol><li>List item one <ol><li>List item one</li><li>List item two</li><li>List item three</li><li>List item four</li></ol></li><li>List item two</li><li>List item three</li><li>List item four</li></ol></li><li>List item two</li><li>List item three</li><li>List item four</li></ol><h2>HTML Tags</h2>These supported tags come from the WordPress.com code <a href="http://en.support.wordpress.com/code/" title="Code">FAQ</a>. <strong>Address Tag</strong> <br /><address>1 Infinite Loop Cupertino, CA 95014 United States</address><strong>Anchor Tag (aka. Link)</strong> This is an example of a <a href="http://apple.com/" title="Apple">link</a>. <strong>Abbreviation Tag</strong> The abbreviation <abbr title="Seriously">srsly</abbr> stands for "seriously". <strong>Acronym Tag (<em>deprecated in HTML5</em>)</strong> The acronym <acronym title="For The Win">ftw</acronym> stands for "for the win". <strong>Big Tag&nbsp;<strong>(<em>deprecated in HTML5</em>)</strong></strong> These tests are a <big>big</big> deal, but this tag is no longer supported in HTML5. <strong>Cite Tag</strong> "Code is poetry." --<cite>Automattic</cite> <strong>Code Tag</strong> You will learn later on in these tests that <code>word-wrap: break-word;</code> will be your best friend. <strong>Delete Tag</strong> This tag will let you <br /><del>strikeout text</del>, but this tag is no longer supported in HTML5 (use the <code>&lt;strike&gt;</code> instead). <strong>Emphasize Tag</strong> The emphasize tag should <em>italicize</em> text. <strong>Insert Tag</strong> This tag should denote <br /><ins>inserted</ins>text. <strong>Keyboard Tag</strong> This scarsly known tag emulates <kbd>keyboard text</kbd>, which is usually styled like the <code>&lt;code&gt;</code> tag. <strong>Preformatted Tag</strong> This tag styles large blocks of code. <br /><pre>.post-title {<br /> margin: 0 0 5px;<br /> font-weight: bold;<br /> font-size: 38px;<br /> line-height: 1.2;<br /> and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;<br />}</pre><strong>Quote Tag</strong> <q>Developers, developers, developers...</q> --Steve Ballmer <strong>Strike Tag&nbsp;<strong>(<em>deprecated in HTML5</em>)</strong></strong> This tag shows <span style="text-decoration: line-through;">strike-through text</span> <strong>Strong Tag</strong> This tag shows <strong>bold<strong> text.</strong></strong> <strong>Subscript Tag</strong> Getting our science styling on with H<sub>2</sub>O, which should push the "2" down. <strong>Superscript Tag</strong> Still sticking with science and Isaac Newton's E = MC<sup>2</sup>, which should lift the 2 up. <strong>Teletype Tag&nbsp;<strong>(<em>deprecated in HTML5</em>)</strong></strong> This rarely used tag emulates <tt>teletype text</tt>, which is usually styled like the <code>&lt;code&gt;</code> tag. <strong>Variable Tag</strong> This allows you to denote <var>variables</var>.

Apa Fungsi dan Tujuan HTML Tags dan Formatting?


Sebagai blogger, kita akan menggunakan HTML Tags dan Formatting untuk keperluan dalam pembuatan, pengembangan atau desain ulang sebuah template blogger.

Apalagi ketika sebuah template blogger akan di jual, maka formasi penulisan ini perlu di tulis di blog tersebut.

Nantinya, HTML Tags dan Formatting tersebut akan kita "sandingkan" dengan artikel-artikel seperti Lorem Ipsum Dolor Sit Amet.

Dengan adanya artikel ini, semoga blogger mana pun yang ingin membuat huruf tebal, kata miring, dan banyak lagi. Mungkin itu saja. Semoga berguna, Gan!
Fakta SEO: Bahaya JavaScript OnClick Event Komentar Disqus

OnClick Event merupakan atribut yang bisa dipasangkan di dalam template blogger, fungsi OnClick Event adalah menyembunyikan atau menampilkan komentar blog.

Selain itu, tujuan pemasangan OnClick Event juga mempercepat loading blog.

OnClick Event bisa bertugas untuk Blogger, Disqus atau pun Facebook. Bahkan bisa dipasangkan sekaligus, Show & Hidden semua widget komentar blog.

Permasalahannya, kelemahan atau kekurangan atribut OnClick Event ini sangat berbahaya bagi web blog, situs atau website yang mengedepankan SEO bagi situs webnya.

Fakta SEO: Bahaya JavaScript OnClick Event Komentar Disqus


OnClick Event ini sama halnya seperti Menu Navigasi Drop Down. Iya, menu navigasi yang turun ke bawah itu, lho!

Label-label yang terpasang di Menu Drop Down tidak akan di Indeks oleh Bot Search Engine, terkecuali Label-Label yang terpasang secara TUNGGAL di navigasi menu.

Menu Drop Down tidak terlihat, sedangkan Bot hanya "memindai" yang tampak saja.

Begitu juga dengan fungsi OnClick Event ini. Semua isi komentar yang tersedia di web blog kita tidak akan di INDEKS oleh Search Engine mana pun.

Fakta SEO: Bahaya JavaScript OnClick Event Komentar Disqus

Memang sih mempercepat loading blog. Tapi, rasanya percuma Fast Loading akan tetapi semua komentar tidak di Indeks (Non-Indeks) oleh mesin pencari.

Percaya atau tidak, tanpa sumber sekali pun, semua blogger Indonesia harus tahu ini.

Demi nusa dan bangsa #SaveKPK, mohon maaf sumbernya tidak bisa disebutkan dimari. Takut kecolongan. Hahaha. Semoga berguna...
Cara memperbaiki dan mengatasi judul nama artikel di widget blog yang suka menghilang di bagian sidebar blog.

Sebelumnya saya pernah mengulas tentang Cara Mengatasi Judul Widget Blogger yang Suka Menghilang.

Permasalahan tersebut tidak berakhir sampai di situ saja. Baru-baru ini saya dihadapkan pada suatu problem terbaru, dimana judul-judul artikel di widget blog menghilang!

Singkatnya seperti ini... masalah sebelumnya adalah judul widget blog yang menghilang. Masalah kali ini NAMA widget-nya ada tapi judul postingnya yang menghilang.

Contohnya seperti ini:

Cara Mengatasi Judul Artikel di Widget Blog yang Menghilang

Sempat mikir, ini gimana cara mengatasinya karena saya masih belajar tentang HTML, JavaScript dan lainnya.

Saya buka lagi posting-posting terdahulu yang ada di dalam di blog ini, ternyata ada! Caranya sama 100% seperti cara yang ada di artikel Cara Mengatasi Nama Widget Blog yang Menghilang.

Cara Mengatasi Judul Artikel di Widget Sidebar Blog yang Menghilang


Coba lihat widget mana yang bermasalah; bisa jadi Recent Post atau widget artikel terbaru berdasarkan label (kategori)-nya masing-masing.

Hapus widget tersebut, selanjutnya ikuti langkah-langkah di bawah ini.

1. Hapus Recent Post yang sudah ada
2. Add a widget (tambahkan widget) > HTML / JavaScript
3. Salin kode di bawah ini:

<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_top">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="/feeds/posts/summary?max-results=5&alt=json-in-script&callback=recentpostslist"></script>

4. Simpan.

Jangan lupa, buatlah nama widget seperti "Artikel Terbaru", "Posting Terbaru", "Recent Posts" atau lainnya.

Sedangkan kalau widget Recent Posts yang akan dipasangkan berdasarkan label atau kategorinya masing-masing, gunakan kode di bawah ini:

<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_top">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="/feeds/posts/summary/-/Label?max-results=5&alt=json-in-script&callback=recentpostslist"></script>

Note: Apabila Label-nya terdiri dari 2 kata, gunakan %20 sebagai "pengganti" dari spasi.

Contohnya seperti ini nih!:

/feeds/posts/summary/-/Nama%20Label?max-results=5&alt=json-in-script&callback=recentpostslist"></script>

Atau:

feeds/posts/summary/-/Template%20Blog?max-results=5&alt=json-in-script&callback=recentpostslist"></script>

Permasalahan ini saya temukan di template blogger premium CB Style dan Sang SEO. Kedua-duanya adalah template blog versi Premium (berbayar).

Barangkali Anda pernah membelinya, lalu bermasalah dengan hal seperti di atas, maka gunakan artikel ini sebagai rujukan. Semoga berguna!

Update!

Widget Recent Posts

<script>
//<![CDATA[
function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<5;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};
document.write("<scr" + "ipt type="text/javascript" src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts"></scr" + "ipt>");
//]]>
</script>

Widget Feeds (Artikel Terbaru) dari Situs Web Orang Lain

<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_top">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://[namablog].blogspot.com/feeds/posts/summary?max-results=5&alt=json-in-script&callback=recentpostslist"></script>

Saran dari saya, apabila judul-judul di artikel Popular Posts ikutan menghilang juga, lebih baik ganti template blogger.

Permasalahan terhadap widget Popular Posts belum saya ketahui.

Lagi pula, tidak ada satu pun blogger di dunia ini yang membahas permasalahan seperti di atas untuk Popular Posts.
Cara Pasang Show & Hidden Komentar Blogger dan Disqus

Dikenal dengan istilah Onclick Event, yakni sebuah atribut yang bertugas menampilkan (show) dan menutup (hidden) widget komentar blog.

Bisa disqus, maupun komentar blogger blogspot. Kalau untuk komentar Facebook, saya belum tahu, belum mencoba.

Selain itu, tujuan pemasangan atribut Onclick Event ini ialah mempercepat loading blog. Apalagi widget komentar Disqus, tentu sangat berat.

Belum lagi kalau di salah satu postingan blog ada banyak komentar hingga puluhan, apalagi ratusan, tentunya menambah beban Loading blog di kala itu.

Cara Membuat Show & Hidden Komentar Blogger dan Disqus


Cari kode ini:

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

Ganti kode di atas dengan kode di bawah ini:

<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a>
<div class='clear'/>
<div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a>
<div class='clear'/>

Tambahkan kode di bawah ini, tepat di atas </style> atau ]]></b:skin> :

.hide-content{display:none;margin:0;padding:0;}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}

Copy kode di bawah ini, Paste di atas </body> :

<script type='text/javascript'>
//<![CDATA[
// Hide and Show Comments
function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
//]]>
</script>

Selanjutnya silahkan simpan perubahan template blogger. Fix! Selesai.

Cara Membuat Show & Hidden Komentar Blogger dan Disqus

Note: Apabila Anda menemukan 2 buah kode <div class='comments' id='comments'> ini di dalam template, maka kedua-duanya harus di eksekusi.

Itulah cara membuat dan memasang Onclick Event komentar Blogger dan Disqus, sekaligus dokumentasi untuk kepentingan pribadi.

Source:

https://www.w3schools.com/jsref/event_onclick.asp
https://www.w3schools.com/tags/ev_onclick.asp
https://www.arlinadzgn.com/2015/10/show.and.hide.comments.blogger.dengan.onclick.event.html
Cara Menghapus Komentar Blogger secara Permanen

Apa ya kata kunci yang pas buat artikel ini? Hmm... kalau cara menghapus kolom komentar blogger?

Cara menghilangkan widget komentar blogger, barangkali? Atau cara menghilangkan komentar bawaan default blogger, gitu?

Soalnya, beda blogger beda juga kata kunci yang di target.

Sorry nih, bukan niat nyepam Long Tail Keyword, toh niatnya buat bantu blogger-blogger lainnya. Alesan banget ya gw, hahaha.

Kenapa sih orang-orang pada ngehapus widget komentar bawaan blogger?

Kalau di pikir-pikir, setidaknya ada 4 alasan kenapa blogger di luar sana niat banget buat menghapus widget default komentar blogger.

  1. Fast Loading
  2. Males buat meladenin orang2 pada ngasih komentar
  3. Pasang widget komentar lainnya (Disqus atau Facebook)
  4. Ganti dengan Disqus + Onclick

Khusus untuk No. 4 itu, kalau tidak salah, widget komentar Disqus tidak langsung muncul. Harus di klik dulu (Onclick) baru muncul.

Kalau komentar blogger kan langsung muncul, apalagi komentarnya banyak, otomatis memperlambat loading blog (balik ke No. 1 diatas - Fast Loading).

Maka dari itu, jenis komentar Disqus + Onclick ini banyak banget di pakai blog-blog luar negeri. Ga percaya? Blogwalking coba! :)

Question & Answer


"Cara ini permanen?"

- Ya, permanen disini memang betul-betul dihilangkan sampai ke akar-akarnya.

"Setelah hapus widget komentar blogger, sudah pernah nyoba pasang widget komentar apa misalnya? Disqus atau Facebook?"

- Sampai saat ini, belum.

"Cara ini aman?"

- Nggak aman, template blogger harus di BACK UP dulu. Selamatin terlebih dahulu semua isi kode-kode template, seperti JavaScript, CSS dan lainnya.

Kalau misalkan caranya gagal, atau menyesal sudah menghilangkan widget komentar bawaan blogger, kan ada File backup-nya :)

Cara Menghapus Widget Komentar Blogger secara Permanen


Gunakan CTRL + F dan jangan lupa lihat gambar!

1. Login Blogger
2. Template > Edit HTML

Hapus semua kode dibawah ini:

<div class='mobile-index-comment'>
<b:include cond='data:blog.pageType != &quot;static_page&quot; and data:post.allowComments and data:post.numComments != 0' data='post' name='comment_count_picker'/>
</div>

Dan kode ini:

<span class='post-comment-link'></span>

Dan kode ini:

<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>

Lalu, kode yang perlu Anda hapus adalah kode-kode yang saya BLOK tulisannya pada gambar di bawah ini:

Cara Menghapus Widget Komentar Blogger secara Permanen

Lalu, hapus kode ini:

Cara Menghapus Widget Komentar Blogger secara Permanen

Lalu, hapus kode ini:

Cara Menghapus Widget Komentar Blogger secara Permanen

Lalu, hapus kode ini:

Cara Menghapus Widget Komentar Blogger secara Permanen

Lalu, hapus kode ini:

Cara Menghapus Widget Komentar Blogger secara Permanen

Ok selesai.

Apabila menemukan kode panjang lalu bingung, ingat saja:

<b:if> matinya di </b:if>
<span> matinya di </span>
<div> matinya di </div>

Note: Jangan lupa, setiap kode kadang terbungkus oleh <div>. Jadi, harus berhati-hati lagi biar tidak error ketika menghapus kode-kodenya.

Masih di dalam template blogger, cari kode "comment" di template blog.

Caranya, CTRL + F dan cari kode "comment" tanpa tanda petik. Biasanya Anda akan menemukan kode-kode "comment" di bagian CSS Style yang mengatur tata letak widget comment.

Contoh kode yang saya maksud adalah #comment, #comment_delete, #comment_header, #comment-admin, #comment h3, #comment .avatar-image-container, .comment_name a, dan masih banyak lagi.

Hapus semua kode yang bernama "comment" di dalam template blogger karena memang tidak kita gunakan lagi.

Singkatnya, untuk apa menggunakan CSS Style komentar bawaan blogger, sedangkan widget-nya saja sudah kita hapus. Tul, kan?

Sampai disini sudah selesai. Jangan lupa baca Q&A diatas! Hati-hati... Melakukan backup terlebih dahulu adalah suatu KEHARUSAN.

Kalau mau cara aman, mending hapus centang OK pada layout blog di bagian Blog (Posting). Itu cuma menyembunyikan widget komentar bawaan blogger. Good luck.
Dokumentasi INFINITE Responsive Blogger Template

Judulnya adalah dokumentasi untuk template blogger Infinite. Si "cakep" saat ini menggunakan Infinite karena template kemarin mengalami Crash.

Crash karena ngedit sana-sini, sinyal Internet mendadak putus (terjadi di saat gempa Jakarta kemarin siang), sering pindah laman (layout - template), terjadilah bentrokan antar JavaScript.

Belum lagi punya beban pikiran, bawaannya emosi terus. Wah, gawat banget hari kemarin.

Customize Theme

Posting dari Customize Theme ini sengaja saya buat agar tidak kembali lagi ke halaman Documentation Infinite.

Sekaligus mengamankan informasi-informasi penting apabila suatu waktu ada permasalahan dengan blog Infinite dikemudian hari, syukur-syukur punya dokumentasi ini ^^

Dokumentasi INFINITE Responsive Blogger Template

Dokumentasi INFINITE Responsive Blogger Template


#1. Widget Komentar Disqus

Ganti username dibawah ini:

<script type='text/javascript'>
var disqus_shortname = &quot;infinite-1&quot;;
!function(){var e=document.createElement(&quot;script&quot;);e.async=!0,e.type=&quot;text/javascript&quot;,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/count.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();
</script>

#2. Contact Form:

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

Ganti kode 3263220808940184577 dan URL blog diatas dengan kepemilikan pribadi.

#3. Recent Post with Thumbnail

Nah ini penting banget, apalagi bisa dipasangkan berdasarkan label atau kategori.

<style scoped='' type='text/css'>
ul.recent_posts_arlina li{display:inline-block;position:relative;width:100%;margin:0;padding:8px 0;transition:all .3s linear;}
ul.recent_posts_arlina li:last-child {border:0;}
.recent_posts_arlina .wrapinfo{margin:0 10px 0 0;overflow:hidden;z-index:2;display:block;position:relative;border-radius:0;width:100px;height:auto;float:left}
ul.recent_posts_arlina li img.recent_thumb{width:100%;height:auto}
.recent_posts_arlina {float:left;width:100%;margin:10px 10px 5px 0px;padding:0;font-size:.9rem;}
ul.recent_posts_arlina li a{color:#202020;font-size:14px;font-weight:400;line-height:normal}
ul.recent_posts_arlina li a:hover{color:#ec2028}
.recent_posts_arlina i{font-style:normal;color:#999;font-size:13px}
</style>
<script style='text/javascript' src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/recentpostarlina.js'></script>
<script style='text/javascript'>
var numposts=4,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!1,numchars=62;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>

#4. Responsive Video

Kodenya dibawah ini:

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/xwKif_4iOFk">
</div>
</div>
</div>

#5. Drop Caps

Huruf awal yang berukuran besar, dikenal "First Letter".

<span class="first-letter">Your First Letter here</span>

#6. Tombol: Demo & Download Button

<div style="text-align: center;">
<ul class="ripplelink button">
<li><a class="demo" href="https://tipsseokiller.blogspot.com/" target="_blank">DEMO</a></li>
<li><a class="download" href="https://tipsseokiller.blogspot.com/" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>

Contohnya, gan?



#7. Bagi Konten dalam Postingan Blog

<div class="bagidua">
--- TAMBAHKAN KONTEN DISINI ---
</div>

Contohnya:

Lorem ipsum dolor sit amet, consectetur adispiscing elit. Nullam ut enim, hendrerit nunc vel, fringgila augue. Sed sed erra tellus.

Atau bisa juga:

<div class="bagitiga">
--- TAMBAHKAN KONTEN DISINI ---
</div>

Contoohnya:

Lorem ipsum dolor sit amet, consectetur adispiscing elit. Nullam ut enim, hendrerit nunc vel, fringgila augue. Sed sed erra tellus. Lorem ipsum dolor sit amet, consectetur adispiscing elit.

Atau bisa juga:

<div class="bagiempat">
--- TAMBAHKAN KONTEN DISINI ---
</div>

Contohnya:

Lorem ipsum dolor sit amet, consectetur adispiscing elit. Nullam ut enim, hendrerit nunc vel, fringgila augue. Sed sed erra tellus. Lorem ipsum dolor sit amet, consectetur adispiscing elit. Lorem ipsum dolor sit amet, consectetur adispiscing elit. Nullam ut enim, hendrerit nunc vel, fringgila augue. Sed sed erra tellus. Lorem ipsum dolor sit amet, consectetur adispiscing elit.

#8. Tabel 3 di Dalam Postingan Blog

<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr>
   <th>Table Header 1</th>
   <th>Table Header 2</th>
   <th>Table Header 3</th>
</tr>
<tr>
   <td>Division 1</td>
   <td>Division 2</td>
   <td>Division 3</td>
</tr>
<tr>
   <td>Division 1</td>
   <td>Division 2</td>
   <td>Division 3</td>
</tr>
<tr>
   <td>Division 1</td>
   <td>Division 2</td>
   <td>Division 3</td>
</tr>
</tbody>
</table>

Contohnya seperti dibawah ini:

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

#9. Fungsi Load More...

var infinite_scroll=new InfiniteScroll({type:2,target: bla bla bla bla....

Lihat angka 2 pada kode di akhir. Singkatnya seperti ini:

Opsi 0 berarti pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya. Opsi 1 berarti pengguna hanya perlu menggulung peramban sampai pada batas akhir halaman untuk memuat posting-posting sebelumnya. Opsi 2 berarti pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya, setelah itu pengguna hanya perlu menggulung peramban sampai pada batas akhir halaman untuk memuat posting-posting sebelumnya.

Itulah postingan tentang dokumentasi dari file INFINITE premium blogger template yang sengaja saya buat untuk keperluan pribadi.

Note: Mau nyoba2 pasang di template sendiri? Maap, tidak work. Beda isi soalnya :)
4 Cara Merapikan Layout Blog yang Berantakan

Salah satu penyebab mengapa tata letak layout blog menjadi berantakan atau tidak rapi dikarenakan adanya aktifitas validasi HTML5 di dalam template blogger.

Selebihnya saya kurang tahu ya.

Yang pasti, itu memang ada kesalahan di dalam template blogger sehingga terjadinya error.

Contoh layout blog yang berantakan seperti adanya bullets, - atau titik-titik hitam di layout blog, widget yang saling menghalangi (tertimpa), widget yang tidak pada tempat semestinya dan semua error di layout blog lainnya.

Yang saya tahu, penyebab titik-titik hitam bulat (Bullets) di layout blog itu karena validasi HTML5 dibagian Menu Horizontal pada kode "Li" dan "uL" (Dropdown, Naik Turun).

Bingung? Lihat saja gambar dibawah ini. Nah... begitu tuh!

4 Cara Merapikan Layout Blog yang Berantakan

Sebenarnya layout blog yang acak-acakan seperti pada gambar diatas tidak mempengaruhi kualitas SEO. Masalahnya itu hanya kurang enak dipandang.

Kalau soal pemandangan di Homepage, gimana? Nggak ada yang salah kok, tidak ngaruh sama sekali. Tampilan blog tetap seperti sediakala, masalahnya cuma error di tata letak blogger blogspot.

Apalagi kalau mau mengedit, mengubah atau menyeret widget kesana-kemari, tentunya itu sulit.

4 Cara Merapikan Layout Blog yang Berantakan


"Kenapa sih caranya ada begitu banyak?" Diberbagai template blog, umumnya kode-kode yang terpasang itu berbeda-beda.

Ya meski pun template-nya bergaya simple, bukan berarti isi kodenya sama dengan template bergaya simple lainnya. Begitu juga kasusnya dengan template blogger bergaya berita atau majalah online.

#1. Cara Mengatur Layout Blog yang Berantakan

1. Template > Cari kode ]]></b:skin>
2. Copy kode dibawah ini:

body#layout ul {
   display: none;
}

Atau:

#layout ul {
   display: none;
}

3. Paste (Tempel) diatas kode ]]></b:skin>
4. Simpan template

Apabila tidak menemukan kode yang saya maksudkan diatas (]]></b:skin>), coba deh cari kode </b:skin> saja tanpa ]]>.

#2. Mengatasi dan Memperbaiki Widget Blog yang Berjejer ke Bawah

Kalau situasi dan kondisinya widget blog di tata letak saling berjejer ke bawah, maka caranya ialah:

1. Cari kode */]]></b:skin>
2. Copy kode dibawah ini:

#header-wrapper, #outer-wrapper, #footer-wrapper {width:970px}
#header-left {width:200px;float:left}
#header-right {width:730px;float:right}
#main-wrapper {width:650px;float:left}
#sidebar-wrapper {width:300px;float:right}
.footer {width:315px;float:left}

3. Paste (tempel) diatas kode */]]></b:skin>

Apabila tidak menemukan kode yang saya maksudkan diatas (]]></b:skin>), coba deh cari kode </b:skin> saja tanpa ]]>.

#3. Cara Mengatasi Layout Blog yang Berantakan

Kalau cara pertama diatas tidak mau, coba gunakan kode dibawah ini:

body#layout ul{list-style-type:none;list-style:none}
body#layout ul li{list-style-type:none;list-style:none}
body#layout #outer-wrapper{overflow:visible;width:1000px}
body#layout #header{float:left;width:240px} body#layout #header2{float:right;width:240px} body#layout .add_widget{width:240px} body#layout div.widget{width:240px}
body#layout #sidebar-wrapper{overflow:visible;width:240px}
body#layout #lsidebar-wrapper{overflow:visible;float:left;width:240px;margin-right:50px;} body#layout #main-wrapper{overflow:visible;float:left;width:240px}
body#layout #rsidebar-wrapper{overflow:visible;float:right;width:240px}
body#layout #myGallery{display:none} body#layout .featuredposts{display:none}
body#layout .fp-slider{display:none} body#layout #navcontainer{display:none}
body#layout .menu-secondary-wrap{display:none}
body#layout .menu-secondary-container{display:none}
body#layout #skiplinks{display:none}
body#layout .feedtwitter{display:none}
body#layout div.section{font-family:sans-serif;margin:0 auto 2px;padding:0 0 10px 0;position:relative;overflow:visible}
body#layout .section-columns{margin:0} .section{width:100%}

Atau gunakan kode dibawah ini:

body#layout .outer-wrapper {width:970px}
body#layout .content-wrapper {width:970px}
body#layout #header {width:300px;float:left;margin-top:30px}
body#layout #header2 {width:500px;float:right}
body#layout .main-wrapper {width:550px}
body#layout .sidebar-wrapper,.sidebar1-wrapper {width:300px;float:right}
body#layout #footer {width:970px}
.footer {width:200px;float:left}
body#layout ul {display: none}

Kedua kode diatas diletakkan TEPAT dibawah kode <b:skin><![CDATA[.

Apabila tidak menemukan kode yang saya maksudkan diatas (]]></b:skin>), coba deh cari kode </b:skin> saja tanpa ]]> atau <![CDATA[ tanpa <b:skin>.

#4. Cara Memperbaiki Widget Blog di Layout Blog yang Saling Bertumpuk (Menindih)

Kalau cara ini agak sedikit rumit ya, Guys. Singkatnya, kita harus memperbaikinya langsung di dalam template blogger.

Setiap element di dalam blog, harus kita pasangkan kode "Class Clear". Contohnya seperti ini:

bla...bla...bla...
<div class='clear'/>
<nav id='menu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Tentang Saya</a></li>
<li><a href='#'>Dislcaimer</a></li>
<li><a href='#'>Layanan Kontak</a></li>
<li><a href='#'>Sitemap</a></li>
</ul>
</nav>
<div class='clear'/>
<div class='content-wrapper'>
bla...bla...bla...
<div class='clear'/>
Bagian Sidebar disini...
<div class='clear'/>

Dan seterusnya sampai dikira layout blog tidak rusak lagi. Dicoba saja pelan-pelan ya :)

Nggak bisa juga? Hmm... keterlaluan nih! Coba baca artikel ini, Cara Menghilangkan Titik Hitam (Bullets) di Layout Blog.

Kalau tetep nggak bisa juga, nggak ada cara lain selain dengan cara manual. Masuk ke layout blog, INSPECT HALAMAN. Sumpah, ini lumayan ribet. Haha...

Apabila ke semua cara diatas tidak berhasil dilakukan, ada 2 hal yang bisa Anda pilih sebagai jalan keluar. Membiarkannya seperti itu; atau mengganti dengan template blogger lainnya.

Singkatnya seperti ini, layout blog yang berantakan seperti pada gambar itu tidak menjadi masalah bagi kita maupun SEO. Sing penting, YAKIN...!!!*
Vainglory atau Mobile Legends, Manakah yang Terbaik?

Saat ini, game bertemakan MOBA sedang banyak diminati; dimulai dari anak-anak, orang dewasa, ibu-ibu hingga orang tua sekali pun.

Saat ini pula, setidaknya ada 2 game MOBA yang sedang hangat-hangatnya ialah Vainglory dan Mobile Legends.

Memang sih ya, Vainglory sudah dianggap dan menjadi game MOBA terlama dan terpopuler sejak dulu, kini Mobile Legends sedang naik kepopulerannya.

Sebagai seorang player dari kedua game, Vainglory dan Mobile Legends, saya akan membahas manakah yang terbaik antara Vainglory atau Mobile Legends.

Vainglory atau Mobile Legends, Manakah yang Terbaik?


#1. Ukuran Game

Melalui penilaian ukuran Game, Mobile Legends menang telak dibandingkan Vainglory.

MLBB berukuran sangat kecil untuk ukuran sebuah MOBA, bahkan bisa dimainkan di Smartphone yang memiliki Spesifikasi rendah.

Sedangkan Vainglory, membutuhkan lebih dari 500MB untuk di unduh, belum lagi soal pemakaian RAM yang cukup tinggi.

Bisa dibayangkan ya, Guys... Orang2 juga bakal memilih download MLBB ketimbang Vainglory mengingat persoalan Size Game dan soal penggunaan RAM.

Tapi ya, di sisi lainnya... Size Game Vainglory yang besar bukan tanpa alasan. VG memiliki grafik yang luar biasa mulus dibandingkan Mobile Legends. Sangat memanjakan mata.

Vainglory atau Mobile Legends, Manakah yang Terbaik?

#2. Keseimbangan dalam Gameplay

Sebagai seorang player dari kedua game ini, saya akui di game Mobile Legends, terjadi ketidakseimbangan antar player.

Di MLBB, ada yang namanya Emblem dan Skin. Emblem bisa di upgrade sehingga kekuatannya jauh lebih mematikan, sedangkan Skin bisa meningkatkan Physical Attack, HP atau pun Magic Power.

Orang yang punya uang lebih tentu bisa melakukan Emblem dan membeli Skin dengan uang aslinya. Tentunya, ini nggak seimbang.

Berbeda dengan Vainglory yang sangat mengedepankan keseimbangan di dalam game.

Segala sesuatu hal yang berbau dengan uang tidak mengubah atau meningkatkan status hero. Sistem pembayarannya untuk membeli hero baru, mengubah tampilan hero atau efek tampilan Skill.

Makanya, nggak heran kalau MLBB seringkali di olok-olok dengan kalimat, "Moba beli skin kok nambah stats?" :)

#3. Classic Map (Full Hero)

Di game MOBA Vainglory, setiap pertandingan akan di isi oleh 6 orang, dimana setiap tim akan berisikan 3 anggota.

Singkatnya, 3 vs 3. Terdiri dari 2 Lane, Top Lane (Carry) dan Jungle (Hutan). Map-nya juga tidak terlalu luas.

Di dalam game Mobile Legends, pertandingan akan di isi oleh 10 orang, dimana setiap tim di isi oleh 5 anggota.

Singkatnya, 5 vs 5. Terdiri dari 3 Lane; Top Lane, Middle Lane dan Bottom Lane. Map di MLBB dianggap cukup luas.

Dari sini, permainan 5 vs 5 tentu jauh lebih semarak dan seru dibandingkan 3 vs 3. Apalagi ada 3 jalur utama yang bisa kita pilih dan digunakan untuk menyerang musuh.

Nb: Saya tidak tahu apakah Vainglory telah memberlakukan sistem 5vs5 karena desas-desusnya kemarin seperti itu... ketika artikel ini ditulis, HP saya rusak dibagian hardware (perangkat keras).

#4. Kontrol Permainan (Kenyamanan)

Sebenarnya saya lebih suka Controling yang ada di Vainglory karena itu sebenar-benarnya MOBA.

Namun, satu hal yang harus di ingat, kedua permainan MOBA ini dimainkan oleh banyak orang di berbagai belahan dunia. Tentunya, mereka lebih nyaman dengan Virtual Pad yang disediakan oleh MLBB.

Lagi pula, dengan Analog yang tersemat di Mobile Legends, kita bisa meminimalisir pergerakan hero kita. Apalagi yang jari-jarinya kebesaran, tentu Analog lebih diandalkan hehehe...

Nggak seperti Vainglory yang menggunakan fitur Touch Control, dimana ketika salah men-Tap malah larinya ke arah yang tidak kita inginkan.

#5. Reward (Penghargaan Individu & Tim)

Penghargaan itu penting guna meningkatkan semangat para pemain.

Di game Vainglory, Reward tidak begitu banyak. Apalagi sulit untuk mendapatkannya. Kalau di MLBB, sedikit-sedikit langsung Reward.

Memang sih tidak terlalu signifikan, tapi ingat... MLBB disini menang banyak ketimbang VG.

#6. Chat in Game

Agak aneh ya rasanya ketika Game sekelas Vainglory tidak menyediakan fitur chat. Sedangkan di MLBB chat tim bisa dilakukan.

Kalau persoalan Soal Ranked, Vainglory nggak bisa diandalkan kalau kita Solo Ranked. Kalau di Mobile Legends, sangat bisa diandalkan meski pun situasinya Solo Ranked, toh bisa Chat sesama anggota.

Kalau mau nge-Push Rank, VG tentu saja sulit, kecuali mabar (main bareng). Di MLBB, mau Solo atau mabar, tetep asyik.

#7. Status atau Profil yang Sangat Jelas

Salah satu kesalahan game Vainglory menurut saya ialah tidak menyediakan fitur profil para pemain sehingga kita tidak tahu apa peran kita yang sebenarnya, serta apa peran teman kita.

Kalau di MLBB, semuanya akan terlihat jelas seperti Win Rate, KDA, Push, Durability, Team Fight dan lainnya.

#8. Sinyal di Game

Dalam hal kekuatan sinyal, saya akui kalau Mobile Legends menang telak.

Mereka punya fitur penyeimbang jaringan sehingga mengurangi terjadi Lag di tengah-tengah pertandingan.

Berbeda halnya dengan Vainglory yang membutuhkan kekuatan jaringan internet yang amat kuat agar permainan tidak lag. Mau main Vainglory, kudu pake WIFI.ID...!!

#9. Razer Phone

Satu hal yang paling kental dari Vainglory ialah mereka menyuguhkan sebuah game dengan frame rate sebesar 120fps.

Tentunya, itu suatu hal yang sangat mengejutkan.

Kebanyakan game saat ini juga cenderung mentok pada angka 60fps. Itu pun belum pasti karena suatu waktu bisa terjadi DROP secara drastis.

VG sangat maksimalkan pengalaman pemainnya dalam memainkan MOBA mereka. Para player Vainglory pun diklaim bakal mendapatkan pengalaman yang maksimal banget.

KESIMPULAN - MLBB vs VG?

Mobile Legends Menang!

Satu hal yang perlu ditekankan disini, berdasarkan pengalaman juga, para player VG juga menang telak dari sisi Skill ketimbang MLBB yang menang secara unduhan (download).

Ingat, Guys... para player Vainglory itu lebih jago.

Ketika para player Vainglory yang sudah PRO main game Mobile Legends, mereka akan sangat mudah mem-babat habis para PRO di Mobile Legends.

Berbeda ceritanya kalau para PRO dari MLBB main di game sekelas Vainglory, pasti langsung KEOK di tempat.

Moba kok analog? Moba kok beli item di jalan? LOL hahhaha. Bener sih... Pendapat kamu, gemanah?