Cara Mempercepat Loading Blog With Script Lazyload

Cara Mempercepat Loading Blog With Script Lazyload - Cara mempercepat loading blog memang ada banyak macam dan cara, seperti yang jauh-jauh hari sudah pernah saya share disini yaitu antara lain, Kompres CSS Untuk Mempercepat Loading Blog, Cara Mempercepat Loading Blog With CSS External, dan masih ada banyak cara lain tentunya. Nah Script Lazyload awalnya saya tahu itu script/plugin untuk Wordpress, ternyata ada juga yang diterapkan di Blogspot.

jQuery Lazyload

Sebelum Sobat menerapkan script ini, sedikit saya beri ulasan sebelum dan sesudah menggunakan Script Lazyload.
Dengan tools ini Sobat mengetahui berapa kecepatan blog Sobat.
Dari situ Sobat bisa membedakan sendiri setelah dan sebelum menggunakan Script Lazyload ini.

Oke, berikut cara memasang Script Lazyload di Blogspot:

1. Login blogger pastinya
2. Masuk ke Rancangan
3. Klik Edit HTML dan klik Expand Template Widget (backUp template)
4. Cari kode </head>
5. Letakan script dibawah ini tepat diatasnya

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/easy-loading.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$(&quot;img&quot;).lazyload({placeholder : &quot;http://bit.ly/Qv60g5&quot;,threshold : 200});
});
</script>

6. Simpan Template.


Tambahan:
Pengalaman saya sendiri untuk kode blogger, tidak semua website/blog bisa lebih ringan menggunakan Script Lazyload ini.
Saat di cek, ada pula yang malah membuat blog lebih berat.
Jadi sebelum dan sesudah anda menggunakannya alangkah lebih baiknya sobat cek dulu disini.
Semoga bermanfaat.

Sumber referensi :
http://exitren.blogspot.com

Membuat Efek Tampilan Loading Halaman Pada Blogspot

Membuat Efek Tampilan Loading Halaman Pada Blogspot - Kemarin sudah saya bahas tentang Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3, nah pada sore hari ini saya akan membahas masih seputar efek-efek pada blogspot, yaitu Membuat Efek Tampilan Loading Halaman Pada Blogspot. Efek loading disini yaitu ketika kita masuk kesebuah wesite/blog, sebelum kita dibawa ke hompage blog, kita akan diperlihatkan efek loading terlebih dahulu. Jadi intinya seperti ada jeda sebelum kita masuk ke homepage blog/website. Tahu kan maksud ane ??
Cara membuatnya kita hanya butuh code CSS dan sedikit polesan JQuery.

Yowes, biar makin jelas bisa Sobat lihat Demonya dibawah ini:

-=[LIVE DEMO]=-

Tertarik ?? Bagi yang tertarik untuk membuatnya silahkan ikuti step by step berikut:

1. Seperti biasa login blogger sob!
2. Go to Design/Rancangan > Edit HTML > and ceklish pada "Expand Widget Templates"
3. Lalu cari kode  ]]></b:skin> dan letakan kode CSS berikut tepat diatasnya.

#loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000 url(URL_GAMBAR_ANDA) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.v2 #loading { display: none; }
 
#progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #f3f3f3;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#loader {
 background: url(<span style="background-color: #ea9999;">URL_GAMBAR_ANDA</span>) no-repeat center 25%;
 height: 100%;
 display: block;
}

Keterangan:
Perhatikan kode CSS diatas untuk URL_GAMBAR_ANDA
Gantilah gambar loading blognya sesuai kreasi sobat.
Tapi bila ingin seperti gambar yang ada pada DEMO, silahkan pakai gambar ini:
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9xbQGE0-oXj6VyMfHYTrZdWf0KkpThAlInRy774IAtYdrjiVb1DmSd69Lfetzsmlo4tljLdgO1qwF_RtDtEB0RuOtkWimnc-h5ViTH_BVhl963Ob2U9zaSMyw94jn_mmQOdTgwDV1vUB7/s1600/loading.gif)

5. Bagian kedua yaitu menambahkan script JQuery, cari kode </head> dan taruh script JQuery berikut tepat diatasnya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Kalau script JQuery diatas sudah ada di blog sobat, maka tidak perlu lagi memasangnya.
Kemudian tambahkan lagi script berikut dibawahnya:

<script>
(function($){

$("html").removeClass("v2");

$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });

$(window).load(function(){
 
    $("#progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#loading").fadeOut("fast",function(){ $(this).remove(); });
    });
});
})(jQuery);
</script>

6. Next lanjut untuk edit HTML. Cari kode <body> letakan kode berikut tepat dibawahnya.

<div id='loading'>
<div id='progress-bar'></div>
<div id='loader'>Loading...</div>
</div>

7. Simpan template dan lihat hasilnya.

Tambahan:
Ingat, untuk hasil yang sudah kita buat diatas itu efek loadingnya disetiap halaman yang kita buka!
Jadi bagi kalian yang hanya ingin tampilan loading blognya hanya di Home Page'nya saja, silahkan ganti kode HTML pada langkah No.6 dengan kode dibawah ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='loading'>
<div id='progress-bar'></div>
<div id='loader'>Loading...</div>
</div>
</b:if>

Selesai sob! Selamat mencoba Membuat Efek Tampilan Loading Halaman Pada Blogspot, dan semoga sukses. Bila sobat mengalamai kesulitan dalam prakteknya bisa sobat langsung tanyakan dengan berkomentar pada tread ini.

Tempat Bertanya, Kritik, Saran, Ataupun Request Seputar Tutorial Blogspot

Assalamu'alaikum - Langsung saja gan, disini adalah tempat bagi sobat kode-blogger untuk bertanya dan memberikan kritik dan saran. Ataupun bagi sobat yang ingin request tutorial, tips dan trik seputar blogspot bisa sobat req disini juga.





Caranya yaitu dengan berkomentar pada tread ini, atau bisa juga disini
Sekian dan terimakasih.

Regard - kode-blogger

Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3

Setelah kemarin posting tentang Cara Memasang Rating Bintang Rich Snippets Pada Blogspot Kali ini lanjut lagi share tentang Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3. Efek gambar pada postingan blog, pastinya akan membuat blog lebih enak dipandang mata. Seperti yang kita tahu, ada banyak macam dan cara untuk membuat efek pada gambar di postingan blog, salah satunya yaitu efek image dengan JQuery, tapi yang akan saya bahas disini yaitu efek image dengan CSS3. Dibawah ini merupakan kumpulan efek-efek gambar pada postingan blog yang bisa saya kumpulkan.

Wuookeee.. langsung saja praktek sob !!
1. Login blogger
2. Pergi ke Edit HTML
3. Beri ceklist pada Expand Widget Templates
4. Cari kode CSS .post img dan .post img:hover, bila ada kode tersebut ganti/replace dengan kode yang saya siapakan dibawah. Tapi bila tidak ada kode seperti diatas, tinggal paste'kan saja diatas kode ]]></b:skin>

DEMO : Arahkan mouse ke gambar dan lihat efeknya.
Dan berikut adalah KODE CSS beserta DEMO untuk efek gambar pada postingan blog :

.post img {
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
    transform:  rotate(+2deg);
    -o-transform: rotate(+2deg);
    -webkit-transform:  rotate(+2deg);
    -moz-transform: rotate(+2deg);
}
.post img:hover {
    box-shadow:  0 3px 6px rgba(0,0,0,.5);
    transform:  rotate(-1deg);
    -webkit-transform:  rotate(-1deg);
    -o-transform:  rotate(-1deg);
    -moz-transform: rotate(-1deg);
}

.post img {
    height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.post img:hover {
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

.post img {
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
}

.post img {
    border-radius: 30px 0 30px 0;
    -moz-border-radius: 30px 0 30px 0;
    -webkit-border-radius: 30px 0 30px 0;
    -o-border-radius: 30px 0 30px 0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
}

.post img{
    transition:all 1.2s ease-out; 
    -o-transition:all 1.2s ease-out; 
    -moz-transition:all 1.2s ease-out; 
    -webkit-transition:all 1.2s ease-out; 
} 
.post img:hover {
    z-index:99;
    transform:rotate(-10deg) scale(1.4) translate(5px,-3px);  
    -o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
    -moz-transform:rotate(360deg) scale(2) translate(1px,-3px); 
    -webkit-transform:rotate(30deg) scale(2) translate(10px,-3px);
    box-shadow: 0 3px 6px rgba(0,0,0,.5);
} 

5. Bila sudah memilih salah satu efek gambar diatas, jangan lupa Save Template.

Nah, simpel dan gampang kan tutorialnya sob ??
Demikian ulasan saya tentang Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3. Semoga bermanfaat, dan salam Kode Blogger \m/

Cara Memasang Rating Bintang Rich Snippets Pada Blogspot

Tutorial Lengkap Cara Memasang Rating Bintang Rich Snippets Pada Blogspot, dan juga reviewer yang sering kita jumpai pada pencarian Search Engine Google yang pastinya sudah tidak asing lagi bagi kita. Emmm.. sebelum praktek, mungkin ada yang masih bingung dengan judul diatas ya ?? Yang akan saya bahas pada tutorial kali ini, bisa Sobata lihat hasilnya pada gambar dibawah ini:






Langkah-Langkah Memasang Rating Bintang Rich Snippets Pada Blogspot

1. Buatlah Akun Google Plus
Sebelumnya pastikan sobat harus sudah memiliki akun Google+, gunanya yaitu untuk mendapatkan ID google+ serta untuk menghubungkan google+ dengan blog. Bagi yang belum punya silahkan meluncur Kesini. Dan cara ini harus sobat praktekan terlebih dahulu.
Bila sobat sudah punya akun Google+, langsung saja ambil kode ID Google+, caranya pergi ke profil Google+, dan copy ID Google+'nya, lihat gambar dibawah ini:

Selanjutnya Merubah Profil Blogger ke Google+
Caranya:

• Login ke blogger
• Pada tombol setting di kanan atas, pilih Terhubung ke Google+

• Masuk ke halaman baru, centang persetujuan Anda menghubungkan Blog dengan Google+. Kemudian klik tombol Beralih Sekarang Juga.

• Pada bagian Kontributor Untuk, centang blog Anda. Kemudian klik tombol Tambahkan Blog.
• Sampai disini anda sukses menggunakan profil Google + untuk blog Anda.

2. Verifikasi Akun Google Plus Dengan Blog
Sebelum edit, bagi yang masih belum berhasil menerapkan cara ini, coba buatlah sebuah postingan "About me"yang didalamnya ada text yang melink ke goolge plus sobat. Dengan cara menambahkan atribut rel="me" pada link tersebut.
Bila masih bingung saya beri contohnya:

Masukan kode dibawah ini kedalam postingan "About Me" yang sobat buat. Jangan lupa "Viyan Pradita" diganti dengan nama autor blog sobat.
Dan lagi mode dalam postingan dengan mode "Edit HTML" jangan yang "Compose".

<a href="https://plus.google.com/102285791405845958439"rel="me">Viyan Pradita</a>

Dan text yang diberi rel="me" itu cukup satu saja.
Selanjutnya cara verifikasinya yaitu sama saja dengan menautkan akun google+ dengan blog.
Ikuti langkah-langkah berikut:

• Menuju ke profile google plus sobat
• Edit Profile
• Geser kebawah dan cari "Contributor to" Klik dan Add custom link.
• Masukan Link "About me" yang sudah sobat buat tadi, Lihat gambar dibawah ini:
  
  
  
  
  
• Lalu Save. 

3. Edit HTML Blog

• Login Blogger
• Pergi ke Design/Rancangan > Edit HTML, beri centang pada "Expand Widget Templates"
• Cari kode <head> dan letakan kode berikut dibawahnya
  
  

  <b:if cond='data:blog.url == data:blog.homepageUrl'><link href='https://plus.google.com/102285791405845958439' rel='publisher'/></b:if>

  
  
• Ganti yang berwarna Merah dengan ID Google Plus Sobat masing-masing, dan Perhatikan kode berwarna Biru (biasanya sudah ada) bila sudah ada tinggal disisipkan saja kode yg berwarna Hijau seperti pada kode diatas.
• Lanjut cari kode <body> , dan letakan kode berikut tepat dibawahnya
  
  

  <div> <div itemscope='' itemtype='http://data-vocabulary.org/Review'>

  
  
• Cari lagi kode </body> dan letakan kode berikut tepat diatasnya
  
  

  </div></div>

  
  
• Selanjutnya carilah kode HTML judul postingan sobat, Ini yang rada ribet, tapi kalo dicermati yo gampang sebenernya. Karena setiap template blog memiliki kode judul postingan yang berbeda-beda seperti h1, h2, h3 . Dan rata-rata yang judul posting mempunyai tag heading h3. Kalo di blog saya sendiri kode judul postinganya ada di tag heading h2. LIhat gambar dibawah ini biar jelas:
  
  
  
  
  
• Lebih mudah lagi bagi sobat yang sudah memasang breadcrumbs, biasanya kodenya ada dibawah kode breadcrumbs navigasi blog. Perhatikan gambar diatas, tambahkan kode yang di block warna hitam. Hasilnya bila ditampilkan dengan kode akan seperti dibawah ini:
  
  

  <span itemprop='itemreviewed'><span itemprop='description'> 
  <h2 class='post-title entry-title'> 
  <b:if cond='data:post.link'> 
  <a expr:href='data:post.link'><data:post.title/></a> 
  <b:else/> 
  <b:if cond='data:post.url'> 
  <a expr:href='data:post.url'><data:post.title/></a> 
  <b:else/> 
  <data:post.title/> 
  </b:if> 
  </b:if> 
  </h2>
  </span>
  </span> 
  

  
  
• Tambahkan kode yang diberi warna merah.
• Lanjut lagi cari kode <span class='fn'><data:post.author/></span> dan tambahkan kode yang berwarna merah, maka hasilnya akan seperti ini:
  
  

  <span class='fn'><span itemprop='reviewer'><data:post.author/></span></span>

  
  
• Masih ada lagi sob, hehehe... yang baca aja capek, apalagi yang nulis yah ?? :)) 
• Langkah selanjutnya proses pemasangan Rating bintang Rich Snippetnya di Artikel blog sobat. Caranya cukup mudah tinggal sobat beri kode dibawah ini di setiap posting blog:
  
  

  Rating: <span itemprop="rating">4.5</span>

  
  Atau bisa dengan kode yang lebih lengkap:
  
  

  Rating: <span itemprop="rating">4.5</span>
  Description: <span itemprop="description">ISI JUDUL POSTING SOBAT</span>
  Reviewer: <span itemprop="reviewer">NAMA AUTHOR SOBAT</span> - Itemreviewed: <span itemprop="itemreviewed">ISI PENJELASAN DAI JUDUL POSTING SOBAT</span>

  
  
• Selesai... Dan cek hasil kerja sobat disini dengan memasukan link url blog sobat. Bila berhasil, hasilnya akan seperti ini:
  
  
  
  
  

Proses dan cara diatas sudah saya praktekan dan berhasil. Demikian ulasan saya tentang Cara Memasang Rating Bintang Rich Snippets Pada Blogspot. Selamat mencoba.

Article Information:
Description: Cara Memasang Rating Bintang Rich Snippets Pada Blogspot
Reviewer: Viyan Pradita - Itemreviewed: Cara Memasang Rating Bintang Rich Snippets Pada Blogspot - Rating: 4.5