Notifikasi Sederhana dengan CSS3




Hello Minna-san~ saya mau berbagi trik CSS lagi nih,Yaitu Notifikasi sederhana dengan css3,sebenarnya apasih fungsinya? awalnya juga notif ini saya gunakan untuk memberitahukan bahwa template hatsune miku sudah dapat didownload dan juga pemberitahuan bahwa template" saya sudah diupload semua ke hosting mediafire.nah karena saya cari" di google trik notifikasi yang cocok tidak ada,jadi saya membuat sendiri notifikasi ini yang merupakan hasil modifikasi dari trik "loading page dengan css3 animasi".nah,apasih yang berbeda dengan trik loading page? bedanya,html dan css notifikasi ini pastinya lebih sederhana dan lebih minim penggunaanya,contohnya yang saya kurangi yaitu background rgba yang tadinya secara menyeluruh secara fullscreen,animasi loader/loading yang saya hapus.jadi yang tersisa hanyalah text dan background,serta css3 animasi agar setelah 10 detik,nofif ini akan menghilang secara otomatis.Oia,cssnya juga sudah saya rapihkan dari versi sebelumnya,jadi tidak akan bentrok dengan banner slider,loading page,dan content slider(karena dasar html dan cssnya sama 100%).
Setting CSS'nyapun cukup flexibel,kamu bisa rubah ukuran notif,warna background,dll.untuk pengaturan posisinya akan saya jelaskan nanti dibawah.

Screenshot



CSS

Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code




#notifjo {
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
width: 320px; /* lebar notif */
height: auto; /* tinggi notif otomatis */
overflow: hidden;
background: rgba(255,255,255,0.9); /* warna background */
border-radius: 5px; /* nilai sudut bundar */
border: 1px solid #ddd; /* garis batas luar */
z-index: 999999;
position: fixed; /* posisi melayang */
-webkit-animation: fadeOutnotif 10s linear forwards; /* notif 10 detik */
-moz-animation: fadeOutnotif 10s linear forwards;
-o-animation: fadeOutnotif 10s linear forwards;
-ms-animation: fadeOutnotif 10s linear forwards;
animation: fadeOutnotif 10s linear forwards;
}
#notifjo a {
display:block;
text-decoration:none;}
#notifjo span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#notifjo span h2 {
font-size: 12px; /* Ukuran text */
line-height: 21px;
color: #222; /* Warna text */
font-weight: normal;
letter-spacing: 0px;
}
/* Blog johanes djogzs.blogspot.com */
@-webkit-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -webkit-transform: translateY(0px);}
99% { opacity: 0; -webkit-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-moz-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-o-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-ms-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}

HTML

Sedangkan untuk Kode Html ini diletakan dibawah kode  



Untuk menambah baris notif baru,tambahkan:



Di antara
1. Pengaturan posisi notifikasi. 

Untuk pengaturan Posisi notifikasi,kalian perhatikan css dibawah ini.

Posisi top:10px berarti posisi notifikasi berada di paling atas dan right:10px yang berarti posisi notifikasi berada di paling kanan.jadi jika kamu ingin merubah posisinya,kamu juga harus merubah cssnya secara manual.misal (bottom,top dan right,left)





#notifjo {
...
...
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
...
...
}

Contoh :

 Atas,kanan.
right: 10px;
top: 10px;

Bawah,kanan.
right: 10px;
bottom: 10px;


 Dan begitu juga seterusnya,tergantung anda ingin memposisikan dimana.

top:atas
bottom:bawah
right:kanan
left:kiri


Sedangkan untuk nilanya yang saya berikan 10 px,yaitu jarak batas notifikasi terhadap browser anda,semakin besar nilai yang anda berikan,maka semakin besar pula notifikasi akan bergeser dari arah yang anda tentukan(left,right,bottom,top)

sumber
Read More
0 Comments
Tag : ,

10 Manfaat Senyum yg Perlu Anda Ketahui



Manfaat Senyum - Pada posting yang cukup menarik kali ini, yaitu Fakta Tentang Manfaat Tersenyum yang perlu Anda ketahui. Anda harus tau manfaatnya,maka dari itu setelah membaca artikel Manfaat Senyum ini Anda harus sering-sering tersenyum. Berikut 10 Tips Manfaat Tersenyum :

1. Senyum membuat kita lebih menarik
Kita akan selalu tertarik pada orang yang selalu tersenyum. Orang yang selalu tersenyum punya daya tarik tersendiri. Wajah yang berkerut, cemberut, membuat orang menjauh dari kita , tetapi sebaliknya senyum bisa membuat mereka tertarik.

2. Senyum mengubah mood kita
Ketika kita merasa jatuh atau “down” cobalah untuk tersenyum. Mungkin saja mood kita akan berubah menjadi lebih baik.

3. Senyum dapat merangsang orang lain tersenyum
Ketika seseorang tersenyum maka senyum tersebut akan membuat suasana menjadi lebih cerah, mengubah mood orang lain yang ada disekitarnya dan membuat semua orang menjadi senang. Orang yang suka tersenyum membawa kebahagiaan buat orang yang ada di sekitarnya. Seringlah tersenyum maka Kamu akan disukai oleh banyak orang.

4. Senyum dapat mengurangi stres
Jika tanda-tanda stres menyerang kamu, maka wajah Kamu sangat tidak enak untuk dipandang, sesegera mungkin untuk tersenyum karena senyum membantu mencegah kesan bahwa kita sebenarnya sedang stres, lelah atau merasa “down”. Jika Kamu sedang stres cobalah untuk tersenyum, maka stres Kamu akan berkurang dan Kamu akan merasa lebih baik untuk membuat langkah selanjutnya.

5. Senyum meningkatkan sistem imun (kekebalan) tubuh
Senyum dapat membantu kerja imun tubuh agar dapat bekerja dengan baik. Ketika Kamu tersenyum, fungsi imun meningkatkan kemungkinan Kamu menjadi lebih rileks.

6. Senyum menurunkan tekanan darah
Ketika Kamu tersenyum, maka tekanan darahmu akan menurun. Jika Kamu gak percaya, Kamu boleh mencobanya sendiri, jika Kamu memiliki alat pengukur tekanan darah di rumah.

7. Senyum mengeluarkan endorphins (pereda rasa sakit secara alami) dan serotonin
Beberapa studi telah menunjukkan bahwa senyum dapat merangsang pengeluaran endorphin, pereda rasa sakit yang alami, serta serotonin. Senyum memang obat yang alami.

8. Senyum dapat melenturkan kulit wajah dan membuat Kamu terlihat lebih muda
Otot-otot yang digunakan untuk tersenyum ikut membuat Kamu terlihat lebih muda. Jika Kamu ingin sesuatu yang beda, maka berikan senyummu sepanjang hari, maka Kamu akan terlihat lebih muda dan merasa lebih baik. Karena itu dapat Menghilangkan Jerawat juga.

9. Senyum membuat Kamu tampak sukses
Orang yang tersenyum terlihat lebih percaya diri dalam menjalani hidupnya. Cobalah tersenyum saat Kamu melakukan pertemuan dan saat ada janji. Rekan-rekan kerja, sahabat, orang-orang terdekat Kamu akan merasakan sesuatu yang berbeda dan sukses.

10. Senyum membuat Kamu tetap positif
Senyumlah! Lalu sekarang cobalah berpikir sesuatu yang negatif tanpa berhenti tersenyum. Sulitkan? Karena ketika Kamu tersenyum maka senyum tersebut akan mengirimkan sinyal ke tubuh Kamu bahwa “hidup Kamu saat ini baik-baik saja”.

Maka jauhkan diri Kamu dari depresi, stres dan rasa khawatir dengan satu kata yaitu "senyum", tentu saja dengan memberikan senyum pada tempat dan suasana yang tepat. Jika berlebihan, maka orang lain akan menganggap Kamu kurang waras.
Read More
0 Comments
Tag : ,

Membuat Animasi Loading Blog CSS3 dengan 6 Variasi Loader


Ok, langsung aja di simak tutorial ini 

1. Masuk ke Dashboard Blogger, klik Template lalu pilih Edit HTML
2. Ini adalah point terpenting, pertama cek dulu template blogmu apakah sudah ada script jquery didalamnya atau belum, jika belum ada silahkan copy kode ini: 

dan pastekan tepat diatas kode  
3. Ikuti petunjuk dibawah ini sesuai dengan style animasi loading yang kamu suka
# Style 1
membuat animasi loading blog css3
Masukkan Kode berikut tepat diatas kode  

/* 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%; } }
Lalu letakkan kode berikut tepat dibawah kode 




Klik Pratinjau, kalau loading muncul silahkan simpan template

# Style 2

membuat animasi loading blog css3


Masukkan Kode berikut tepat diatas kode  



/* 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;}

#load2 body {
    background-image: url(../images/hexabump.png);
    background-color: #222;
}
#load2 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.75));
    background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
    background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
    background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
    background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
}
#load2 .spinner {
    position: relative;
    font-size: 100px;
    width: 1em;
    height: 1em;
    margin: 100px auto;
    border-radius: 50%;
    background: #123456;
    box-shadow: inset 0 0 0 .12em rgba(0,0,0,0.2), 0 0 0 .12em rgba(255,255,255,0.1);
    background:
        -webkit-linear-gradient(#ea2d0e 50%, #fcd883 50%),
        -webkit-linear-gradient(#fcd883 50%, #ea2d0e 50%);
    background:
        -moz-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
        -moz-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
    background:
        -ms-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
        -ms-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
    background:
        -o-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
        -o-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
    background:
        linear-gradient(#ea2d0e 50%, #ffdd72 50%),
        linear-gradient(#ffdd72 50%, #ea2d0e 50%);
    background-size: 50% 100%, 50% 100%;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    opacity: 0.7;
    -webkit-animation: mask 3s infinite alternate;
    -moz-animation: mask 3s infinite alternate;
    -ms-animation: mask 3s infinite alternate;
    -o-animation: mask 3s infinite alternate;
    animation: mask 3s infinite alternate;
}

@-webkit-keyframes mask {
    25%  { -webkit-transform: rotate(270deg); }
    50%  { -webkit-transform: rotate( 90deg); }
    75%  { -webkit-transform: rotate(360deg); }
    100% { -webkit-transform: rotate(180deg); }
}
@-moz-keyframes mask {
    25%  { -moz-transform: rotate(270deg); }
    50%  { -moz-transform: rotate( 90deg); }
    75%  { -moz-transform: rotate(360deg); }
    100% { -moz-transform: rotate(180deg); }
}
@-ms-keyframes mask {
    25%  { -ms-transform: rotate(270deg); }
    50%  { -ms-transform: rotate( 90deg); }
    75%  { -ms-transform: rotate(360deg); }
    100% { -ms-transform: rotate(180deg); }
}
@-o-keyframes mask {
    25%  { -o-transform: rotate(270deg); }
    50%  { -o-transform: rotate( 90deg); }
    75%  { -o-transform: rotate(360deg); }
    100% { -o-transform: rotate(180deg); }
}
@keyframes mask {
    25%  { transform: rotate(270deg); }
    50%  { transform: rotate( 90deg); }
    75%  { transform: rotate(360deg); }
    100% { transform: rotate(180deg); }
}

Lalu letakkan kode berikut tepat dibawah kode 





Klik Pratinjau, kalau loading muncul silahkan simpan template

# Style 3

membuat animasi loading blog css3


Masukkan Kode berikut tepat diatas kode  



/* 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)}
}

Lalu letakkan kode berikut tepat dibawah kode





Klik Pratinjau, kalau loading muncul silahkan simpan template

# Style 4

membuat animasi loading blog css


Masukkan Kode berikut tepat diatas kode  



/* 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;}
#circular3dG{
position:relative;
width:100px;
height:100px;margin:10% auto;
}
.circular3dG{
position:absolute;
background-color:#00C4FF;
width:28px;
height:28px;
-moz-border-radius:30px;
-moz-animation-name:bounce_circular3dG;
-moz-animation-duration:0.48s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:30px;
-webkit-animation-name:bounce_circular3dG;
-webkit-animation-duration:0.48s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:30px;
-ms-animation-name:bounce_circular3dG;
-ms-animation-duration:0.48s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:30px;
-o-animation-name:bounce_circular3dG;
-o-animation-duration:0.48s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:30px;
animation-name:bounce_circular3dG;
animation-duration:0.48s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#circular3d_1G{
left:41px;
top:6px;
-moz-animation-delay:0.18s;
-webkit-animation-delay:0.18s;
-ms-animation-delay:0.18s;
-o-animation-delay:0.18s;
animation-delay:0.18s;
}
#circular3d_2G{
left:61px;
top:23px;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}
#circular3d_3G{
left:73px;
top:45px;
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}
#circular3d_4G{
left:69px;
top:67px;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}
#circular3d_5G{
left:42px;
top:73px;
-moz-animation-delay:0.42000000000000004s;
-webkit-animation-delay:0.42000000000000004s;
-ms-animation-delay:0.42000000000000004s;
-o-animation-delay:0.42000000000000004s;
animation-delay:0.42000000000000004s;
}
#circular3d_6G{
left:8px;
top:48px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
#circular3d_7G{
left:0px;
top:14px;
-moz-animation-delay:0.5399999999999999s;
-webkit-animation-delay:0.5399999999999999s;
-ms-animation-delay:0.5399999999999999s;
-o-animation-delay:0.5399999999999999s;
animation-delay:0.5399999999999999s;
}
#circular3d_8G{
left:17px;
top:0px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
@-moz-keyframes bounce_circular3dG{
0%{
-moz-transform:scale(1)}
100%{
-moz-transform:scale(.3)}
}
@-webkit-keyframes bounce_circular3dG{
0%{
-webkit-transform:scale(1)}
100%{
-webkit-transform:scale(.3)}
}
@-ms-keyframes bounce_circular3dG{
0%{
-ms-transform:scale(1)}
100%{
-ms-transform:scale(.3)}
}
@-o-keyframes bounce_circular3dG{
0%{
-o-transform:scale(1)}
100%{
-o-transform:scale(.3)}
}
@keyframes bounce_circular3dG{
0%{
transform:scale(1)}
100%{
transform:scale(.3)}
}

Lalu letakkan kode berikut tepat dibawah kode 






Klik Pratinjau, kalau loading muncul silahkan simpan template

# Style 5

membuat-animasi-loading-blog-css3


Masukkan Kode berikut tepat diatas kode



/* 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;}

.bubblingG {
text-align: center;
width:100px;
height:63px;margin:10% auto;
}
.bubblingG span {
display: inline-block;
vertical-align: middle;
width: 13px;
height: 13px;
margin: 31px auto;
background: #7BFF00;
-moz-border-radius: 63px;
-moz-animation: bubblingG 0.6s infinite alternate;
-webkit-border-radius: 63px;
-webkit-animation: bubblingG 0.6s infinite alternate;
-ms-border-radius: 63px;
-ms-animation: bubblingG 0.6s infinite alternate;
-o-border-radius: 63px;
-o-animation: bubblingG 0.6s infinite alternate;
border-radius: 63px;
animation: bubblingG 0.6s infinite alternate;
}
#bubblingG_1 {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
#bubblingG_2 {
-moz-animation-delay: 0.18s;
-webkit-animation-delay: 0.18s;
-ms-animation-delay: 0.18s;
-o-animation-delay: 0.18s;
animation-delay: 0.18s;
}
#bubblingG_3 {
-moz-animation-delay: 0.36s;
-webkit-animation-delay: 0.36s;
-ms-animation-delay: 0.36s;
-o-animation-delay: 0.36s;
animation-delay: 0.36s;
}
@-moz-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-moz-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-moz-transform: translateY(-26px);
}
}
@-webkit-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-webkit-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-webkit-transform: translateY(-26px);
}
}
@-ms-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-ms-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-ms-transform: translateY(-26px);
}
}
@-o-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-o-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-o-transform: translateY(-26px);
}
}
@keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
transform: translateY(-26px);
}
}

Lalu letakkan kode berikut tepat dibawah kode 






Klik Pratinjau, kalau loading muncul silahkan simpan template

# Style 6



Masukkan Kode berikut tepat diatas kode  



/* 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;}
#spinningSquaresG{
position:relative;
width:240px;
height:29px;margin:10% auto;}
.spinningSquaresG{
position:absolute;
top:0;
background-color:#FFDD00;
width:29px;
height:29px;
-moz-animation-name:bounce_spinningSquaresG;
-moz-animation-duration:0.6s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(.3);
-webkit-animation-name:bounce_spinningSquaresG;
-webkit-animation-duration:0.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.3);
-ms-animation-name:bounce_spinningSquaresG;
-ms-animation-duration:0.6s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(.3);
-o-animation-name:bounce_spinningSquaresG;
-o-animation-duration:0.6s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(.3);
animation-name:bounce_spinningSquaresG;
animation-duration:0.6s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.3);
}
#spinningSquaresG_1{
left:0;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}
#spinningSquaresG_2{
left:30px;
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}
#spinningSquaresG_3{
left:60px;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}
#spinningSquaresG_4{
left:90px;
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}
#spinningSquaresG_5{
left:120px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
#spinningSquaresG_6{
left:150px;
-moz-animation-delay:0.54s;
-webkit-animation-delay:0.54s;
-ms-animation-delay:0.54s;
-o-animation-delay:0.54s;
animation-delay:0.54s;
}
#spinningSquaresG_7{
left:180px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
#spinningSquaresG_8{
left:210px;
-moz-animation-delay:0.66s;
-webkit-animation-delay:0.66s;
-ms-animation-delay:0.66s;
-o-animation-delay:0.66s;
animation-delay:0.66s;
}
@-moz-keyframes bounce_spinningSquaresG{
0%{
-moz-transform:scale(1);
background-color:#FFDD00;
}
100%{
-moz-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-webkit-keyframes bounce_spinningSquaresG{
0%{
-webkit-transform:scale(1);
background-color:#FFDD00;
}
100%{
-webkit-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-ms-keyframes bounce_spinningSquaresG{
0%{
-ms-transform:scale(1);
background-color:#FFDD00;
}
100%{
-ms-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-o-keyframes bounce_spinningSquaresG{
0%{
-o-transform:scale(1);
background-color:#FFDD00;
}
100%{
-o-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@keyframes bounce_spinningSquaresG{
0%{
transform:scale(1);
background-color:#FFDD00;
}
100%{
transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}

Lalu letakkan kode berikut tepat dibawah kode 






Klik Pratinjau, kalau loading muncul silahkan simpan template

Oke akhirnya selesai juga Tutorial Cara Membuat Animasi Loading Blog CSS3 dengan 6 Variasi Loader ini, jika ada kesalahan dalam mengetik saya mohon maaf karena saya sudah ngantuk sekali ini :(

oh iya kamu juga bisa menggunakan style Animated Loader yang lain lho, cara bikin animasi nya kamu pergi aja ke situs http://cssload.net/ disana kamu bisa berkreasi membuat animasi loading yang kamu sukai

oh iya satu lagi, kalau artikel ini bermanfaat, join blog ini ya (tombolnya ada di bawah) :)

JIKA ATIKEL INI BERMANFAAF SILAHKAN BERKOMENTAR :)

sumber



Read More
0 Comments
Tag : ,

Download AVG Internet Security 2013 Full Keygen + Crack + Serial Number


AVG internet security 2013 merupakan salah satu anti Virus terbaik untuk melindungi PC/Laptop dari serangan Virus, Spyware, Worm, Dan Troya. Bukan itu saja AVG Internet Security juga dapat melindungi PC/Laptop ketika sedang menelusuri atau menjelajahi di dunia maya.



 Fitur Terbaru AVG Internet Security: 
-Melindungi identitas Anda ketika berbelanja dan melakukan transaksi perbankan.
-Mendeteksi atau menghentikan virus dan ancaman malware.
-Menghentikan Tautan dan file yangtidak aman.
-Mencegah Spam dan pengiriman Scam online.
-Mencegah mata-mata danpencuri data.
-Menghentikan peretas mengakses data pribadi.
-Dll.


Nah untuk yang belum memiliki AVG Internet Security silahkan Mendownloadnya secara gratis di bawah ini
ini masih versi trial dan agar menjadi full silahkan mendonwload Keygen atau serial Numbernya agar menjadi full dan aktif hingga 2018.



Klik di bawah ini untuk  AVG Internet Security 2013 



Klik di bawah ini untuk Serial Numbernya

 

Atau kalau mau keygennya sekalian silahkan klik di bawah ini

 

Note :

Jika Artikel ini menarik silahkan Berkomentar di postingan ini... dan jika mau copy artikel ini dan jangan lupa kasih link sumbernya hargailah orang yang membuat artikel ini dengan susah payah... jadilah blogger yang jujur..





Read More
0 Comments
Tag : ,

Membuat Menu Kaleng Tersembunyi Di Header Dengan CSS

widget kaleng D-G BLOG

kli ini saya akan membuat menu kaleng tersembunyi ya udh jngn banyak bacot langsung aja oke.....

kelebihan :


1. Bersembunyi ketika tidak terkena mouse
2. Selalu mengikuti scrool sepanjang halaman blog
3. Bisa ditaruh gambar.


Keren bukan?
Kalau begitu langsung saja caranya ya
1. Masuk ke www.blogger.com
2. Ke tata letak
3. HTML / Java Script
4. Pastekan kode berikut







Keterangan:
Ganti nama dan url gambar yg di ingin kan
ganti url http://indraahmadrobani.blogspot.com dengan url anda .

Jika artikel ini bermaanfaat silahkan Berkomentar di kotak komentar Sekian Post Dari Saya DRobani

TERIMA KASIH ATAS KUNJUNGANNYA


Read More
0 Comments
Tag : ,

Cara Membuat Daftar Isi Keren Di Blog

wah ada daftar isi keren nih ak share lah ayo sobat blogger sedot aja ok langsung aja ya untuk menghemat waktu hehehehe


bagaimana? keren dan marik gk??? kalau menarik yah lebih baik kita langsung saja ke tutorialnya


1. Login Ke Blogger
2. Klik Buat Entri Baru ( Buat Postingan Baru )
3. Klik HTML lalu masukan kode dibawah ini




4. Publikasikan, dan selesai


Tambaha
ganti url ini  http://indraahmadrobani.blogspot.com/  dengan url anda

Read More
0 Comments
Tag : ,

Followers

Diberdayakan oleh Blogger.

- Copyright © 2013 CYBER MAN BLOGGER™ - Powered by Blogger - Designed by Johanes Djogan - Redesigned by Hatta Namikaze