Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Thursday, August 2, 2018

Cara Cepat Memasang Lazy Load di Blog

Cara Memasang lazy load sangaah mudah, agan pasti pernah mengunjungi blog atau situs web yang sangat lambat, padahal koneksi internet agan masih stabil. Pasti agan merasa resah dan ingin buru buru untuk menutup blog itu dan mencari informasi di blog lainnya. Hal ini pasti sangat tidak menguntungkan bagi para blogger atau publisher, dikarenakan akan mengurangi visitor maupun penghasilan. nah untuk mencegahnya agan perlu memasang lazy load di blog

Cara Kerja Lazy Load


Gambar tidak akan dimuat jika tidak dilihat, hal ini sangat menguntungkan bagi para reader maupun visitor, sehingga tidak akan memakan internet lebih banyak dan pembaca lebih nyaman untuk membaca tentunya. Hal ini juga menguntungkan bagi para blogger karena mendapatkan reader yang merasa nyaman.

Cara Memasang Lazy Load


  • Masuk ke blogger > tema > edit HTML


  • Lalu salin kode dibawah ini, dan letakkan diatas tag </body>

<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwbCrB-NoUG3m6EwH527K1pDvcGeeLhIvaCTAPlohWsCcYRkIYdzebbvdeqwHzvCgad8bNL-RHYsA81SZJW5L9Puhrvyc_vG3L0XQu-V5TkODplojmukjMujgXMO3iMTkT51_z7sm4jYE/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

  • Jika sudah kemudian agan simpan template, dan rasakan perubahannya.


Demikian cara memasang script lazy load untuk mempercepat loading blog. Semoga artikel yang saya tulis ini bermanfaat dan mempercepat loading blog agan.

Sunday, January 28, 2018

5 Cara Mempercepat Loading Blog Agar Fast Loading Dan Ringan [2018]


5 cara mempercepat loading blog agar fast loading. Hasil artikel ini saya dapatkan dari mana saja, berbagai sumber yang ada di internet, bertanya kepada beberapa ahli dan sedikit eksperimen. Jadi Artikel yang tertulis dibawah ini bukan hanya teori belaka, melainkan hasil dari praktek saya sendiri dan bisa dibuktikan sendiri kecepatan blog saya di Page speed insight dan GTmetrix.


Cara mempercepat loading blog


Agan bisa cek skor kecepatan blog saya versi page speed insight google dan GTmetrix. terlihat skor page speed insight blog saya ketika diakses melalui android adalah 99 dan versi desktop 87. Angka yang cukup untuk mendekati sempurna. Dan untuk GTmetrix sendiri adalah 92 skor yang cukup memuaskan bagi saya.


1. Kompres CSS


Cara pertama adalah mengkompres CSS. Karen CSS memiliki peran penting untuk mempercantik tampilan blog. Maka tidak menutup kemungkinan jika script CSS yang sangat banyak tersebut membuat loading blog kita lambat. Tenang saja cara ini tidak mempengaruhi tampilan blog sedikitpun, hanya saja jika ingin kembali mengedit tema tersebut akan sedikit lebih sulit karena script CSS yang menjadi tidak rapi setelah dikompres. Caranya kalian bisa lihat disini cara kompress CSS

2. Menghapus script bawaan blogger


Cara yang kedua ini mungkin sedikit beresiko untuk beberapa template gratisan, karena dapat merubah tampilan blog dan beberapa widget bawaan blogger tidak akan muncul dengan sempurna, tapi tenang saja kalian dapat mencari widget yang keren dari luar untuk menggantikan widget bawaan blogger yang lama. Dengan itu tampilan blog akan lebih keren dan tentunya fast loading. Caranya agan bisa lihat disini cara menghapus JavaScript yang menghalangi perenderan


3. Memang lazy load


Yang ketiga adalah memasang script lazy load. Agan pasti pernah mengunjungi blog atau situs web yang sangat lambat, padahal koneksi internet agan masih stabil. Pasti agan merasa resah dan ingin buru buru untuk menutup blog itu dan mencari informasi di blog lainnya. Hal ini pasti sangat tidak menguntungkan bagi para blogger atau publisher, dikarenakan akan mengurangi visitor maupun penghasilan. untuk mencegahnya agan perlu memasang script lazy load di blog. Sistem lazy load sendiri sangatlah sederhana, blog tidak akan meload gambar jika tidak dilihat oleh pengunjung, hal ini sangat menguntungkan bagi para reader maupun visitor, sehingga tidak akan memakan internet lebih banyak dan pembaca lebih nyaman untuk membaca tentunya. Hal ini juga menguntungkan bagi para blogger karena mendapatkan reader yang merasa nyaman. Cara memasangnya bisa lihat disini cara memasang script lazy load.

4. Mengkompres gambar


Untuk step ini saya sarankan menggunakan gambar berbasis vektor sebagai gambar pendukung. Karena jika memakai gambar bitmap objek gambar tersebut memiliki permasalahan ketika diubah ukurannya, khususnya ketika objek gambar diperbesar. Efek yang diidapat dari objek berbasis bitmap yakni akan terlihat pecah atau berkurang detailnya saat dicetak pada resolusi yang lebih rendah. Berbalik dengan vektor yang tidak akan pecah saat dicetak pada ukuran yang lebih rendah dan tidak akan mengurangi kualitas gambar tersebut.

5. menghapus script google plusone.js


Menghapus script bawaan yang menganggu perenderan //apis.google.com/js/plusone.js di blog tidaklah sulit, kemungkinan script ini juga akan membuat bounce rate Artikel sehingga blog tidak fast loading dan susah page one. Jadi untuk itu, sekarang kita akan belajar cara menghapus script google plusone.js dengan mudah. Caranya agan bisa lihat disini cara menghapus script google plusone.js 

Penutup


Itulah 5 cara jitu mempercepat loading blog agar super ringan dan fast loading. Jika ada cara yang lain, agan bisa berkomentar dibawah. Dan apabila ada kesalahan mohon dimaklumi karena saya sendiri juga masih dalam tahap belajar. Sekian dulu postingan kali ini semoga bermanfaat dan menginspirasi.

Sunday, January 14, 2018

Mempercepat loading blog dengan menghapus JavaScript & CSS yang menghalangi perenderan !

Mempercepat loading blog dengan menghapus JavaScript yang tidak perlu atau menghalangi perenderan blog sangat dibutuhkan bagi para blogger Indonesia, karena kebanyakan dari reader di Indonesia lebih memilih blog yang fast loading untuk dibaca. Jadi bagaimana caranya agar blog menjadi fast loading? Simak tutorialnya dibawah ini ya gan !!

Manfaat menghapus JavaScript dan CSS yang menghalangi perenderan


Agan pasti berfikir apa sih kegunaan selain untuk mempercepat loading blog? Tentu ada beberapa poin penting yang didapat, diantaranya yaitu:

  1. Mempercepat loading blog
  2. Mengurangi bounce rate Artikel
  3. Reader jadi lebih nyaman
  4. Artikel semakin mudah page one


Mempercepat loading blog dengan menghapus JavaScript & CSS yang menghalangi perenderan !!



  • Langkah pertama yaitu kita mencari apa yang menghalangi perenderan blog kita, kali ini masalahnya ada di

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

  • Lalu kita menuju blogger > tema > edit HTML. Dan cari kode


<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>

  • Kemudian ganti atau replace kode diatas itu tadi dengan kode dibawah ini


<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>


Kekurangan menghapus atau menambah atribusi async ini beberapa widget ada yang tidak beraturan. Seperti profil G+ dan beberapa lainnya.

Oke sekarang kita coba cek skor kecepatan blognya. Di page speed insight google. Oke itulah cara mempercepat loading blog dengan menghapus kode yang menghalangi perenderan. Semoga artikel ini bermanfaat dan blog agan jadi semakin fast loading.

Wednesday, December 13, 2017

Cara Membuat Artikel Terkait/Related Post Responsive Ditengah Postingan


Bagi agan yang sering mencari ilmu di Google dan membuka salah satu artikelnya pasti sudah tidak asing dengan kata "baca juga" ditengah artikel. Membuat related post atau cara membuat artikel terkait otomatis ditengah postingan. Manfaat memasang artikel terkait ini ada beberapa poin penting untuk blogger seperti


  1. Menambah jumlah pengunjung
  2. Meningkatkan kualitas internal link di blog


Cara membuat artikel terkait otomatis ditengah postingan.



  • Langkah awal yaitu buka blogger > Tema > Edit HTML > tambahan kode dibawah ini diatas tag </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>


  • Jika sudah tambahan kode CSS dibawah ini sebelum kode ]]></b:skin> atau </style> untuk memanggil kodenya.


Style 1


/* Related Post Style 1 */

.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}

.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}

.related-simplify ul{margin:0;padding:0}

.related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}

.related-simplify ul li:nth-child(odd){background:#fefefe}

.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}

.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}

.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}

.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}

.related-simplify a:hover{color:#0383d9;text-decoration:underline}

.related-simplify ul li:nth-child(n+4) {display:none;}

@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}

@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}


Style 2
Kalau yang ini nanti kembaran sama saya gan hehehe


/* Related Post Style 2 */

.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}

.related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}

.related-simplify ul{margin:0;padding:0}

.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}

.related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}

.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}

.related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}

.related-simplify a:hover{color:#0383d9;}

.related-simplify ul li:nth-child(n+4) {display:none;}

@media only screen and (max-width:768px){

.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}

.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}

.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}

.related-simplify ul li{padding:5px 0}

.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

Style 3


/* Related Post Style 3 */

.related-simplify{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:100%;border:6px double #fff;}

.related-simplify ul{background:rgba(38,62,87,0.8);margin:0;padding:20px}

.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}

.related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:60%;left:10px;transition:all .3s}

.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#f1c40f;}

.related-simplify a{color:#fff;font-size:17px;margin:0 0 0 30px;}

.related-simplify a:hover{color:#fff;text-decoration:underline}

.related-simplify ul li:nth-child(n+4) {display:none;}

@media only screen and (max-width:768px){

.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}

.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}

.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}

.related-simplify ul li{padding:5px 0}

.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}



  • Langkah terakhir cari dan ubah kode <data:post.body/> dengan kode dibawah ini untuk menampilkannya ditengah postingan



<div expr:id='&quot;post1&quot; + data:post.id'/>

<div class='related-simplify'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>

</b:if>

</b:loop>

</b:if>

<h4>Baca Juga</h4>

<script type='text/javascript'>

removeRelatedDuplicates();

printRelatedLabels();

</script>

</div>

<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>

<script type='text/javascript'>

var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);

var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);

var s=obj1.innerHTML;

var t=s.substr(0,s.length/2);

var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);

if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}

</script> 

Disetiap template mungkin ada beberapa kode <data:post.body/> agan cari satu persatu sampai muncul dihalaman artikel.

Jika semua langkah langkahnya sudah agan klik simpan dan lihat hasilnya. Dengan cara ini agan tidak perlu memasukkan manual beberapa link di postingan blog, demikian cara membuat artikel terkait otomatis ditengah postingan, Semoga bermanfaat.

Tuesday, December 12, 2017

Cara mengganti background blog dengan gambar


Cara mengganti background blog dengan gambar- Mengganti background atau latar belakang blog dengan foto dan gambar. jika agan menemukan artikel ini, pasti agan sudah bosan dengan backgroud di blog agan yang cuma warna saja, dan ingin menggantinya dengan gambar kesukaan agan agar terlihat indah atau sekedar pelampiasaan rasa bosan belaka, ya disini saya akan memberika tutorial mengganti background blog dengan gambar. Oke langsung sima totorial ini sampai selesai ya gan.

Cara mengganti background blog dengan gambar


Sebelumnya untuk ukuran gambarnya sendiri yaitu 1600px x 768px ukuran ini sudah saya tes sendiri dan sangat pas untuk blogger.

  • Pertama agan masuk ke blogger  >  Template > Edit HTML 
  • Lalu agan cari kode CSS dibawah ini. agar cepat menemukannya agan klik CTRL+F :



body {background:#e9eaed


Letak kode ini ada di bawah #layout jika background blog agan berwarna putih maka cari dengan kode body {background: #ffff

  • Dan tambahkan kode CSS dibawah ini untuk memberikan backgroundnya :


url (https://i.imgur.com/MBz6XEA.jpg)


https://i.imgur.com/MBz6XEA.jpg adalah kode gambarnya, agan bisa costum sendiri.

Maka jadi seperti ini :


body {background:#e9eaed url (https://i.imgur.com/MBz6XEA.jpg)

Jika sudah ditambahkan url backgroundnya maka otomati background sudah terganti jadi gambar yang agan costum, tapi backroundnya kalau discroll ikut kebawah dan gambarnya menjadi double, dan jika dilihat pengunjung masih belum rapi dan tidak responsive.

  • Maka agan tambahkan kode CSS dibawah ini agar tetap diam saat discroll dan tidak double :



fixed; margin:0;padding:0;background-size:100%


Sehingga jadi seperti ini :



body {background:#e9eaed url(https://i.imgur.com/MBz6XEA.jpg)fixed; margin:0;padding:0;background-size:100%



Jika sudah, sekarang background blog agan sudah sepenuhnya menjadi gambar, jadi begitulah cara mengganti background blog dengan gambar, semoga agan betah dengan background yang baru.