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.