Featured Post

Cara Membuat Blog di Blogger plus Setting SEO Standar

Cara Membuat Blog di Blogger plus Setting SEO Standar. "Publikasikan tulisan Anda, sesuai selera. Buat blog yang unik dan menar...

Cara Membuat Related Post Simpel plus Gambar di Blogger

0 Follow @romel_tea
Cara Membuat Related Post Simpel Gambar Thumbnail di Blogger
Related Post (Artikel Terkait) adalah widget blog berupa daftar tulisan yang memiliki kategori atau label yang sama.

Related post biasanya ditampilkan di bawah setiap posting blog, tapi ada juga related post yang disimpan di tengah-tengah postingan.

Related Post berfungsi sebagai navigasi sekaligus tautan internal. Daftar judul tulisan terkait ini mendorong pembaca melihat posting lainnya.

Related post juga baik untuk SEO dan meningkatkan pageviews atau jumlah halaman yang dibuka oleh pengunjung.


Cara Menambahkan Related Post

Berikut ini Cara Membuat Related Post Simpel plus Gambar di Blogger sebagaimana gambar di atas. Kode berikut ini akan menampilkan judul, ringkasan, dan gambar kecil sehingga lebih menarik. Kodenya dari Maskolis.

1. Klik Tema > Edit HTML
2. Copas kode berikut ini di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Related Post */
#related_posts{margin-top:15px} #related_posts h4{color:#000;background:#f0f0f0;padding:10px;margin:0 0 5px;font-size:120%;} #related_img{margin:0;padding:0;} #related_img:hover{background:0} #related_img ul{list-style-type:none;margin:0;padding:0} #related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;} #related_img li a{color:#2672a0;} #related_img li a:hover{text-decoration:underline} #related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;} #related_img .news-text{display:block;text-align:justify;font-weight:normal;text-transform:none;color:#333;font-size:12px;} #related_img img{float:left;margin-right:7px;border:1px solid #ccc;padding:2px;width:60px;height:60px;max-width:100%;background:#fff} </style> <script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"http://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script> </b:if>

3. Copas kode berikyt ini di bawah kode <data:post-body/> yang kedua atau  di atas kode <div class='post-footer'> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both;'/>
 <div id='related_posts'>
 <h4>Related Posts :</h4>
 <b:loop values='data:post.labels' var='label'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/> </b:loop> <ul id='related_img'> <script type='text/javascript'>relatpost();</script> </ul> </div> </b:if>

4. Simpan Template!

Demikian Cara Membuat Related Post Simpel plus Gambar di Blogger. (blogromeltea.blogspot.com).*

Kode Tampilan Label Blog Keren, di Sidebar dan di Footer Blogger

0 Follow @romel_tea
Kode Tampilan Label Blog Keren, di Sidebar dan di Footer Blogger.

Tampilan Label Blog Keren, di Sidebar dan di Footer Blogger

LABEL adalah kategori atau tag postingan blog. Ditampilkan di sidebar, footer, atau di menu, label ini merupakan navigasi sekaligus internal link.

Jika diklik, akan terbuka halaman label (label pages) yang menampilkan postingan di label yang sama.

Cara Pasang Kode Tampilan Label Blog

Berikut ini kode Tampilan Label Blog. Desainnya seperti gambar di atas.

1. Tema > Edit HTML
2.Copas  kode lebel widget berikut ini di atas kode ]]></b:skin>

.label-size{margin:0;padding:0;position:relative}
.label-size a{float:left;height:24px;line-height:24px;position:relative;font-size:12px;margin-bottom:9px;margin-left:20px;padding:0 10px 0 12px;background:#0089e0;color:#fff;text-decoration:none;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px;border-top-right-radius:4px}
.label-size a:before{content:"";float:left;position:absolute;top:0;left:-12px;width:0;height:0;border-color:transparent #0089e0 transparent transparent;border-style:solid;border-width:12px 12px 12px 0}
.label-size a:after{content:"";position:absolute;top:10px;left:0;float:left;width:4px;height:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;-moz-box-shadow:-1px -1px 2px #004977;-webkit-box-shadow:-1px -1px 2px #004977;box-shadow:-1px -1px 2px #004977}
.label-size a:hover{background:#555}
.label-size a:hover:before{border-color:transparent #555 transparent transparent}

Tidak sesuai dengan selera Anda? Nih, masih banyak!

Kode Tampilan Label Widget Lainnya

Kode desain label widget gampak didapatkan kok. Intip aja di "sumber kode" CSS templatenya bagian label widget.

Label Blog

Kodenya:

/* Label */
.label-size-1, .label-size-2, .label-size-3, .label-size-4, .label-size-5 {font-size: 100%;opacity: 10;}
.cloud-label-widget-content {text-align: left}
.label-size {background-color: #56b8e2;display: block;float: left;margin: 0 3px 3px 0;color: #ffffff;
font-size: 11px;text-transform: uppercase;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
.label-size a, .label-size span {
display: inline-block;
color: #ffffff!important;
padding: 6px 8px;
font-weight: bold;
}
.label-size:hover {background-color: #333333}
.label-size:hover .label-count {background-color: #56b8e2}
.label-size:hover .label-count:before {border-right: 6px solid #56b8e2}
.label-count {
position: relative;
white-space: nowrap;
padding-right: 3px;
margin-left: -2.5px;
background-color: #333333;
}
.label-count:before {
content: "";
width: 0;
height: 0;
border: 0 solid transparent;
border-top-width: 5px;
border-bottom-width: 5px;
border-right: 6px solid #333333;
position: absolute;
top: 8px;
left: -6px;
}

Label Blog

Kodenya:

/* CSS label */
#sidebar-wrapper .Label li {background:#fff;color:#666;padding:5px;text-align:left;width:100%;border-bottom:1px solid #f1f1f1;transition:all .3s ease-out;}
#sidebar-wrapper .Label li:hover {background:#fff;color:#ef4824;}
#sidebar-wrapper .Label li:before {content:&quot;\f105&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px;
color:#666;transition:all .3s ease-out;}
#sidebar-wrapper .Label li:hover:before {margin:0 0 0 5px;padding-right:4px;color:#ef4824;}
#sidebar-wrapper .Label li a {color:#666;font-size:95%;transition:all .3s ease-out;}
#sidebar-wrapper .Label li a:hover {color:#ef4824;}
#sidebar-wrapper .Label li span{float:right;background-color:#999;color:#fff;line-height:1.2;margin:0 5px 0 0;padding:4px 6px;text-align:center;font-size:12px;transition:initial;border-radius:2px;}
#sidebar-wrapper .Label li span:hover{background-color:#ef4824;color:#fff}
#sidebar-wrapper .label-size{background:#fdfdfd;display:block;float:left;margin:0 4px 4px 0;font-size:13px;border:1px solid #e6e6e6;transition:all 0.3s;}
#sidebar-wrapper .label-size:hover{background:#ef4824;border-color:#b69c6c;}
#sidebar-wrapper .label-size a {display:inline-block;color:#444;padding:8px 10px;
font-weight:400;}
#sidebar-wrapper .label-size a:hover {color:#fff;}
#sidebar-wrapper .label-size a:before {content:&quot;\f02b&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#444;transition:initial;}
#sidebar-wrapper .label-size a:hover:before {content:&quot;\f02b&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}


Label Blog 


Kodenya:

/* CSS label */
.label-size{ margin:0; padding:0; position:relative; } .label-size a , .label-size span{ float:left; height:24px; line-height:24px; position:relative;font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; } .label-size a:before , .label-size span::before{ content:""; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent;border-style:solid; border-width:12px 12px 12px 0; } .label-size a:after , .label-size span::after{ content:""; position:absolute; top:10px; left:0; float:left; width:4px;height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; } .label-size a:hover , .label-size span::hover { background:#555;} .label-size a:hover:before , .label-size span::hover::before{border-color:transparent #555 transparent transparent;}

Desain Label Blog Recommended! Simple Keren nih!
Label Blog

Kodenya:

/* Labels */
.widget-content.list-label-widget-content {padding:0;}
.widget-content.cloud-label-widget-content {display:inline-block;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:10px;}
.label-count {background:#fff;white-space:nowrap;display:inline-block;padding:5px 7px;margin-right:3px;border:1px solid #FF9934;border-radius:4px;}
.label-count:hover {background:#fafafa;color:#222;border-radius:4px}
.Label li {background:#fff;color:#666;padding:5px;text-align:left;width:100%;border-bottom:1px solid #eee;transition:all .3s ease-out;}
.Label li:hover {background:#fff;color:#FF9934;}
.Label li:before {content:"\f105";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px;
color:#666;transition:all .3s ease-out;}
.Label li:hover:before {margin:0 0 0 5px;padding-right:4px;color:#29abe2;}
.Label li a {color:#666;transition:all .3s ease-out;}
.Label li a:hover {color:#FF9934;}
.Label li span{float:right;background-color:#999;color:#fff;line-height:1.2;margin:0 5px 0 0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:12px;transition:initial;border-radius:2px;}
.Label li span:hover{background-color:#FF9934;color:#fff}
.label-size{background:#fdfdfd;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;border:1px solid #FF9934;transition:all 0.3s;border-radius:5px;}
.label-size:hover{background:#FF9934;border-color:#FF9934;}
.label-size a {display:inline-block;color:#444;padding:8px 10px;
font-weight:400;}
.label-size a:hover {color:#fff;}
.label-size a:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#444;transition:initial;}
.label-size a:hover:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}
.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
.Label li:hover {color:#29abe2;}
.Label li a {color:#aaa;transition:all .3s ease-out;}
.Label li a:hover {color:#29abe2;}
.Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:13px;font-weight:400;border-radius:2px;}
.Label li span:hover{color:#29abe2}
.label-size{background:#fff;color:#fff;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;transition:all 0.4s;}
.label-size a {display:inline-block;color:#fff;padding:8px 10px;
font-weight:400;transition:initial;}
.label-size a:hover {background:#29abe2;color:#fff;transition:all 0.2s;}
label-size a:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#fff;transition:initial;}
.label-size a:hover:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}
.label-size:hover, #footer-wrapper-inner .label-size:hover{background:#29abe2;color:#fff;transition:initial;}
.label-count {background:#333;}

Label Blog 


Kodenya:

/*CSS Label*/
.label-size{display:block;float:left;background:#555!important;margin:0 1px 1px 0;color:#eee;font-size:100%}.label-size a:hover,.label-size span:hover,.label-size:hover{background:#3384ff}.label-size a,.label-size span{display:inline-block;color:#fff;padding:4px 4px}

Label Blog

Kodenya:

/* Label */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:10}.cloud-label-widget-content{text-align:left}.label-size{background:#0dd7b4;display:block;float:left;margin:0 3px 3px 0;color:#fff;font-size:11px;text-transform:uppercase}.label-size a,.label-size span{display:inline-block;color:#fff!important;padding:6px 8px;font-weight:700}.label-size:hover{background:#333}.label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#333;color:#fff!important}.label-size{line-height:1.2}

Cara Memasang Widget Label di Blog
1. Klik Tata Letak (Layout) > Tambahkan Gadget → Label2. 
2. Centang Cloud

Pastikan setiap tulisan atau postingan, dikasih nama Label. Isi klom Labels di sidebar kanan, "Post Setting". Ini akan menjadi halaman label secara otomati, juga menambah SEO blog.*

Jadwal Imsakiyah Ramadhan 1440 H / 2019 M - Rujukan & Link Download

0 Follow @romel_tea
Jadwal Imsakiyah Ramadhan 1440 Hijriyah / 2019 Masehi untuk Kota Bandung dan Kota Laian di Indonesia. Jadwal Puasa Resmi dari Kemenag RI.

Jadwal Imsakiyah Ramadhan 1440 H / 2019 M Bandung
Marhaban Ya Ramadhan! Selamat Datang Ramadan! Umat Islam insya Allah memulai puasa Ramadhan 1440 Hijriyah, Senin 6 Mei 2019.

PP Muhammadiyah menjadi ormas Islam pertama yang merilis awal puasa Ramadhan melalui Maklumat Hasil Hisab Ramadhan 1440 H, termasuk Idul Fitri dan Idul Adha.
  • 1 Ramadan 1440 H jatuh pada hari Senin Legi, 6 Mei 2019 M.
  • 1 Syawal 1440 H jatuh pada hari Rabu Legi, 5 Juni 2019 M. 
  • 1 Zulhijah 1440 H jatuh pada hari Jum’at Wage, 2 Agustus 2019 M. 

Pemerintah (Kementerian Agama) bersama Ormas Islam biasanya melakukan sidang itsbat (penetapan) sebelum mengumumkan awal puasa Ramadhan.

Namun, menurut perhitungan LAPAN, awal Ramadhan, Idul Fitri, dan Idul Adha akan sama hingga 2021 antara pemerintah dan ormas keagamaan.

Jadwal Imsakiyah Ramadhan 1440 H / 2019 M

Berikut ini imsakiyah resmi dari Kementerian Agama, bisa membuka laman Jadwal Imsakiyah Bimas Islam Kemenag RI.

Jadwal Imsakiyah Ramadhan 1440 H / 2019 M Kota Bandung

Jadwal Imsakiyah Ramadhan 1440 H / 2019 M Kota Bandung


Berikut ini jadwal imsakiyah Ramadhan untuk kota Bandung dan sekitarnya. Saya download dari laman Al Habib Info.

Jadwal Imsakiyah Ramadhan 1440 H / 2019 M Kota Bandung

Jadwal Imsakiyah Ramadhan 1440 H / 2019 M Kota Bandung

Arti Imsakiyah & Waktu Imsak yang Sebenarnya

Jadwal Imsakiyah secara praktis artinya jadwal puasa, yakni jadwal awal dan akhir puasa.

Menurut Kamus Besar Bahasa Indonesia (KBBI), imsak artinya:
  1. Saat dimulainya tidak melakukan hal-hal yang membatalkan puasa, seperti makan dan minum; 
  2. Berpantang dan menahan diri dari makan, minum, dan hal-hal yang membatalkan puasa mulai terbit fajar sadik sampai datang waktu berbuka.
Arti Imsak
Menurut ustadz saya, kata imsak itu bahasa Arab yang artinya "menahan".

Waktu Imsak ditentukan dari awal waktu shalat Subuh dikurangi 10 menit.

Namun, waktu imsak yang sebenarnya adalah awal waktu Subuh itu.

Jadi, sebelum adzan Subuh berkumandang --kecuali muadzinnya telat-- kita masih boleh sahur atau makan-minum.

Dibuatkannya waktu imsak, yakni awal waktu Subuh dikurangi 10 menit, untuk kehati-hatian saja, agar tidak "bablas".

Sebenarnya, tanpa jadwal khusus imsakiyah pun, tidak masalah, karena kita bisa merujuk pada awal waktu Subuh untuk mulai puasa dan awal waktu Magrib untuk terbuka.

Maka, selama Ramadhan, dua waktu sholat itulah yang paling ditunggu umat Islam, khususnya waktu Magrib. Bahkan, ada aktivitas kusus menunggu waktu Magrib yang dikenal dengan sebutan "ngabuburit".

Awal Ramadhan Sama Hingga 2021

Awal Ramadhan Kamis 17 Mei 2018
Lembaga Penerbangan dan Antariksa Nasional (Lapan) memprediksi penetapan awal Ramadhan mulai tahun ini hingga 2021 nanti akan sama antara pemerintah dan ormas keagamaan.

Kepala LAPAN Thomas Djamaluddin memprediksi, awal puasa Ramadhan tahun 2018 jatuh pada tanggal yang sama. Begitu juga hari raya Idul Fitri tidak akan ada perbedaan antara pemerintah dengan ormas Islam lainnya.

“Insya Allah sampai 2021 awal Ramadhan, Syawal dan Dzulhijjah akan seragam,” ungkap Thomas di situs resmi LAPAN.

Demikian sekadar berbagi link download dan rujukan Jadwal Imsakiyah Ramadhan 1440 H / 2019 M untuk Kota Bandung dan kota lainnya di Indonesia, plus pengertian imsak/imsakiyah dan awal Ramadhan. Wasalam. (blogromeltea.blogspot.com).*

Tips SEO: Cara Menambahkan Link di Posting Blog

0 Follow @romel_tea
Cara Membuat atay Menambahkan Link di Posting Blog (Link Building). Tautan Internal & Eksternal bagian dari Tips SEO.

link posting blog

LINK (tautan) adalah salah satu kelebihan dan kekuatan blog atau media online pada umumnya. Link tidak ada di media cetak dan media elektronik (radio & televisi). Hanya media online --termasuk blog-- yang bisa menyajikan atau membuat link.

Link memudahkan pembaca menambah informasi dan membantu blogger untuk memberikan rujukan sumber kepada pengguna.

Link juga menambah SEO blog dan potensial meningkatkan "jumlah halaman yang dikunjungi" (page views).


Dalam berbagai tips SEO, hampir selalu disebutkan pentingnya link building, yaitu menambahkan link internal dan eksternal, minimal satu tautan dalam postingan.

Link Internal adalah tautan yang mengarah ke posting blog lainnya di blog sendiri.  Link eksternal adalah tautan yang mengarah ke posting blog selain blog kita.

Contoh terbaik penggunaan link dalam postingan blog adalah situs Wikipedia. Begitu banyak link internal dan eksternal di sana. Terbukti, ampuh buat menaikkan peringkat di Google.

Cara Menambahkan Link di Posting Blog

1. Saat menulis posting, tandai (highlight) atau "Select All" kata atau kalimat yang akan diberi link.
2. Klik menu "Link" di atas.
3. Masukkan URL atau alamat link di kolom yang tersedia.

Cara Menambahkan Link di Posting Blog

Cara Menambahkan Link di Posting Blog

- Untuk memaskkan link internal, buka halaman depan blog Anda, cari postingan yang satu label atau satu topik, klik kanan dan copy link address.
- Untuk memasukkan link eksterna, buka halaman website yang akan ditautkan, copy linknya yang ada di address bar.

4. Beres!

Itu dia Tips SEO: Cara Menambahkan Link di Posting Blog.

Referensi: Link to other website.

Cara Mempercepat Loading Blog: Memasang jQuery Lazy Load

0 Follow @romel_tea
Kecepatan tampilan halaman (page speed) merupakan faktor SEO penting untuk peringkat atas halaman Google. Mesin telusur menyukai blog yang tampil cepat (fast loading). Demikian pula pengunjung.

Salah satu cara untuk mempercepat loading blog adalah memasang kode jQuery Lazy Load.

Cara Memasang jQuery Lazy Load untuk Mempercepat Loading Blog.


Lazy Load adalah penundaan pemuatan gambar di halaman web/blog yang panjang. Gambar di luar viewport tidak dimuat sampai pengguna menggulir ke sana.

Menggunakan Lazy Load pada halaman web yang panjang akan membuat halaman memuat lebih cepat. Dalam beberapa kasus ini juga dapat membantu mengurangi beban server.

Secara harfiyah, Lazy Load artinya "malas tampil". Kalo kita mah "mager" (malas gerak) :)

Jadi, denan adanya kode jQuery Lazy Load ini, foto atau gambar, yang menjadi salah satu faktor yang melambatkan loading, akan "malas tampil" hingga halaman discroll ke bawah. Si gambar baru nongol.

Template premium atau template seo friendly biasanya sudah dipasangi kode jQuery Lazy Load. Cek aja. Jika belum ada, pasang saja. Mudah kok pasangnya.

Cara Memasang jQuery untuk Mempercepat Loading Blog

1. Tema > Edit HTML
2. Copas kode berikut ini 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:"https://lh5.googleusercontent.com/-20YhsQ_Xw9Y/UjHQlUIi0UI/AAAAAAAAGIo/6_etIYcweEQ/h120/lazy+image.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

3. Save! Simpan template.

Beres. Kode jQuery Lazy Load untuk Mempercepat Loading Blog sudah terpasang. Wasalam. (blogromeltea.blogspot.com).*