Kesalahan Teknik SEO Yang Harus Dipahami

CLEAN CRACK WORKS – Ada baiknya kita mengetahui hal hal penting yang terkait dengan SEO terbaru 2016 untuk menjaga website atau Blog Anda agar tetap mampu berkompetisi. Fakta bahwa SEO sedang mengalami perubahan yang cepat dalam empat tahun terakhir, sebagai strategi yang digunakan untuk menentukan peringkat yang lebih baik dengan berevolusi secara drastis. Anda mungkin sudah tahu bahwa update Google panthom berlaku penuh pada 2016. Dengan update ini, banyak perubahan yang diperkirakan terjadi dalam dunia SEO.

Anda harus mempersiapkan diri untuk menghindari banyaknya Optimalisasi SEO yang bisa membuat Anda dalam terjebak kesulitan. Berikut ini adalah 10 perangkap SEO yang perlu Anda hindari di SEO 2016.

1. Link Building ( Membangun Link )

Pada bulan Februari 2015, Google "John Mueller" mengatakan bahwa webmaster harus menghindari link builing karena itu tidak wajar. Namun, Google baru-baru ini menjelaskan bahwa pembelian, penjualan, atau meminta link adalah hal yang wajar saja selama  tidak melanggar Pedoman Webmaster Google, akan lebih baik lagi jika Anda meninjau lebih dekat  dalam membangun sebuah  link dan memastikan bahwa Anda tidak melanggar aturan. Jika tidak, Anda mungkin akhirnya mendapatkan sanksi oleh Google dan Website atau Blog Anda bisa menderita dalam jangka panjang.

2. Jangkar teks " Anchor texts "

Ketika update Penguin pertama pada tahun 2012, itu menjadi sesuatu yang sangat berisiko dalam menggunakan Anchor texts " teks jangkar " dalam optimasi mesin pencari. Menyalahgunakan ( apakah itu disengaja atau tidak ) anchor text Anda bisa dihukum selama metode optimasi dengan cara yang salah tetap digunakan dalam metode SEO 2016. Maka itulah mengapa Anda harus memilih untuk memiliki hanya 5 sampai 10 link anchor text ke beberapa kata kunci utama ( dalam satu posting/artikel ).

Sebuah studi kasus yang ditemukan pada Moz mengungkapkan bahwa Anda dapat memiliki peringkat yang lebih baik jika Anda menggunakannya ( anchor text ) tepat ke halaman web yang sangat relevan. Juga, ( Search Metric ) metrik pencarian pada 2015 memiliki faktor meningkatkan peringkat ( efek posistif ) jika anchor text berada pada tempat dan link tujuan yang tepat dan relevan .  Saya akan memberikan contoh "teks jangkar" anchor text seperti dibawah ini

  

Baca juga : Cara Tepat Mengoptimalkan SEO di tahun 2016

Diatas adalah contoh anchor text yang terkait dengan judul artikel. Inilah yang dikatakan sebagi teks jangkar yang memiliki keterkaitan antara judul artikel dengan link ( anchor text ) relevan. Ancaman berat jika Anda mengkaitkan anchor text dengan link iklan atau apapun yang tidak memiliki kaitan dengan judul artikel....apalagi link menipu pengunjung Blog.

3. Target tunggal atau halaman spesifik

Link profil yang baik dapat meningkatkan SEO 2016 . Ini adalah cara yang jauh lebih baik daripada menargetkan sebuah halaman spesifik untuk peringkat Google. Sebuah profil link yang baik adalah salah satu faktor peringkat SEO yang paling penting, menurut Neil Patel dan para ahli lainnya. Saya menyarankan bahwa Anda mulai membangun link profil dengan melakukan evaluasi link melalui akun Google Webmaster .

Apakah Anda mengerti maksudnya ?

Jika Anda hanya menargetkan peringkat Blog Anda, tetapi Blog tersebut secara spesifik tanpa adanya status kepemilikan semisal verifikasi,sitemap, google analytics, disclaimer, privacy policy, term of service dsb yang kesemuanya menegaskan bahwa Anda-lah sebagai publisher artikel Blog atau pemiliknya,

4. Desain Web/Blog wajib ( Mobile friendly )

Blog atau Web yang memiliki desain yang Mobile Friendly  menjadi faktor terpenting dalam menaikkan sebuah peringkat Google dan salah satu tips SEO 2015 - 2016 yang masih memiliki faktor peringkat atas Google. Ini berarti bahwa Blog atau Web yang dirancang dengan baik mobile friendly akan tampil lebih baik daripada Blog atau Web yang tidak dioptimalkan bagi pengguna ponsel.

Anda perlu mengoptimalkan halaman Blod Anda ( menjadi mobile frienly ) karena jumlah yang terus meningkat pada pengguna ponsel, menciptakan desain mobile frienly juga akan meningkatkan kinerja situs Anda. Anda bahkan bisa mengalami tingkat konversi yang lebih baik pada pengalaman pengguna mobile, dan lagi-lagi dapat meningkatkan peringkat SEO Anda kedepannya.

Baca juga : Cara Mengetahui apakah Blog sudah Mobile Friendly atau belum



5. Situs Berperingkat Rendah

Ini adalah tantangan besar untuk menarik pengunjung di website Anda. Hal ini dapat menimbulkan ancaman yang signifikan untuk keberhasilan SEO 2016 Anda. Keterlibatan pengguna atau pengunjung adalah salah satu kontributor utama dalam menaikkan  peringkat mesin pencari yang lebih tinggi. Namun, Anda bisa meningkatkan keterlibatan pengguna/pengunjung dengan mendapatkan wawasan tentang preferensi dan perilaku umum yang ditargetkan.

Contohnya , Anda bisa mendapatkan ide dalam membuat sebuah artikel dari seorang pengunjung yang memiliki masalah yang tak terpecahkan, dan dia meminta bantuan Anda, Cari tahu pilihan yang paling menarik bagi audiens target Anda, apakah itu dengan menawarkan solusi, atau pilihan yang lainnya. Dari sini Anda dapat menerapkan hasil yang sukses untuk Website atau Blog Anda dengan meningkatkan keterlibatan Anda dan pengguna/pengunjung Blog.

6. Blog dengan Pengalaman Buruk Bagi Pengunjungnya

Google mempertimbangkan pengalaman bagi pengguna ketika mengunjungi website Anda mereka mendapatkan informasi yang dia butuhkan. Pengalaman pengguna yang buruk dapat merusak peringkat mesin pencari Anda secara dramatis. Mesin pencari akan terus menganalisis bagaimana pengguna berinteraksi dengan situs Anda di SEO 2016. Setiap ada indikasi pengalaman yang buruk bagi pengguna/pengunjung, Blog Anda akan di-devaluasi dari peringkat mesin pencari.

Jika pengguna cepat pergi  meninggalkan Blog Anda karena mereka tidak menemukan informasi yang relevan yang dia butuhkan , maka itu bendera merah bagi website/blog Anda karena tidak memenuhi permintaan pengguna. Mengoptimalkan situs Anda untuk pengalaman pengguna yang lebih baik dengan memastikan bahwa itu memenuhi apa yang mereka kebutuhankan. Tetap dengan visual menarik, mudah dinavigasi, dan konsisten diperbarui 
( update ) dengan konten berkualitas tinggi.

7. Kurang Konten ( sedikit artikel )

Konten asli dan update adalah salah satu faktor utama yang akan mempengaruhi peringkat Anda pada SEO 2016 . Jika Anda berpikir memperbarui website Anda dengan hanya satu atau dua posting sebulan cukup, Anda lebih baik bersiap-siap peringkat Anda akan terjun lebih rendah . Sudah waktunya untuk memberi informasi menarik pada pengguna Anda apa yang Anda mampu. Hati - hati jangan pernah menulis artikel yang isi materinya  tidak Anda kuasai dengan benar, pengguna/pengunjung Anda akan kecewa jika Anda tak mampu menjawab semua pertanyaan atas apa yang tidak dimengerti oleh pengunjung Blog. 

Cobalah menghadirkan artikel menarik dan update setidaknya satu atau dua posting baru setiap minggu untuk menjaga situs Anda up-to-date. Hal ini dapat membantu mendapatkan peringkat lebih tinggi di Google .Selain peringkat yang lebih baik, konten segar adalah cara yang indah untuk membangun keterlibatan pengguna yang lebih baik. Pikirkan tentang kemungkinan terlibatan  audiens Anda dengan konten dalam mengatasi masalah mereka, trending topic. Perbarui Blog Anda dengan konten yang relevan yang menarik minat audiens agar meningkatkan arus lalu lintas dan konversi.

8. Konten Berkualitas

Anda sudah tahu bahwa konten yang unik adalah cara yang bagus untuk mengoptimalkan situs Anda untuk mesin pencari. Namun, Anda juga harus fokus pada pembuatan konten yang berguna dan berharga untuk pengunjung. Menghindari konten berkualitas rendah akan memungkinkan Anda untuk mendapatkan pengalaman pengguna yang lebih baik dan peringkat mesin pencari yang lebih tinggi. Pikirkan tentang bagaimana pengguna akan bereaksi jika mereka tidak mendapatkan jawaban atas pertanyaan yang mereka meminta.

Konten tanpa manfaat bagi penggunanya adalah bagian dari update Google Panda. Halaman dengan konten yang memiliki sedikit atau tidak ada nilai tambah juga terpengaruh. Beberapa contoh konten tanpa manfaat: konten secara otomatis, halaman yang tidak jelas, konten copas  dari sumber lain, dan halaman afiliasi. Jika situs Web Anda penuh dengan konten (unik) hanya untuk mesin pencari dan bukan untuk pengguna, saatnya Anda mulai berputar arah, kualitas konten yang unik bercirikan dengan banyaknnya komentar ( interaksi pengunjung dan Anda )

9. Iklan interstisial

Google baru-baru ini mengumumkan bahwa mereka akan segera mulai menghukum situs mobile yang menggunakan iklan interstitial. Anda bisa menemukan sejumlah situs yang memberikan prompt untuk menginstal aplikasi situs, dan benar-benar menjengkelkan. Iklan ini memblokir konten yang relevan ketika pengguna mengunjungi situs. Pengunjung sering frustrasi, dengan pengalaman pengguna yang berdampak negatif.

Mulai 1 November, 2015 sampai saat ini, Situs mobile yang sengaja atau tidak memasang app-install interstisi akan mendapatkan downranked di Google. Ini tidak berarti bahwa Anda tidak dapat menggunakan iklan tersebut, tetapi Anda harus siap secara otomatis kehilangan status Blog/Web Anda sebagai situs yang   "mobile-friendly". Jika Anda masih menerapkan iklan interstitial di situs mobile Anda, buatlah beberapa perubahan dalam memenuhi standart SEO 2016.

10. Permintaan Peninjauan Kembali tentang Penyalahgunaan Pedoman Webmaster.

Bila Anda melanggar Pedoman Webmaster Google, Anda akan mendapatkan hukuman  secara otomatis atau manual . Setelah Anda telah melakukan perubahan yang diperlukan untuk situs Anda, Google memungkinkan Anda untuk mengirim permintaan peninjauan kembali. Proses ini membantu Anda dalam mencabut setiap tindakan manual yang diambil terhadap Web/Blog Anda. Namun, ada beberapa situs yang menyalahgunakan permintaan peninjauan kembali ini dan mulai melanggar pedoman lagi setelah hukuman dicabut.

Misalnya, webmaster mungkin telah menerima tindakan secara manual kepada yang link mengarah ke situs lain yang tidak wajar. Mereka dapat menambahkan link ( abal abal ) ke daftar no-follow , mengajukan permintaan peninjauan kembali, dan kemudian menghapus link abal abal dari daftar setelah berhasil dipertimbangkan kembali. Hati hati jika Anda melakukan tindakan ini atau trik secara berulang dalam  proses peninjauan kembali di masa depan kesulitan itu seperti tanpa solusi, ini ancaman Google . Hal ini terutama berlaku jika pelanggaran itu dilakukan dengan maksud untuk spam. Cukup tidak menyalahgunakan proses peninjauan ulang saya rasa Blog Anda akan baik baik saja di masa mendatang.

Kata-kata akhir tentang SEO 2016

Dengan setiap update algoritma, Google akan semakin pintar dalam menangani semua trik dalam upaya menaikkan peringkat yang lebih baik. Tidak ada lagi cara manipulasi dalam menaikkan peringkat Blog Anda secara tidak wajar.Taktik yang tidak etis tidak lagi bekerja dalam mendukung update dimasa yang akan datang. Bahkan, mungkin berakhir dengan hukuman dengan jatuhnya peringkat yang lebih buruk dari yang paling buruk.

Jika Anda menerima risiko dengan mendapatkan downranked dari Google karena terjebak perangkap SEO yang salah, mulailah membuat perubahan penting sehingga Anda dapat menghindari masalah di masa depan. Jika Anda memiliki pertanyaan? Jangan ragu untuk bertanya dan tinggalkan  pertanyaan di kotak komentar di bawah ini.

Semoga bermanfaat......

Cara pasang Inline CSS Atribute pada TEMPLATE BLOG agar VALID HTML5

Untuk menghindari terjadinya duplikasi css (cascading style sheet) atribut dalam blog anda. Sebisa mungkin jangan inline css atribut dalam elemen html. Dampak yang mungkin ditimbulkan jika kita melakukan ini adalah blog menjadi tidak valid HTML. Karena Inline css atribut dalam elemen HTML akan membuat css atribut yang telah di inline akan di blokir karena hal ini tidak sesuai dengan kebijakan keamanan konten.

Ketentuan tentang inline css atribut ke dalam elemen html tidak sesuai dengan pagespeed rules developer google insights tentang Optimize CSS Delivery. Inline CSS atribut ke dalam elemen HTML berdampak pada speed loading Blog kita. Karena  browser memerlukan waktu tambahan untuk membaca atribut CSS yang terdapat di dalam dokumen HTML blog kita atau secara umum dokumen html di artikan sebagai halaman suatu blog atau situs. Bentuk yang umum di jumpai seperti berikut ini:

< div style=' ini atau itu' > kode js atau kode lain< /div >, atau < p style='...' >pernyataan/kalimat ini itulah< /p >.

Berikut ini adalah contoh inline CSS atribute dalam elemen HTML

Contoh paling sederhana dan hampir bisa dipastikan ada di setiap html template blogger kita.

1. < div style='clear: both;' / >

Jika anda temukan kode ini di html template anda. Hampir bisa saya pastikan akan muncul errors untuk kode diatas saat anda cek blog anda di http://validator.w3.org/. Hal ini terjadi karena terdapat atribute CSS di dalam tag HTML (div).

Cara agar kode < div style='clear: both;' / > valid html5

Lantas bagaimana cara membuat kode diatas valid html5 dan tidak lagi terdapat atribut css dalam tag html template. Ganti kode di atas dengan kode < div class='clear'/ > serta tambahkan kode CSS .clear{clear:both} ini sebelum kode ]] >< /b:skin > di dalam HTML template anda.

2. < div style='float:left atau right atau none' >< /div >

Kode umum digunakan blogger untuk memasang iklan (dibawah judul postingan). Padahal fungsi kode ini secara umumnya bisa lebih banyak dari hanya sekedar memasang iklan. Sebagai contoh anda bisa memasang iklan di bawah postingan blog anda dengan memasang kode:

< div style='float:left atau right atau none' > ( pilih salah satu antara left, right atau none )

Kode iklan yang sudah di parse

< /div >

sebelum kode < data:post.body/ >.

Menurut BLOGGINGPASURUAN kode di atas memiliki sedikit kekurangan karena dengan memasang di kode ini di blog kita sama saja dengan inline CSS Atribute di elemen HTML.

Cara agar kode < div style='float:left atau right atau none' >< /div > valid html5

Untuk membuat kode ini valid html5, ganti kode di atas dengan < div class='tentukan-nama-untuk-elemen-ini' >...< /div >. Serta jangan lupa untuk menambahkan kode CSS .tentukan-nama-untuk-elemen-ini{float:left atau right atau none} sebelum kode ]] >< /b:skin > di HTML Template anda.

Masih banyak contoh tentang bentuk inline CSS dalam dalam elemen HTML. Bagaimana cara mengetahui berapa jumlah CSS Atribute yang sudah kita inline di elemen HTML. Untuk cek CSS Blog Anda silahkan masuk ke  situs milik Patrick Sexton yang menyediakan Tools Check CSSDelivery

Semoga bermanfaat………..

Cara OPTIMALKAN kode CSS Delivery Pada Blog agar Loading lebih CEPAT

Kali ini saya akan berbagi tips Cara Mengoptimalkan CSS Delivery Pada Blog khususnya Blogspot. Setiap browser yang di gunakan oleh pengunjung blog anda akan memblokir terlebih dahulu setiap Cascading Style Sheet atau umumnya disebut CSS  eksternal yang berada dalam code template HTML anda, ini karena browser akan load terlebih dahulu setiap CSS internal untuk ditampilkan pada screen baik itu PC atau pun Mobile. 

Apa pengaruhnya terhadap kecepatan loading blog anda ?. menurut saya, hal ini akan membutuhkan waktu tambahan buat browser untuk loading CSS eksternalnya dan inilah yang mengakibatkan loading blog lama atau berat walau di koneksi internet normal sekalipun, Apalagi koneksinya lambat… Bisa dibayangkan.

Hal ini jelas berpengaruh pada SEO karena pungunjung bisa jadi batal berkunjung ke BLOG kita cuma gara gara loading lama atau lemot bangetttt.

1. Inline CSS eksternal berukuran kecil dalam HTML template.

2. Jangan lakukan  inline atribut CSS dalam elemen html.

3. Optimalkan pengiriman CSS di blogger.

Inline CSS eksternal berukuran kecil dalam HTML template.

Anda bisa inline CSS eksternal yang berukuran kecil dan menggabungkannya di dalam skin atau style html template anda untuk mempercepat loading blog anda. Sebagai contoh jika terdapat CSS eksternal dari situs lain dalam html template anda dengan susunan (mungkin) seperti di bawah ini:

<!DOCTYPE html> <html> <head> <link type='text/css' rel='stylesheet' href='http:// www. situs-lain .com / css-ukuran-kecil.css'/> <b:skin>...</b:skin> </head> <body> <div class='nama-style'> Halo di antara kode div ini menggunakan CSS eksternal dari situs lain. </div> </body> </HTML>

Sumber css-ukuran-kecil.css di atas adalah seperti di bawah ini (anda bisa lihat setiap sumber dari CSS eksternal dengan copy url css eksternal tersebut dan pastekan ke browser anda).

.biru { color : biru } .kuning { font-size : 16px} .nama-style { float : left ; width : 30% } .none { display : none }

Maka anda bisa inline CSS eksternal berukuran kecil tersebut (membuat CSS eksternal tersebut menjadi internal) seperti di bawah ini:

<!DOCTYPE html> <html> <head> <b:skin> .nama-style { float : left ; width : 30% } </b:skin> </head> <body> <div class='nama-style'> Halo di antara kode div ini menggunakan CSS eksternal dari situs lain. </div> </body> </HTML>

Anda bisa melihat di atas bahwa kode CSS eksternal berukuran kecil (<link type='text/css' rel='stylesheet' href='http:// www. situs-lain .com / css-ukuran-kecil.css'/>) bisa di ganti dengan hanya menampilkan source yang hanya di perlukan oleh html template blog anda (dalam contoh ini source nya adalah .nama-style { float : left ; width : 30% }).

Catatan penting:

1. Anda bisa inline CSS eksternal situs lain HANYA JIKA  source CSS eksternal tersebut mempunyai ukuran kecil. Jangan inline CSS eksternal berukuran besar kedalam skin blog anda karena kemungkinan besar hal ini akan menambah permasalahan baru terkait rules speed insights google (Prioritize visible content atau above the fold).

2. Pengguna platform blogger tidak bisa menggunakan cara ini untuk mengoptimalkan pengiriman CSS eksternal. Saya akan bagikan pengalaman bagaimana memaksimalkan pengiriman CSS buat anda yang memakai paltform blogger beserta dampaknya di bawah.

Jangan inline atribut CSS dalam elemen html.

Semaksimal mungkin jangan inline atribut CSS dalam elemen html template blog anda. 

Optimalkan pengiriman CSS di blogger.

CSS (Cascading Style Sheet) eksternal di blogger biasanya terdapat di antara kode <head> dan </head> dalam html template. Sebagai contoh setiap user yang menggunakan platform blogger setidaknya terdapat 2 CSS eksternal dengan kode yang mirip seperti di bawah ini:

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/4171472146-widget_css_bundle.css'/> (Kode CSS ekstenal yang terdapat dalam blog ini) <link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=3431015817693173044&zx=c418a2b8-ac3c-4cfa-8efe-d0f2cee4c0c9'/> (Kode CSS eksternal yang terdapat dalam blog ini)

Bagaimana menempatkan CSS eksternal tersebut dalam HTML template adalah seperti di bawah ini:

<!DOCTYPE html> <html> <head> <link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/4171472146-widget_css_bundle.css'/> <link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=3431015817693173044&zx=c418a2b8-ac3c-4cfa-8efe-d0f2cee4c0c9'/> <b:skin>...</b:skin> </head> <body> Kode elemen html dalam body. </body> </HTML>

Usaha mengoptimalkan pengiriman CSS eksternal blogger anda tidak cukup hanya menghapus:

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/4171472146-widget_css_bundle.css'/> dan <link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=3431015817693173044&zx=c418a2b8-ac3c-4cfa-8efe-d0f2cee4c0c9'/>

Dan dari  HTML template blog Sobat. Karena menurut pengalaman nich browser akan tetap load 2 CSS eksternal ini walaupun telah di hapus dari html template blog.

Jika anda ingin mengoptimalkan pengiriman CSS blogger lakukan 2 langkah mudah di bawah ini:

1. Ganti kode <head> menjadi &lt;head&gt;.

2. Ganti kode </head> menjadi &lt;!--< head/ >--&gt; (hilangkan spasi antara <, > dan head/. 

Klik Save Template.

Catatan:

1. Mengoptimalkan pengiriman CSS blogger hanya bisa dilakukan dengan template non default blogger.

2. Cara memaksimalkan pengiriman CSS blogger ini kemungkinan akan mengubah tampilan dari blog anda. Hal ini mungkin terjadi karena skin yang terdapat dalam html template blog anda tidak mewakili semua kode elemen (div class yang terdapat dalam elemen html blog anda tersebut).

Semoga bermanfaat....
  

Penyebab Loading Blog Lambat Yang Perlu Diketahui

Pemahaman Tentang Remove Render Blocking Javascript blogger

Jika Anda pernah meletakkan javascript eksternal di dalam elemen html template blogger ,maka bisa di pastikan anda telah melanggar minimal 1 rules dari google speed insights yaitu remove render blocking javascript. Hal ini menyebabkan loading blog anda akan bertambah lama,lambat,lemot,lola.... Apa penyebabnya ?. Karena sebelum browser menampilkan suatu halaman Web atau Blog kepada visitor, terlebih dahulu browser akan membaca seluruh dokumen dalam html template halaman tersebut. Jika html template halaman tersebut mempunyai script eksternal di dalam nya, maka browser akan berhenti load sejenak untuk membaca sumber atau source dari javascript eksternal, setelah terbaca semua, barulah browser load lagi dokumen html yang tadi sempat terhenti. Semakin banyak script eksternal dalam html template blog, maka akan semakin sering browser berhenti sejenak untuk membaca source dari script eksternal, ini lhooo.. penyebab loading Blog jadi lama. Hal seperti ini akan terulang lagi jika pengunjung blog melihat halaman yang lain di Web atau Blog Anda.

Hal lain yang juga tidka dapat dipisahkan untuk meningkatkan kecepatan loading Blog adalah dengan mengoptimalkan pengiriman CSS di html template blogger.

Berikut ini adalah 2 Cara Remove render Blocking Javascript.

Ada dua cara yang saya ketahui untuk menghapus penghambat javascript eksternal saat browser load html template blogger ini. Dan untuk selanjutnya akan saya jelaskan satu persatu bagaimana menerapkannya di blogger. Berikut ini 2 cara remove render blocking javascript blogger:

1. Inline Small Javascript.

2. Defer loading of Javascript.

1. Inline Small Javascript.

Inline small Javascript adalah membuat javascript eksternal di html template blog menjadi javascript internal. Untuk lebih memudahkan anda memahami tentang cara inline small javascript di blogger ini, setidaknya ada 3 sub bagian :

>>> Bentuk Javascript eksternal itu seperti apa.

>>> Bagaimana cara melihat sumber atau source javascript eksternal.

>>> Bagaimana cara membuat javascript eksternal menjadi internal.

Bentuk Javascript Eksternal dalam HTML Template Blogger.

Sebelum Anda membuat javascript eksternal menjadi internal di html template blog kita, terlebih dahulu kita harus mengenali bagaimana bentuk javascript eksternal tersebut. Javascript eksternal yang paling sering saya jumpai di blogger terletak di antara kode <head> dan </head> tapi tidak menutup kemungkinan javascript juga di letakkan di antara <body> dan </body>. Bentuk javascript eksternal nya adalah seperti di bawah ini (lihat kode script berwarna merah yang bercetak tebal ) :

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<html>

<head>

Kode meta content blogger disini.

<script type='text/javascript' src='https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js'/>

</head>

<body>

Kode body blogger di sini.

</body>

</html>

>>> Cara melihat sumber atau source dari javascript eksternal.

Setelah anda mengetahui bentuk javascript eksternal di html template blog anda sendiri. Sekarang saat nya anda lihat sumber dari javascript eksternal tersebut.

1. Buka HTML Template Blogger Anda.

2. Copy url (setiap url javascript eksternal di akhiri dengan .js) yang ada di src='Copy url ini'

3. Silahkan buka tab baru di browser anda dan pastekan url .js tadi kemudian klik enter.

4. Seharusnya saat ini anda akan melihat sederetan kode script dalam tab baru tersebut. 

Sebagai contoh jika saya ingin mengetahui source dari javascript eksternal <script type='text/javascript' src='https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js'/>, maka saya akan copy url javascript eksternal tersebut yaitu https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js dan paste kedalam tab baru browser. Hasilnya deretan kode yang terlihat adalah seperti di bawah ini:

jQuery(document).ready(function () {

  jQuery("#facebook_right").hover(function () {

    jQuery(this).stop(true, false).animate({

      right: 0

    }, 500);

  }, function () {

    jQuery("#facebook_right").stop(true, false).animate({

      right: -200

    }, 500);

  });

dan seterusnya..........

Catatan Penting:

Anda harus parse html jika di dalam sumber javascript eksternal terdapat karakter ini: <, ", &, ', >

5. Selesai dan anda pun telah mengetahui cara melihat sumber atau source javascript eksternal di dalam template anda sendiri. Sekarang saatnya anda mengubah javascript eksternal tersebut menjadi internal dalam html template.

Cara membuat javascript eksternal menjadi internal di blogger.

Anda telah mengetahui bentuk javascript eksternal di html template blogger, anda juga telah mengetahui cara melihat sumber javascript eksternal tersebut. Sekarang saat nya anda membuat javascript eksternal tersebut menjadi javascript internal di html template blogger anda. Berikut ini 2 langkah yang sangat mudah anda terapkan:

1. Copy kode script di bawah ini dan pastekan sebelum tag penutup </body>.

&lt;script type=&#039;text/javascript&#039;&gt;

&lt;/script&gt;

2. Copy semua deretan kode sumber atau source dari url javascript eksternal html template blog anda tadi di antara 2 kode script no 1 di atas. Sebagai contoh saya akan letakkan deretan kode sumber dari https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js, hasilnya akan seperti dibawah ini:

&lt;script type=&#039;text/javascript&#039;&gt;

jQuery(document).ready(function () {

  jQuery("#facebook_right").hover(function () {

    jQuery(this).stop(true, false).animate({

      right: 0

    }, 500);

  }, function () {

    jQuery("#facebook_right").stop(true, false).animate({

      right: -200

    }, 500);

  });

dan seterusnya..........

&lt;/script&gt;

3. Hapus kode javascript eksternal yang sebelumnya ada di antara kode <head> dan </head> atau di antara <body> dan </body> di html template tadi. Klik preview dan lihat jika fungsi javascript masih bekerja dengan baik klik Save Template. Selesai.

Contoh jika bentuk html template blog sebelumnya adalah seperti ini:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<html>

<head>

Kode meta content blogger disini.

<script type='text/javascript' src='https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js'/>

</head>

<body>

Kode body blogger di sini.

</body>

</html>

Maka bentuk akhir dari html tenplate blog sekarang adalah seperti ini:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<html>

<head>

Kode meta content blogger disini.

</head>

<body>

Kode body blogger di sini.

&lt;script type=&#039;text/javascript&#039;&gt;

jQuery(document).ready(function () {

  jQuery("#facebook_right").hover(function () {

    jQuery(this).stop(true, false).animate({

      right: 0

    }, 500);

  }, function () {

    jQuery("#facebook_right").stop(true, false).animate({

      right: -200

    }, 500);

  });

dan seterusnya ..........

&lt;/script&gt;

</body>

</html>

Cek dan ricek lagi apakah javascript eksternal yang telah anda ubah tadi tetap bekerja dengan baik di blog anda. Memang cara saya ini akan menambah ukuran blog anda tapi hal itu sama sekali tidak mempengaruhi kecepatan loading blog anda.

2. Defer loading of javascript.

Cara ke dua untuk remove render blocking javascript di blogger adalah dengan menunda pemuatan loading javascript eksternal. Artinya semua javascript eksternal yang terdapat di html template blogger akan di load atau di muat paling akhir oleh browser (setelah browser memuat semua elemen html internal di blog, maka berikutnya yang di load adalah javascript eksternal tersebut).

>>> Cara defer loading javascript di blogger.

Untuk memerintahkan browser agar memuat javascript eksternal paling akhir setelah semua elemen html internal di load, anda bisa tambahkan async='true' di dalam kode javascript eksternal blog anda. Sebagai contoh jika bentuk javasript eksternal blog adalah seperti di bawah ini:Dengan kata lain, kita akan membuat browser menampilkan seluruh konten blog kita terlebih dahulu kepada pengunjung blog, barulah browser memuat javascript eksternal. Hal ini sangat berguna untuk menghindari "LAYAR PUTIH" yang terlalu lama saat visitor mengunjungi blog kita.

<script type='text/javascript' src='https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js'/>

Kode script eksternal tersebut setelah di defer loading adalah seperti di bawah ini:

<script type='text/javascript' async='true' src='https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js'/>

Catatan:

Jika sumber atau source javascript eksternal blog anda menggunakan document.write{ } di dalamnya, maka tidak di sarankan menggunakan cara defer loading of javascript ini. Sebaiknya anda menggunakan cara pertama saya dengan inline small javascript di atas.

Jika anda melakukan 2 cara  sesuai dengan apa yang telah dijabarkan di atas, seharusnya ada perubahan mencolok dari blog anda sekarang ini yaitu loading blog anda menjadi lebih cepat dari sebelumnya. Silahkan test lagi loading blog anda di speed insights google dan lihat apakah ada perubahan skor untuk loading blog anda.

Semoga bermanfaat........

Cara Lengkap dan Mudah Memasang Facebook Fans Page di Blog

Salah satu cara untuk mempromosikan Blog atau Web Anda adalah dengan memasang Fans page Facebook di blog, atau juga sebaliknya untuk menaikkan popularitas blog dan mendatangkan pengunjung baru sebuah blog bisa melalui fanspage. 

Anda sebagai blogger tentu pemasangan salah satu alat dari Facebook ini sangat penting untuk mensuport optimalisasi Blog. Dari Facebooknya sendiri alat ini dinamakan Like Box dan dapat dipasang pada sebuah web dengan ukuran widget yang bisa Anda tentukan sendiri.

Cara membuat Facebook Fan Page syaratnya adalah Anda terlebih dahulu membuat fans page melalui akun facebook Anda. Bagi Anda yang belum mempunyai alat ini silahkan membuat melalui link berikut  https://www.facebook.com/pages/create.php

>>>Langkah pertama pilih atau klik kategori < misal Brand or Product >

>>>Kemudian "Nama merk atau produk " isikan saja Diskripsi BLOG Anda 

>>>Lalu Centang tulisan "Saya setuju dengan ketentuan Halaman Facebook "

>>>langsung Klik Mulai 

Dan Anda akan dibawah pada jendela di bawah ini :

>>> Jika informasi yang diminta sudah Anda Lengkapi, Klik Simpan info

>>> Kemudian Anda akan dibawah masuk ke"BUDGET Page"stop dulu prosesnya disini...!!!

>>> Lalu Masuk ke Disini untuk mendapatkan kode scriptnya, Jangan keluar < logout >dari Facebook Anda..!!!

Setelah Anda Masuk, Berikutnya akan tampil gambar seperti dibawah ini :

 Note : Anda bisa editing disini ukuran widget yang nanti akan Anda terapkan di Blog.

<<>> Setelah Anda sesuaikan atau Anda biarkan saja sesuai DEFAULTnya 
<<>> Klik GET CODE

Setelah itu Anda akan mendapati gambar seperti di bawah ini :

Naaaa Sekarang Bagaimana Cara Memasang code scriptnya di Blogspot Anda:

Log in Blogger Anda

<<>>Pada halaman Dashboard klik Template >> Klik EDIT HTML

<<>>Lalu letakkan Script pada Bagian 1<Gambar diatas > tepat dibawah kode < BODY >

Seperti gambar di bawah ini :

<<>> Lalu Simpan Template

Berikut Cara buat Widget Facebook Fan Page di Blog-nya.

<<>>Pada halaman Dashboard klik  Tata Letak >> Kemudian Klik Tambah Gadget

<<>>Klik "HTML/JavaScript Add " dan isikan Code yang Anda copy tadi "Bagian 2"

<<>>Klik save dan lihat hasilnya..

Demikian sedikit info cara memasang fans page Facebook di blog, semoga Blog Anda semakin maju pesat. Salam Super Blogger..................

Sehubungan dengan adanya error dari 2 sobat blogger dibawah ini

Update : coba script di bawah ini letakkan di bawah tag <body>, jangan gunakan script bawaan facebooknya ...

<body>,

<div id='fb-root'/>

<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = &quot;//connect.facebook.net/id_ID/all.js#xfbml=1&quot;;

  fjs.parentNode.insertBefore(js, fjs);

}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

.semoga berhasil