Saturday 23 August 2014

Javascript Image Preloading

Javascript Image PreloadingSesuai dengan namanya, Javascript Image Preloading ini memang didesain dengan memanfaatkan kode/elemen DIV di dalam javascriptnya, yang difungsikan untuk membentuk konfigurasi penataan dan tampilan gambar / image serta teks. Dengan memanfaatkan fungsi seperti ini, ketika sebuah blog dibuka, maka akan ditampilkan gambar / image atau teks yang memberi pertanda bahwa blog sedang dalam proses loading / membuka..

  1. Login ke akun blogger sobat.
  2. Lalu masuk ke Rancangan > Edit HTML.
  3. Copy paste kode di bawah ini lalu pasang di atas kode </head>
    <script type='text/javascript'>
    var ld= (document.all);
    var ns4=document.layers;
    var ns6=document.getElementById&&!document.all;
    var ie4=document.all;
    if (ns4)
    ld = document.loading;
    else if (ns6)
    ld = document.getElementById("loading").style;
    else if (ie4)
    ld = document.all.loading.style;
    function init(){
    if(ns4){ld.visibility="hidden";}
    else if (ns6||ie4) ld.display="none";
    }
    </script>
  4. Setelah itu cari kode <body> lalu ganti dengan kode berikut
    <body onLoad='init()'>
    <div id='loading' style='position:fixed;top:0;left:0;bottom:0;right:0;background:#fff;z-index:10;'>
    <img alt='Loading' src='http://i1216.photobucket.com/albums/dd361/Garyu70/Blog/CircleGreenBlackLoader.gif'/></div>
  5. Save template dan lihat hasilnya.
Semoga bermanfaat..

Sunday 10 August 2014

Cara Menghapus Posting Blog yang Benar

Cara Menghapus Posting Blog yang BenarBeberapa di antara kita pernah menghapus artikel hanya melalui Dashbord Blogger dan langsung mengklik "Hapus" pada posting. Apakah Posting tersebut akan terhapus begitu saja?
Jawabannya adalah BENAR! Posting tersebut akan terhapus di post Blogger sobat, tetapi pernahkah sobat berfikir, Apakah artikel sobat telah benar - benar terhapus dari Search Engine?
Jawabannya adalah TIDAK! kenapa begitu, karena menghapus Posting Yang Benar Pada Blog yaitu melalui webmaster tool. Karena Standard untuk menghapus artikel yang baik dan benar seperti yang sobat ketahui jika posting sobat sudah terindeks dan masuk dalam SERP kemudian sobat hanya menghapus secara biasa melalui dashboard blogger, hal yang sangat sepele ini dapat menyebabkan Broken Link, Error Crawl, dan 404 Not Found yang membuat blog sobat semakin tidak SEO Friendly dan menyebabkan Bounce Rate semakin tinggi..
Berikut ini tips yg bisa saya bagikan..

  1. Login ke Google Webmaster Tools
  2. Pilih Blog sobat yg ingin di hapus Postingannya.
  3. Pada Sidebar Kiri klik Google Indeks Hapus URL
  4. Cara Menghapus Posting Blog yang Benar Agar SEO Friendly
  5. Klik Buat Permintaan Penghapusan Baru - Terus
  6. Cara Menghapus Posting Blog yang Benar Agar SEO Friendly
  7. Selanjutnya sobat akan di alihkan ke Halaman seperti di Bawah ini
    • Alasan : Pilih hapus laman dari hasil penelusuran dan cach
  8. Langkah terakhir klik kirim permintaan, tunggu 1X24 jam untuk Google menghapus url dari hasil penelusuran dan cache.
Mungkin seperti itu saja tips yg bisa saya bagikan hari ini mengenai Cara Menghapus Posting Blog yang Benar dan Semoga bermanfaat..

Monday 4 August 2014

CSS Sprite

Pernahkah sobat mendengar teknik css sprite? Saya rasa sobat semua sudah mengenal dengan teknik css sprite ini, namun bagi sobat yang belum mengenal mari kita sama – sama belajar dan memahami bagaimana teknik dasar dari css sprite.
Sebagian besar masalah berat sebuah blog dipengaruhi dari berbagai aspek salah satunya adalah dari penggunaan images seperti problem yg terjadi di blog ini adalah emoticon yg sayang gunakan di Komentar Notif ala Google Plus, bisa anda cek di http://gtmetrix.com.

CSS Sprite

Untuk membuat CSS Sprite, yang harus diperhatikan adalah posisi gambar (background-position), ukuran gambar (width - height), dan pengulangan gambar (background-repeat). Posisi dan ukuran gambar nantinya akan menentukan peletakan gambar, sedangkan pengulangan gambar akan berpengaruh terhadap tampilan gambar yang dihasilkan. Untuk itu gunakan CSS Sprite ini pada gambar - gambar yang tidak diulang (no-repeat)

Teknik css sprite adalah tekik untuk menggabungkan beberapa images menjadi satu supaya dalam pemanggilan images hanya satu yang dipanggil meski yang digunakan adalah images yang berbeda sekaligus mengurangi permintaan http://. Secara konsep dasar seperti itu.
Berikut contoh membuat css sprite:

HTML

<div>
<ul>
<li class="tw"><a href="#"></a></li>
<li class="yt"><a href="#"></a></li>
<li class="fb"><a href="#"></a></li>
<li class="in"><a href="#"></a></li>
</ul>
</div>

CSS

ul li{
float: left;
}
ul li a{
width: 60px;
height: 60px;
background: url(img/icon.png) no-repeat;
display: inline-block;
}
ul li.tw a{
background-position: 0px 0px;
}
ul li.yt a{
background-position: -70px 0px;
}
ul li.fb a{
background-position: -140px 0px;
}
ul li.in a{
background-position: -210px 0px;
}
  • Demo
Kesimpulan
dari code diatas penjelasan sprite terdapat pada penggunaan background yang memanggil satu image yaitu image “icon.png”. sedangkan penggunaan imagenya berbeda untuk setiap link. Pemanggilan image cuma dipanggil sekali. untuk mengatur posisi image, cuma memainkan background-position.

ada beberapa website yang menyediakan layanan untuk generator css sprite diantaranya pada situs:
dan banyak lagi website yang bisa kita gunakan untuk mempermudah membuat css sprite.