Tampilkan postingan dengan label Blogspot. Tampilkan semua postingan
Tampilkan postingan dengan label Blogspot. Tampilkan semua postingan

Selasa, 10 Maret 2020

Cara Memperbaiki Error Breadcrumb Data-Vocabulary.org Di Blog

Cara Memperbaiki Error Breadcrumb Data-Vocabulary.org Di Blog. Google Webmaster Tools alias Google Search Console terus saja selalu melakukan update untuk meningkatkan kualitas pada hasil pencarian agar mampu menyaring informasi yang tepat untuk penggunanya.

Karena alasan tersebut, maka google dan bing webmaster juga mendeteksi website atau blog melalui struktur data pada website tersebut menggunakan markup schema.org. Maka tak heran jika kalian pernah mendapatkan email dari google webmaster yang menyatakan bahwa Breadcrumb Data-Vocabulary.org mengalami eror sehingga perayapan blog kalian mengalami gangguan.

Untuk memperbaiki masalah tersebut saya akan menunjukkan solusinya untuk mengatasi breadcrumb yang error tersebut dengan mudah.
Cara Memperbaiki Error Breadcrumb Data-Vocabulary.org Di Blog
Contoh schema markup Breadcrumb yang valid tanpa error

Cara Mudah Untuk Memperbaiki Breadcrumb Data-Vocabulary.org Yang Error Di Blog

1. Buka blog kalian, dan masuk ke menu "Tema > Edit HTML".
2. Setelah itu cari kode .breadcrumb atau .breadcrumbs lalu hapus semua kode CSS tersebut ganti dengan kode berikut.
/* Breadcrumbs */
.breadcrumbs{line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#666;font-weight:400}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666}

3. Selanjutnya kalian cari kode <b:includable id='breadcrumb' var='post'> atau <b:includable id='breadcrumbs' var='post'> lalu hapus semua kode tadi dan ganti dengan kode yang baru ini.
Jika kode tersebut tidak ada, maka letakkan kode berikut berada di bawah penutup kode <b:includable id='comment-form' var='post'>...</b:includable>

<b:includable id='breadcrumb' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
</b:if>
</b:loop>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

4. Kemudian kalian cari kode <b:includable id='main' var='top'> dan letakkan kode berikut tepat berada di bawah kode itu.
<b:include data='posts' name='breadcrumb'/>

5. Jangan lupa klik tombol "Simpan Tema" untuk menyimpan perubahan tersebut.

Setelah semuanya sudah kalian terapkan, maka silahkan tunggu beberapa hari dan lihat perubahanya di situs Google Search Console. Maka semua error tersebut akan segera hilang.

Baca juga:

Demikian panduan untuk Cara Memperbaiki Error Breadcrumb Data-Vocabulary.org Di Blog yang dapat saya tunjukkan. Semoga bermanfaat dan terima kasih.

Jumat, 06 Maret 2020

Cara Mudah Memasang Widget Push Notification Di Blog

Cara Mudah Memasang Widget Push Notification Di Blog. Widget Push Notification merupakan sebuah fitur pada suatu website ataupun blog yang berfungsi untuk memberikan notifikasi mengenai informasi artikel terbaru kepada para pengungjung blog meskipun mereka sedang tidak membuka situs kita.

Dengan memanfaatkan widget ini maka tentunya hal itu bisa menjangkau para pengunjung yang pernah membuka blog kita, sehingga dapat terus meningkatkan visitor tetap (pengunjung lama).

Bahkan situs-situs besar juga menggunakan widget push notification untuk terus memberikan pengalaman yang terbaik kepada para pengunjungnya, seperti Facebook, Instagram, Pinterest, Twitter dan masih banyak lagi.

Lalu bagaimana caranya untuk memasang widget Push Notification pada blog kita?
Untuk itu kita dapat menggunakan layanan dari situs OneSignal. Dan untuk pemasangnya kalian dapat mengikuti tutorial berikut.

Cara Membuat Dan Memasang Widget Push Notification Di Blog Menggunakan OneSignal

1. Kunjungi situs OneSignal terlebih dahulu, kemudian klik tombol Sign Up untuk membuat akun dan login di OneSignal.

2. Setelah itu isi semua data form pendaftaran yang ada di situs OneSignal tersebut.
Cara Mudah Memasang Widget Push Notification Di Blog
  • Email Address: Isikan alamat email anda.
  • Password: Buat password baru untuk akun OneSignal kalian.
  • Company or Organization Name: Isi saja dengan nama blog atau nama kalian sendiri.
Jika semua sudah lengkap maka silahkan klik "Create Account".

3. Setelah kalian menekan tombol "Create Account" maka kalian harus melakukan verifikasi akun melalui kotak masuk di alamat email yang telah kalian daftarkan tadi.
Cara Mudah Memasang Widget Push Notification Di Blog 2

4. Selanjutnya isi nama website kalian dan pilih opsi "Web Push" lalu pilih tombol "Next Configuration Your Platform".
Cara Mudah Memasang Widget Push Notification Di Blog 3

5. Kemudian silahkan kalian isi semua data form konfigurasi yang ada pada widget Web Push tersebut.
Cara Mudah Memasang Widget Push Notification Di Blog 4

Choose Intergration
Jika kalian pengguna website yang memakai platform Wordpress atau Blogspot, maka kalian harus pilih opsi "Wordpress Plugin or Website Builder" lalu pilih CMS kalian yang sesuai, jika menggunakan blogspot maka pilih blogger, jika menggunakan Wordpress maka pilihlah Wordpress.

Blogger Site Setup
  • Site Nama: Nama situs kalian.
  • Site Url: Url atau link untuk menuju halaman blog kalian.
  • Icon Url: Silahkan upload logo atau favicon blog kalian.
  • Label: Gunakan saja nama domainmu (tanpa ekstensi).

6. Untuk melihat dan mengedit tampilan widget Push Notification kita bisa mengklik tombol "Opens Slide Prompt".
Cara Mudah Memasang Widget Push Notification Di Blog 5
Maka setelah itu akan muncul sebuah pop up pratinjau untuk mengedit widget tersebut.
Silahkan kalian sesuaikan isi pesan dan tombol pada Push Notification Blog tersebut, jika semuanya sudah sesuai maka silahkan kalian klik "Save".

7. Selanjutnya silahkan kalian scroll ke halaman yang paling bawah, kemudian klik tombol "Save", lalu akan muncul script untuk membuat widget Push Notification yang berisi kode JavaScript (JS) tersebut.
Cara Mudah Memasang Widget Push Notification Di Blog 6
Silahkan kalian pasang di blog kalian, letakkan kode tersebut di dalam tag ... jika sudah selesai maka kalian klik tombol "Finish".

Baca juga:

Oke, itulah tutorial mengenai Cara Memasang Widget Push Notification Di Blog yang dapat saya tunjukkan. Untuk melihat hasilnya, kalian bisa mengunjungi situs ini dan tunggu beberapa detik agar Push Notification bisa tampil.

Rabu, 26 Februari 2020

Cara Ampuh Memperbaiki Error Pada Struktur Data Blogger (Lengkap)

Cara Ampuh Memperbaiki Error Pada Struktur Data Blogger (Lengkap). Struktur data blog merupakan salah satu komponen blog yang amat penting, sebab struktur data ini dapat memudahkan mesin pencari untuk memahami dan melakukan crawl pada website atau blog kita.

Struktur Data ini biasa disebut dengan nama Schema Markup, untuk saat ini google telah merekomendasikan template blog yang sudah mendukung Schema Markup.

Cara Mengecek Struktur Data Schema Markup Blog

Cara Ampuh Memperbaiki Error Pada Struktur Data Blogger (Lengkap)
Struktur Data Blog Tanpa Eror Setelah Diperbaiki

Untuk mengetahui tentang struktur data yang ada di blog kalian, maka kalian bisa mengeceknya melalui https://search.google.com/structured-data/testing-tool disitu kalian juga bisa melihat bagian struktur data yang mengalami eror.

Kalian hanya perlu menuju ke situs https://search.google.com/structured-data/testing-tool lalu masukkan url halaman homepage dan artikel kalian, setelah itu klik tombol "Jalankan Test" untuk melihat hasil analisanya.

Cara Memperbaiki Error Struktur Data Blogger

Jika struktur data blog kalian menampilkan pesan error dan peringatan pada Google Struktur Data maka kalian harus memperbaikinya agar tidak berimbas pada mesin pencari.

1. Memperbaiki Struktur Data Pada BlogPosting Dan mainEntityOfPage
Properti BlogPosting merupakan sebuah properti utama untuk membungkus semua komponen struktur data yang penting, seperti Item property "mainEntityOfPage" yang bisa kita isi dengan sebuah url blog sebagai item id, Image Object, Author, Publisher dan masih banyak lagi.

Silahkan kalian cari kode yang terdapat atribut class='post hentry' biasanya kode seperti ini <div class='post hentry'> tergantung dari template yang kalian pakai.

kemudian kalian hapus tag <div class='post hentry'> tersebut dan ganti dengan kode berikut.
<div class='post hentry' expr:id='&quot;post-body-&quot; + data:post.id' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>
<meta expr:itemid='data:post.link ? data:post.link : data:post.url' itemType='https://schema.org/WebPage' itemprop='mainEntityOfPage' itemscope='itemscope'/>

2. Memperbaiki Struktur Data Pada datePublished Dan dateModified
Struktur data datePublished dan dateModified merupakan sebuah schema markup yang bertujuan untuk menandai waktu postingan itu diterbitkan dan dimodifikasi (diperbarui).

Jika struktur data tersebut error maka cari Kode berikut (kode yang sama dari saya pada nomor 1 tadi).
<div class='post hentry' expr:id='&quot;post-body-&quot; + data:post.id' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>

Lalu letakkan kode berikut ini berada dibawah kode tadi
<meta expr:content='data:post.timestampISO8601' itemprop='datePublished'/>
<meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/>

3. Mengatasi Struktur Data Error Pada Image Object
Struktur Data Image Object ialah untuk mengidentifikasi gambar pada sebuah artikel blog kita, jika kode ini tidak ada maka akan menjadi error. Bagian ini struktur data yang paling susah untuk diperbaiki menurut saya, tapi untungnya saya sudah menemukan solusinya.

Silahkan kalian cari kode <meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified'/> dan letakkan kode ini dibawah kode tersebut.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject' style='display:none;'>
<img expr:src='data:post.firstImageUrl'/>
<meta expr:content='data:post.firstImageUrl' itemprop='url'/>
</div>
<b:else/>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject' style='display:none;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7QDNI9OEY4A1IGKU1bAFRnmoXDzhYTVqBsFtopiInph_WsU-FC-Bq5HziOzXLD_S9sCr9XiDQ9VHtDicCDMAxcaFiT_mjSrbl7OonJ3LDytmDFgHuQ5OUh67X7vIPY1X0eAFt9fqEbIo/s1600/V+Vuiral+Favicon+Color+psd.png'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7QDNI9OEY4A1IGKU1bAFRnmoXDzhYTVqBsFtopiInph_WsU-FC-Bq5HziOzXLD_S9sCr9XiDQ9VHtDicCDMAxcaFiT_mjSrbl7OonJ3LDytmDFgHuQ5OUh67X7vIPY1X0eAFt9fqEbIo/s1600/V+Vuiral+Favicon+Color+psd.png' itemprop='url'/>
</div>
</b:if>

Kalian juga bisa mengganti url gambar Image Object tersebut dengan url logo ataupun favicon blog kalian.

4. Memperbaiki Struktur Data Pada Author
Struktur data pada author ialah untuk mengenali siapa penulis atau pengarang blog tersebut. Biasanya kode pada template bawaan blogger error pada bagian ini sehingga perlu diganti.

Cari kode berikut
<b:if cond='data:post.authorProfileUrl'>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<data:post.author/>
</a>
<b:else/>

Kemudian kalian ganti dengan kode dibawah ini
<b:if cond='data:post.authorProfileUrl'>
<span class='post-author vcard' itemtype='https://schema.org/Organization'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</span>
</b:if>

5. Mengatasi Struktur Data Pada Publisher
Jika publisher adalah seorang penulis alias content writer pada blog tersebut maka struktur data Publisher bertujuan untuk menandai pemilik hak paten seutuhnya tentang blog tersebut.

Cari kode atau tag memiliki property dan value itemtype='https://schema.org/BlogPosting' seperti kode berikut.
<div class='post hentry' expr:id='&quot;post-body-&quot; + data:post.id' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>

Setelah ketemu maka silahkan kalian tambahkan kode berikut ini dibawah kode tadi.
<div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
<div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject' style='display:none;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7QDNI9OEY4A1IGKU1bAFRnmoXDzhYTVqBsFtopiInph_WsU-FC-Bq5HziOzXLD_S9sCr9XiDQ9VHtDicCDMAxcaFiT_mjSrbl7OonJ3LDytmDFgHuQ5OUh67X7vIPY1X0eAFt9fqEbIo/s1600/V+Vuiral+Favicon+Color+psd.png'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7QDNI9OEY4A1IGKU1bAFRnmoXDzhYTVqBsFtopiInph_WsU-FC-Bq5HziOzXLD_S9sCr9XiDQ9VHtDicCDMAxcaFiT_mjSrbl7OonJ3LDytmDFgHuQ5OUh67X7vIPY1X0eAFt9fqEbIo/s1600/V+Vuiral+Favicon+Color+psd.png' itemprop='url'/>
<meta content='150px' itemprop='width'/>
<meta content='150px' itemprop='height'/>
</div>
<meta expr:content='data:blog.title' itemprop='name'/>
</div>

Silahkan kalian ganti url gambar tersebut dengan url logo blog kalian masing-masing.

6. Memperbaiki Struktur Data Name Dan Headline
Cari kode berikut ini, biasanya terdapat dua kode atau lebih yang mirip dengan ini.
<h1 class='post-title entry-title'>

Lalu ganti kode tersebut dengan kode berikut ini.
<h1 class='post-title entry-title' itemprop='name headline'>

Baca juga:

Itu tadi merupakan artikel yang membahas Cara Ampuh Memperbaiki Error Pada Struktur Data Blogger (Lengkap) yang dapat saya bagikan kepada kalian semua.

Jika kalian sudah mengikuti tutorial di atas maka jangan lupa untuk menyimpan perubahan template blog kalian dan mengeceknya di google data struktur untuk melihat hasil perbaikannya.

Senin, 13 Januari 2020

10 Cara Praktis Dan Efektif Untuk Mempercepat Loading Blog

Cara Praktis Dan Efektif Untuk Mempercepat Loading Blog Di Blogger/Blogspot. SEO On Page merupakan suatu hal yang sangat penting untuk diterapkan pada sebuah website, sebab ada banyak sekali cara untuk melakukan optimasi SEO On Page, salah satunya ialah dengan mengoptimasi kecepatan website itu sendiri.

Dengan melakukan optimasi pada sebuah blog maka hal itu juga dapat membuat para pengunjung kita merasa nyaman sehingga dapat meningkatkan kualitas blog kita. Untuk mengoptimasi juga tergolong sangat mudah dan simpel, silahkan simak penjelasan lengkapnya di bawah ini.

Tips Mengoptimasi Loading Blog Di Blogger/Blogspot Agar Fast Loading

Cara Praktis Dan Efektif Dalam Mempercepat Loading Blog

1. Mencopot Widget

Langkah pertama yang dapat kalian lakukan ialah mencopot semua widget yang tidak penting, sebab terlalu banyak widget maka loading blog kita akan menjadi berat sehingga waktu untuk menampilkan halaman blog kita sangat lama.

2. Membatasi Jumlah Postingan

Membatasi jumlah postingan pada beranda alias homepage juga dapat mempengaruhi kecepatan blog. Semakin banyak jumlah artikel yang tampil di homepage maka akan semakin berat pula loading blog kita. Maka dari itu kita harus membatasi jumlahnya dengan menampilkan maksimal 4-8 artikel saja.

3. Membatasi Jumlah Iklan

Iklan merupakan sebuah media promosi yang paling efektif untuk mandapatkan sumber penghasilan dari blog, sebab melalui iklan inilah para blogger akan mendapatkan uang atau bayaran dari para pengiklan karena telah memasarkan produknya.

Perlu kalian ketahui juga, memasang iklan banner itu sama saja kita memasang sebuah widget. Jadi hal ini juga dapat mempengaruhi loading blog, terutama iklan banner yang memakai gambar berukuran besar.

Maka dari itu kita harus mengoptimalkan pemasangan iklan agar tidak mengganggu performa blog dengan membatasi jumlah iklan tersebut.

4. Mengecilkan Size File Gambar

Mengecilkan ukuran file gambar ternyata juga dapat berpengaruh besar dengan kecepatan blog, sebab gambar menjadi file yang sangat membutuhkan banyak sekali resource. Maka dari itu sebelum kita memposting gambar di artikel blog sebaiknya kita harus mengompresinya terlebih dahulu.

Untuk mengkompresi sebuah gambar kita dapat memakai software Adobe Photoshop atau bisa juga dengan memakai tool online di internet seperti TinyPNG dan masih banyak lagi.
Baca juga:

5. Gunakan Script Lazy Load Gambar

Jika kalian tidak ingin repot repot untuk mengurusi file gambar, maka kalian bisa mengakalinya dengan memasang script lazyload untuk gambar seperti yang sudah saya tunjukkan di tutorial sebelumnya.

6. Pasang Script Lazy Load Iklan Adsense

Khusus untuk kalian para publisher iklan google adsense, kalian dapat memanfaatkan script lazyload iklan adsense yang satu ini agar loading blogmu tetap stabil walaupun kamu memasang banyak iklan di halaman blog tersebut.

7. Minify Kode CSS Dan JS

Kode CSS dan JavaScript merupakan sebuah kode membutuhkan banyak sekali sumber daya, sebab kode ini dapat dipakai untuk memanipulasi tampilan ataupun mengeksekusi sebuah data, sehingga kode ini sering ditulis berulang-ulang.

Agar tidak menghabiskan banyak resource, maka kita dapat mengkompresi kode CSS dan JS dengan memanfaatkan tool Minify Code yang bisa kalian gunakan di halaman berikut Css And Javascript Minify Tool untuk mengurangi karakter yang tidak penting pada script tersebut.

Selain itu juga kita dapat mengumpulkan semua script CSS dan JS menjadi satu tempat agar lebih praktis.
Contoh kode script internal yang sudah diminify:
Kode CSS
<style>
/* related post */
.widget_popularpost{}
/* popular post */
.widget_sosialmedia{}
/* label post */
.widget_label{}
</style>

Kode JS
<script>
// kode untuk related post
var_relatedpost{()};
// kode untuk featured post
var_featuredpost{()};
// kode untuk lazy load
var_lazyload{()};
</script>

8. Gunakan Internal Script

Cara Praktis Dan Efektif Dalam Mempercepat Loading Blog 2
Selain melakukan kompresi file CSS dan JS pada template blogger, kita juga dapat meringankan loading blog dengan melakukan trik berikut. Yaitu menerapkan metode pemasangan script di internal.

Pada penempatan atau pemasangan sebuah script css dan js biasanya banyak yang diletakkan disimpan di hosting luar agar bisa diakses oleh banyak blog.
Namun hal ini tentu saja akan memperlambat loading blog karena request data skrip tersebut harus menunggu respon dari server dan juga dipengaruhi oleh banyaknya client yang mengakses server tersebut, sehingga waktu yang diperlukan untuk megeksekusi script tersebut akan lama.
Contoh script eksternal:
CSS
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

JS
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js'/>

Di sisi lain pengnyimpanan skrip di internal yang akan membuat proses request data menjadi cepat dan tidak ada gangguan server luar, selain itu pengelolaan script di internal script juga akan lebih mudah.

Contoh script internal:
CSS
<style>
/* tombol sosmed*/
.socmed_btn{display:block;margin:10px;text-align:center}
.socmed_btn a{text-decoration:none;display:inline-block}
</style>

JS
<script type='text/javascript'>
//Numbered Navigation Menu
  /*<![CDATA[*/
    var perPage=8;
    var numPages=2;
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
  /*]]>*/
</script>

Lantas apa solusinya? solusinya kalian hanya perlu menyalin kode css dan js yang kalian simpan di hosting eksternal, lalu kalian simpan di dalam template blog kalian sendiri.

9. Menghapus Kode Bawaan CSS, JavaScript Dan Widget Bundle Blogger

Cara Praktis Dan Efektif Dalam Mempercepat Loading Blog 3
Blogger merupakan sebuah platform media sosial berjenis blog, platform ini dapat kita nikmati dengan gratis namun kita tidak dapat leluasa dalam melakukan optimasi karena kita hanya menumpang di hosting google.

Sehingga kita tidak bisa menghapus script bawaan blogger yang berfungsi untuk mengeksekusi data seperti widget contact form, email subscribe, kolom komentar dan widget blogger lainnya. Tentu hal itu bisa saja membuat loading blog menjad lamban akibat terlalu banyaknya script yang akan diekseskusi.

Untuk mengatasi hal tersebut kita dapat melakukan trik agar script tersebut dengan memanipulasi kode pada tag head dan body. Untuk tutorialnya kalian bisa searching "Cara menghapus kode bawaan css bundle blogger".

Cara ini akan memberikan resiko yang besar, sebab beberapa fungsi widget pada blogspot akan menjadi tidak berfungsi serta tampilan pada blog akan menjadi berubah meskipun tidak signifikan.

10. Ganti Template

Apabila kalian sudah menerapkan semua tutorial di atas namun masih tetap tidak membuahkan hasil setelah diuji di hasil pagespeed insights, maka bisa jadi masalahnya terletak pada template blog kalian.

Beberapa alasan template blog yang load speednya sangat lemot ialah, terlalu banyak kode CSS dan JS eksternal, banyak script yang error, terlalu banyak script yang tidak penting untuk ditampilkan, kode javascript yang di encrypt dan masih banyak lagi alasan lainnya.

Jumat, 03 Januari 2020

2 Cara Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog

Cara Memasang Lazy Load Gambar Di Blogger Untuk Meningkatkan Kecepatan Blog. Setelah membahas Cara Mempercepat Loading Iklan Adsense Meggunakan Script Lazy Load, kini kita akan membahas Lazy Load untuk menunda request data pada gambar di dalam blog.

Fungsi dari lazy load ini akan menunda request data gambar pada blog selama loading blog dan hanya diekseskusi pada saat loading blog sudah selesai dan melakukan scrolling pada browser tersebut. Jadi dengan memasang script yang satu ini akan membuat blog kita menjadi fast loading.

Cara Mempercepat Loading Blog Dengan Script Lazy Load Gambar Di Blogspot (Blogger.com)

Cara Mempercepat Loading Blog Dengan Script Lazy Load Gambar Di Blog

A. Lazy Load Gambar Secara Otomatis

Dengan menggunakan script ini, maka kita tidak perlu repot repot untuk melakukan seleksi data gambar yang ingin di beri perintah lazy load. Sebab script ini secara otomatis akan menyeleksi semua tag gambar <img>.

1. Buka blog kalian dan masuk ke menu "Tema" lalu klik "Edit HTML"
2. Copy javascript berikut ini lalu letakkan tepat di atas kode </body>
<script type='text/javascript'>//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

3. Setelah selesai silahkan klik tombol "Simpan tema".
Setelah itu silahkan kalian cek sendiri blogmu, apakah script tersebut sudah.
Jika tampilan loading gambar pada blogmu mengalami penundaan maka script tersebut telah bekerja.
Baca juga:

B. Lazy Load Gambar Secara Manual Ala Igniel

Berbeda dengan script sebelumnya, script yang satu ini hanya akan berfungsi pada gambar yang diberi class "lazy" dan mengganti src pada tag gambar dengan menambahkan atribut data-src. Untuk lebih lengkapnya silahkan ikuti tutorial berikut.

1. Masuk ke blog, pilih menu "Tema" dan klik "Edit HTML".
2. Setelah cari kode tag <img> untuk gambar thumbnail blog kalian pada template tersebut.
Setiap template memiliki kode yang berbeda
<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/>

3. Jika kalian sudah menemukan kode tersebut, silahkan edit seperti ini:
Tambahkan atribut class='lazy' kedalam tag <img>
Ubah atribut expr:src menjadi expr:data-src pada tag <img>
Kemudian tambahkan kode ini juga kedalam tag <img>
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi85ldPhBCn8ub4Ju-lNwzA1epcs_2Fl5fRST6g1rXovjAPKU-DSSJCpb4BFkG2MTTHYazTNvCROej1DrMfgDQFPlgz89gssV5PCtlIFbzjG9oODBs1434yrum9ay3d6WCI5rgnk5kUbtbT/s1600/loadme.gif'

Jika sudah selesai, maka hasil akhir dari kode tersebut akan menjadi seperti ini.
<img class='lazy' expr:alt='data:post.title' expr:data-src='data:post.firstImageUrl' expr:title='data:post.title' itemprop='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi85ldPhBCn8ub4Ju-lNwzA1epcs_2Fl5fRST6g1rXovjAPKU-DSSJCpb4BFkG2MTTHYazTNvCROej1DrMfgDQFPlgz89gssV5PCtlIFbzjG9oODBs1434yrum9ay3d6WCI5rgnk5kUbtbT/s1600/loadme.gif'/>

4. Selanjutnya kalian copy kode dibawah ini dan letakkan di atas kode </body> lalu klik tombol "Simpan tema".
<script type='text/javascript'>//<![CDATA[
function ignielLazyLoad(){eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('u B(){Y(v e=o.1r("B"),t=0;t<e.1q;t++)Q(e[t])&&(e[t].N=e[t].1p("1n-N"))}u Q(e){v t=e.1t();Z t.1x>=0&&t.1w>=0&&t.1v<=(y.1u||o.T.1m)&&t.1k<=(y.1c||o.T.1b)}v b=["\\r\\m\\m\\D\\G\\a\\f\\c\\M\\n\\p\\c\\a\\f\\a\\k","\\h\\f","\\r\\c\\c\\r\\l\\A\\D\\G\\a\\f\\c","\\g\\h\\r\\m","\\p\\l\\k\\h\\g\\g","\\V\\1a\\1e\\R\\h\\f\\c\\a\\f\\c\\M\\h\\r\\m\\a\\m","\\w\\p\\a\\1l\\p\\c\\k\\n\\l\\c","\\r","\\1f\\w\\a\\k\\L\\1j\\a\\g\\a\\l\\c\\h\\k\\W\\g\\g","\\g\\a\\f\\q\\c\\A","\\w\\p\\a\\k\\W\\q\\a\\f\\c","\\c\\a\\p\\c","\\m\\h\\l\\w\\F\\a\\f\\c\\D\\g\\a\\F\\a\\f\\c","\\1i\\h\\m\\L","\\l\\g\\n\\l\\1g","\\p\\l\\k\\h\\g\\g\\1h\\h\\J","\\c\\h\\J","\\q\\a\\c\\S\\h\\w\\f\\m\\n\\f\\q\\R\\g\\n\\a\\f\\c\\1z\\a\\l\\c","\\A\\k\\a\\X","\\a\\1y\\a\\l","\\q\\a\\c\\D\\g\\a\\F\\a\\f\\c\\S\\L\\1F\\m","\\p\\l\\k\\h\\g\\g\\U\\a\\n\\q\\A\\c","\\n\\f\\f\\a\\k\\U\\a\\n\\q\\A\\c","\\J\\k\\a\\G\\a\\f\\c\\V\\a\\X\\r\\w\\g\\c","\\n\\c\\a\\F"];u I(d,j){y[b[0]]?y[b[0]](d,j):y[b[2]](b[1]+d,j)}I(b[3],B),I(b[4],B),o[b[0]](b[5],u(){b[6];Y(v d=o[b[8]](b[7]),j=d[b[9]],s=/1D|1B/i[b[11]](1G[b[10]])?o[b[12]]:o[b[13]],C=u(d,j,s,C){Z(d/=C/2)<1?s/2*d*d*d+j:s/2*((d-=2)*d*d+2)+j};j--;){d[b[1C]](j)[b[0]](b[14],u(d){v j,E=s[b[15]],x=o[b[1A]](/[^#]+$/[b[19]](1H[b[18]])[0])[b[17]]()[b[16]],z=s[b[1d]]-y[b[1s]],O=z>E+x?x:z-E,K=1o,H=u(d){j=j||d;v x=d-j,z=C(x,E,O,K);s[b[15]]=z,K>x&&P(H)};P(H),d[b[1E]]()})}});',62,106,'||||||||||x65|_0x1b5d|x74|_0xdd48x2||x6E|x6C|x6F||_0xdd48x3|x72|x63|x64|x69|document|x73|x67|x61|_0xdd48x4||function|var|x75|_0xdd48x7|window|_0xdd48x8|x68|lazy|_0xdd48x5|x45|_0xdd48x6|x6D|x76|_0xdd48xb|registerListener|x70|_0xdd48xa|x79|x4C|src|_0xdd48x9|requestAnimationFrame|isInViewport|x43|x42|documentElement|x48|x44|x41|x66|for|return|||||||||||x4F|clientWidth|innerWidth|21|x4D|x71|x6B|x54|x62|x53|left|x20|clientHeight|data|900|getAttribute|length|getElementsByClassName|22|getBoundingClientRect|innerHeight|top|right|bottom|x78|x52|20|trident|24|firefox|23|x49|navigator|this'.split('|'),0,{}));} eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('j 4=["\\7\\9\\9\\e\\d\\a\\b\\8\\i\\g\\h\\8\\a\\b\\a\\k","\\f\\c\\7\\9","\\7\\8\\8\\7\\m\\l\\e\\d\\a\\b\\8","\\c\\b\\f\\c\\7\\9"];5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;',23,23,'||||_0xdfb4|window|ignielLazyLoad|x61|x74|x64|x65|x6E|x6F|x76|x45|x6C|x69|x73|x4C|var|x72|x68|x63'.split('|'),0,{}));
//]]></script>

Setelah itu silahkan cek blogmu untuk memastikannya. Kalian juga bisa menggunajan tool khusus untuk test kecepatan blog kalian di GTMetrix dan Pagespeed Insight

Script ini tidak hanya untuk dipakai ada gambar thumbnail blog saja, melainkan kita juga dapat menggunakannya pada popular post dan juga featured post. Untuk pengaplikasiannya juga sama seperti di atas.

Jumat, 27 Desember 2019

Cara Mempercepat Loading Iklan Adsense Meggunakan Script Lazy Load

Cara Mempercepat Loading Iklan Adsense Meggunakan Script Lazy Load. Memasang iklan dari google adsense merupakan sebuah salah satu dari sekian banyak cara untuk mendapatkan uang dari blog, namun setelah memasang widget dari adsense tersebut biasanya hal ini sangat mempengaruhi performa dan kualitas blog.

Contohnya ialah jika blog kita terlalu banyak iklan biasanya hal ini bisa mengganggu pengunjung blog kita karena banyaknya iklan yang memenuhi tampilan layar HP dan Desktop mereka, selain itu hal ini juga dapat memperberat performa loading blog kita sehingga akses menuju halaman blog kita menjadi lama dan lemot sehingga membuat para pengunjung blog menjadi tidak betah berada di dalam blog kita.

Untuk mengakali hal tersebut kita dapat memakai teknik khusus dengan memakai script lazy load pada widget adsense untuk menunda reauest data sementara waktu sehingga membuat loading blog menjadi lebih ringan

Meringankan Loading Blog Dengan Menambahkan Script Lazy Load Untuk Iklan Google Adsense

Cara Mempercepat Loading Iklan Adsense Meggunakan Script Lazy Load

1. Silahkan kalian masuk kedalam situs blogger.com dan pilih blogmu.

2. Pilih menu "Tema" lalu klik "Edit HTML".

3. Setelah itu kalian cari semua kode seperti ini dan hapus kode tersebut
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

4. Selanjutnya tambahkan kode berikut ini sebelum atau di atas tag </body>
Jika tidak ada kode </body> maka letakkan di atas tag  <!--</body>--></body>
<script type='text/javascript'>
//<![CDATA[
// Script Lazy Load For AdSense
var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]>
</script>

5. Jika semuanya sudah selesai silahkan kalian klik "Simpan" untuk menyimpan kode tersebut.

Kalian juga dapat mengecek kecepatan blog kalian sendiri di Pagespeed Insight atau GTMetrix untuk melihat hasil perubahannya. Saya sendiri pernah membuktikannya sendiri, setelah menerapkan metode ini kecepatan blog saya naik sekitar 20%.
Baca juga:

Benarkah Memakai Script Lazy Load Untuk Adsense Bisa Menurunkan Pendapatan Blog?

Beredar kabar bahwa setelah menerapkan metode ini maka income dari google adsense akan mengalami penurunan karena iklan adsense akan menjadi jarang tayang.

Tapi kalian bisa melakukan riset sendiri untuk membuktikannya, jika mengalami penurunan maka lebih baik jangan menggunakan lazy load adsense daripada earning kalian menjadi kurang maksimal.

Kamis, 05 Desember 2019

Pengertian Apa Itu SEO Beserta Jenis Dan Manfaatnya Bagi Website

Pengertian Apa Itu SEO Beserta Jenis Dan Manfaatnya Bagi Website. Mungkin sebagian besar para blogger masih belum mengenal apa itu seo dan juga manfaatnya bagi blog mereka. Jika belum, maka kalian wajib belajar untuk memahaminya, sebab teknik inilah yang dapat membantumu untuk mengembangkan website agar bisa berkembang maju.

Untuk penerapannya, SEO akan terus berkembang dan berubah-ubah seiring dengan perubahan cara kerja Search Engine. Jadi mengerjakan teknik SEO bisa dikatakan tidak akan ada habisnya karena akan selalu update setiap saat.

Namun ada beberapa hal yang pasti tidak akan berubah walaupun mesin pencarian mengalami pembaruan terus menerus, yaitu pemahaman dasar mengenai konsep SEO yang akan saya jelaskan di bawah ini.

Memahami Tentang Konsep Atau Strategi Penggunaan SEO

Pengertian Apa Itu SEO Beserta Jenis Dan Manfaatnya Bagi Website
Trafik website dari penerapan SEO | Pixabay PhotoMIX-Company

1. Arti SEO

SEO merupakan sebuah singkatan dari Search Engine Optimization yang artinya ialah sebuah teknik yang berupaya untuk menempatkan posisi website kita berada di halaman mesin pencari dengan peringkat teratas. Beberapa contoh mesin pencari yang sangat populer yang sering dipakai untuk searching adalah Google, Yahoo, Bing, DuckDuckGo dan Yandex.

Dengan menerapkan teknik SEO ini maka kita bisa mendapatkan jumlah trafik yang begitu besar serta mampu mendatangkan visitor yang lebih tertarget dan sangat berpotensial. Sehingga teknik SEO juga bisa sering dipakai untuk perusahaan untuk menjalankan bisnisnya guna menargetkan produk website agar bisa memperluas pemasaran.

2. Jenis-Jenis SEO

Ada 2 jenis teknik SEO yang dapat kita terapkan untuk website kita dalam mendongkrak trafik website. Yakni menggunakan SEO On Page ataupun SEO Off Page, apabila kedua metode ini dikombinasikan dengan semaksimal mungkin maka kita akan mendapatkan hasil yang lebih optimal.

2.1. SEO On Page
Teknik SEO On Page merupakan sebuah tindakan untuk mengoptimasi website melalui konten website itu sendiri agar bisa mendapatkan ranking di mesin pencari.

Ada beberapa faktor yang mempengaruhi nilai seo pada teknik yang satu ini, yaitu penggunaan keyword pada Judul artikel, permalink, kustomisasi struktur dan kecepatan website, serta kualitas dari konten website itu sendiri.

2.2. SEO Off Page
Berbeda dengan metode sebelumnya yang melakukan optimasi dari dalam website, teknik selanjutnya yakni SEO Off Page adalah tindakan untuk mengoptimasi website dari luar.

Salah satu contoh yang sangat berpengaruh dalam faktor ini adalah sebuah backlink (inbound link), yang merupakan sebuah url untuk menuju ke website kita. Semakin banyak backlink yang mengarah ke situs kita sebagai bahan rujukan maka hal itu bisa meningkatkan kredibilitas web.

Ada banyak cara untuk mendapatkan backlink, yaitu menggunakan sosial media untuk melakukan promosi, memanfaatkan sosial bookmarking, melakukan guest post ke situs lain yang memiliki nilai DA tinggi.

3. Manfaat Dari Menerapkan SEO

Menggunakan teknik SEO kini menjadi sebuah hal sangat disarankan untuk menunjang website kita, sebab melalui metode inilah banyak sekali keutungan yang akan kita dapatkan untuk website kita.

3.1. Menguasai Mesin Pencarian
Apabila hampir semua halaman situs kita berada di Search Engine dan mendapat posisi pertama, maka kemungkinan besar kita akan menguasai trafik tersebut karena sebagian pengunjung lebih memilih konten yang berada di urutan pertama.

3.2. Mendapatkan Banyak Trafik Organik
Masih berhubungan dengan teori pertama, menggunakan strategi pemasaran melalui teknik SEO maka kita akan mendapatkan keuntungan yang lebih besar dalam menarik para visitor organik untuk mengunjungi situs kita, sebab mereka dapat dengan mudah menemukan situs kita melalui mesin pencari yang mereka gunakan.

3.3. Meningkatkan Brand Awareness Dan Kredibilitas
Jika kita sudah menguasai mesin pencarian di halaman SERP dan juga mendapatkan banyak visitor, maka secara tidak langsung hal itu bisa membuat brand kita akan menjadi populer di kalangan pengguna internet sehingga sudah familiar di ingatan mereka.
Baca juga:

Dari point-point di atas kita dapat menyimpulkan bahwa penggunaan SEO sangatlah penting dalam membangun sebuah website, baik itu untuk website yang sudah berumur maupun yang baru. Sebab persaingan dalam merawat sebuah website itu adalah dipengaruhi oleh kualitas konten yang telah kita optimasi sendiri.