Cara Mempercepat Loading Blog / Website

Ada berbagai cara sederhana untuk mempercepat loading blog yang kita miliki. Lantas kenapa kecepatan loading blog berpengaruh bagi pengunjung blog? Jelas! Kecepatan loading blog akan sangat berpengaruh bagi pembaca / pengunjung blog kita. Bila loading blog tidak terlalu cepat atau bahkan terlalu lambat maka pengunjung akan merasa cepat bosan dan tidak mau malas membuka halaman yang lain. Bagaimana mau membuka halaman yang lain, dengan kecepatan loading halaman yang ada saja butuh waktu lama. Apalagi tidak semua pengunjung kita memiliki koneksi internet yang cepat, bisa jadi sebagian dari pengunjung blog justru menggunakan koneksi internet dial up dengan kecepatan yang bisa dibilang mengkhawatirkan. Untuk membuat loading blog kita lebih cepat ada beberapa hal yang harus diperhatikan:
1 Hosting blog yang cepat

Sesuaikan hosting blog anda dengan asal mayoritas pengunjung blog anda. Bila blog anda ditujukan untuk pengunjung blog yang berasal dari Indonesia maka sebaiknya anda memilih hosting yang memiliki server di Indonesia atau lokasi yang dekat dengan Indonesia, seperti Singapura misalnya. Dengan mengakses server di lokasi yang lebih dekat (Indonesia), otomatis kecepatan loading blog umumnya akan lebih bagus daripada blog/website yang berada pada server dengan lokasi lebih jauh (misal Amerika). Yang anda harus ingat, cara mempercepat loading blog ini sebaiknya digunakan sebelum anda membeli/menyewa hosting blog atau website anda. Usahakan pula untuk memilih penyedia jasa hosting yang dapat menyediakan atau menggunakan Content Delivery Network (CDN).
2 Content Management System (CMS) yang Cepat

Ada dua CMS yang patut diperhitungkan: WordPress dan Blogger. Kenapa? sebab kedua CMS tersebut sudah terbukti memiliki kecepatan loading blog yang bagus. Bukannya mau meremehkan CMS yang lain seperti Joomla, Drupal, de es be. Tapi selain wordpress dan blogger, CMS yang lain memiliki total ukuran file yang besar dan umumnya membutuhkan waktu yang lebih banyak untuk loading.
3 Kurangi beban CMS yang mengurangi kecepatan loading blog

Ketika anda menggunakan CMS, kadang anda menggunakan plugin yang lumayan banyak dan dapat membebani kinerja CMS. HilangkanHapus plugin yang anda tidak butuhkan pakai. Pasang dan gunakan plugin yang anda butuhkan saja. Selain itu, pada saat anda menggunakan plugin atau theme (tema) CMS, kadang pembuat plugin atau theme tersebut menaruh link ke website mereka atau website lainnya diluar website milik anda. Cari tahu link tersebut dan cari pula cara untuk mengatasinya atau setidaknya cara untuk membatasi akses link keluar tersebut.
4 Kurangi / minimalisasi penggunaan gambar dan animasi

Kecepatan loading blog juga sangat tergantung pada kecepatan loading gambar dan animasi, baik yang berasal langsung dari blog ataupun yang berasal dari iklan. Bila mungkin, buat saja thumbnail atau perkecil gambar dan menaruh link pada gambar tersebut. Dengan demikian bila bila user / pengunjung membutuhkan gambar yang lebih detail, user tinggal meng-klik gambar tersebut untuk mendapatkan gambar yang lebih jelasnya.
5 Gunakan Cache Blog / website

Cara mempercepat loading yang satu ini pada umumnya justru menggunakan plugin CMS. Dengan adanya cache, ketika sebuah halaman diakses oleh pengunjung maka halaman website / blog anda tidak perlu disusun dibangun dibentuk ulang. plugin akan mencari cache halaman tersebut dan tinggal menampilkannya pada user.







Sumber: http://desainwebsite.net/tip-internet-dan-website/cara-mempercepat-loading-blog/website#ixzz1WhJ8KKNI

READ MORE

Recent posts with thumbnail and simple spy

Widget recent post berikut selain memiliki effect animasi spy karena penggunaan script jquery juga dilengkapi dengan thumbnail dan captions.Cara pemakaiannya juga sangat mudah. Untuk contoh tampilannya bisa dilihat pada gambar disamping ini.

Recent posts with thumbnail and simple spy adalah recent post hasil dari pengembangan Mas Abu Farhan seorang blogger indonesia juga. saya hanya mengubah gambar Thumbnails No Image dari tinypic yang mungkin sudah nonaktif dengan gambar baru.



Untuk cara membuatnya adalah sebagai berikut:

1. Login blogger
2. Rancangan, Elemen laman
3. Tambah Gadget
4. Pilih Html/Java script, dan simpan script berikut:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <style type="text/css" media="screen">
    <!--

    #spylist {
    overflow:hidden;
    margin-top:5px;
    padding:0px 0px;
    height:350px;
    }
    #spylist ul{
    width:220px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }
    #spylist li {
    width:208px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:70px;
    overflow: hidden;
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtrjiXs3RVUwP1QxMuRaASbfLf2L3iU4vTaD83XPPMqK3M7zmk_LXI1f-_TGeXh8SrfoOowYNwm3bHeXVwe3wXr8hyuJMi8RcENyx4B3uUOK0kCXDzmI88RPDUBBf5Uguz3I1jvamBUXQ/s1600/post.jpg) repeat-x;
    border:1px solid #ddd;
    }

    #spylist li a {
    text-decoration:none;
    color:#4B545B;
    font-size:11px;
    height:18px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }
    #spylist li img {
    float:left;
    margin-right:5px;
    background:#EFEFEF;
    border:0;
    }
    .spydate{
    overflow:hidden;
    font-size:10px;
    color:#0284C2;
    padding:2px 0px;
    margin:1px 0px 0px 0px;
    height:15px;
    font-family:Tahoma,Arial,verdana, sans-serif;
    }

    .spycomment{
    overflow:hidden;
    font-family:Tahoma,Arial,verdana, sans-serif;
    font-size:10px;
    color:#262B2F;
    padding:0px 0px;
    margin:0px 0px;
    }

    -->
    </style>

        <script language='javascript'>

    imgr = new Array();

    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPsP0Ny3sEkpAm1RYve6AnjSfqaHCzB9V1_LU9RyEmtMrp3jzt-kJSYdRHcNAzVmlVJ7NqBdjJabhsiRs919PHeOVmkZd9LCEJ0d9XRGvEy-FTqHz_aW53uPjFgvFGKndfG_idrh7xAGs/s1600/coretv+no_image.jpg";

    imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPsP0Ny3sEkpAm1RYve6AnjSfqaHCzB9V1_LU9RyEmtMrp3jzt-kJSYdRHcNAzVmlVJ7NqBdjJabhsiRs919PHeOVmkZd9LCEJ0d9XRGvEy-FTqHz_aW53uPjFgvFGKndfG_idrh7xAGs/s1600/coretv+no_image.jpg";

    imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPsP0Ny3sEkpAm1RYve6AnjSfqaHCzB9V1_LU9RyEmtMrp3jzt-kJSYdRHcNAzVmlVJ7NqBdjJabhsiRs919PHeOVmkZd9LCEJ0d9XRGvEy-FTqHz_aW53uPjFgvFGKndfG_idrh7xAGs/s1600/coretv+no_image.jpg";

    imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPsP0Ny3sEkpAm1RYve6AnjSfqaHCzB9V1_LU9RyEmtMrp3jzt-kJSYdRHcNAzVmlVJ7NqBdjJabhsiRs919PHeOVmkZd9LCEJ0d9XRGvEy-FTqHz_aW53uPjFgvFGKndfG_idrh7xAGs/s1600/coretv+no_image.jpg";

    imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPsP0Ny3sEkpAm1RYve6AnjSfqaHCzB9V1_LU9RyEmtMrp3jzt-kJSYdRHcNAzVmlVJ7NqBdjJabhsiRs919PHeOVmkZd9LCEJ0d9XRGvEy-FTqHz_aW53uPjFgvFGKndfG_idrh7xAGs/s1600/coretv+no_image.jpg";
    showRandomImg = true;

    boxwidth = 255;

    cellspacing = 6;

    borderColor = "#232c35";

    bgTD = "#000000";

    thumbwidth = 70;

    thumbheight = 70;

    fntsize = 12;

    acolor = "#666";

    aBold = true;

    icon = " ";

    text = "comments";

    showPostDate = true;

    summaryPost = 40;

    summaryFontsize = 10;

    summaryColor = "#666";

    icon2 = " ";

    numposts = 10;

    home_page = "http://tip-triksblogger.blogspot.com/";

    limitspy=4
    intervalspy=4000

    </script>

    <div id="spylist">
        <script src='http://kangdadang.googlecode.com/files/recentpostthumbspy-by-abufarhan.js' type='text/javascript'></script>
    </div>

Untuk yang lainnya silahkan ubah sesuai kreasi sendiri. 
5. Simpan dan lihat hasilnya.

Source: Abu Farhan

READ MORE

Buku Tamu Slide effect with jQuery

Untuk demonya bisa dilihat disini

Cara membuatnya :
1. Login blogger
2. Rancangan, Tambah Gadget,  Html/Java Script
3. Dan Simpan kode berikut :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
   
     
});
</script>
<style>
/* ---------------
Simple Slide panel with jQuery
---------------------------------- */
#panel { 
        height: auto;
        background: #f90;
        width: auto;
        display: none;
    padding: 7px;
    border: #0C0;
    -moz-border-radius-topright:10px;
    -webkit-border-top-right-radius:10px;
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-right-radius:10px;
    -moz-border-radius-topleft:10px;
    -webkit-border-top-left-radius:10px;
    -moz-border-radius-bottomleft:10px;
    -webkit-border-bottom-left-radius:10px;
}
.slide {
    margin: 0;
    padding: 0;
    border-top: solid 4px #f90;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSm0mtezQcTQ8NFXIGX9aEYnYjKGVrS_2sazGPDH3RZNp-nVEbolzjOxmZj5KKqxixQRFrzFWKlB6xVPjNbwi4StlS0BWMioCpuzewmHdK_pPGBATGUuaODao5ddv1gPc510gqEUGb-lQ/s1600/btn-slide.png) no-repeat center top;
   
}
.btn-slide {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFWL2oP4mgXl414pBSdzrE1uMDQwevyk_CEzFdFVdP8DxidaslVf0tKrHgr3eR_bjP0VRm_nhUU-5sEbK5c7wJAcv8i6dNsP5AjOD5EbgQY5rg5jO0g3ww4BMAnKTo8GE147o4iZxh5ag/s1600/white-arrow.gif) no-repeat right -50px;
    text-align: center;
    width: 144px;
    height: 31px;
    padding: 10px 10px 0 0;
    margin: 0 auto;
    display: block;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
}
.active {
    background-position: right 12px;
}
</style>

<div id="panel">

    <!-- Simpan Script Buku tamunya disini -->

</div>
<p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>

Catatan: Jika sudah ada script jquerynya misalkan pada Template kawan-kawan, yang script jquery  berwarna biru tidak perlu ditambahkan.
4. Simpan dan lihat hasilnya

Sebenarnya tutorial ini sudah saya postingkan tapi belum dikhususkan sebagai Gadget Guestbook, masih banyak kekurangannya tapi jika kawan-kawan berminat silahkan di coba saja, semoga bermanfaat. +muga bisa dikembangkan lebih baik... :)

READ MORE