Penyebab Loading Blog/Website Berat atau Lambat dan Cara Mengatasinya

Penyebab Loading Blog/Website Berat atau Lambat dan Cara Mengatasinya - Lambatnya loading blog atau website dalam memuat halaman akan memberikan dampak buruk terhadap jumlah trafik pengunjung. Karena waktu proses memuat yang lama, pengunjung akan mulai jenuh kemudian klik sana sini dan akhirnya klik tanda x (close) pada bagian pojok kanan atas. Hal tersebut juga dibenarkan oleh beberapa ahli di bidang SEO (Search Engine Optimization) bahwa blog atau website dengan loading lambat dalam memuat sebuah halaman, cenderung akan lebih ditinggalkan oleh pengunjung meskipun tampilan blog tersebut terlihat menarik. Permasalahan inilah yang menjadi tugas pokok bagi anda selaku webmaster, selain mampu menciptakan blog atau website dengan tampilan yang menarik, anda juga dituntut untuk tetap menjaga performa blog agar tetap ringan dan tidak lambat ketika diakses.

Pihak google sendiri juga mengatakan "Rata-rata, orang memeriksa ponsel mereka lebih dari 150 kali sehari, dan lebih banyak pencarian terjadi pada ponsel daripada komputer. Tapi jika calon pelanggan ada di telepon, dan sebuah situs tidak mudah digunakan, kemungkinan lima kali lebih banyak untuk pergi". Itulah sebabnya mengapa pihak google menekankan agar blog atau website selalu dengan cepat dan ringan dalam proses memuat halaman. Blog yang cepat dan ringan ketika diakses baik menggunakan versi mobile maupun desktop akan membuat pengunjung nyaman dan tidak mudah pergi meninggalkan halaman blog anda.

Anda sendiri tentunya pernah merasakan jika suatu blog atau website dengan loading akses yang sangat lama, maka akan meninggalkan halaman tersebut bukan? Maka tidak heran jika loading blog yang lambat juga memiliki pengaruh terhadap penurunan jumlah pengunjung. Seperti pernyataan dari Google “Hampir setengah dari semua pengunjung akan meninggalkan situs mobile jika halaman tidak dimuat dalam waktu 3 detik”. Maka untuk menghindari permasalahan yang cukup krusial ini, Anda diharapkan mampu mengembangkan blog atau website yang memuat dengan cepat dan mudah digunakan baik melalui layar ponsel maupun dekstop. Langkah pertama yang mesti anda lakukan adalah melihat bagaimana kinerja blog atau website Anda.

Anda perlu mengidentifikasi penyebab dari berat atau lambannya blog/website ketika diakses. Pada umumnya yang menjadi faktor penyebab loading blog atau website lambat dapat dibagi menjadi dua faktor yaitu faktor internal dan faktor eksternal. Faktor internal merupakan faktor yang terjadi dari dalam (in) blog atau website itu sendiri. Sedangkan faktor eksternal merupakan penyebab dari luar (eks) yang tidak ada kaitannya dengan isi dari blog atau website tersebut.

Nah, bagi Anda sebagai pengembang blog atau website, melakukan optimasi terhadap kecepatan blog dalam memuat halaman juga patut untuk dipertimbangkan agar dapat diakses menggunakan perangkat apapun baik melalui mobile maupun desktop. Untuk melakukan pemeriksaan terhadap performa kecepatan loading blog atau website dalam memuat halaman dapat menggunakan beberapa tools yang ada. Sehingga dalam menangani permasalahan juga diperoleh solusi yang pas dan layak untuk digunakan dalam mengoptimasi kecepatan loading blog atau website tersebut. Berikut beberapa penyebab loading blog atau website menjadi lambat:

PENYEBAB INTERNAL:

1. Template atau tema yang Anda gunakan berat
Hal yang paling utama dalam mempengaruhi kecepatan loading blog atau website anda adalah template atau tema yang anda gunakan. Umumnya template yang berat disebabkan oleh banyaknya script kode html yang terpasang pada tema tersebut. Sehingga mengakibatkan loading blog menjadi lambat saat diakses. Jadi, gunakan template sederhana yang bersifat responsive (tampilan dapat menyesuaikan ukuran layar secara otomatis).

Cara mengatasinya:
Jika anda paham bahasa pemrograman silahkan anda edit kode script yang belum di kompres atau buang kode yang tidak diperlukan, karena itu juga berpengaruh terhadap kinerja situs anda. Namun bagi anda yang tidak paham dengan bahasa pemrograman saya sarankan agar segera ganti template dan pastikan bahwa template yang anda gunakan ringan, SEO friendly, fast loading, mobile friendly, valid HTML, valid CSS, dan tidak ada struktur template yang error.

2. Terlalu banyak widget yang Anda gunakan
Penggunaan widget yang berlebihan juga dapat mempengaruhi kinerja blog sehingga menjadi lambat saat diakses. Selain untuk mempercantik tampilan, widget juga berfungsi untuk memudahkan pengunjung dalam berselancar di setiap halaman blog. Maka dari itu, sebelum menggunakan widget pastikan bahwa widget tersebut  penting untuk digunakan sehingga memudahkan pengunjung dalam menjelah setiap konten, bukan malah sebaliknya yang hanya untuk mempercantik tampilan sehingga mengakibatkan kinerja blog menurun atau widget yang bersifat mubadzir seperti pemasangan jam.
Oleh karena itu, Anda bisa mempertimbangkan kembali bagaimana Anda akan menggunakan widget. Tetapi, saya menyarankan Anda untuk menggunakan beberapa widget yang memang diperlukan pada blog Anda. Jangan kedepankan alasan sebagai hiasan atau hal-hal yang kurang perlu, karena ini juga demi kebaikan blog Anda.

Cara mengatasinya:
Pertimbangkan kembali dalam penggunaan widget. Pasang widget yang penting saja dan memberikan kebermanfaatan baik bagi anda selaku pemilik blog atau website maupun pengunjung. Umumnya widget yang dipasang yaitu label, popular post, recent post, pencarian, dan widget subscribe atau berlangganan.

3.   Ukuran gambar atau file yang Anda gunakan terlalu besar
Menggunakan gambar sebagai pelengkap artikel merupakan hal yang baik untuk dilakukan. Karena informasi tentu akan lebih menarik jika dilengkapi dengan gambar yang bersifat visual daripada hanya tulisan saja yang hanya bersifat verbal. Namun yang perlu untuk Anda ingat, pastikan gambar yang Anda upload berukuran kecil.  Hal ini dikarenakan, jika postingan terlalu banyak gambar dengan ukuran lebih dari 1 MB (1.000 KB), maka bisa dipastikan loading halaman blog anda akan menjadi lambat.

Anda bisa mencoba sendiri seberapa besar ukuran gambar yang cukup jelas jika pengunjung melihat gambar itu namun dengan ukuran yang lebih ringan. Saya sendiri biasanya ukuran gambar di antara range 65 – 115 kb. Jika ukuran gambar anda lebih dari itu, saya sarankan agar anda perkecil terlebih dahulu ukuran gambar tersebut baik dengan menggunakan tools yang tersedia secara online maupun dengan software aplikasi ofline seperti Microsoft office picture manager.

Cara mengatasinya:
Kurangi atau perkecil terlebih dahulu ukuran gambar sebelum anda upload pada postingan. Anda bisa menggunakan tools secara online untuk memperkecil ukuran gambar, atau juga bisa dilakukan secara offline dalam mengurangi ukuran gambar namun tetap pastikan bahwa kualitas gambar tetap baik dan jelas untuk dilihat.

4. Terlalu banyak Anda memasang iklan
Memasang iklan merupakan salah satu cara memperoleh penghasilan dari blog. Iklan memang menjadi sarana yang tepat bagi para blogger untuk menghasilkan uang dari blog. Meski tidak dilarang berapa banyak iklan yang ingin anda pasang, namun yang meski anda pertimbangkan bahwa menampilkan banyak iklan pada halaman blog, selain mengganggu aktifitas pengunjung blog, juga dapat membebani kecepatan loading blog Anda. Anda boleh menampilkan iklan pada halaman blog Anda, tetapi jangan terlalu berlebihan. Ingat bahwa tujuan utama menulis adalah berbagi informasi kepada publik (pembaca).

Cara mengatasinya:
Segala sesuatu yang berlebihan itu tidaklah baik, termasuk dalam memasang iklan di blog. Terlalu banyak memasang iklan di blog tidak hanya memberatkan kinerja situs tapi sangat mengganggu pengunjung. Oleh karena itu, pasanglah iklan maksimal 3 buah, untuk tempatnya silahkan anda sesuaikan, namun biasanya iklan ditempatkan di bagian header, bawah header, sidebar, footer atau di dalam artikel (di bawah judul, tengah artikel, dan akhir).

Selain itu sebisa mungkin hindari penggunaan iklan jenis popunder. Dilihat dari segi pendapatan memang benar, jenis iklan ini sangat menguntungkan bagi anda selaku pemilik blog. Namun jenis iklan ini cenderung tidak disukai oleh pengunjung karena sangat mengganggu.

PENYEBAB EKSTERNAL:

Selain beberapa penyebab secara internal yang menjadikan kinerja blog lambat dalam memuat halaman, juga ada beberapa faktor secara eksternal yang menjadi penyebab loading blog atau website lambat saat diakses, diantaranya yaitu:

1. Koneksi internet lambat
Jaringan internet merupakan faktor utama bagi penggunanya untuk mengakses suatu blog atau website. Jadi pastikan bahwa sambungan internet yang anda gunakan memiliki koneksi dengan speed atau kecepetan yang tinggi. Karena semakin lambat koneksi internet yang digunakan maka akan semakin lambat juga loading halaman yang diakses. Selain itu, terkadang jaringan operator pada koneksi internet yang anda gunakan sedang mengalami gangguan, sehingga berakibat pada lambatnya dalam mengakses situs halaman.

Cara mengatasinya:
Pastikan bahwa provider yang anda gunakan untuk berselancar mendukung kecepatan tinggi (high speed), jika anda menggunakan jaringan internet dengan kecepatan rendah silahkan ganti.

Baca juga: Cara mempercepat WiFi agar internetan kita semakin lancar

2. Hosting yang Anda gunakan
Selain koneksi jaringan internet yang digunakan, faktor eksternal yang menyebabkan loading blog atau website lambat yaitu jaringan hosting yang digunakan bermasalah. Masalah ini biasanya sering terjadi pada blog yang menggunakan platform wordpress.org. Maka dari itu, anda diperlukan kejelian serta ketelitian sebelum Anda memilih hosting. Karena hosting yang Anda pilih sangat menentukan kecepatan loading blog Anda.  Namun jika anda ngeblog dengan menggunakan platform blogspot maupun wordpress.com sudah bisa dipastikan jarang atau bahkan tidak pernah mengalami masalah ini. Karena kalian tidak perlu memikirkan sewa hosting serta kedua layanan blog tersebut memiliki reputasi dan menggunakan jaringan serta koneksi yang sangat baik.

Cara mengatasinya:
Jika anda sering mengalami masalah atau gangguan pada hosting, saya menyarankan untuk segera pindah dan cari penyedia hosting yang lainnya. Hal yang patut untuk dijadikan pertimbangan dalam memilih hosting yaitu performance, harga, reputasi perusahaan yang dapat anda lihat berdasarkan review pengguna, dan yang terakhir support (bantuan), umumnya pihak penyedia layanan hosting memberikan support 24 jam / 7 hari.

Untuk lebih jelas, silahkan kalian baca: Tips Memilih Web Hosting Dalam Pembuatan Web.

3. Terjadi gangguan teknis pada server hosting
Terjadinya gangguan terhadap server hosting merupakan hal yang wajar sehingga berakibat pada lambatnya loading blog atau website dalam memuat suatu halaman bahkan terjadi error saat diakses. Kondisi ini biasanya terjadi saat penyedia layanan server melakukan backup di semua server atau sedang melakukan maintenance secara rutin untuk hosting di Negara tertentu. Maka hal-hal semacam ini akan mempengaruhi terhadap kecepatan blog atau website tersebut.

Cara mengatasinya:
Tidak banyak yang dapat anda lakukan, jika hal semacam ini terjadi. Hal yang pertama yang mesti anda lakukan yaitu segera hubungi penyedia layanan hosting. Dan bersabarlah untuk menunggu perbaikan.

4. Blog/Website terkena serangan hacker
Selain hosting serta jaringan server yang digunakan, kendala lainnya yaitu gangguan yang ditimbulkan oleh pihak lain (hacker/peretas) untuk melumpuhkan situs atau pihak pemilik server hosting. Meski hal seperti ini dapat diminimalisir jika pihak pemilik server hosting melakukan backup pada blog atau website tersebut, sehingga tetap bisa diakses meski dengan loading yang sangat lambat. Loading yang lambat tersebut juga biasanya tidak mampu menampilkan halaman secara utuh, artinya pengguna hanya bisa membuka halaman depan tersebut meski terkadang bagian bawah halaman terlihat kosong (blank). Namun jika hacker atau peretas tersebut mampu mengambil alih secara utuh, maka blog atau website tersebut tidak hanya loadingnya lambat, tetapi tidak dapat diakses sama sekali.

Cara mengatasinya:
Bagi anda yang memiliki blog baru tidak perlu khawatir dengan hal semacam ini, sebab kemungkinan kecil blog anda diretas oleh hacker. Namun lain halnya jika blog anda sudah memiliki nama di search engine, atau selalu menduduki peringkat atas dengan berbagai macam keyword. Maka anda perlu untuk mengamankannya.

5. Kecepatan prosesor perangkat yang Anda gunakan
Kecepatan prosesor dalam perangkat laptop, komputer atau smartphone yang Anda gunakan juga mempengaruhi terhadap kecepatan halaman yang Anda akses pada browser. Biasanya loading lambat pada komputer Anda disebabkan oleh prosessor yang rendah, terlalu banyak aplikasi yang di install, atau perangkat yang Anda gunakan terkena virus. Semakin tinggi kecepatan prosesor dalam perangkat yang anda gunakan maka semakin cepat pula loading dalam menampilkan suatu laman.

Cara mengatasinya:
Jika yang menyebabkan loading lambat dari perangkat prosesor yang anda gunakan, maka cara mengatasinya cukup mudah. Tinggal beli baru lagi yang terbaru :)

Demikianlah tadi beberapa penyebab loading blog/website lambat saat diakses serta cara mengatasinya. Jadi pastikan bahwa blog atau website anda tetap dalam keadaan prima. Semoga bermanfaat dan jangan lupa untuk anda share artikel ini ke sahabat-sahabat lainnya.

Banned Komentator Spam Blogger dengan jQuery

Banned Komentator Spam Blogger dengan jQuery - Terkadang tidak sedikit kita menemukan beberapa komentar pada artikel yang kita posting memuat unsur-unsur yang tidak diinginkan, seperti berkata kasar, berbau sara, membagikan konten yang berisi hoax, membagikan link judi, pornografi ataupun jenis-jenis komentar lainnya seperti promosi dukun yang bisa menggadakan uang atau menebak angka togel.

Maka dari itu, sangat penting juga untuk diberikan petunjunk atau rambu-rambu yang jelas. Hal-hal apa saja yang tidak boleh digunakan dalam memberikan komentar pada suatu postingan. Beberapa unsur komentar yang biasanya tidak boleh untuk digunakan atau ditampilkan diantaranya yaitu berunsur sara dan komentar spam.

Komentar yang mengandung sara: yang dimaksud dengan komentar yang mengandung sara yaitu berbagai pandangan dan tindakan yang didasarkan pada sentimen identitas yang menyangkut golongan tertentu baik berupa agama, kebangsaan, kesukuan ataupun keturunan. Sehingga bisa menyinggung perasaan suatu individu, golongan atau kelompok, agama atau diskriminasi terhadap budaya tertentu.

Komentar yang mengandung spam: Spam merupakan suatu pesan atau informasi yang tidak ada kaitannya (tidak dikehendaki) oleh penerimanya. Pada dunia blogger, komentar spam biasanya cenderung dilakukan oleh para blogger pemula untuk mengajak orang lain (berupa link) untuk berkunjung pada situsnya. Dunia youtuber-pun demikian, sejauh yang saya amati. Para youtuber juga sering memberikan komentar spam yang berupa ajakan baik hanya untuk berkunjung maupun subcribe terhadap channelnya.

Selain komentar spam yang berupa ajakan dengan membagikan link, komentar spam lainnya yaitu komentar ala kadarnya seperti artikel bagus, mantap gan, saya suka artikelnya, dan lain sebagainya. Namun meski begitu komentar tersebut lebih baik daripada jenis komentar yang mengandung sara maupun link ajakan yang tidak ada kaitannya sama sekali dengan isi dari postingan.

Oleh karena itu, jika anda sudah memberikan petunjuk pada bagian komentar namun tetap saja tidak dipedulikan, anda perlu untuk melakukan tindakan untuk mengantisipasi hal-hal hal-hal tersebut. Anda perlu untuk memasukkan kode tertentu dalam template blog anda.

Cara Pertama Banned Komentator dengan jQuery

1. Masuk terlebih dahulu dalam akun blog anda

2. Pilih bagian Template > Edit HTML

3. Carilah kode </body> untuk memudahkan pencarian, tekan tombol Ctrl+F pada keyboard anda

4. Tambahkan kode jQuery di bawah ini, tepat berada di atas kode </body> 

 <script type='text/javascript'>
//<![CDATA[ 
var spamlist=[
 'http://www.blogger.com/profile/123456789xxx', /* contoh URL komentator */
 'http://nama_blog.blogspot.com/',
 'Alamat URL komentator ke 3' /* URL terakhir tidak perlu diberi koma */
];
for(var v=0; v<spamlist.length; v=v+1){
 $("a[href='"+spamlist[v]+"']").each(function(){
 $(this).closest(".comment-block").find(".comment-content")
 .replaceWith("<div class='comment-content' style='color:red'>Anda telah di banned! Silakan tinggalkan blog ini!</div>"),
     $(this).replaceWith("<span style='color:red'>BANNED USER!</span>");
 })
}
//]]>
</script> 

Sedangkan bagi anda yang menggunakan template dengan sistem komentar hack, bisa menggunakan kode di bawah ini

 <script type='text/javascript'>
//<![CDATA[ 
var spamlist=[
 'http://www.blogger.com/profile/123456789xxx', /* contoh URL komentator */
 'http://nama_blog.blogspot.com/',
 'Alamat URL komentator ke 3' /* URL terakhir tidak perlu diberi koma */
];
for(var v=0; v<spamlist.length; v=v+1){
 $("a[href='"+spamlist[v]+"']").each(function(){
 $(this).closest(".comment_inner").find(".comment_body")
 .replaceWith("<div class='.comment_body' style='color:red'>Anda telah di banned! Silakan tinggalkan blog ini!</div>"),
     $(this).replaceWith("<span style='color:red'>BANNED USER!</span>");
 })
}
//]]>
</script> 

5. Klik pada tombol Simpan Template

Cara Kedua Banned Komentator dengan Tag Kondisional

1. Buka akun blog anda terlebih dahulu

2. Pilih bagian Template > Edit HTML

3. Carilah kode di bawah ini, dengan cara copy kode tersebut kemudian tekan Ctrl+F pada tombol keyboard anda lalu paste pada kolom yang disediakan dan tekan Enter 

<b:loop values='data:post.comments' var='comment'>

4. Selanjutnya, tambahkan kode ini tepat berada di bawah kode tersebut

 <!--blacklist-->
<b:if cond='data:comment.authorUrl != &quot;http://www.blogger.com/profile/12345678910&quot;'>
<!--blacklist--> 

Ganti http://www.blogger.com/profile/12345678910 dengan URL profile yang ingin anda banned.

5. Setelah itu, cari kode </b:loop>, kemudian tambahkan kode ini tepat berada diatasnya,

<!--blacklist-->
</b:if>
<!--blacklist-->

6. Kemudian, tekan tombol Simpan Template

Cara yang kedua ini, hanya berlaku untuk sistem Threaded Comment Hack

Demikianlah tadi, tutorial cara banned komentator spam blogger dengan menggunakan jQuery maupun tag kondisional. Langkah ini merupakan langkah lanjutan, setelah anda sudah memberikan rambu-rambu mengenai hal-hal apa saja yang tidak boleh digunakan dalam berkomentar. Namun tetap tidak diperdulikan oleh pembaca. Semoga artikel ini bermanfaat dan silahkan untuk kalian share ke yang lainnya.

Cara Membuat Efek Animasi Loading Sederhana

Cara Membuat Efek Animasi Loading Sederhana - Kesempatan kali ini, saya akan berbagi tutorial tentang cara membuat efek animasi loading sederhana saat halaman pada blog Anda sedang dimuat. Saat pengunjung membuka blog Anda, secara otomatis efek atau kode ini akan berjalan pada saat blog sedang dimuat dan akan berhenti dengan sendirinya jika halaman tersebut telah dimuat sepenuhnya.

Cara ini bisa Anda gunakan untuk mengkreasikan blog Anda agar terlihat lebih menarik bagi pengunjung saat menunggu proses loading atau muat dari blog Anda. dalam menambahkan efek animasi loading sederhana ini, terbilang cukup mudah. Anda hanya perlu menambahkan beberapa scipt, untuk lebih lengkapnya silahkan Anda ikuti langkah-langkah di bawah ini.

Cara Membuat Efek Animasi Loading Sederhana 

1. Silahkan masuk terlebih dahulu dalam akun blog Anda

2. Pilih bagian Template > Edit HTML

3. Carilah kode ]]></b:skin> atau </style> dengan cara tekan Ctrl+F pada keyboard Anda untuk memudahkan pencarian

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

 #cssload {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyP6BcZe2Lr0jhoeRRuYOelsaehSSCa_s9fFczucimckei6KUHPPVQ7spxFgBaGVnAc2iWBL7rTO9cPWIwNFzBd1kqLljWtiwk_osnGatbWK6Q4LkUU0M3gSDttvJL3jbH9ixf1xz38HA/s1600/loading.gif) no-repeat center;background-color:rgba(0,0,0,0.36);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;} 

5. Setelah itu, tambahkan kode HTML di bawah ini, tepat berada di bawah kode <body>

 <div id='cssload'/> 

6. Kemudian, tambahkan kode di bawah ini sebelum kode </body>

 <script type='text/javascript'>
//<![CDATA[
// Loader
$(window).bind("load",function(){$("#cssload").fadeOut(1e3)});
//]]>
</script> 

7. Klik tombol Simpan Template 

Demikianlah tutorial cara membuat efek animasi loading sederhana saat halaman dimuat. Bagaimana cukup mudah bukan? Silahkan Anda share artikel ini agar banyak yang lebih tahu tentang tutorial ini. Semoga bermanfaat.

Membuat Judul Blog Muncul Satu Kata

Kesempatan kali ini, saya akan membagikan tutorial cara membuat judul blog muncul satu kata. Cara ini berfungsi untuk menghemat space bagi Anda yang memiliki blog dengan nama yang super duper panjang. Sehingga dengan mengikuti tutorial ini judul blog Anda yang terlalu panjang tersebut akan disembunyikan dan hanya satu kata pertama saja yang di tampilkan.

Seperti contohnya judul blog Anda adalah "Panduan Membuat Blog Bagi Pemula Sampai Menjadi Master". Maka dengan menggunakan langkah-langkah dibawah ini, secara otomatis judul blog Anda akan terpotong dan hanya ditampilkan kata pertamanya saja yaitu "Panduan". Selain untuk menghemat space header, blog Anda juga akan terlihat lebih rapi. Bisa Anda bayangkan bukan, jika judul dari blog Anda panjang? Tentu akan mempengaruhi tampilan blog khususnya pada bagian header sobat.

Langsung saja, ikuti langkah-langkah dibawah ini untuk memperpendek judul blog agar hanya muncul satu kata saja.

Cara Membuat Judul Blog Muncul Satu Kata

1. Masuk dalam akun blog Anda terlebih dahulu

2. Pilih bagian Template > Edit HTML

3. Cari kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; dengan cara tekan Ctrl+F pada tombol keyboard sobat

4. Selanjutnya, tambahkan kode di bawah ini, tepat sebelum kode penutup head di atas

 <script type='text/javascript'> $(document).ready(function(){var e=$("body").find("#header .title a").eq(0).text().split(" ");$("body").find("#header .title a").eq(0).text(e[0])}); </script> 

Silahkan Anda sesuaikan kembali pada bagian kode yang ditandai dengan ID atau class pada kode HTML header tema yang Anda gunakan.

5. Klik tombol Simpan Tema

Demikianlah tadi tutorial cara membuat judul blog muncul satu kata, seperti yang sudah saya singgung diatas bahwa fungsi dari tutorial ini yaitu untuk memperpendek tampilan judul blog agar terlihat lebih rapi. Meskipun untuk merapikan judul blog yang terlalu panjang dapat dilakukan dengan cara menggantinya dengan logo (gambar), namun tidak ada salahnya untuk mencoba suatu hal baru guna menambah pengetahuan. Selamat mencoba dan semoga bermanfaat.

Memasang Video Youtube Responsive di Blog

Memasang Video Youtube Responsive di Blog - Seringkali kita melihat beberapa blog yang memasang video dari youtube ke dalam sebuah postingan, namun terlihat tidak responsive sehingga tidak bisa menyesuaikan ukuran dimensi layar kita.

Youtube sebagai situs berbagi video yang cukup populer saat ini, sebab anda diberikan keleluasaan untuk membuat channel anda sendiri. Sehingga anda bisa mengupload video, menonton video, bahkan anda juga bisa memperoleh penghasilan dari video tersebut. Baik melalui cara berjualan produk, sebagai endorse, maupun ikut gabung sebagai publisher google adsense. Namun sebelum akun anda disetujui oleh pihak google adsense, tentu ada beberapa persyaratan yang mesti anda siapkan terlebih dahulu. Agar anda bisa bergabung dan mendapatkan penghasilan dari google adsense tersebut, salahsatunya yaitu jumlah viewer kalian minimal mencapai 10.000 viewer.

Bagi anda yang ingin meningkatkan penghasilan dari google adsense, tidak ada salahnya untuk menggabungkan kedua sumber pendapatan anda yaitu dari blog dan youtube, dengan cara membuat sebuat postingan dan video (red:tutorial) yang saling berkaitan. Kemudian silahkan anda upload video terlebih dahulu dalam channel di youtube anda, setelah itu buatlah sebuah postingan dan masukkan video anda dengan cara menggunakan fitur emmbed video.

Salah satu tools yang disediakan oleh pihak youtube yaitu adanya fitur embed video yang memungkinkan anda untuk bisa menambahkan video dalam sebuah postingan blog sekaligus dapat monontonya tanpa harus ke direct situsnya. Namun dengan menggunakan fitur emmbed dalam postingan tersebut dapat berdampak buruk pada nilai SEO blog anda. Karena adanya elemen iframe serta tampilan yang tidak responsive sehingga tidak bisa menyesuaikan dimensi layar.

Oleh karena itu, kesempatan kali ini saya akan membagikan tutorial cara memasang video youtube di blog yang responsive dapat menyesuaikan besar kecilnya ukuran layar. Sehingga tidak mempengaruhi terhadap penurunan nilai SEO blog anda.

Cara Memasang Video Youtube Responsive di Blog

Cara Pertama

1. Bukalah terlebih dahulu akun blog kalian

2. Masuk pada bagian Template > Edit HTML

3. Carilah kode ]]></b:skin> atau </style> dengan cara tekan Ctrl+F pada keyboard kalian untuk memudahkan pencarian

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

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

5. Setelah itu, tambahkan kode jQuery di bawah ini, tepat di atas kode </body>

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

6. klik tombol Simpan Template

Cara Kedua

1. Selain cara di atas, ada juga cara lainnya yang dapat dilakukan dalam membuat embed video youtube agar terlihat responsive hanya dengan menambahkan kode CSS tepat berada di atas kode ]]></b:skin> atau </style>

 /* CSS Only */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}} 

2. Silahkan anda sesuaikan ukuran max-height pada media query

Cara Menambahkan Video Youtube di Blog

1. Buatlah sebuah postingan terlebih dahulu yang ada kaitannya dengan video yang akan anda tambahkan pada postingan di blog anda.

2. Jika sudah, aktifkan pada mode HTML (bukan mode Compose, ingat!)

Mengaktifkan mode HTML

3. Tambahkan kode HTML di bawah ini

 <div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI">
</div>
</div>
</div> 

Contoh dari link video youtube yang di ambil seperti berikut

Link embed video youtube

4. Salin link embed seperti pada gambar di atas, dan tambahkan pada kode HTML di atas seperti ini.

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

5. Terakhir klik pada tombol Publikasikan

Demikianlah tadi tutorial cara memasang video youtube responsive di blog. Dengan menggunakan cara di atas, maka video dari youtube yang anda sematkan pada salah satu postingan blog anda akan terlihat responsive pada setiap ukuran layar.

Membagi Konten Artikel Menjadi Beberapa Halaman

Membagi Konten Artikel Menjadi Beberapa Halaman - Kesempatan kali ini, saya akan membagikan tutorial cara membagi konten artikel menjadi beberapa halaman. Bagi kalian yang sering melakukan update artikel yang cukup panjang/ banyak jumlah katanya, maka tutorial ini sangat cocok untuk kalian ikuti. Sebab dengan membagi konten artikel menjadi beberapa halaman dapat menghemat ruang di halaman postingan kalian. Selain menghemat halaman ruang, juga dapat meningkatkan jumlah pageview.

Tutorial ini cukup mudah untuk kalian ikuti, sebab kalian hanya perlu menambahkan kode HTML di bagian editor postingan yang nanti akan muncul pada blog kalian. Oke langsung saja, ikuti langkah-langkah dibawah ini.

Membagi Konten Artikel Menjadi Beberapa Halaman

1. Masuk terlebih dahulu, dalam akun blog kalian

2. Buka menu Template > Edit HTML 

3. Carilah kode ]]></b:skin> atau </style> dengan cara tekan Ctrl+F pada keyboard kalian untuk memudahkan pencarian

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

 /* Multiple Page Slide */
a.movepg.nexter,a.movepg.prever{color:#fff}
.separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 40px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px} 

5. Selanjutnya, tambahkan kode jQuery di bawah ini, tepat berada di atas kode </body>

 <script type='text/javascript'>
//<![CDATA[
function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=4;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
//]]>
</script> 

Silahkan kalian ganti kode maxIndex=4 dengan jumlah halaman yang kalian inginkan.

6. Klik pada tombol Simpan Template
7. Langkah selanjutnya yaitu buatlah sebuah postingan baru, tambahkan kode di bawah ini pada postingan kalian dalam posisi tab HTML (Ingat, rubah ke posisi HTML bukan Compose)

 <div class="next-wrap">
  <div id="photocons" class="instruction">
    <div class="slidecontentWrap">
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      </div>
      </div>
      <a class="movepg prever">prev</a>
      <a class="movepg nexter">next</a>
</div> 

8. Jika sudah, langsung saja klik pada tombol Publikasikan dan lihat hasilnya

Itulah tadi, tutorial cara membagi konten artikel menjadi beberapa halaman. Dengan membagi konten menjadi beberapa halaman dapat menghemat ruang tampilan halaman blog kalian, sehingga tutorial ini sangat cocok bagi kalian yang sering membagikan artikel dengan jumlah kata yang banyak. Namun yang perlu untuk diperhatikan juga, buatlah pengunjung blog kalian se nyaman mungkin. Artinya jika memang artikel kalian jumlah katanya masih sedikit, tidak perlu untuk membagi dalam beberapa halaman.

Mungkin itu saja, yang dapat saya sampaikan pada tutorial kali ini, semoga bermanfaat dan selamat berkarya.

Membedakan Style Komentar Admin di Blog

Membedakan Style Komentar Admin di Blog - Pada dasarnya, membedakan style komentar admin dan pengunjung di blog dapat dilakukan dengan menggunakan CSS. Namun pada kesempatan kali ini, saya akan membagikan cara membedaka gaya komentar admin dengan penggunjung menggunakan jQuery. Karena dilihat dari kelebihan jQuery itu sendiri yang telah mendukung CSS1-3, menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi dari library javascript yang telah ada. Termasuk mempercepat coding javascript dalam sebuah website. Dibandingkan kita harus mulai sebuah script javascript dari nol.

Dengan menggunakan jQuery ini, kita bisa menggunakan beberapa URL yang dapat dijadikan sebagai admin dari blog kita. Baik langsung saja, untuk membedakan style komentar admin di blog dengan menggunakan jQuery sebagai berikut.

Membedakan Style Komentar Admin di Blog

1. Masuk terlebih dahulu dalam akun blog kalian

2. Pilih menu Template >> Edit HTML

3. Carilah kode </body> dengan menggunakan Ctrl+F untuk memudahkan pencarian

4. Tambahkan kode jQuery di bawah ini, tepat berada di atas kode </body>

 <script type='text/javascript'>
//<![CDATA[
var bloggAdmin= [
  "URL ADMIN PERTAMA", // Admin 1
  "URL ADMIN KE DUA",  // Admin 2
  "URL ADMIN KE TIGA"  // Admin 3
];
$.each(bloggAdmin, function(i) {
  $('a[href="' + bloggAdmin[i] + '"]').closest('.comment_inner').css('border-top', '5px solid #30abd5');
});
//]]>
</script> 

Silahkan kalian ganti pada kode URL ADMIN PERTAMA dengan kode URL Admin Google Plus atau Profile Blogger

5. Berdasarkan dari kode tersebut, saya memberikan gaya atribut border top pada bagian .comment_inner Silahkan kalian desain sekreatif mungkin sesuai dengan keinginan kalian

6. Klik Simpan Template

Itulah tadi tutorial cara membedakan style komentar admin di blog. Semoga tutorial yang saya bagikan bermanfaat bagi kita semua.

Membuat Tombol Demo dan Download Material Design

Membuat Tombol Demo dan Download Material Design - Material Design merupakan bahasa desain yang dikembangkan oleh Google dan diumumkan pada acara konferensi Google I/O pada 25 Juni 2014. Kesempatan kali ini, saya akan membagikan tutorial membuat tombol demo dan download yang ditambahkan dengan efek animasi ripple (gelombang) pada saat kursos menekan tombol tersebut yang merupakan salah satu dari efek animasi material design.

Semenjak diumumkannya material design yang diprakarsai oleh perusahaan besar dari negeri paman sam tersebut, material design menjadi sebuah tren baru dalam dunia desain antar muka (user interface) baik untuk halaman web maupun aplikasi mobile. Para desainer maupun pengembang perangkat lunak juga menyambut dengan baik atas berbagai fitur yang ditawarkan serta tampilan yang terlihat lebih simpel dan tetap elegant.

Nah, bagi kalian yang memiliki blog berbagi file baik software maupun film tombol blog merupakan salah satu syarat yang harus anda siapkan untuk memudahkan pengunjung dalam melihat demo serta mendownload file yang kalian bagikan. Melihat dari pentingnya tombol demo dan download pada blog berbagi file, pada kali ini saya akan memberikan tutorial membuat tombol demo dan download material design terlihat lebih simpel namun tetap menarik.

Membuat Tombol Demo dan Download Material Design

1. Masuk dalam akun blog kalian terlebih dahulu

2. Pilih Template > Edit HTML

3. Cari kode ]]></b:skin> atau </style> dengan menggunakan Ctrl+F pada tombol keyboard kalian

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

 /* Jurnal Blog Material Design Button */
#wrap{margin:20px auto;text-align:center}
#wrap a{text-decoration:none}
.tombolripple{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.7em;border-radius:4px;color:rgba(255,255,255,0.8);font-weight:400;padding:20px 25px;margin:0 15px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s}
.tombolripple:hover,.tombolripple:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.tombolripple.tsatu{background:#FFD700}
.tombolripple.tdua{background:#008000}
.tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:#FFA500}
.tombolripple.tdua:hover,.tombolripple.tdua:active{background:#6B8E23}
svg{position:absolute;top:0;left:0;width:100%;height:100%}
circle{fill:rgba(255,255,255,0.07)}
.ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)}
.teffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5}
.teffect.animate{animation:ripple-effect 0.5s linear}
@keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}
@-webkit-keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}} 

Silahkan kalian ganti, pada kode yang berwarna kuning, dengan kode warna yang kalian inginkan.

5. Setelah itu, carilah kode </body> dan tambahkan kode jQuery di bawah ini, tepat berada di atas kode </body> tersebut

 <script type='text/javascript'>
//<![CDATA[
!function(a){a(".ripple-effect").click(function(b){var c=a(this);0===c.find(".teffect").length&&c.append("<span class='teffect'></span>");var d=c.find(".teffect");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery);
//]]>
</script> 

Fungsi dari kode jQuery tersebut yaitu untuk memunculkan efek Ripple pada tombol saat disentuh oleh kursor

6. Selanjutnya klik pada tombol Simpan Template

Cara Memasang Tombol Demo dan Download pada Postingan

1. Buatlah sebuah postingan baru

2. Kemudian tambahkan kodel HTML di bawah ini pada bagian tab HTML (bukan Compose)

 <div id="wrap">
  <a class="tombolripple tsatu ripple-effect" href="#" rel="nofollow" target="_blank">Demo</a>
  <a class="tombolripple tdua ripple-effect" href="#" rel="nofollow" target="_blank">Download</a>
</div> 

Ganti pada kode # dengan link tujuan kalian

3. Jika sudah, klik pada tombol Publikasikan dan lihat hasilnya.

Itulah tadi tutorial, cara membuat tombol demo dan download material design yang terlihat simpel dan tetap elegant. Semoga bermanfaat bagi kita semua, sekian dan terimakasih.

Memotong Snippet Popular Posts di Blogger

Memotong Snippet Popular Posts di Blogger - Cara memotong snippet popular posts merupakan salah satu widget yang cukup popular untuk dipasang di blog. Fungsi dari widget ini yaitu memberitahukan informasi kepada pembaca, postingan atau artikel apa saja yang sering dibaca berdasarkan settingan waktu yang telah ditentukan baik 7 hari, 30 hari atau setiap saat. Sehingga, pembaca akan mendapatkan lebih banyak pilihan untuk menelusuri setiap halaman pada blog kita.

Kombinasi terhadap judul post, tumbnail dan snippet/ deskripsi singkat pada widget popular posts terkadang terlihat kurang rapi saat di pasang pada sidebar yang berakibat pada tampilan atau desain halaman jadi terlihat berantakan. Untuk itu, kita perlu untuk memotong snippet atau deskripsi singkat dari popular post tersebut.

Langsung saja, silahkan kalian ikuti tutorial berikut ini untuk memotong snippet popular posts di blog.

Cara Memotong Snippet Popular Posts di Blogger

1. Masuk dalam akun blogger kalian terlebih dahulu.

2. Pilih bagian Template > Edit HTML

3. Tambahkan kode jQuery di bawah ini, tepat berada di atas kode </body>

 <script type='text/javascript'>
//<![CDATA[
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,48);
var j=txt.lastIndexOf(' ');
if(j>42)
$(this).text(txt.substr(0,j).replace(/[?,!.-:;]*$/,'...'));
});
//]]>
</script> 

Silahkan kalian ganti, pada kode yang berwarna kuning dengan jumlah huruf yang ingin ditampilkan

4. Klik pada tombol Simpan Template

Demikianlah tadi tutorial, cara memotong snippet popular posts di blogger. Semoga bermanfaat bagi kita semua, selamat berkarya dan sampai jumpa.

14 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis!

14 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis! - Mengetahui kecepatan blog dalam memuat laman merupakan suatu hal yang penting dan perlu untuk diperhatikan. Karena dengan menurunnya kecepatan blog dalam memuat laman akan mempengaruhi terhadap kejenuhan visitor untuk menunggu (loading), tentu hal tersebut akan berimbas pada larinya pengunjung dari blog kita. Selain itu, kecepatan blog juga memiliki pengaruh terhadap rangking hasil pencarian.

Maka dari itu, pastikan bahwa kecepatan blog kalian tidak terlalu lambat, faktor yang paling umum dalam menurunnya kecepatan blog salah satunya yaitu gambar yang tidak di optimasi. Sehingga bagi setiap blog yang membahas tentang tutorial, tentu banyak gambar yang digunakan dalam mendukung kontennya. Oleh karena itu, pastikan gambar yang akan kalian upload, terlebih dahulu sudah kalian kurangi ukurannya agar tidak terlalu memberatkan kinerja blog.

Seperti yang telah saya singgung di atas, bahwa kecepatan blog yang di bawah rata-rata akan berpengaruh terhadap kepuasan pengunjung, selain itu juga akan berdampak buruk bagi mesin penelusuran. Hal tersebut dikarenakan bahwa data URL blog kalian telah tersimpan dan diindeks oleh mesin pencari. Namun, jika pengunjung kalian menemui error URL pada blog kalian yang disebabkan oleh beratnya loading blog kalian dalam memuat laman sehingga berujung pada error URL, maka error URL tersebut juga akan ikut tersimpan di database mesin pencari. Sehingga masalah tersebut berpengaruh terhadap trafik dan perkembangan rangkin blog kalian di mesin penelusuran.

Nah, untuk dapat meningkatkan kecepatan blog. Terlebih dahulu kalian harus mengetahui kecepatan situs blog kalian dengan memanfaatkam situs tools untuk mengukur kecepatan situs blog yang dapat kalian akses secara gratis, sehingga kalian dapat mengetahui kinerja yang sudah atau perlu untuk di optimalkan lagi.

Berikut merupakan 14 situs tools untuk mengukur kecepatan loading blog yang dapat digunakan secara gratis, sehingga dengan menggunakan tools ini. Kalian mengetahui berapa nilai kecepatan dari blog kalian, serta hal-hal apa saja yang perlu untuk dilakukan pengoptimalan.

14 Situs Tools untuk Mengukur Kecepatan Loading Blog 

1. Google PageSpEed Insight

Google PageSpeed Insight

Google PageSpeed Insights merupakan salah situs yang dapat kalian manfaatkan untuk mengetahui kecepatan akses blog. Google PageSpeed Insights akan mereview sekaligus menganalisis konten blog Kalian sekaligus memberikan solusi yang seharusnya kalian lakukan, mulai dari mengurangi waktu respon server, optimasi javascript dan CSS, cache browser, ukuran gambar, dan lainnya. Ini sangat penting, jika kalian belum mengetahuinya, maka segera cek kecepatan loading blog Kalian sekarang juga.

Google PageSpeed Insight adalah alat uji kecepatan situs web yang memberi peringkat pada situs web kalian dalam skala 1 – 100 yang diberdayakan oleh Google. Semangkin tinggi jumlahnya, semangkin baik pengoptimalan web kalian. Angka yang baik untuk situs web kalian adalah 85 keatas, karena menunjukan situs web atau blog kalian bekerja dengan baik. PageSpeed memberi kalian laporan untuk versi dekstop dan versi seluler situs kalian. Kalian dapat melihat rekomendasi perbaikan setelah uji kecepatan, untuk perbaikan yang di butuhkan seperti mengurangi waktu respon server, optimasi javascript dan CSS, cache browser, ukuran gambar, dan lainnya.

2. Gt-Metrix 

GTmetrix

Selain Google PageSpeed Insights, GTmetrix juga merupakan situs tools gratis yang berfungsi untuk mengukur kecepatan loading blog. Kalian akan mendapatkan banyak hal yang mempengaruhi loading blog ketika diakses, kalian juga bisa membandingkan kecepatan loading blog kalian dengan blog lain melalui GTmetrix. Selain itu, GtMetrix sangat detail dalam memeriksa dan memberikan laporan metrik pagespeed dan Yslow. Penilaian yang diberikan oleh pihak GtMertix terhadap kecepatan situs yaitu dalam skala A sampai F, laporan terbagi dalam lima bagian PageSpeed, Yslow, video dan Histori (sejarah).

Dengan pendaftaran yang gratis, kalian dapat mengetest dari tujuh lokasi berbeda. Kalian dapat memilih browser sebagai pembanding, Firetox vs Chrome. Kalian dapat menguji dan membandingkan kinerja situs dengan berbagai jenis koneksi seperti: cable vs dial-up untuk melihat bagaimana beban yang mempengaruhi laman situs kalian. Fitur lainnya seperti pemutaraan video untuk mengatasi kemacetan (buffering) dan juga kemampuan menjalankan AdBlock plus. Dengan iklan yang di nonaktifkan kalian dapat melihat bagaimana pengaruhnya terhadap pemuatan situs kalian.

3. Ping-Dom

PingDom

PingDom mungkin salah satu alat uji kecepatan situs yang lebih terkenal. Laporan mereka di bagi menjadi empat bagian yang mencangkup tingkat kinerja, analisis halaman, dan history (riwayat). Analisis halaman menawarkan ikhtisar yang sangat bagus dengan menambahkan informasi seperti analis ukuran, ukuran per domain (kalian dapat mengukur situs blog mas mukti dengan situs blog/web kalian), jumlah permontaan per domain dan jenis konten yang banyak diminati.

Namun yang menjadi kelemahan dari pingdom ini, yaitu kalian perlu untuk melakukan pendaftaran akun terlebih dahulu, baru bisa masuk ke dalam situs untuk menggunakan tools-tools yang ada, salah satunya yaitu mengukur kecepatan loading blog kalian. Disamping itu, jika kalian ingin menggunakan situs dari pingdom ini secara berkelanjutan kalian diharuskan untuk membayar, artinya kalian hanya bisa menggunakan tools ini secara gratis selama 14 hari.

4. WebPage-Test 

WebPagetest

WebPage Test sangat mirip dengan beberapa alat uji kecepatan lainnya, namun memiliki lebih dari 40 lokasi untuk dipilih dan lebih dari 25 browser (termasuk juga mobile). Kalian hanya perlu mengklik “Page Speed” dan memulai pengecekan loading blog kalian. Setelah itu, Webpagetest akan memberikan solusi untuk meningkatkan kecepatan loading blog kalian.

WebPage Test Ini memberikan nilai dalam skala dari F ke A berdasarkan dari berbagai tes kinerja seperti Cache, kompresi, FFTB, pengginaan CDN yang efektif, dan lain-lain. Laporan ini terbagi menjadi enam bagian meliputi: ringkasan rincian, rincian kinerja, rincian konten, dan Screen Shot.
WebPage Tes memiliki fitur yang canggih seperti pengambilan video, menonaktifkan javascript, mengabaikan sertifikal SSL, mempunyai fitur otomatis untuk melacak asal Negara, dan masih banyak lagi keunggulannya.

5. KeyCDN 

KeyCDN

KeyCDN merupakan situs uji kecepatan web yang baru dikembangkan pada tahun 2017. Ini merupakan uji kecepatan yang ringan kalian dapat menggunakan untuk menambah pengetahuan yang terperinci tentang situs kalian. Pada situs ini terdapat 14 lokasi yang ditawarkan untuk dipilih di seluruh dunia, kalian dapat membuat hasil tes secara pribadi atau publik. Tes ini meliputi pratinjau situs web visual di bagian bawah. KeyCDN meskipun merupakan situs baru, namun situs alat uji kecepatan blog ini sangat responsif dan bagus di perangkat seluler.

6. Varvy Pagespeed Optimization 

Varvy

Varvy Pagespeed Optimization adalah alat yang dikembangkan dan dikelola olah Patrick Sexton, yang juga menciptakan situs getlisted.org, yang sekarang di kenal dengan nama Moz Local.
Laporan dibagi menkadi 5 bagian yang berbeda termasuk diagram sumber, pengoriman css, pengunaan javascript, masalah kecepatan halaman yang ditemukan, dan layanan yang digunakan. Alat ini lebih banyak menggunakan representasi grafis tentang apa yang dapat di perbaiki di situs kalian, contoh memuat pencekalan.

Varvy Pagespeed Optimization  ini juga memberikan dokumentasi tentang bagaimana cara mengoptimalkan situs kalian dengan tutorial di jalur perenderan, menunda pemuatan javascript dan masih ada banyak lagi. Selain pagespeed opyimization, Varvy juga menyediakan alat untuk mengukur kualitas SEO, dan Mobile SEO dari situs kalian. Inilah salah satu kelebihan dari situs varvy yang multifungsi. Sehingga disamping kita mengukur kecepatan loading blog, kita juga bisa mengukur kualitas blog kita dari sisi SEO dan Mobile.

7. PageScoring 

PageScoring

PageScoring merupakan salah satu situs untuk menguji kecepatan yang menawarkan laporan kinerja yang sederhana dan mudah dimenggerti dengan desain yang minimalis. Sebab, kalian langsung bisa menggunakan tools tersebut tanpa harus membuat akun terlebih dahulu. Situs ini akan menunjukan keseluruhan waktu muat. Informasi lihat di bawah:

• Pencarian domain
• Waktu koneksi
• Ukuran laman
• Ukuran download
• Waktu pengalihan

Kalian dapat mencoba uji kecepatan ini berapa lama waktu yang dibutuhkan untuk memuat laman situs.

8. PerfTooL 

PerfTool

PerfTool adalah proyek open source client side performance tool, yang di-host di github. Ini mengumpulkan berbagai informasi tentang situs kalian dan menampilkan dengan mudah pada halaman laporan. Ini mengabungkan tiga sumber data menjadi satu, Pagespeed Insights, devperf, dan W3CJS. Kalian dapat membandingkan lebih dari 200 indikator kinerja yang berbeda.
Kelebihan dari perftool adalah kalian dapat menjalankan beberepa halaman tes sekaligus untuk laporan google pagespeed insights. Kemudian, bandingkan hasil dari tes dari yang sebelumnya sudah pernah di coba.

9. Dotcom-monitor 

Dotcom-Monitor

Dotcom-monitor menawarkan 23 lokasi yang berbeda dengan 7 browser dimana kalian dapat menjalankan tes kecepatan situs web kalian. Fitur unik ini adalah kalian dapat menjalankan semua tes geografis secara bersamaan. Kalian dapat menghemat waktu, karena alat uji kecepatan yang lain mungkin kalian menjalankan nya satu demi satu.
Penguji kecepatan ini terbagi atas beberapa bagian yang berbeda, diantaranya yaitu: Ringkasan, Kinerja, Host dan Error.

10. Uptrends

Uptrends

Uptrends cukup mendasar tetapi mereka menawarkan lebih dari 35 lokasi yang dapat kalian pilih ketika menjalankan tes kecepatan. Laporan mereka dipecah menjadi dua bagian, gangguan air terjun dan kelompok domain. Kelompok-kelompok domain menawarkan perspektif yang unik karena mengkategorikan sumber daya ke sumber yang berbeda: Partai 1, statistik, CDN, sosial, iklan, pihak pertama secara keseluruhan, dan pihak ketiga secara keseluruhan.

11. Yellow Lab Tools

Yellow Lab Tools

Yellow Lab Tools adalah kinerja web dan front-end alat pengujian kualitas yang lebih baru dikembangkan oleh Gaël Metais. Kelebihan yang ditawarkan pada situs ini, yaitu kalian tidak perlu melakukan pendaftaran akun, artinya kalian langsung bisa melakukan uji coba kecepatan situs kalian baik melalui simulasi desktop, tablet, maupun mobile device. Alat ini memberikan banyak informasi dan beberapa fitur unik yang tidak terlihat di alat-alat lain seperti pemKalianngan saat interaksi JavaScript dengan DOM selama pemuatan halaman dan masalah kode validasi lainnya. Mendapatkan skor global berdasarkan kualifikasi berikut.

• Berat halaman
• Permintaan
• DOM
• Bad Javascript
• Bad CSS
• Server Config
• Timeline JavaScript menunjukkan dengan tepat bagaimana DOM berinteraksi selama pemuatan halaman.

12. DevTools Google Chrome

DevTools Google Chrome

Google Chrome DevTools merupakan salah satu tools yang disediakan oleh Google Chrome yang dapat kita gunakan dalam mengukur kecepatan blog kita. Penggunaan tools ini juga cukup mudah dan kalian dapat dengan cepat memulai kapan saja di broswer Chrome Pilih More Tools > Developer Tools dari Menu Chrome.
Klik-kanan pada elemen laman dan pilih Inspect
Gunakan pintasan keyboard Ctrl+Shift+I (Windows) atau Cmd+Opt+I (Mac)

13. Sucuri Load Time Tester

Sucuri Load Time Tester

Sucuri Load Time Tester merupakan salah satu situs untuk mengukur kecepatan loading blog kalian secara gratis, pada situs ini kalian bisa mengukur kecepatan blog kalian tanpa melakukan pendaftaran akun terlebih dahulu. Penggunaannya juga cukup mudah, sebab kalian hanya perlu memasukkan url blog kalian, kemudian klik pada tombol test load time. Lalu situs ini akan menyajikan laporan, berapa lama waktu yang dibutuhkan dalam membuka situs kalian dari berbagai lokasi. Penilaian yang diberikan yaitu dari A sampai F. Sebuah nilai yang sangat penting untuk memperhatikan adalah "waktu untuk byte pertama", yang memberi Kalian berapa lama waktu untuk konten yang akan dikirim kembali ke browser untuk mulai memproses halaman.

14. Pagelocity

Pagelocity

Situs Pagelocity menawarkan cara unik lain untuk menganalisis kecepatan website. Sebab situs ini tidak hanya memberikan laporan performa saja, melainkan dilihat dari segi SEO, dan Kode Insight dengan penilaian menggunakan skala 100 yang terdiri dari faktor-faktor seperti sosial, SEO, sumber daya, dan kode. Alat ini juga menawarkan kemampuan untuk melacak pesaing Kalian.

Selain bisa langsung digunakan tanpa melakukan pendaftaran akun, kalian juga dapat mendaftar untuk mendapatkan akun gratis demi mendapatkan keuntungan dari fitur tambahan. Tampilan kode ini terutama unik karena akan menunjukkan jika situs Kalian berjalan melalui HTTPS, apa TTFB Kalian, dan antarmuka grafis dari elemen DOM Kalian dengan bar chart.

Seperti yang telah kalian lihat ada banyak sekali jumlah alat uji kecepatan situs web yang dapat kalian pilih. Masing-masing memiliki fitur unik tersendiri seperti yang sudah di bahas diatas. Ada baiknya jika kalian menguji kecepatan secara rutin dan menetapkan patokan sehingga dengan berjalan nya waktu kalian dapat melakukan perbaikan.

Begitu kalian mengetahui bahwa situs kalian terdapat loading lama, kalian bisa memperbaikinya. Hampir semua alat di atas yang saya rekomendasikan. Beberapa laporan yang diberikan untuk segera dilakukan perbaikan yang umum meliputi:

• Memilih web host dengan cepat
• Mengompresi gambar dan file kalian
• Mengurangi jumlah permintaan HTTP
• Menggunakan jaringan pengirim Konten
• Caching
• Mengoptimalkan kode dan script kalian.

Demikianlah tadi, artikel tentang tools yang dapat kalian gunakan untuk mengukur kecepatan situs blog kalian secara gratis. Silahkan untuk kalian cek performa situs blog kalian, apakah sudah dalam keadaan baik atau masih perlu untuk dilakukan perbaikan baik dari segi gambar, cache maupun lainnya. Jika ada hal yang kurang dimengerti silahkan untuk ditanyakan melalui kolom komentar dibawah.

4 Tips Memperoleh Uang dari Blog

4 Tips Memperoleh Uang dari Blog - Terdapat berbagai cara yang dapat dilakukan untuk memperoleh penghasilan (uang) melalui situs blog kalian. Blog yang sebelumnya hanya sebagai tempat berbagai informasi atau semacam catatan harian dengan memanfaatkan teknologi jaringan internet, sekarang telah berubah menjadi profesi yang cukup diminati. Sebab selain menjadi tempat berbagi informasi melalui tulisan-tulisan, blog juga dapat dijadikan sebagai tempat memperoleh materi (uang). Oleh sebab itu, blog bisa menjadi suatu investasi yang cukup menjanjikan, pengembang situs akan memperoleh hasil (passive income) sesuai dengan hasil kerja keras dalam mengembangkan blognya. Pada kesempatan kali ini, saya akan membagikan empat cara mudah untuk mendapatkan profit dari blog, tentu agar kita semakin bersemangat dalam mengelola blog sehingga memberikan suatu manfaat bagi kita semua.

Era sekarang ini (teknologi informasi), banyak cara yang dapat dilakukan dalam memperoleh penghasilan melalui internet. Salah satunya yaitu melalui blogging. Blogging merupakan salatu satu cari favorit saya dalam memperoleh uang dari internet. Karena banyak manfaat yang kita peroleh dengan menjadi seorang blogger, seperti membangun kepercayaan (branding), mengasah kemampuan menulis, berbagi informasi, dan tentu yang akan saya bahas pada tulisan kali ini yaitu mendapatkan penghasilan secara berkelanjutan (passive income) yang cukup menjanjikan, tentu hal tersebut akan kalian nikmati setelah melakukan kerja keras, konsistensi, doa, dan ikhtiar. Keempat hal tersebut adalah salah satu kunci yang dapat kalian terapkan dalam berbagai konteks seperti menjadi seorang blogger.

Jika dalam internet terdapat banyak cara untuk memperoleh suatu penghasilan, begitu juga dengan blog. Banyak cara yang dapat kalian lakukan untuk mendapatkan uang atau bahasa lainnya memonetisasi blog kalian. Berikut empat cara yang menurut saya paling sederhana, praktis, simple dan tentunya mudah untuk diterapkan bagi siapa saja dalam menghasilkan penghasilan dari blog yang perlu untuk kalian coba.

Menjual Barang atau Jasa

Dalam memperoleh penghasilan melalui blog yang paling mudah adalah dengan berjualan. Baik berupa barang atau jasa. Sebab era sekarang ini, dalam berjualan juga sudah dapat kalian lakukan tanpa adanya stock barang, yaitu dengan cara sistem dropship. Tentu dengan adanya sistem dropship tersebut menguntungkan bagi kita yang belum memiliki modal cukup besar. Sehingga kita hanya perlu menyiapkan situs semacam e-commerce dan tinggal proses promosi dengan memanfaatkan sosial media yang ada.

Selain dengan cara berjualan barang menggunakan sistem dropship, kalian juga bisa menjual barang berupa barang digital seperti template, icon, ebook dan lain sebaginya. Cara ini juga sering digunakan oleh para blogger yang memiliki kemampuan bahasa pemrograman, desain grafis, maupun menulis. Jika kalian memiliki passion dibidang menulis, mungkin kalian bisa menjual ebook sekaligus menjual jasa sebagai content writing. Karena tidak menutup kemungkinan para pelaku bisnis online tidak ada waktu untuk mengupdate artikel karena terlalu fokus pada pengoptimasian blog. Sehingga hal tersebut membutuhkan orang untuk melakukan update artikel yaitu jasa content writing. Menjual jasa tidak hanya terpaku sebagi content writing, hal tersebut tinggal kalian sesuaikan dengan passion dan kemampuan yang kalian kuasai.

Bergabung Menjadi Publiser Iklan

Seperti yang sudah saya singgung sebelumnya, bahwa hal yang paling banyak digunakan bagi para blogger di Indonesia khususnya dalam mendapatkan uang dari blog yaitu menjadi publisher. Menjadi publisher merupakan langkah yang mudah untuk diterapkan dan cukup menjanjikan dalam memperoleh passive income dari blog. Kalian dapat menentukan beberapa pilihan jaringan periklanan yang tersedia baik yang berupa pay per click (PPC) yang artinya kalian akan dibayar ketika ada pengunjung yang mengklik iklan, cost per mile (CPM) kalian akan memperoleh hasil ketika iklan tersebut tayang per 1000x, atau cost per action (CPA) kalian mendapatkan hasil ketika pengunjung melakukan aksi dari iklan tersebut seperti mendownload aplikasi yang disarankan atau yang lainnya.

Jika kalian menentukan untuk menggunakan jasa periklanan sejenis PPC, maka Google Adsense adalah pilihan terbaik yang dapat kalian gunakan dalam memonetisasi blog kalian. Hal tersebut karena kepopuleran dari Google Adsense serta banyak kelebihan dibanding dengan jasa periklanan lainnya seperti kualitas iklan, ketepatan dalam hal pembayaran, nilai impresi iklan, dan lainnya. Namun situs-situs yang menjadi publisher di Google Adsense tentu merupakan situs yang berkualitas, yang telah memenuhi kriteria berdasarkan ketentukan oleh pihak Google Adsense. Namun tidak perlu khawatir, bagi kalian yang masih baru dalam membangun sebuah blog tetap bisa menghasilkan uang dari blog meski dengan trafik rendah dengan menjadi publisher di penyedia iklan lainnya.

Tidak dapat kita pungkiri, bahwa google adsense merupakan jaringan periklanan yang terbaik dan paling banyak digunakan oleh para blogger Indonesia dalam memperoleh uang dari blog. Namun bukan berarti tidak ada jaringan periklanan lainnya. Sebab ada banyak sekali jaringan periklanan yang dapat digunakan terutama bagi para blogger pemula yang ingin menghasilkan uang selain dari google adsens, diantaranya yaitu Chitika, AdNow, PropellerAds, dan lain sebagainya.

Menyediakan Space Iklan Bagi Advertiser

Kalian juga bisa mendapatkan penghasilan melalui blog kalian dengan cara memberikan space iklan untuk calon pengiklan. Space iklan ini bisa kalian taruh pada samping header, dibawah header, sidebar, maupun di atas footer.

Namun, tentu cara ini hanya diperuntukan bagi blog yang sudah memiliki cukup banyak pengunjung setiap harinya. Karena tentu tidak mungkin pengiklan akan mengiklankan pada situs yang masih baru atau masih tahap pengembangan. Oleh karena itu, bagi kalian yang sudah memiliki banyak pengunjung perharinya, tidak ada salahnya untuk mencobanya. Buatlah tawaran yang menarik, dan jelas.

Berikut tips yang mungkin dapat kalian terapkan dalam menarik calon pengiklan agar tertarik beriklan di situs kalian.

• Gunakan bahasa yang baik dan mudah untuk dipahami
• Jelaskan mengenai diskripsi konten blog kalian
• Informasikan jumlah statistik blog kalian
• Carilah pengiklan yang sesuai atau memiliki keterkaitan dengan pembahasan di blog kalian. Contoh: blog kalian membahas tentang beasiswa, maka calon pengiklan tentu merupakan dari pengembang bisnis konsultasi pendidikan, maupun lembaga pendidikan lainnya. 
• Jangan terlalu tinggi dan terlalu rendah dalam mematok harga 
• Selain itu berikanlah deskripsi harga yang jelas dalam beriklan misalnya, berapa harga yang dibayar untuk disamping header, di sidebar, dan ke unggulan dari masing-masing tempat tersebut.

Mengikuti Program Afiliasi

Program afiliasi merupakan cara yang cukup popular bagi para blogger dalam memperoleh penghasilan dari blog. Dalam program ini kalian perlu memberikan sosialisasi atau istilah lainnya mereview terhadap produk yang ada dan jangan lupa untuk mencantumkan link tempat beli produk tersebut, kemudian seseorang melakukan pembelian melalui link yang kalian bagikan, maka dari situlah kalian akan memperoleh komisi sesuai dengan ketentuan besar persen yang sudah ditentukan. Selain menjadi publisher pada penyedia iklan, program afiliasi ini juga patut untuk kalian coba. Sebab tidak menutup kemungkinan penghasilan yang diperoleh melebihi penghasilan dari program periklanan berbasis pay per click (PPC).

Bagi kalian yang memiliki blog bule (berbahasa Inggris), program afiliasi yang dapat kalian ikuti diantaranya yaitu amazon. Amozan merupakan salah satu e-commerce yang menawarkan program afiliasi yang banyak diikuti oleh para blogger, namun khusus untuk blog yang menggunakan bahasa Inggris saja. Selain itu, kalian juga bisa mencoba untuk mengikuti program afiliasi yang ditawarkan oleh jasa hosting seperti Bluehost.

Sedangkan bagi kalian yang memiliki blog dengan bahasa Indonesia, tidak perlu khawatir. Sebab kalian juga bisa mengikuti program afiliasi yang ditawarkan oleh situs e-commerce seperti Lazada. Jika kalian memiliki blog yang bertemakan tentang gadget atau barang elektronik lainnya, maka bergabung program afiliasi Lazada perlu untuk kalian coba. Selain lazada, kalian juga bisa mencoba program afiliasi dari web hosting seperti Niaga Hoster.
Tentu dari masing-masing penawar program afiliasi memiliki kelebihan dan kelemahan. Selain itu juga terdapat besar kecil komisi yang diberikan. Sehingga besar kecilnya komisi dari barang satu dengan yang lainnya tentu tidak sama. Namun seperti yang sudah saya singgung diatas, bahwa penghasilan dari program afiliasi ini memiliki potensi melebihi penghasilan dari program periklanan berbasis PPC.

Tips Mengikuti Program Afiliasi

• Buatlah sosialisasi produk dengan menggunakan bahasa yang baik dan mudah untuk dipahami
• Berikan sosialisasi tentang produk yang lagi ngehits dan memiliki nilai jual saat ini
• Deskripsikan produk yang kalian tawarkan secara jelas
• Jelaskan kelebihan dari produk yang kalian tawarkan
• Jangan lupa untuk memberikan link kalian (ini penting)
• Gunakan kupon diskon (Jika mengikuti program afiliasi niagahoster)

“Banyak jalan menuju roma” dalam hal memonetisasi blog juga demikian. Banyak cara yang dapat kalian lakukan untuk memperoleh penghasilan dari blog, apa yang telah saya jelaskan diatas merupakan bagian kecil dari kesekian banyak cara yang mungkin bisa kalian terapkan untuk memonetisasi blog kalian. Sehingga kalian juga mendapatkan profit yang sebanding dengan usaha serta kerja keras kalian dalam membangun serta mengembangan blog kalian.