Tampilkan postingan dengan label Tips Trick And Tutorial. Tampilkan semua postingan

Cara Memasang Menu Dropdown CSS3

Hallo Sobat DRobani, kali ini saya akan post tentang menu dropdown css3 nih oke biar gak buang2 waktu langsung aja oke ....... ^_^

CSS3 Dropdown Menu

1. Buka Blogger >> Template >> Edit HTML
2. Masukan CSS di bawah ini




3. Simpan Template
4. buka tata letak > Tambah Gadget > HTML/javascript
5.Masukan Code HTML di bawah ini




6.Ganti code berikut
-Ganti tanda # dengan Url Anda
-Ganti Sub link Sesuai yg anda inginkan


Read More
0 Comments
Tag : ,

Widget Panel W8 SM



 
Inilah pertama kalinya saya memposting Widget Blog. Widget ini saya namakan Panel W8 SM. Saya desain menyerupaiGadget Panel OS Windows 8,7,Vista. Widget ini mempunyai pajang 100px dan lebar 100px, Berposisi Melayang. Widgetyang saya keluarkan ada dua, yaitu JAM dan TANGGAL. Jika anda tertarik memasang di blog, dibawah saya kasih tutorialnya.

OK. Langsung saja.
  • Masuk ke Blog kamu, dan pilih Tab Template lalu klik Edit HTML.
  • Tekan Tombol F3 , untuk memudahkan mencari kata kunci 
  • Pasang CSS Widget ini di atas ]]>
.kotak-tanggal{line-height:1.28; text-align:left; direction:ltr; unicode-bidi:embed; display:block;font: normal normal 11px tahoma, verdana, arial, sans-serif;z-index:600;position:fixed;right:30px;width:100px;height:100px;bottom:108px;background:rgba(0,0,0,0.6);padding:10px;border:1px solid white}

.kotak-jam{line-height:1.28; text-align:left; direction:ltr; unicode-bidi:embed; display:block;font: normal normal 11px tahoma, verdana, arial, sans-serif;z-index:600;position:fixed;left:30px;width:100px;height:100px;bottom:108px;background:rgba(0,0,0,0.6);padding:10px;border:1px solid white}
  • Lalu klik Simpan

  • Sekarang kamu klik Tab Tata Letak, dan Tambahkan Gadget HTML/Javascript baru.
  • Pastekan Source kode Widget ini di situ.
  • Setelah itu Simpan dan Lihat Hasilnya.
Demikianlah Posting Widget Panel W8 SM, semoga bermanfaat.

Note!
  1. Anda bisa mengatur letak posisinya di CSS tadi.
Read More
0 Comments
Tag : ,

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 : ,

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 : ,

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 : ,

Cara Memasang Tombol Search With CSS Di Blog

Hallo Sobat kali ini admin akan post tentang Tombol Search With CSS untuk mempersingkat waktu langsung aja yuk .........

0


1. Letakan Code Dibawah ini di atas Code



#search{float:right;margin-right:28px;margin-top:269px}#search input[type="text"]{border-left:3px solid orange; border-top:3px solid orange; border-bottom:3px solid white; border-right:3px solid white; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYWWV9nAHaVHnKouy61Yoow6wylTjB1x0rbJTHXHYtZrDjMJf1tsNoPNs18xdvjwGvaG0Az0FVC992QPF1DXnLoC5U0Mvsx_CuLgPgS5QB2uPMs_dO_-1UVrt0PNLgvna1Zw4GALNAcj0/s1600/cari.png) no-repeat 10px 6px #1D1E22;font:bold 12px 'Iceberg',cursive;color:#bbb;text-shadow:1px 1px 1px #000,-1px 1px 1px #000,-1px -1px 1px #000,1px -1px 1px #000;width:110px;padding:6px 15px 6px 35px;-webkit-transition:all .7s ease 0s;-moz-transition:all .7s ease 0s;-o-transition:all .7s ease 0s;transition:all .7s ease 0s;-webkit-border-radius:10px 0px 1px 10px-moz-border-radius:10px 0px 1px 10px;border-radius:0px;border-radius:10px 0px 1px 10px}#search input[type="text"]:focus{width:160px}

KETERANGAN

*  code warna merah untuk mengatur batasnya
*  code warna biru mengatur ketebalan border
* code warna kuning untuk posisi awal tombol search
* code warna hijau untuk mengatur posisi setelah mouse di arahkan ke tombol itu
* warna ungu untuk background

Letakan Code HTML di bwah ini terserah mw di mana aja yg penting tidak erorLalu Simpan Template Sobat :)Sekian Turial Dari Saya ^_^



Lalu Simpan Template Sobat :)

Sekian Tutorial Dari Saya :)

SEMOGA BERMANFAAT ^_^


Read More
1 Comment
Tag : ,

Cara Mengetahui Posisi Seseorang Lewat/Melalui No Hp

Cara Mengetahui Posisi Seseorang Lewat Nomor HP - Dengan Serangkaian Kata Kunci yg sering di cari di om google seperti cara cek posisi teman via nomor hp, cara mengetahui letak seseorang melalui nomor hp, melacak posisi seseorang melalui nomor HP DLL. Kali ini saya akan kasih trik gokiel mencari kedudukan seseorang via satelit melalui nomor hp nya.
Caranya cukup mudah silakan kunjungi website berikut ... :




Masukan Nomor HP yg ingin di ketahui posisinya kemudian klik Search  maka akan tampil gambar seperti berikut :

free

Sekian Dan Selamat Mencoba Semoga Bermanfaat sob.....


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...

sumber

Read More
0 Comments
Tag : ,

Cara Membuat Sepinning Image / Gambar Berputar Dengan CSS

Halo Sobat DRobani X ini saya akan share Cara Membuat Sepinning Image / Gambar Berputar Dengan CSS Ya ok langsung aja ya sobat DRobani XD

gambar animasi sharingan xc blog

Langkah" Nya
1. Login ke Blogger
2. Pergi ke Dashbor,
3. Pergi ke Template -> Edit HTML
4. Masukan Code Dibawah ini tepat diatas code 


/* DRobaniSharingan Berputar */
.DRobaniSharingan1 { -moz-animation:spin2Pulse 1s infinite linear; -webkit-animation:spin2Pulse 1s infinite linear;margin-top:-20px; margin-left:400px;position:absolute;z-index:999;height: 200px;line-height: 46px;border-radius:500px;border-left:10px solid black;border-right:10px solid black;width: 200px;; -moz-animation:DRobanispin 1s infinite linear; -webkit-animation:DRobanispin 1s infinite linear;animation:DRobanispin 1s infinite linear}
.DRobaniSharingan {margin-top:-20px; margin-left:400px;position:absolute;z-index:999;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-qofNzCiKTHV_T0LQRPJmMHnG3517kMWuxpu_AwNWDHp_-Ln0e9MldKjZdw4V7qfdZO1d7gkXFJoVD0T0y0A9_f8zj5wqNvToyfQ50A14kTaamRAHXnDZjFVTdD4lpLmEGHktlCz1gy_/s185/supers.png) no-repeat;height: 185px; line-height: 46px;border-left:20px solid black;border-radius:500px;border-right:20px solid black;width: 185px; -moz-animation:DRobanispin 1s infinite linear; -webkit-animation:DRobanispin 1s infinite linear;animation:DRobanispin 1s infinite linear}
@-moz-keyframes DRobanispin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }
@-webkit-keyframes XCspin {0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(-360deg);} }
@keyframes DRobanispin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }
Pengertian Code Diatas :
Code margin-top:-20px; margin-left:400px; itu sesuaikan dengan yang kamu mau Marginnya...
Code height: 200px; yaitu Tinggi gambarnya (sesuaikan dengan keinginan tingginya )
Code width: 185px; yaitu Lebar gambarnya (sesuaikan dengan keinginan lebarnya )
Code  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-qofNzCiKTHV_T0LQRPJmMHnG3517kMWuxpu_AwNWDHp_-Ln0e9MldKjZdw4V7qfdZO1d7gkXFJoVD0T0y0A9_f8zj5wqNvToyfQ50A14kTaamRAHXnDZjFVTdD4lpLmEGHktlCz1gy_/s185/supers.png yaitu code gambar sharingannya..
bisa diganti dengan code gambar sharingan yang lain :)

Kalau code diatas sudah dimasukin, selanjutnya cari code  
(untuk ditaro di header ) kalau sudah ketemu, masukan code dibawah ini, dibawah code 




 Kalau sudah semuanya silahkan di "Save Template" Atau di Partinjau terlebih dahulu, :D
kalau tidak bisa, coba ulang lagi cara"nya diatas ,sampai bisa :D...
nah ada tambahan nih, untuk code gambar sharingan nya...

1. Sharingan Biasa :

sharingan biasa

2. Mangekyou Sharingan Itachi
sharingan itachi

3. Mangekyou Sharingan Uchiha Shisui
sharingan shisui

4. Mangekyou Sharingan Hatake Kakashi
sharingan kakashi

5. Mangekyou Sharingan Uchiha Izuna
sharingan izuna

6. Mangekyou Sharingan Uchiha Sasuke
sharingan sasuke

7. Eternal Mangekyou Sharingan Madara

sharingan madara

nah gimana ? gambarnya bagus" ya hehehehe
Read More
0 Comments
Tag : ,

Recent Comment

Followers

Diberdayakan oleh Blogger.

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