Membuat image Loading progress di blog

Tampilan tertentu pada saat loading blog mungkin merupakan daya tarik tertentu dalam sebuah blog. Hal ini memungkinkan anda menyimpan semua ketidak teraturan bentuk tampilan pada saat loading, sehingga pengunjung hanya melihat animasi tampilan loading. Posting kali ini saya akan share bagaimana membuat tampilan loading halaman dengan menggunakan jquery dan css. Tampilan animasi pada loading page ini menggunakan Query Loader, yaitu tampilan layar kosong hitam (bisa diubah) yang meliputi blog anda sampai semua konten dimuat. Artinya pengunjung tidak akan melihat apa yang diloading blog Anda. Pada tampilan ini pengunjung hanya melihat halaman loading dengan bar dan persentase loading secara keseluruhan dengan berwarna gelap. Coba anda refress blog ini? apa yang terlihat.....lumayan menarik bukan??? ok mari kita bahas cara pembuatannya. Ikuti langkah berikut ini.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>

<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js'
type='text/javascript'/>

Selanjutnya masukkan kode berikut di atas kode </body>

<script>
QueryLoader.selectorPreload = &quot;body&quot;;
QueryLoader.init();
</script>

Selanjutnya masukkan kode berikut di atas kode ]]></b:skin>

.QOverlay {
background-color: #000000; /* warna background saat blog anda di loading */
z-index: 9999;
}

.QLoader {
background-color: #CCCCCC; /* warna bar loading */
height: 1px;
}

.QAmt {
color:#FF530D; /* warna angka persentase saat loading */
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}

Klik Simpan Template
Selesai dan lihat hasilnya
Selamat mencoba dan sukses selalu

Read more >>

Buku Tamu Slide effect with jQuery

• Cara membuatnya :
• Login blogger
• Rancangan, Tambah Gadget, Html/Java Script
• 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/AVvXsEg_53kx1iwAdQ8QqmXspArL4LCuodBUAo1osb8PK_MB-jAYFYT1ZUjg_Khovor8EaAUvR9DjG4Wrzm3SPLfoGKwKldzUHn34PpjrEwkBF3jkfSzmfB6NG3dQJu-AjU78y2bsqGb5b2HQ2M/s1600/btn-slide.png) no-repeat center top;

}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPG2_2VRdqSaa0d1-SB3uTHmrMC_vSUkp4Vehiu4qvLejgW5kg_p_K1Y_CUC6pkukJyaL-LB4K7DfUNsfA5XsiZwM2vSqeDJrwk9eCtc2ENtb3_q0H7QIlEaPPnGhgZILGTo_juukK6aA/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

Read more >>

Fixed Guestbook Slide effect with jQuery

• Login blogger
• Rancangan, Tambah Gadget,
• dan Pilih Html/java script
• Simpan kode CSS 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(){

$(".gbbtn").click(function(){
$("#gbcontent").slideToggle("slow");
$(this).toggleClass("active"); return false;
});


});
</script>
<style>
/* ---------------
Fixed Guestbook Slide effect with jQuery
by : Dadang Herdiana
Url : http://dadhang.blogspot.com
---------------------------------- */
.gb {
position:fixed;
top:0px; left:0px;
z-index:+10;
}
#gbcontent {
height: auto;
background: #898787;
width: auto;
display: none;
padding: 10px;
border: #000;
-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;

-webkit-border-bottom-left-radius:10px;
}
.gbslide {
float:left;
margin: 0;
padding: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1BTZTrg6xPOPnn2TMtmWy610fGZdSltqxw8bVHOELwHRyigSlzUtv5ISvaOghOp_u-iZ66O7IONPhbVI8BzTZjyhPT42DRvckoNCVeIqY15OC0S5vhFONpwYtZ2ys_sPjMvCCqkbxrj8/s1600/gbslide.png) no-repeat center top;


}
.gbbtn {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisASkc4AIQCI0F5XcbYmt9Uyyj2x_9EMibMsJFs5cQ7q9NnRD4cYMoIb4_xwm-Iw-HZtH8H2cCudavxIL-FjXXmeu2wh1CdBF_oRiAPtS2wB7_4KwThMbJe31_fXL6H32y9iimvhQMKx4/s1600/button-Close-open2.png) no-repeat right -45px;
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: #CCC;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>
<div class="gb">
<div id="gbcontent">

<!-- Simpan Kode buku tamunya disini -->

</div>
<p class="gbslide"><a href="#" class="gbbtn">Guestbook</a></p></div>

• Simpan dan lihat hasilnya. semoga berhasil dan bisa bermanfaat

Read more >>