Cara Buat Website di Google Sites (Gratis) - Google menyediakan platform khusus untuk membuat situs web secara gratis yaitu google sites. Google sites dirancang lebih mudah dalam penggunaan nya dan menjadikan g-drive sebagai web hosting / file hosting situs website yang di buat dari google sites.

Pengalaman yang baru akan anda rasakan ketika membuat situs web (website) di google sites karena google sites akan membuat anda merasakan sensasi punya hosting sendiri (seperti membuat website dengan self hosting).

Dan, tutorial ini akan membantu anda dalam membuat situs web gratis di google sites secara detail/komplit, meskipun sebenarnya saya meyakini siapa saja bisa membuat website sendiri dengan mudah menggunakan platform google sites ini. Mari kita simak panduan cara buat website gratis dari google sites berikut ini.

Cara Membuat Website Di Google Sites

  1. Pertama kunjungi link https://sites.google.com/, kemudian
  2. Login / masuk menggunakan akun google (G-mail)
  3. Klick "Buat / Create" dan pilih "In new sites" untuk membuat situs web
Lihat contoh gambar berikut ini.

Langkah Selanjutnya Membuat Website Dari Google Sites

Setelah melewati langkah diatas, kamu akan diarahkan ke dashboard google sites (laman untuk membuat situs), ikuti panduan lengkap nya dibawah ini.
  1. Buat "Nama Situs Web" dan tambahkan logo jika diperlukan
  2. Ganti gambar spanduk header situs atau lewati langkah ini (spanduk / barner header dapat di setting belakangan).
Lihat contoh berikut ini
Cara Membuat Website di Google Sites - gambar 2
Cara Membuat Website di Google Sites - gambar 2
Kemudian klik "Publikasikan" pada menu bar atas dashboard google sites dan buat "url situs (alamat situs)" tanpa spasi dan menggunakan huruf kecil semua seperti terlihat pada gambar berikut.
Cara Membuat Website di Google Sites - gambar 2
Cara Membuat Website di Google Sites - gambar 2

Keterangan:
  • Jika url situs tersedia maka akan terlihat tanda "Benar / centang" di samping nya, itu menunjukkan bahwa url (alamat situs) dapat digunakan.
  • Setelan Penelusuran - Jangan di centang atau biarkan kotak centang kosong agar situs dapat di telusuri oleh mesin penlusur (Bisa dilihat / ditemukan dilaman pencarian google)
  • Selanjut nya klik "Publikasikan" untuk membuat situs.
Pada tahap ini situs web sudah selesai di buat namun masih berbentuk laman kosong dan hanya terlihat logo, nama situs dan barner situs saja. Agar situs web benar-benar rampung saya telah menyediakan tutorial buat website gratis dari google sites tahap selanjut-nya yakni;
  1. Membuat Menu Navigasi
  2. Membuat Konten situs "text ,video, slide, document dan map"
  3. Membuat Footer situs web

Kelebihan Membuat Website via Google Sites

Ketika hendak membuat situs web sudah seharus nya kita mengenal keutamaan atau kelebihan palfom / hosting yang akan kita gunakan seperti Google Sites misalnya, kelebihan membuat website dari google sites adalah; platform google sites merupakan produk google sehingga kita tidak perlu khawatir mengenai masalah peng-index-an situs yang dibuat dari google sites, seperti g-plus dan youtube contohnya. post yang diterbitkan pada sosial media g-plus dan youtube lebih cepat ter index oleh penelusur google dibandingkan platform lainnya, selain itu masih ada beberapa kelebihan lagi dari google sites.
  1. Gratis (membuat website di google sites tidak dipungut biaya apapun alias free)
  2. Mudah digunakan (siapa saja bisa membuat situs web dari google sites)
  3. Tampilan situs / Theme google sites sangat propesional, modern dan elegant
  4. Support add file (gambar, video, slide, upload document) dari banyak jenis platform google "G-drive, youtube, google doc, google photo dll".
Nah, demikian penjelasan saya dan tutorial cara buat website gratis di google sites, ikuti terus perkembangan situs kami dengan cara mem follow situs melalui e-mail anda dan dapatkan pemberitahuan mengenai cara-cara membuat website geratis dari google sites dan blogger. Semoga ini bermanfaat dan menambah pengalaman serta pengalaman kita tentang situs web / website dan cara membuat nya, Good luck for you.

Cara Memasang Lazy Load Adsense - Berdasarkan analisa saya semakin cepat loading situs web maka semakin banyak variasi iklan adsense yang datang ke situs tersebut seperti iklan video, iklan style animasi dan lainnya tentu saja itu merupakan hal baik, akan tetapi perenderan atau loading halaman web akan semakin bertambah berat.

Berbagai cara sudah dilakukan untuk dapat memuat ikan adsense secara dinamis, mulai dari mengurangi bundle adsense, jumlah iklan hingga menggunakan loader js ads. Tapi saya ingin sesuatu yang lebih cepat lagi dari itu, dan saya fikir lazyload adsense merupakan satu-satunya metode yang tepat saat ini untuk mempertahankan visitor.
Karena biasanya situs yang lambat akan menyebabkan visitor hanya membuka satu halaman saja dan kemudian peninggalkan-nya. Saya fikir teman-teman blogger juga ingin menggunakan lazyload adsense ini agar bisa merasakan kecepatan asli perenderan (pemutan) situs yang sudah dioptimalkan selama ini.

Jadi sebelum menggunakan/memasang lazy load adsense ini sangat disarankan terlebih dahulu untuk mengecek atau menguji kecepatan loading situs melalui PageSpeed Insights, Gtmetrix dan Pingdom Tool supaya kamu bisa mengetahui dengan jelas seberapa besar pengaruh lazy load adsense dalam meningkatkan kecepatan loading situs blog anda.

Script Lazy load Adsense

[code type="JavaScript"]<script>
var lazyloadads=false;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&false===lazyloadads||0!=document.body.scrollTop&&false===lazyloadads)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyloadads=true)},true);
</script>[/code]
1. Pertama tambahkan script lazy load adsense diatas tepat berada diatas kode penutup </body>, selanjutnya agar script bekerja secara maksimal ada beberapa aturan yang harus diikuti yaitu;

Hindari pemasangan iklan adsense melalui widget adsense, situs blogger umumnya memiliki fitur widget adsense dan fitur "tampilkan iklan dibawah post". Setelah menggunakan lazy load adsense sebaiknya pemasanga iklan seperti tidak lagi dilakukan. (pasang iklan dengan script atau kode iklan yang diambil dari dashboard adsense).

2. Buang bundle google adsense disetiap unit iklan yang akan dipasang ke situs blog, lihat contoh bundle adsense dibawah ini;
[code type="JavaScript"]<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>[/code]
Jadi kode iklan yang akan dipasangkan tanpa bundle akan terlihat seperti dibawah ini;
[code type="JavaScript"]<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-42094000000"
     data-ad-slot="987277777"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>[/code]
Lazyload adsense diatas sudah mewakili semua bundle iklan, jika pada suatu halaman situs terdapat bundle adsense selain yang di dalam script lazy load maka script lazy load tidak akan bekerja dengan maksimal, meskipun iklan tetap akan muncul.

Apakah Lazy Loading Sesuai Kebijakan Adsense?

Teman-teman blogger yang masih baru bermitra dengan google adsense mungkin sedikit ragu untuk menggunakan lazyload ads karena mungkin khawatir akan menyalahi aturan (kebijakan publisher adsense). Itu hal yang wajar dan artinya kamu adalah mitra yang baik, jadi sekarang mari kita simak sedikit referensi tentang lazyload adsense dan pusat kebijakan publisher.

Google sangat terbuka dengan lazyload adsense, hal itu disampaikan oleh pihak google adsense melalui artikel bantuan google yang berjudul "Praktik terbaik keterlihatan". Pada halaman tersebut google juga menyarankan untuk menggunakan smart loading, juga dikenal dengan sebutan lazy loading. Seperti, menayangkan iklan di bagian bawah halaman hanya saat pengguna men-scroll ke bagian bawah halaman.

Itu manandakan google tidak mempermasalahkan soal penggunaan lazy laod ads untuk pemuatan iklan mereka. Namun menurut google adsense praktik terbaik penggunaan lazyload adsense dalam memaksimalkan keterlihatan iklan adalah dengan menggunakan tag google publisher (GPT).

Konsekuensi

Selalu ada kemungkinan resiko, menggunakan lazyload adsense tak selalu berjalan mulus dan meningkatkan penghasilan iklan. Dalam kondisi tertentu lazyload adsense justru memberikan pengaruh yang kurang baik untuk keterlihatan iklan.
  • Jika digunakan dengan benar, penundaan lazyload dapat meningkatkan keseluruhan persentase keterlihatan. Akan tetapi jika pengguna tidak menggulir ke bawah misalnya, maka slot iklan paro bawah tidak akan dimuat sehingga menyebabkan permintaan iklan yang masuk akan lebih sedikit.
  • Selanjutnya, jika ukuran iklan terlalu besar atau pemuatannya lambat, pengguna tidak akan sempat melihat iklan saat menggulir ke bawah dan iklan mulai dimuat.
Demikian tentang lazyload adsense, tidak ada yang selalu sempurna keculai allah, kita hanya bisa berusaha memberikan yang terbaik untuk pengguna dan sisanya serahkan kepada allah subhanahu wa ta'ala. Semoga bermanfaat dan sampai jumpa kembali di tutorial selanjutnya, happy blogging.

Menginisialisasi Facebook SDK Dengan APP ID - Apa yang dimaksud dengan menginisialisasi Facebook SDK dan Facebook App id? yang maksud dengan menginisialisasi facebook SDK adalah memberikan identitas khusus pada plugin (Facebook SDK), Sedangkan Facebook App id adalah kode unik yang dibuat secara otomatis ketika mendaftarkan akun facebook ke akun pengembang, kode facebook app id umumnya digunakan untuk melakukan panggilan ke API (Application Programming Interface) facebook.

Secara khusus fungsi facebook app id itu sendiri adalah untuk memuat dan menginisialisasi SDK (Software Development Kit) yang disediakan oleh facebook seperti tombol suka, bagikan, pemutar video, form komentar facebook dan plugin sosial lainnya di situs web.

Sebagai contoh pada artikel yang lalu saya menjelaskan tentang cara menginstall plugin komentar facebook di template blogger dengan menggunakan SDK Javascript, di versi SDK yang sama, semua situs web menggunakan devkit (SDK Javascript) yang sama juga di plugin komentar facebook yang mereka sematkan di aplikasi situs web mereka, yang membedakannya hanya kode unik yang disebut sebagai facebook app id.

Kode unik inilah yang digunakan setiap web developers untuk mengonfigurasi aplikasi mereka sehingga plugin atau SDKs mereka memiliki identitas sendiri dan dapat di moderasi sepenuhnya.

Dimana Kode Facebook APP ID Saya?

Untuk membuat atau mendapatkan kode unik facebook app id yang harus dilakukan adalah mengonversi akun facebook anda ke akun pengembang dan mendaftarkan aplikasi anda melalui dashboard aplikasi developers.facebook.com, simak cara membuat/mendapatkan kode facebook app_id di bawah ini;
Lihat contoh pada gambar di bawah ini;
Setelah mengklik tombol Buat ID Aplikasi kamu akan diarahkan ke dahsboard aplikasi anda, di bagian "bar" atas akan tertera id aplikasi (Facebook App Id) anda, jika tidak terlihat silahkan klik tab pengaturan dasar untuk mengambil facebook app_id anda, dan jangan lupa sekalian lengkapi data aplikasi anda pada formulir pengaturan dasar.
ID Aplikasi (Facebook App Id)
ID Aplikasi (Facebook App Id)
Setelah id aplikas (facebook app id) berhasil di buat maka kamu sudah bisa menggunakan berbagai jenis plugin facebook seperti tombol suka, bagikan, form komentar dan banyak lagi, silahkan telusuri plugin apa saja yang ingin anda adopsi melalui kotak pencarian di dashboard aplikasi dan semua plugin yang ingin anda buat/gunakan secara otomatis akan dikaitkan dengan id aplikasi anda.

Jadikan ID Aplikasi Facebook Sebagai Entitas Pengelola

Apa yang dimaksud dengan entitas pengelola? Jika situs web menggunakan plugin komentar facebook maka dibutuhkan akun khusus yang ditugaskan untuk untuk memoderasi komentar-komentar yang masuk ke situs web sama seperti author web pada umumnya, hanya saja tugasnya hanya di bagian SDK saja seperti memoderasi komentar dan hal-hal terkait dengan facebook SDK, itulah yang dimksun dengan entitas pengelola.

Dan untuk menambahkan entitas pengelola atau mengaitkan akun pengelola ke facebook SDK    silahkan tambahkan meta tag berikut ini di dalam tag head situs web.
[code type="HTML"]<meta property='fb:app_id' content='{YOUR_APP_ID}'/>
<meta property='fb:admins' content='{YOUR_FACEBOOK_ID}'/>[/code]
Contoh penerapan yang sebenarnya dengan kode/ id aplikasi dan id facebook admin;
[code type="HTML"]<meta property='fb:app_id' content='2352910588322869'/>
<meta content='100002549773049' property='fb:admins'/>[/code]
Saya fikir sampai disini saja penjelasan saya tentang facebook app id dan cara membuat/mendapatkan id aplikasi, selebihnya silahkan pelajari selengkapnya di situs web pusat bantuan facebook saja karena artikel ini saya sajikan adalah sebagai pendukungan tuturial memasang plugin komentar facebook di template blogger yang telah saya publikasikan beberapa waktu yang lalu, semoga bermanfaat dan sampai jumpa kembali.

Nonaktifkan Affiliate links Disqus Untuk Menghindari Spam - Pada saat membuat akun disqus biasanya fitur affiliate links akan aktif dengan sendirinya, hal itu menyebabkan penulisan url di kolom komentar dan di dalam halaman post akan berubah menjadi link aktif atau berubah menjadi hyperlink. Jika pada halaman post terdapat banyak pengetikan url/link yang non-hyperlink misalnya domain.com maka setelah memasang komentar disqus link tersebut akan berubah menjadi hyperlink (link yang bisa di klik) jika fitur affiliate links disqus tidak di nonaktifkan.

Dan tentu saja itu akan memberikan pengaruh buruk terhadap situs itu sendiri bahkan berpotensi situs di anggap sebagai spam oleh bot jika terlalu banyak link aktif (hyperlink) yang tidak jelas arahnya kemana.

Untuk menonaktifkan semua link aktif tersebut, tidak perlu menghapus komentar disqus dari dalam template blog kamu, karena itu bukan kesalahan plugin disqus comment atau kesalahan pada saat penginstallan widget komentar disqus, melainkan kekeliruan kecil pada saat membuat akun disqus, lalu bagaimana cara menonaktifkan Affiliate links disqus? simak selengkapnya di bawah ini;

Jika widget komentar disqus merupakan hasil installan sendiri, silahkan login ke akun disqus anda dan klik Admin atau langsung saja menuju ke halaman pada langkah berikut jika sebelumnya akun disqus sudah login.
Selesai, sekarang semua link yang aktif setelah memasang widget komentar disqus akan kembali normal (tidak aktif), sedangkan hyperlink yang diseganja tetap akan aktif sebagaimana mestinya. untuk lebih jelasnya lihat contoh gambar di bawah ini untuk menonaktifkan link aktif yang di sebabkan oleh fitur Affiliate links disqus.
Selesai, sampai di situ website anda sudah aman dari potensi spam, hanya tinggal menunggu pemulihan saja karena jika Affiliate links sudah lama aktif di situs anda kemungkinan link-link tersebut sudah di crawl oleh bot atau perayap mesin telusur seperti google.

Apa dampak buruk Affiliate links bagi halaman situs?

Dampak buruk Affiliate links pada halaman situs yang paling nyata adalah link yang sebelumnya hanya url biasa (tidak aktif) berubah menjadi hyperlink yang bisa di klik (link aktif) karena fitur Affiliate links disqus akan memparse DOM (Document Object Model) situs web anda, jika di biarkan dan pada halaman situs terdapat ribuan link aktif yang mengarah keluar tentu saja situs berpotensi dianggap spam.

Selain itu url yang kita ketikkan mungkin tidak memiliki tujuan yang jelas seperti domain.com atau example.com jika "link contoh" seperti itu aktif tentu tidak jelas arahnya menuju kemana, kasus seperti itu akan menyebabkan penurunan rangking halaman di search engine secara drastis, bot akan mengganggap halaman situs tidak akurat karena mengarahkan user ke halaman/url yang tidak memiliki tujuan yang jelas.

Saya fikir sampai di situ saja penjelasan saya tentang cara menonaktifkan Affiliate links disqus, pada dasarnya disqus merupakan plugin yang ramah bahkan memungkinkan anda untuk meraih ke untungan dari plugin tersebut dengan meangtifkan iklan (fitur monetize) kesalahan terjadi karena mungkin kita belum mengetahui seluk beluk serta fungsi fitur-fitur plugin disqus.

Cara Menghapus Credit Link - Sebelum membahas tentang bagaimana cara menghapus credit link template blog, saya jelaskan dulu mengenai credit link agar tidak salah paham, credit link merupakan claim dari para desing template, biasanya credit link ditempatkan pada bagian footer template misalnya: Desing by, Theme by, Templateism Credit Link dll.

Selain untuk memberi claim terhadap template tersebut credit link juga di fungsikan untuk mempromosikan situs pembuat template tersebut. jika credit link di hapus dengan cara yang tidak tepat, maka situs anda akan otomatis di redirect atau di alihkan ke situs sang pembuat template.

Apasih kerugian (dampak buruk) memakai template yang memiliki credit link?

Dalam prinsip SEO (Search engine optimization) hanya sedikit kerugian jika anda memakai template yang memiliki credit yaitu pentransferan sedikit rank halaman kepada pemilik link credit. Sebagai manusia yang punya sopan santun sebenarnya tidak perlu menghapus atau menghilangkan credit link tersebut, Namun sebagai manusia propesional tetap ada alasan mengapa kita harus menghapus credit link dari situs blog/website kita.

Cara Menghapus Credit Link Template

#Cara_1: Menghapus credit link secara permanent, metode ini kamu harus mengerti jenis-jenis credit link karena setiap desinner template memiliki metode yang berbeda menempatkan/membuat credit link pada karya mereka. Tapi jangan khawatir karena pada dasar nya prinsip credit link itu sama, jika di istilahkan dengan kunci, maka kunci dan gembok nya diletakkan di dalam template tersebut.

Kunci "Original Script Credit Link" adalah sebagai berikut;
[code type="JavaScript"]<script type="text/javascript">
$(document).ready(function () { if ($("#credit,.credit").attr("href") != "https://www.kontenweb.com") {window.location.href = "https://www.kontenweb.com"; }});
</script>[/code]
Sedangkan "Gembok" Credit Link adalah sebagai berikut
[code type="HTML"]<div id='footer'>
Template by <a href='https://www.kontenweb.com' id='credit' title='K-Web Themes'>K-Web Themes</a>
</div>[/code]
Jadi untuk "Menghapus Credit Link" secara permanent, hapus terlebih dahulu "kunci" nya baru kemudian buang gemboknya atau rubah gembok nya nya menjadi link situs anda sendiri. maka situs anda tidak akan di redirect lagi oleh credit link tersebut.

Untuk menghindari kesalahan saat menghapus credit link, sebaiknya kenali jenis-jenis script credit link selain contoh credit link di atas yaitu credit link type alien (encode), saya sebut ini credit link ini sebagai credit link alien, karena kunci atau kode script credit link nya di samarkan misalnya menjadi seperti berikut ini:
[code type="JS"]var _0xbf5d=["\x68\x72\x65\x66","\x61\x74\x74\x72","\x23\x63\x72\x65\x64\x69\x74\x2C\x2E\x63\x72\x65\x64\x69\x74","\x68\x74\x74\x70\x3A\x2F\x2F\x74\x75\x6B\x61\x6E\x67\x6C\x69\x73\x74\x72\x69\x6B\x70\x75\x6C\x61\x75\x62\x61\x74\x61\x6D\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x72\x65\x61\x64\x79"];$(document)[_0xbf5d[5]](function(){if($(_0xbf5d[2])[_0xbf5d[1]](_0xbf5d[0])!= _0xbf5d[3]){window[_0xbf5d[4]][_0xbf5d[0]]= _0xbf5d[3]}});[/code]
Sedangkan untuk gembok credit link nya masih tetap sama seperti diatas. Itu sebabnya untuk menghapus credit link seperti ini maka kamu harus benar-benar paham fungsi masing-masing javascript yang ada didalam template, termasuk jenis-jenis scrpt credit link agar mudah menghapus nya dan tidak diredirect lagi.

#Cara_2: Menghilangkan Credit Link (Tidak Permanent)

Metode menghapus credit link berikut ini, hanya untuk melumpuhkan fungsi credit link itu saja, namun ia tetap ada di dalam template anda. Metode ini hanya di lakukan jika kamu tidak menemukan kunci "Credit Link" seperti contoh di Cara #1.

Tambahkan style='visibility:hidden' pada bagian kode gembok credit link, sehingga menjadi seperti berikut contoh ini.
[code type="HTML"]<div id='footer'>
Template by <a href='https://www.kontenweb.com' id='credit' style='visibility:hidden' title='K-Web Themes'>K-Web Themes</a>
</div>[/code]
Dengan demikian maka credit link tidak akan terlihat di template anda lagi, Credit link tersebut tersembunyi dan tidak berfungsi lagi. Anda juga bisa menambahkan style='display: none' untuk melumpuhkan total fungsi credit link tersebut sehingga gembok credit link menjadi seperti ini.
[code type="HTML"]<div id='footer' style='display: none'>
Template by <a href='https://www.kontenweb.com' id='credit' title='K-web Themes'>K-Web Themes</a>
</div>[/code]
Baiklah sampai disini saja penjelasan saya tentang cara menghapus credit link template yang di redirect ke situs pembuat templete nya. Jika kurang paham silahkan baca cara membuat credit link agar kamu tahu cara menghapusnya.

Cara Load CSS Eksternal Tanpa Menunda Rendering - Umumnya sebuah situs web / blog tidak terlepas dari stylesheet css external. Namun terkadang pada website blogger, penggunaan css external dapat menyebabkan render-blocking (penundaan pemuatan halaman) sebelum css external selesai dimuat sehingga loading situs web menjadi lambat.

Menghapus stylesheet css external tentunya bukan sebuah solusi yang benar karena situs web justru sangat membutuhkan css external untuk keindahan desain nya. Nah sekarang saya akan membagikan cara memasang stylesheet css external ke dalam html situs web tanpa menyebabkan pemblokiran render halaman terhadap situs tersebut.
Stylesheet css external yang paling sering digunakan adalah fonts googleapis untuk style teks dan font awesome untuk pemasangan icon-icon penting pada situs web. Default kode dari keduanya adalah sebagai berikut;
  • <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
  • <link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>
Agar kedua stylesheet css tersebut tetap dapat digunakan tanpa mengganggu render halaman situs web blogger, sebaiknya jangan menggunakan kode default seperti diatas. Sedikit modifikasi dengan bantuan javascript akan lebih baik untuk mengatasi render-blocking terhadap halaman paruh atas situs. Berikut trik me-load css external dengan javascript.
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("//your.url.stylesheet_here");
//]]>
</script>
Memanggil (load css external) dengan javascript diatas akan memisahkan file css dari sumber nya sehingga situs web akan terhindar dari render-blocking page dan loading situs menjadi lebih singkat atau cepat. Jika pada situs web blogger menggunakan dua (2) css external misalnya //fonts.googleapis.com dan //netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css maka tidak perlu memasang 2 javascript utuh, cukup tambahakan loadCSS("//your.css.stylesheet_here"); sehingga script akan terlihat seperti dibawah ini;
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/css?family=Oswald:400,600");
//]]>
</script>
Kelebihan LoadCSS.JS
  1. Support dibanyak browser seperti Google Chrome, Mozilla, IE, UC dan lain-lain
  2. Mengatasi blokir render halaman paruh atas, dan
  3. Mempercepat loading (pemuatan) website
Sebelumnya saya juga telah mempublikasikan teknik menghindari render-blocking yang disebabkan oleh javascript dan css eksternal dengan metode preload dan onload, namun metode proload css tersebut masih kurang optimal karena tidak support di browser mozilla dan script load css external ini jauh lebih baik untuk menggantikan-nya.

Penempatan (Pemasangan) Script Load CSS

Jika kode css external default biasanya terletak pada area (antara <head>...dan...</head>) maka load css dengan javascript diletakkan di area body (antara <body>...dan...</body>. Mungkin pada template situs anda sudah terdapat kumpulan javascript internal maka kamu bisa menggabungkan javascript load css tersebut dengan javascript internal yang sudah ada.

Buang kode pembungkus javascript yaitu "<script type='text/javascript'>" dan "</script>" seperti yang telah saya terapkan pada situs ini. Silahkan lihat contoh gambar dibawah ini;
Loader CSS & JS
Cara memasang Loader CSS dan Js
Jika telah memasang script loadCss.js maka kode default stylesheet css external tidak dibutuhkan lagi, silahkan hapus kode default stylesheet css dari html situs web anda kemudian pertinjau situs dan uji dengan tool google page speed insights.

Saya fikir sekarang saya tidak dibutuhkan lagi disini karena solusi mengatasi render-blocking css external sudah anda temukan dan sudah waktu nya untuk memperbaiki performa situs web anda menjadi lebih baik dengan code loadcss.js diatas. Jangan lupa follow situs ini untuk mendapatkan update trik-trik blogging, javascript dan css menarik lain-nya.

Semoga ini dapat bermanfaat dan membantu mengatasi permasalahan css external situs web kesayangan kamu. Sampai jumpa kembali di tutorial berikutnya and good luck for you.

Cara Menghapus CSS Variable (Group Description Stylesheet) - Template blogger yang mendukung fitur RTL umumnya memiliki css variable atau (Group Description Stylesheet). Css variable dirancang untuk memudahkan pengguna template dalam melakukan pergantian warna template, fonts (jenis huruf) hingga mengatur lebar halaman post dan sidebar.

Namun sayangnya google PageSpeed Insights akan membaca css variable sebagai CSS Unused atau css yang tidak terpakai dan dianggap menggangu performa situs, meskipun sebenarnya masalah performa (pemuatan) situs yang disebabkan oleh CSS Unused bukan merupakan masalah yang berarti karena masih ada banyak masalah yang lebih besar seperti masalah pada; DOM (Document Object Model), waktu penguraian, mengompilasi, mengeksekusi JS dan sebagainya.

Namun dalam perlombaan kecepatan pemuatan situs, maslah kecil juga sangat berarti dan harus segera diatasi jika memungkinkan, itu sebebnya beberapa pengembang situs memilih untuk menghapus css variable dari telmpate blog mereka.

Langkah Yang Harus Dilakukan Sebelum Menghapus Css Variable
  1. Setting warna, jenis fonts dan lebar template hingga kamu benar-benar yakin tidak akan merubahnya lagi.
  2. Backup/Cadangkan Template untuk menghindari kesalahan.

Cara Menghapus CSS Variable Dari Template Blogger

  1. Buka halaman beranda situs blog melalui browser chrome
  2. Klik Ctrl + U untuk melihat "source" halaman situs atau buka url situs dengan awalan view-source: contoh: view-source:www.domain.com
  3. Copy semua css yang berada dalam tag <style id='page-skin-1' type='text/css'><!-- dan --></style> pada halaman view-source kecuali bagian css variable.
  4. Selanjutnya masuk ke blogger > Template > Edit HTML
  5. Kemudian hapus semua css yang berada dalam tag <b:skin><![CDATA[ dan ]]></b:skin> termasuk css variable juga dihapus.
  6. Pastekan css yang dicopy melalui source halaman untuk menggantikan css yang sebelumnya.
Lihat contoh gambar dibawah ini;
Halaman view-source url sejatinya kita gunakan untuk memparse css yang sebelumnya misalnya .btn:hover{background-color:$(keycolor)} diparse menjadi .btn:hover{background-color:#009678} sehingga kita tidak memerlukan lagi css variable di template situs.

Terakhir save template dan lihat situs anda, apakah ada material yang rusak atau tidak, saya sudah menguji trik ini (menghapus css variable dari template blog) dan berhasil tanpa merusak tampilan apa pun disitus saya, demo; borisinil.blogspot.com, kamu dapat melihat mulai dari tampilan hingga fungsi widget tidak ada yang rusak.

Setelah menghapus css variable, kamu tidak bisa lagi merubah tampilan situs, jenis fonts dan lebar template melalui fitur RTL, semua pengeditan mendatang harus dilakukan melalui edit html. Tapi setidaknya template akan semakin ringan dengan mengurangi jumlah css unused seperti css variable (group description stylesheet).

Tips: Sebelum menghapus css variable tentukan jenis font situs dan pastikan font yang dipilih sudah di instal di dalam template, Misal; Jenis font heading situs anda adalah Oswald, maka silahkan menginstal google fonts oswald terlebih dahulu di dalam html template situs.

Contoh:
[code type="CSS"]<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet'/>[/code]
atau
[code type="CSS"]<style>
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
</style>[/code]
Bisa juga menggunakan teknik loadcss untuk mengatasi render blocking css bundles, Perlu diingat bahwa terlalu banyak menggunakan variasi font maka situs akan semakin berat meskipun sudah menghapus css variable dan loadcss. Demikian saja semoga bermanfaat dan sampai jumpa kemabli.

Buat Akun Dan Disqus Shortname - Semakin banyak situs web yang menggunakan komentar disqus semakin banyak pula minat orang untuk membuat akun disqus, sebagian orang (user) membuat akun disqus karena ingin berkomentar di situs web langganan mereka dan sebagian lagi (web developer) membuat akun disqus untuk mendapatkan disqus_shortname karena situs mereka menerapkan sistem komentar disqus. Dan oleh sebab itu tutorial ini "Cara Membuat Akun Disqus dan Disqus Shortname" akan saya sajikan untuk kedua type orang yang saya maksudkan "user dan web developer".

Cara Membuat Akun Disqus

Disqus merupakan platform yang sangat terbuka sehingga semua orang bisa membuat akun di disqus.com tanpa harus mengisi formulir (persyaratan). Bagi kamu yang ingin membuat akun disqus karena ingin berkomentar di sebuah situs web, cukup login ke disqus.com dengan menggunakan akun media sosial facebook, tweeter atau bisa juga menggunakan akun google, kemudian pilih saya ingin berkomentar (I want to comment on sites), selesai sekarang kamu sudah bisa berkomentar di semua situs yang menggunakan sistem komentar disqus.

Dan untuk web developer sebaiknya membuat akun disqus dengan metode registrasi melalui email, hal itu diperlukan agar kamu tidak kehilangan akun disqus karena sosial media yang hilang atau terblokir, dan tentunya membuat akun disqus melalui email akan memudahkan kamu menerima pemberitahuan ketika ada user yang berkomentar di situs anda sehingga lebih mudah memoderasi setiap komentar yang masuk, simak selengkapnya membuat akun disqus untuk web developer.
  1. Kunjungi halaman pendaftaran akun disqus https://disqus.com/profile/signup/
  2. Buat User Name (Isi Dengan Nama atau Organisasi Anda)
  3. Masuk kan Alamat Email, kemudian
  4. Buat Pasword akun disqus dan centang capcha
  5. Selesaikan pemeriksaan capcha dan klik sing-up untuk menyelesaikan pembuatan akun disqus

Notes: Lindungi email anda dengan cara membuat pasword yang berbeda dengan parword akun disqus.

Selanjutnya kamu akan diarahkan ke halaman pilihan, silahkan klik atau pilih "I want to install Disqus on my site". next

Isi formulir untuk membuat situs web disqus (subdomain.disqus.com) nama situs yang kamu masuk kan akan menentukan url disqus anda, isi dengan sebaik mungkin untuk mendapatkan url disqus yang cantik (sesuai keinginan). tidak harus nama situs web, kamu bisa memasuk-kan nama pribadi atau nama organisasi anda, lihat contoh gambar di bawah ini;
Membuat Disqus Shortname
Add site and create disqus shortname
Selanjutnya pilih kategori Example: Business dan klik tombol Create Site untuk melanjutkan, next

Select a plan, silahkan pilih basic dan subscribe now, kamu akan diarahkan ke pilihan platform web yang kamu gunakan, blogger, wordpress, drupal, jomla, weebly dan banyak lagi, sebaiknya lewati saja langkah itu dan langsung menuju ke step yang ke 3 yaitu Configure Disqus, karena saya sudah menyiapkan tutorial yang lebih mudah untuk menginstall komentar disqus di template blogger.

Lihat gambar di bawah ini, klik tab Configure Disqus yang berada di samping kiri halaman dan kamu akan diarahkan ke formulir yang ke tiga yaitu Configure Disqus, formulir ini di gunakan untuk mengaitkan situs web dengan disqus comment dan mengatur theme disqus comment. Lihat contoh gambar di bawahah ini;
Configure Disqus
Configure Disqus
Perhatikan pada form ke tiga ini saya merubah nama situs menjadi STLB biar sedikit keren ketika komentar disqus tampil di situs web saya, sedangkan pada form yang ke dua saya sengaja membuat seperti itu untuk menentukan url disqus yang saya ingin kan.

Next, pada kolom "Comment Policy URL" tambahkan url halaman privacy policy yang ada di situs web kamu, jika belum tersedia biarkan kosong dan klik tombol Complite Setup, kamu dapat mengedit halaman tersebut kapan saja.

Dimana Disqus_Shortname Saya?

Untuk melihat id atau disqus_shortname biarkan akun disqus tetap login dan silahkan kembali ke beranda disqus.com, di samping profil klik admin atau langsung buka halaman https://disqus.com/admin/ kemudian klik setting untuk melihat disqus_shortname anda. jika baru pertama membuat akun disqus kamu akan langsung diarahkan ke halaman dimana disqus_shortname dapat dilihat seperti contoh di bawah ini;
Disqus Shortname
Disqus shortname
Disqus shortname merupakan kunci utama untuk mengaitkan komentar disqus dengan situs web, jika pada template situs/blog sudah tersedia widget komentar disqus biasanya kita hanya perlu mengganti disqus_shortname bawaan template dengan disqus_shortname sendiri begitu juga jika kamu ingin menginstall komentar disqus, di butuhkan disqus_shortname sendiri agar kamu bisa memoderasi/mengontrol setiap komentar yang masuk.

Berbagi script defer iframe atau defer parsing iframe youtube js (fast loading) -  Mungkin masih ada yang ingin bertanya "apa itu defer iframe video youtube (youtube embed)?", Dalam bahasa inggris "Defer" artinya adalah menunda, jadi yang dimaksud dengan defer iframe youtube embed adalah; menunda pemuatan iframe youtube embed dengan bantuan sebuah javascript agar tidak membebani loading situs, sama hal nya dengan lazy loading.

Script yang berfungsi untuk menunda pemuatan iframe dari youtube embed ini lebih dikenal dengan sebutan "defer parsing of javascript youtube embed js", Script ini awalanya saya temukan ketika mengintip akun github para programer, ada banyak pengetahuan yang saya temukan disana untuk mempercepat loading situs web dan salah satunya adalah dengan menunda pemuatan iframe menggunakan script "defer parsing youtube js" ini.

Cara Kerja Defer Parsing Youtube JS

Javascript defer parsing youtube embed berfungsi untuk memberitahukan kepada browser untuk melewati atau menunda pemuatan iframe video embed sebelum loading situs selesai.

Script Defer Iframe dan Cara Menggunakan Nya

Simpan kode lengkap defer_parsing_youtube_embed.js ini diatas tag penutup body (diatas kode </body>).
[code type="JavaScript"]<script type='text/javascript'>
function init() {
    var vidDefer = document.getElementsByTagName('iframe');
    for (var i = 0; i < vidDefer.length; i++) {
        if (vidDefer[i].getAttribute('data-src')) {
            vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src')); } } }
window.onload = init;
</script>[/code]
Kemudian copy kode embed video youtube yang akan disematkan dan ubah kode src="" menjadi src="" data-src="" lalu kemudian sematkan kedalam konten (artikel) melalu mode pengeditan html.

example:
[code type="HTML"]<iframe width="854" height="480" src="https://www.youtube.com/embed/-U21R16Vvwk" frameborder="0" allowfullscreen></iframe>[/code]
Kode semat diatas adalah adalah kode original embed video youtube tanpa pemutar otomatis, setelah diterapkan defer iframe maka akan menjadi seperti berikut ini;
[code type="HTML"]<iframe width="854" height="480" src="" data-src="https://www.youtube.com/embed/-U21R16Vvwk" frameborder="0" allowfullscreen></iframe>[/code]
Untuk melihat lebih jelas bagaimana kinerja script defer parsing youtube embed js ini silahkan lihat pada link demo di bawah ini.
Lihat Demo
Dengan menarapkan metode "defer iframe" atau penundaan pemuatan iframe maka video yang disematkan kedalam konten situs tidak lagi membebani browser terlalu berat sehinngga loading situs menjadi lebih cepat (normal sebelum video ditambahkan). Demikian "Script Defer Iframe Video Youtube (Fast Loading)" Serta cara menggunakannya semoga bermanfaat dan menambah ilmu pengetahuan tentang blogging dan javascript.

Setting anti copy paste full version - Di dunia digital ada banyak jenis anti copy paste yang dapat digunakan untuk melindungi konten situs dari plagiat (tukang copy paste). Namun memasang anti copy paste secara mutlak akan membuat pengunjung situs yang sesungguhnya ikut terganggu karena tidak dapat mengutip teks yang dibutuhkan.

Jadi sekarang saya akan membagikan anti copy paste yang lebih flexible dan dapat di setting agar tidak aktif di beberapa bagian. Itu sebebnya artikel ini saya beri judul anti copy paste full version.
Anti copy paste full version
Kelebihan anti copy paste full version ini adalah tidak menyebabkan loading situs menjadi berat dan dapat di sesesuaikan (flexible).
Cara Memasang Anti Copy Paste Full Version

Tambahkan atau simpan kode css anti copy paste di bawah ini kedalam area css situs, jika menggunakan platform blogger silahkan letakkan kode tepat diatas kode ]]></b:skin>, Berikut kode anti copy paste full version.
[code type="CSS"].post-body {-webkit-touch-callout: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; text-align: justify;}[/code]
Kode anti copy paste diatas akan menonaktifkan text selector dan mouse click kanan di seluruh bagian situs. Kemudian untuk menonaktifkan anti copy paste di bagian-bagian tertentu silahkan tambahkan lagi kode css berikut ini dan posisikan diatas kode ]]></b:skin>.
[code type="CSS"]blockquote,pre,b{-webkit-touch-callout: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;}[/code]
Kode tersebut berfungsi untuk menonaktifkan anti copy paste di tiga bagian yaitu, area dengan blockquote, pre code area (code box) dan teks tebal (bold). Pada langkah ini anti copy paste sebagian sudah rampung di pasang, Agar lebih menarik kita dapat menambahkan navigasi (info selector dan copy) pada anti copy paste tersebut. Contoh info selector dan copy.
Demo select and copy
Untuk membuat selector info seperti contoh pada gambar diatas silahkan tambahkan lagi kode css di bawah ini dan posisikan tepat diatas kode ]]></b:skin>.
[code type="CSS"]b{position:relative;color:#404040;}
b:before{position:absolute;content:'DOUBLE CLICK TO SELECT | USE CTRL+C TO COPY';display:table;bottom:23px;left:0;background:#4c4c4c;color:#fff;padding:4px;border-radius:2px;font-size:75%;line-height:1;opacity:0;visibility:hidden;transform:scale(0.8);z-index:2;transition:all .3s;}
b:hover:before{transform:scale(1.0);opacity:1;visibility:visible;transition:all .3s}[/code]
Kode tersebut akan menampilkan selector info pada bagian text tebal (bold) ketika dilewati oleh mouse. Sehingga pengunjung situs akan tau bagian-bagian yang dapat di copy dan tidak. Terakhir save template untuk mengakhiri langkah-langkan pemasangan anti copy paste full version ini.

Tambahan:

Jika masih merasa kurang, anti copy paste full versi diatas masih bisa di kombinasikan dengan script anti CTRL+U dan script anti CTRL+P, Terkhusus untuk script anti Ctrl+P sangat tidak dianjurkan karena akan mempengaruhi SEO situs. Saya fikir anti copy paste full version diatas sudah cukup untuk merepotkan para plagiat.

Semoga bermanfaat dan selamat mencoba.

Cara Menghapus Dan Memindahkan Widget Yang Terkunci - Pada beberapa desain template blogger sebagian widget sengaja di kunci agar tidak bisa dipindahkan maupun di hapus, hal tersebut karena sang desainer ingin menjadikan widget tersebut pada tata letak yang tetap agar keindahan desain-nya tidak hilang karena hal-hal yang tidak disengaja.

Namun dalam beberapa kasus widget blogger justru terkunci sendiri dan menyebabkan tata letak yang tidak bagus untuk dilihat, kasus seperti ini biasanya terjadi pada saat meng-upload atau mengganti template.

Untuk menghindari widget terkunci sebaiknya ikuti teknik yang benar menggati template blogger pada laman ini [Open This Page]

Dan, bagi yang sudah terlanjur mengganti template kemudian beberapa widget terkunci sendiri dan tidak bisa dipindahkan maka ikuti tutorial ini, disini saya akan membagikan solusi untuk menghapus widget dan memindahkan widget yang terkunci (locked='true'), jika dipahami dengan benar dari tutorial ini kamu juga akan mengerti cara mengunci widget agar tidak bisa dihapus ataupun di pindahkan. mari kita simak gambar berikut ini;
Pada gambar diatas saya contohkan tata letak 2 widget yang berbeda yaitu widget image dengan status terkunci (locked='true') dan widget follow dengan status tidak terkunci (locked='false').
  • Jika dalam html widget di sertakan kode locked='true' maka widget tidak bisa dipindahkan atau pun di hapus
  • Dan sebalik-nya jika pada html widget diterapkan kode locked='false' maka widget bisa dipindahkan dan di hapus dari tata letak blogger.
Jadi solusi untuk menghapus widget blogger yang terkunci adalah dengan cara mengganti kode locked='true' dengan kode locked='false' pada html widget atau template. Ikuti langkah-langkah menghapus widget blogger yang terkunci di bawah ini;
  1. Login ke Blogger > Template > Edit HTML
  2. Pilih Lompati ke widget (pilih widget yang akan di hapus)
  3. Kemudian ganti kode locked='true' menjadi false
Silahkan lihat contoh kode html dan gambar di bawah ini untuk lebih jelasnya;

Locked widget
[code type="HTML"]<b:widget id='Image852' locked='true' mobile='yes' title='Background Image (Bottom)' type='Image' version='1'>[/code]
Unlock the widget
[code type="HTML"]<b:widget id='Image852' locked='false' mobile='yes' title='Background Image (Bottom)' type='Image' version='1'>[/code]
Cara Menghapus Dan Memindahkan Widget Terkunci
Cara Menghapus Dan Memindahkan Widget Terkunci
Setelah mengganti kode locked='true' menjadi locked='false' silahkan save template blogger anda kemudian pergi ke tata letak untuk menghapus widget atau sekedar memindahkan-nya. Klik edit pada widget disana akan terlihat tombol hapus widget.

Bonus pengetahuan; kode mobile='yes' seperti terlihat pada gambar adalah kode untuk menampilkan widget blogger di perangkat mobile (handphone), kebalikan dari kode mobile='yes' adalaha mobile='no' yaitu perintah html untuk tidak menampilkan element atau widget di perangkat mobile.

Demikian saja cara "Cara menghapus dan memindahkan widget blogger yang terkunci", jika terdapat banyak widget yang terkunci lakukan langkah diatas pada widget yang akan di hapus satu per satu.

Begitu juga jika kamu ingin mengunci widget tertentu agar tidak bisa dipindahkan. Jika ada yang ingin ditanyakan jangan sungkan untuk menuliskan pertanyaan di kolom komentar bawah, semoga berhasil dan sukses buat kamu, see you again.

Cara Membuat Tombol Print Di Kanan Atas Posts Blogger - Salah satu widget yang harus ada di situs-situs blog adalah tombol print, terutama situs web yang berisi konten edukasi. Tidak hanya tombol print, css @media print juga dianjurkan ketersediaan-nya di situs web, bahkan beberapa tool penghitung skor seo seperti "All-in-one SEO Tool" mengharuskan css @media print di setiap situs web agar lebih user friendly (ramah pengguna).

Dan pada tutorial kali ini saya akan menjelaskan cara membuat / memasang tombol print di kanan atas posts blogger dan cara setting thumbnail print dengan css @media print.
Langkah-langkah nya sangat mudah, pertama mari kita simak material yang kita gunakan untuk membuat tombol print di bawah ini;

CSS Tombol Print
[code type="CSS"].topmeta .pull-right > *{float:right;display:block;height:25px;line-height:25px;}
.topmeta a{text-align:center;color:#fafafa;font-size:15px;text-decoration:none;padding:0 5px;background-color:#009678;width:25px;margin:0 2px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;position:relative;cursor:pointer}
.topmeta a:active{bottom:1px}
.topmeta a:hover{background-color:#353535}[/code]
Tempatkan css tombol print tersebut diatas kode ]]></b:skin> atau diatas kode </style>.

HTML Tombol Print
[code type="HTML"]<b:includable id='top-meta' var='post'>
<div class='topmeta'>
<div class='pull-right inner'>
<a class='button_print' onClick='window.print()'><i class='fa fa-print'/></a>
<a class='button_email' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; +data:post.id+ &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><i class='fa fa-envelope'/></a>
</div>
</div>
</b:includable>[/code]
Copy semua kode html tombol print diatas kemudian pasang atau tempatkan di main widget section atau di kumpulan kode widget template blog anda, lihat contoh gambar di bawah ini;
Cara Memasang Tombol Print Di Post Blogger
Cara Memasang Tombol Print Di Post Blogger
Catatan: Icon print "fa fa-print" ganti sesuai dengan jenis font awesome yang ada di situs masing-masing misal jika font awesome yang kamu gunakan v 3.2.1 maka "fa fa-print" diganti dengan "icon-print". Jika belum tersedia font awesome pada halaman situs, silahkan tambahkan di atas tag </head> kode dibawah ini;
[code type="CSS"]<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>[/code]
Switch (HTML Tombol Print)
[code type="HTML"]<b:include data='post' name='top-meta'/>[/code]
Kode ini difungsikan untuk menampilkan widget tombol print yang sudah di install pada langkah sebelumnya. Jika hanya kode css dan html tombol print saja yang di pasang maka widget tombol print masih dalam keadaan standby. Jadi untuk menampilkan tombol print di kanan atas post, pasang kode (switch) tersebut tepat diatas kode <data:post.body/>, contoh;
[code type="HTML"]<b:if cond='data:blog.pageType == &quot;item&quot;'>

Code Here....

<data:post.body/>[/code]
Simpan dan lihat hasilnya, pemasangan tombol print seperti atas hanya untuk post blog saja, jika kamu ingin menampilkan juga tombol print di static page (halaman statik) maka pasang juga switch tombol print diatas kode <data:post.body/> yang berada di dalam tag static page;
[code type="HTML"]<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

Code Here...

<data:post.body/>
<b:else/>[/code]
Setelah tombol print berhasil dipasang, sekarang kita akan men-setting css @media print, tanpa css @media print sebenarnya tombol print tetap bisa digunakan, namun thumbnail print yang ditampilkan berupa tampilan penuh. Jadi peran css @media print adalah mengatur thumbnail print agar sesuai dengan kebutuhan pengguna (hanya menampilkan judul dan halaman post) pada thumbnail print.

Css Thumbnail Print
[code type="CSS"]@media print{
...... style css here...
}[/code]
Isi css pengaturan thumbnail print situs anda dan tempatkan kode css @media print di atas kode ]]></b:skin> atau </style>, sebagai contoh saya lampirkan css thumbnail print situs saya dibawah ini;
[code type="CSS"]@media print{
#top-head,#topnav,#nav,.breadcrumbs,.post-headera.meta,#sidebar-wrapper,#blog-pager,.post-footer,#related_posts,#header-wrapper,.comments,#footer-wrapper,#top-featured,.middle-ad,.bottom-ad,.first-ad,.bottom-cont,.footer-ad{display:none}
#main-wrapper{width:100%;float:none;max-width:100%}
}[/code]
Semua bagian situs, mulai dari header, menu, sidebar dan sebagainya saya sembunyikan dengan property css display:none, kemudian pada bagian main-wrapper atau kolom post saya tampilkan dengan lebar penuh, silahkan tekan tombol print untuk melihat demo css @media print. Untuk memberikan thumbnail seperti itu kamu perlu mengetahui 'id' setiap elemen situs blog kamu, agar lebih mudah mengetahui 'id' elemen situs lakukan inspect element.

Cara Merubah Blockquote Jadi Kotak Script - Situs web yang memuat kontent tutorial tentang web desain maupun bahasa programer seperti javascript, css dan html biasanya dilengkapi dengan kotak script atau code snippets untuk mengemas html, css dan javascript dalam tampilan yang propesional dan menarik di laman tutorial mereka.

Namun beberapa kasus beberapa jenis kotak script (pre code) umumnya menggunakan JavaScript library dan css pihak ketiga (CDN, Highlight.js, Prism.js. maupun Google Prettify) yang dapat menambah sedikit beban pemuatan laman situs.

Dan menggunakan kotak script dengan pre code syntax highlighting harus extra hati-hati agar kode html dan js yang di sematkan dapat ditampilkan dengan sempurna, biasanya diwajibkan untuk memparse kode "html dan js" sebelum disematkan dengan pre code (code snippets).
Ditutorial ini saya akan membagikan cara membuat kotak script yang dapat digunakan dengan tehknik yang lebih sederhana yaitu dengan cara merubah fungsi blockquote menjadi kotak script yang mirip dengan pre code. ikuti langkah-langkahnya sebagai berikut;

Membuat Kotak Script dengan Blockquote

  1. Login ke blogger > Template > Edit HTML
  2. Cari dan temukan style dasar "css blockquote" template anda kemudian ganti dengan css dibawah ini;
[code type="CSS"]blockquote{quotes:none;}
blockquote:before,blockquote:after{content:'';content:none;}
blockquote{margin:1.5em 0;padding:5px;background-color:#353535;border:1px solid #DADADA;padding-left:1em;font-family:"Monospace",Courier,Courier New;color:inherit;color:#fff;font-size:12px;display:block;}[/code]
Jika sebelumnya template blogger anda tidak memiliki style "blockquote" silahkan tambahkan css tersebut tepat diatas kode ]]></b:skin> kemudian save template.

Cara Penggunaan:

Highligt atau select code (javascript, htm atau kode css) kemudian klik tombol blockquote pada bar atas post editor blogger, lihat contoh gambar dibawah ini;
Cara menggunakan blockquote blogger
Cara menggunakan blockquote blogger
Demo Script Box
Demikian saja tutorial cara membuat / merubah fungsi blockquote menjadi kotak script, harap diperhatikan jika laman situs menggunakan iklan tengan artikel, posisikan blockquote diatas atau paruh atas konten dan dibawah atau paruh bawah konten agar tidak berbenturan dengan script iklan.

Cara Membuat Credit Link Footer Template - Sebenarnya untuk apa membuat credit link footer? tutorial ini tentu bukan untuk para designer template, sebab mereka tentu lebih tau tentang trik-trik meng-claim produk mereka.

Sebelumnya saya telah menulis tutorial cara menghapus credit link, dan untuk mengetahui dengan pasti tekhnik menghapus credit link maka tidak salah jika kita belajar membuat credit link, sebab jika membuat credit link footer kita sudah mengerti tentu otomatis kita juga akan mengerti cara menghilangkan atau menghapus-nya (credit link) jika kedepan nya ada template yang dipasangi link credit.

Membuat Credit Link Dengan Scipt Dasar

Script atau javascript dasar credit link adalah seperti contoh di bawah ini:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () { if ($("#creditme,.creditme").attr("href") != "https://gigi-pages.blogspot.com") {
        window.location.href = "https://gigi-pages.blogspot.com"; }});
//]]></script>
Letakkan kode javascript tersebut di mana saja di area dalam tag-body template, lebih tepat nya adalah di antara tag body pembuka "<body>" dan tag body penutup "</body>". jika kamu adalah pemula maka kamu letakkan saja script credit link tersebut tepat di atas kode penutup </body> template.

Langkah ini belum selesai, karena kode di atas masih berupa "kunci" credit link saja, kamu harus memasang gembok nya juga, agar credit link tersebut bekerja dengan baik, berikut contoh kode html yang saya sebut sebagai gembok script credit link diatas.
[code type="HTML"]<div id='footer'>Theme by <a href='https://gigi-pages.blogspot.com' id='creditme' title='Download Theme'>Download Theme</a></div>[/code]
Letak kan di atas di bagian footer template anda, jika template anda sudaah memiliki footer misalnya seperti berikut ini;
[code type="HTML"]<div class='navix credit'>
<div class='isiwrap'>
        <div class='pull-left'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#169; 2019. All Rights Reserved.</div>
<div class='pull-right'> Powered by <a href='https://blogger.com' target='_blank'>Blogger</a></div>
</div></div>[/code]
Kemudian untuk menanamkan credit link, cukup dengan menambahkan link dan id credit nya saja sehingga setelah kita tambahkan akan menjadi sepeti berikut ini.
[code type="HTML"]<div class='navix credit'>
<div class='isiwrap'>
        <div class='pull-left'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#169; 2017. All Rights Reserved.</div>
<div class='pull-right'> <a href='https://gigi-pages.blogspot.com' id='creditme' title='Download Theme'>Download Theme</a> Powered by <a href='https://blogger.com/' target='_blank'>Blogger</a></div>
</div></div>[/code]

Membuat Credit Link Dengan Penyamaran Encode

Adapun cara memasang credit link yang kedua ini, lankah-langkah penerapannya masih tetap sama seperti yang telah dijelaskan diatas (cara yang pertama), yang membedakannya adalah, script di-encode terlebih dahulu dengan Javascript Obfuscator.

Kunjungi link https://javascriptobfuscator.com/Javascript-Obfuscator.aspx untuk meng-encode kode script link credit, silahkan lihat contoh gambar di bawah ini;
Cara Membuat Credit Link Footer Template
Encode credit link
Cara kedua selesai, metode (cara memasang nya) sama dengan #cara1

Credit link Dengan Penyamaran Versi Base64

Base64 sama saja dengan encode versi Obfuscator, yang membedakan nya adalah hasil dari encode nya saja. Hasil encode Base64 cenderung lebih panjang, dan menggunakan huruf dari pada angka, silahkan encode script credit link nya di halaman ini https://ostermiller.org/calc/encode.html

Sekian, saja penjelasan mengenai cara memasang credit link footer template, peringatan jangan pasang credit link di template yang bukan buatan anda sendiri, meng-calaim karya orang lain sebagai karya sendiri, merupakan tindakan buruk dan merusak sumber penghasilan para designer template. Jadikanlah ini sebagai pengetahuan saja dan mari sama-sama kita jaga spotifitas dunia web dan blogger ini agar kita bisa maju bersama.

Cara Mengembalikan Kode CNAME Yang Hilang Saat Costum Domain - Masalah yang mungkin umum dialami para blogger saat mengganti domain blogspot ke costum domain (TLD) adalah kehilangan kode cname (Code setting DNS costum domain), ini biasa-nya terjadi pada blogger yang ingin ganti domain tld yang baru atau memang suka gonta ganti domain. Karena lupa mencatat hilang-lah tu kode cname dan tidak bisa meng-konfigurasi blogspot ke DNS zone domain TLD.

Jika kamu adalah salah satunya yang mengalami kehilangan kode CNAME itu, maka jangan panik karena saya akan menjelaskan cara mengembalikan kode cname yang hilang dengan dua metode yang paling mudah dan insya allah berhasil 100%.

Oke kita lanjutkan pembahasan mengenai kode CNAME yang hilang sehingga tidak bisa meng-konfigurasi blogspot ke DNS zone domain TLD. Sebelum-nya saya ingatkan bahwa cara setting DNS semua layanan domain tld itu sama saja, baik itu GoDaddy, PANDI, Freenom dan layanan penyedia domain lainnya cara setting DNS nya sama saja tidak ada yang berbeda, Maka langsung saja ke langkah yang selanjut nya dan mendapatkan kembali kode CNAME yang hilang.

Mengembalikan Kode CNAME Blogger Yang Hilang
Perhatikan ke-empat kode cname pada gambar di atas, kode yang saya tandai dengan kotak biru, saya enggak tau nama-nya tapi kode tersebut sama ssja pada setiap akun blogger manapun. Pada setting DNS domain, dibagian CNAME kita memasukan host www yang di targetkan ke ghs.google.com.

Dan kode yang saya beri kotak warna merah berbeda pada setiap akun blogger, nah untuk mendapatkan kode yang berwarna tersebut ikuti petunjuk selanjut-nya.
  1. Login ke blogger kamu dan pilih setting (pengaturan) dasar
  2. Kemudian Tambahkan URL pihak ketiga, yaitu domain tld milik kamu.
Perhatikan Contoh Gambar di Bawah Ini;
Cara Mengembalikan Kode CNAME Yang Hilang Saat Costum Domain
Login Blogger > Pengaturan > Dasar
Cara Mengembalikan Kode CNAME Yang Hilang Saat Costum Domain
Masukkan URL (Domain TLD) kemudian Save
Nah pada tahap itu kode CNAME belum muncul atau kembali, maka untuk mengembalikan kode cname nya masuk ke dashboard domain kamu, GoDaddy, PANDI atau Freenom sama saja.

Setelah login ke dashboard penyedia domain tld, langsung ke manager setting DNS domain dan tambahkan kode CNAME yang berwana biru seperti yang saya sebut diatas yaitu host www yang di targetkan ke ghs.google.com. kemudian save (simpan), lihat contoh gambar dibawah ini.
Cara Mengembalikan Kode CNAME Yang Hilang Saat Costum Domain
Masukkan host www yang di pointkan ke ghs.google.com dan save
Pada tahapan ini semua kode CNAME kamu sudah kembali sepenuh nya, lihat dashboard blogger dan coba refresh (muat ualang) maka semua kode cname yang hilang sudah kembali sepenuhnya. Jika saya benar maka tugas saya selesai dan silahkan setting DNS domain kamu dan saya lanjutkan metode berikut nya.

Cara Kedua Mengembalikan Kode CNAME Blogger Yang Hilang

  1. Masuk (Sing In) ke https://www.google.com/webmasters/verification/details
  2. Pilih Domain TLD kamu pada daftar yang tersedia
  3. Pada bagian DNS CNAME record klick Details
  4. Nah semua kode cname yang hilang akan ditampilkan, tapi mungkin kode tersebut akan menyatu tanpa spasi.
Cara Mengembalikan Kode CNAME Yang Hilang Saat Costum Domain
Cara Mengembalikan Kode CNAME Yang Hilang Saat Costum Domain
Gimana mudah bukan? harap tinggalkan komentar jika masih ada yang ingin ditanyakan. Insya Allah jika saya tau akan saya berikan jawaban.

Tutorial Blogger "Cara menambah kolom add widget blogger" atau "1 kolom widget baru" seperti ini sudah lama beredar di internet, namun saya ingin membuat sesuatu yang baru dengan sebuah pemahaman mengenai template blogger agar setiap orang bisa membuat atau menambah kolom widget baru pada template mereka. Ini sangat penting dipelajari karena ini menyangkut keindahan atau ke praktisan sebuah desain web (situs blog) yang kita kelola.

Catatan: Setiap template umum-nya memiliki 4 (empat) kolom (tata letak) dasar yaitu: Header, Main, Sidebar dan Footer. "Header" berarti kepala atas, "Main" berarti badan atau pusat letak artikel "Sidebar" artinya bilah samping dan "Footer" artinya kaki (Bilah bawah)

Selain dari empat bagian tersebut kita bisa menambahkan beberapa kolom widget tambahan misalnya 1 kolom disamping header untuk tempat iklan atau menambahkan kolom widget dibawah header biasa disebut top-featured, 2 kolom atau 1 kolom. Bisa juga membagi sidebar menjadi tiga bagian (3 kolom) dan bisa juga menambahkan beberapa kolom widget di bawah badan "main", soal isi widget kamu bisa memikirkan-nya nanti setelah kolom add widget berhasil di tambahkan.

Kode HTML Dasar Kolom Widget

[code type="HTML"]<div id='topfeatured-area'>
    <b:section class='homepost' id='top-featured' preferred='yes'/>
</div>[/code]
Kode diatas merupakan kode html untuk membuat atau menambah kolom widget (gadget), jika template blog kamu mengunakan tag <div id='name'>. Tetapi jika template kamu menggunakan tag <div class='name'> maka lebih baik ikuti struktur template kamu saja dengan menambahkan kode tag html kolom widget baru seperti kode dibawah ini.
[code type="HTML"]<div class='topfeatured-area'>
  <b:section class='homepost' id='top-featured' preferred='yes'>
</div>[/code]
Kedua kode html di atas merupakan kode paling dasar untuk menambah 1 kolom widget baru, memang itu sudah sangat cukup untuk membuat sebuah kolom widget tambahan, namun jika kamu berencana banyak menggunakan css maka kode tag html kolom widget baru bisa ditambahkan dengan memasang kode dibawah ini.
[code type="HTML"]<div class='topfeatured-area'>
<div class='wrap'>
  <b:section class='homepost' id='top-featured' preferred='yes'>
</div>
</div>[/code]
Nah, sekarang dimana kode tag html "kolom widget" ini bisa diletakkan? kede tersebut bisa di pasang/diletakkan dimana saja di dalam template kamu asalkan ditempatkan di bawah penutup header </header> atau tag penutup </div>.

Cara Menambah Kolom Add Widget Blogger
Contoh Menambahkan Tag Html "Kolom Widget Baru" di bawah Header
Namun harus diingat, menambahkan tag html kolom wigdet baru di bawah tag penutup </header> tidak selalu berhasil. Karena biasa-nya di bawah header sudah disisipkan element lain seperti menunavigasi, search box atau mungkin widget newsticker. Maka untuk untuk menambahkan kolom widget baru kita harus mencari tag </div> penutup dari 3 element tersebut. Sebagai contoh lihat gambar dibawah ini.
Cara Menambah 1 Kolom Widget dibawah header
Zoom Gambar: Ini contoh "menambah kolom widget" di bawah tag penutup </div>
Meski kode tag html "kolom widget baru" ditambahkan di bawah tag penutup div, posisi kolom widget/gadget tetap berada di bawah header tepat nya di bawah menu dan di atas main atau body. Klick save dan lihat pertinjau tata letak blog anda. Untuk memastikan bahwa kamu telah berhasil menambahkan 1 kolom widget dibawah header.

Langkah terakhir adalah merapikan posisi tata letak widget dengan style css. Tambahkan css berikut ini tepat di atas kode ]]></b:skin>.
[code type="CSS"]#topfeatured-area{width:100%;margin:10px}
body#layout #top-featured .wrap{width:auto;float:left;padding:10px;}[/code]
Demikian saja cara menambahkan kolom widget baru di bawah header, sebagai penjelasan tambahan kamu bisa menambah kolom widget dimana saja yang kamu mau jika sudah paham batas-batas elemen html template, bahkan kamu bisa membuat sidebar menjadi 3 bagian atau menambah widget di bawah main (body).

Catatan: jangan terfokus pada topfeatured-area dan top-featured itu merupakan id element saja, kamu bisa mengganti-nya dengan nama lain. Jika didalam template sudah ada "id" top-featured maka kode tidak bisa di simpan kedalam template, kamu harus mengganti topfeatured-area dengan name-id yang lain.

Onclick Event (Show and Hide Comment Blogger) - Menyembunyikan dan menampilkan comment blogger merupakan salah satu cara yang tepat untuk mengurangi scrolling yang terlalu panjang, Beberapa navigasi seperti related post, newer dan older post akan menjorok kebawah sehingga tanpa kita sadari bahwa komentar yang sudah terlalu banyak dapat mengurangi pendapatan iklan dan page view sebuah laman web (blogger), terlebih jika situs web diakses melalui platform mobile.
Agar itu tidak terjadi pada situs blog anda sebaiknya buatlah sebuah navigasi pada komentar blogger dengan menerapkan sistem buka tutup pada kolom komentar blog (Show and Hide Comment Blogger). Artikel ini akan menjelaskan dan membantu anda untuk membuat "Show and Hide Comment Blogger" dengan menggunakan Onclick Event dan sedikit javascript dan css.

Langkah-langkah Membuat Show and Hide Comment Blogger

1.Login ke Blogger > Template kemudian pilih Edit HTML
2.Cari dan temukan kode html yang serupa dengan kode dibawah ini
[code type="HTML"]<div class='comments' id='comments'>[/code]
Atau, jika tidak ditemukan maka cari kode di bawah ini, ini adalah kunci keberhasilan membuat / menambahkan Onclick Event (Show and Hide Comment Blogger) ke situs blog anda.
[code type="HTML"]<div class='comments'>[/code]
Kemudian ganti kode tersebut dengan kode onclick event dibawah ini;
[code type="HTML"]<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'/>[/code]
Selanjutnya, kita perlu menambahkan sedikit css, agar toggle "Show and Hide Comment Blogger" lebih terlihat menarik, tambahkan kode css di bawah ini tepat di area kumpulan css situs blog atau letakkan diatas kode ]]></b:skin> atau </style>.
[code type="CSS"]/* Show and Hide Comments */
.hide-content{display:none;margin:0;padding:0;}
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}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}[/code]
Terakhir, tambahkan kode javascript Onclick Event Show and Hide Comment Blogger untuk memberikan sedikit efect show and hide comment blogger. Tambahkan javascript dibawah ini tepat diatas kode penutup </body> situs blog anda. Tekan tombol "Save Template" untuk mengakhiri "Langkah-langkah Membuat Show and Hide Comment Blogger" dan lihat hasilnya.

Jangan lupa cobalah tombol Show and Hide Comment untuk memastikan ia benar-benar bekerja dengan baik. Berikut javascript Onclick Event (Show and Hide Comment Blogger).
[code type="JavaScript"]<script type='text/javascript'>// Show and Hide 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>[/code]

Blogger: Cara Membuat Spoiler 2 Bahasa - Apakah kamu sedang mencari spoiler 2 bahasa? jika "iya" kamu datang ke situs yang tepat, karena kami punya spoiler 2 bahasa yang kamu cari. Spoiler secara fungsi mungkin masih tetap sama dengan spoiler lainnya, namun secara penggunaan mungkin ada sedikit perberbedaan. Dan diartikel ini saya akan membagikan kode "Spoiler 2 Bahasa" untuk para blogger yang super cerdas (mengerti 2 bahasa atau lebih).

Ini hampir sama dengan spoiler buka tutup, yang membedakan nya adalah kegunaannya, spoiler dua bahasa di gunakan untuk membuat halaman atau artikel dengan 2 bahasa yang berbeda. Lihat contoh demonya berikut ini;

Baca dalam bahasa: 

This content is listed in dmca protection, copying the content or the 2 language spoiler code in this article to your site, must include an active link. Example: Source.

Copying this content is also recommended to change the title, and change the paragraph with your own sentence.


Mungkin kamu sudah sering melihat spoiler seperti ini, jadi saya fikir saya tidak perlu menjelaskan lebih panjang lagi. Sekarang bagaimana cara membuat "spoiler 2 bahasa" seperti ini? langsung saja ikuti langkah-langkah dibawah ini.

Cara Membuat Spoiler 2 Bahasa

Login ke blogger > Buat Entri baru (Artikel baru) Copy code spoiler 2 bahasa dibawah ini dan pastekan kedalam artikel anda pada mode HTML bukan Compose. Lihat disudut kiri pengeditan artikel.
[code type="HTML"]<div id="toEN" onclick=" document.getElementById('toEN').style.display='none'; document.getElementById('toID').style.display='block';  document.getElementById('EN').style.display='none'; document.getElementById('ID').style.display='block'; ">
<div style="text-align: right;">
Baca dalam bahasa:&nbsp;<button>Indonesia</button></div>
</div>
<div id="toID" onclick=" document.getElementById('toID').style.display='none'; document.getElementById('toEN').style.display='block';  document.getElementById('ID').style.display='none';  document.getElementById('EN').style.display='block'; " style="display: none;">
<div style="text-align: right;">
Read In:&nbsp;<button>English</button></div>
</div>
<br />
<span id="EN">
Bahasa 1: Paragraf 1 Cara membuat spoiler 2 bahasa untuk blogger<br /><br />Bahasa 1: Paragraf 2 Cara membuat spoiler 2 bahasa untuk blogger</span>
<span id="ID">
Bahasa 2: Paragraf 1 Cara membuat spoiler 2 bahasa untuk blogger<br /><br />Bahasa 2: Paragraf 2 Cara membuat spoiler 2 bahasa untuk blogger</span>
</div>[/code]
Keterangan:
  • Menggunakan 2 spoiler dalam satu artikel diharuskan mengganti id spoiler (toEN,toID,EN dan ID) dengan id yang lain.
  • Karena mode penulisan artikel pada mode html (bukan compose) maka cara "Enter" paragraf juga menggunakan bahasa html. Gunakan tag <br /><br /> untuk "enter paragraf baru" agar kode spoiler 2 bahasa tidak rusak.
Catatan: Spoiler 2 bahasa ini tidak menterjemahkan text atau artikel anda secara otomatis, jadi kamu harus menterjemahkan sendiri atau secara manual konten yang akan dimuat. Jika kamu memang ahli dalam bahasa inggris maka ini spoiler 2 bahasa ini sangat cocok untuk kamu.

Demikian saja, penjelasan saya tentang cara membuat spoiler 2 bahasa untuk artikel blogger, saya harap ini bisa bermanfaat dan bisa membantu kamu dalam membuat artikel dengan dua bahasa sekaligus dengan menggunakan spoiler ini. Monggo silehkan dicoba, sekian tutorial "spoiler untuk membuat artikel dengan 2 bahasa berbeda" dan sampai jumpa kembali pada tutorial selanjut-nya.