Tampilkan postingan dengan label #CODING. Tampilkan semua postingan

Cara Memasang Loading Animasi Blog ‘Mondar-mandir

Unknown Jumat, Agustus 02, 2013 0 #BLOGGER #CODING

Home » Blogger » Cara Tips Trik » Tutorial » Cara Memasang Loading Page Animasi Blog ‘Mondar-mandir’

Cara Memasang Loading Page Animasi Blog ‘Mondar-mandir

Senin, 20 Mei 2013

Animasi bergerak ‘mondar-mandir’ berupa bola abu-abu. Untuk penerapan loading page animasi blog dikonfigurasi pada Edit HTML atau editor blog sobat. Berikut langkah-langkahnya:

Loading Page Animasi Blog ‘Mondar-mandir’ (Foto: Screenshoot)

1. Pasang Jquery berikut di template blog sobat di atas kode </head>,

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Jika sebelumnya sudah ada script Jquery , abaikan langkah tersebut.
2. Masukkan kode berikut di atas kode ]]></b:skin>,

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
/* DEMO 1 */
#horizontal-load body:after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: -webkit-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
    background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
    background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
    background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
    background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
}
#horizontal-load .bar {
font-size: 20px;
    width: 10em;
    height: 1em;
    position: relative;
    margin: 100px auto;
    border-radius: .5em;
    background: rgba(255,255,255,0.6);
    box-shadow:
        0 0 0 .05em rgba(100,100,100,0.075),
        0 0 0 .25em rgba(0,0,0,0.1),
        inset 0 .1em .05em rgba(0,0,0,0.1),
        0 .05em rgba(255,255,255,0.7);
}
#horizontal-load .bar:after {
    content: "Please wait.";
    position: absolute;
    left: 25%;
    top: 150%;
    font-family: 'Carrois Gothic', sans-serif;
    font-size: 1em;
    color: #555;
    text-shadow: 0 .05em rgba(255,255,255,0.7);
}
#horizontal-load .bar .sphere {
    border-radius: 50%;
    width: 1em;
    height: 100%;
    background: -webkit-linear-gradient(#eee, #ddd);
    background: -moz-linear-gradient(#eee, #ddd);
    background: -ms-linear-gradient(#eee, #ddd);
    background: -o-linear-gradient(#eee, #ddd);
    background: linear-gradient(#eee, #ddd);
    box-shadow:
        inset 0 .15em .1em rgba(255,255,255,0.3),
        inset 0 -.1em .15em rgba(0,0,0,0.15),
        0 0 .25em rgba(0,0,0,0.3);
    display: block;
    -webkit-animation: slide 1.75s ease-in-out infinite alternate;
    -moz-animation: slide 1.75s ease-in-out infinite alternate;
    -ms-animation: slide 1.75s ease-in-out infinite alternate;
    -o-animation: slide 1.75s ease-in-out infinite alternate;
    animation: slide 1.75s ease-in-out infinite alternate;
}
@-webkit-keyframes slide {
    to { margin-left: 90%; }
}
@-moz-keyframes slide {
    to { margin-left: 90%; }
}
@-ms-keyframes slide {
    to { margin-left: 90%; }
}
@-o-keyframes slide {
    to { margin-left: 90%; }
}
@keyframes slide {
    to { margin-left: 90%; }
}

3. Letakkan JavaScript berikut di bawah kode <body>,

<script type='text/javascript'>
//<![CDATA[
$(function() {
    setTimeout(function() {
        $('#xgenloader-screen').fadeOut();
    }, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="horizontal-load"><div class="bar">
<i class="sphere"></i>
</div></div>
</div>

4. Finish, Simpan Template. Jika langkah-langkah di atas dilakukan dengan benar, silahkan lihat hasilnya.

ANIMASI LOADING CINCIN MUTER-MUTER

Unknown Jumat, Agustus 02, 2013 0 #BLOGGER #CODING

Unknown

Home » Blogger » Cara Tips Trik » Tutorial » Cara Buat Loading Page Animasi Cincin ‘Muter-muter’ pada Blog

Cara Buat Loading Page Animasi Cincin ‘Muter-muter’

Animasi loading page berbentuk lingkaran mirip seperti cincin yang mempunyai permata bewarna merah. Geraknya sistematis mengarah jarum jam. Untuk pemasangan loading page animasi ini sobat klik pada Template, kemudian beralih ke Edit HTML.

Loading Page Animasi Cincin ‘Muter-muter’ (Foto: screenshoot)

1. Copy script Jquery dan pastekan di atas kode </head>,

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

___Jika sebelumnya telah ada script Jquery, abaikan langkah ini.
2. Copy CSS berikut dan letakan di atas kode ]]></b:skin,

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
#bowlG{
position:relative;
width:128px;
height:128px;margin:20% auto;
}
#bowl_ringG{
position:absolute;
width:128px;
height:128px;
border:11px solid #5C5C5C;
-moz-border-radius:128px;
-webkit-border-radius:128px;
-ms-border-radius:128px;
-o-border-radius:128px;
border-radius:128px;
}
.ball_holderG{
position:absolute;
width:34px;
height:128px;
left:47px;
top:0px;
-moz-animation-name:ball_moveG;
-moz-animation-duration:1.3s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-webkit-animation-name:ball_moveG;
-webkit-animation-duration:1.3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-ms-animation-name:ball_moveG;
-ms-animation-duration:1.3s;
-ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear;
-o-animation-name:ball_moveG;
-o-animation-duration:1.3s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
animation-name:ball_moveG;
animation-duration:1.3s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
.ballG{
position:absolute;
left:0px;
top:-30px;
width:51px;
height:51px;
background:#FF0000;
-moz-border-radius:43px;
-webkit-border-radius:43px;
-ms-border-radius:43px;
-o-border-radius:43px;
border-radius:43px;
}
@-moz-keyframes ball_moveG{
0%{
-moz-transform:rotate(0deg)}
100%{
-moz-transform:rotate(360deg)}
}
@-webkit-keyframes ball_moveG{
0%{
-webkit-transform:rotate(0deg)}
100%{
-webkit-transform:rotate(360deg)}
}
@-ms-keyframes ball_moveG{
0%{
-ms-transform:rotate(0deg)}
100%{
-ms-transform:rotate(360deg)}
}
@-o-keyframes ball_moveG{
0%{
-o-transform:rotate(0deg)}
100%{
-o-transform:rotate(360deg)}
}
@keyframes ball_moveG{
0%{
transform:rotate(0deg)}
100%{
transform:rotate(360deg)}
}

3. Pastekan JavaScript ini tepat di bawah kode <body>,

<script type='text/javascript'>
//<![CDATA[
$(function() {
    setTimeout(function() {
        $('#xgenloader-screen').fadeOut();
    }, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="bowlG">
<div id="bowl_ringG">
<div class="ball_holderG">
<div class="ballG">
</div>
</div>
</div>
</div>
</div>

4. Selesai, klik tombol Simpan Template.

Membuat pesan selamat Dan penutup datang pada Blog

Unknown Kamis, Agustus 01, 2013 0 #BLOGGER #CODING

Unknown

Pesan selamat datang berguna untuk memberikan ucapan salam pada pengunjung yang datang pada blog kita. Selain selamat datang, kita juga bisa memberi salam berpisah pada pengunjung pada saat akan meninggalkan blog kita.

Bila anda berminat silahkan anda ikuti langkah - langkah berikut :

1. Silahkan anda Login Blog anda
2. Pilih Layout
3. KlikEdit HTML
4. Lalu masukkan kode dibawah ini dibawah kode <head>

alert("Selamat datang di blog 48FAMILLY..., Jangan lupa komentarnya ya..")

</script>

// goodbye alert function goodbye(){alert(' Jangan lupa mampir lagi ya.... ');}

parent.window.onunload=goodbye;</script>

yang berwaran merah itu bisa anda ganti sesuka anda
SEKIAN AJA YA ^_^