Upload file dengan menggunakan Google Drive

Kalian yang hobi dengan hal upload file pasti sangat membutuhkan tempat upload yang bagus.Biasanya yang dicari itu,yang memberikan layanan upload dengan kapasitas file yang besar.Namun yang kita jumpai tidak semua hosting menyediakan layanan yang diinginkan tersebut.Ada yang membatasi besarnya file yang diupload dan waktu aktif link.Hal ini bisa sangat merepotkan karena ketika masa aktif link tersebut habis,ya otomatis data kita dihapus,padahal sudah capek-capet upload.Yang bikin kesel lagi kalau file yang diupload banyak dan sizenya gede-gede,pasti yang ngupload bakalan pusing tuh kalau disuruh ngulang lagi.hahaha.Sebenarnya banyak tempat upload file  yang free dan cukup bagus,contohnya di indowebster,tapi entah kenapa sering banget maintenance.Selain itu di mediafire juga bisa digunakan untuk upload.Nah,untuk yang ini pernah terjadi penghapusan file tanpa pemberitahuan lebih dulu,terutama yang linknya diembel-embeli adf.ly.Disini saya akan mencoba untuk memberi alternatif lain bagi kalian agar tidak pusing-pusing lagi dalam mengupload file,caranya dengan menggunakan layanan Google drive.

Apa itu Google Drive ?

Google Drive adalah layanan penyimpanan data milik Google yang diluncurkan pada 24 April 2012. Layanan ini merupakan ekstensi dari Google Docs dan akan mengganti URL docs.google.com dengan drive.google.com setelah diaktifkan. Google Drive memberikan layanan penyimpanan gratis sebesar 5 GB dan dapat ditambahkan dengan pembayaran tertentu.Dengan fitur unggulan yang sama seperti Dropbox, yaitu sinkronisasi data melalui folder khusus di dalam desktop atau lebih dikenal dengan Desktop Sync Clients. GDrive memberikan kapasitas gratis sebesar 5 GB dan tentunya fitur-fitur yang terintegrasi dengan layanan Google lainnya seperti: Gmail, G+ dan Google Search. Fitur yang bisa digaris bawahi dari GDrive adalah API’s untuk para Developer. Hingga kini GDrive telah terhubung dengan puluhan aplikasi pihak ketiga.Keuntungan lainnya,karena google drive terintegrasi dengan akun google,jadi file akan permanen dan tidak akan dihapus.(wikipedia)

Berikut ini cara upload file menggunakan google drive :

1. Buka google.com lalu log in akun kalian

klik gambar untuk memperbesar

2. Klik Tulisan Drive (lihat bagian atas)

3. Setelah itu lihat bagian kiri layar :

4. Klik tanda panah keatas,maka akan terlihat seperti ini :

5. Pilih File,cari file yang akan diupload

6. Proses upload akan berjalan

7. Setelah selesai,klik bagikan

8. Disitu akan muncul link downloadnya,akses data hanya bisa dilakukan secara  pribadi,artinya hanya kita yang mengupload file yang bisa mendownloadnya.Agar semua orang bisa mendownloadnya klik ubah untuk menjadiannya menjadi  akses publik

9. Terakhir Klik simpan dan jangan lupa untuk linknya tadi diambil....Selamat mencoba gan ^_^

08.20  Unknown  No comments

Read More

Memproteksi Port USB

Jika anda memiliki PC/Laptop, dan tidak ingin ada tangan jahil yang bermaksud untuk mengambil data, dari PC/Laptop anda, tanpa izin dan sepengetahuan anda, mungkin trik ini bisa dijadikan referensi agar akses ke port USB drive pada PC/Laptop anda oleh tangan-tangan jahil dapat di proteksi, selain itu trik ini juga baik untuk mencegah penyebaran virus melalui USB Flash Disk. Trik ini tidak menggunakan batuan software atau utility tool lainnya, melainkan mengedit langsung pada registry windows sehingga USB port pada PC/Laptop menjadi Not Access.  Agar menjadi lebih jelas berikut ini adalah langkah-langkah mengedit registry windows untuk memproteksi USB drive. 

• Ketik regedit pada kotak search windows lalu tekan tombol enter pada keyboard

• Pada jendela registry yang terbuka pilih HKEY_LOCAL_MACHINE

• Selanjutnya di bawah HKEY_LOCAL_MACHINE pilih SYSTEM, selanjunya di bagian bawah pilih lagi CurrentControlSet dan dibawahnya lagi cari parameter services.

• Di bawah services gulir halaman sampai ketemu parameter USBSTOR

• Pada layar sebelah kanan edit nilai heksadecimal parameter Start dari 3 mejadi 4 kemudian tekan tombol OK

• Sekarang restart PC/Laptop anda dan cobalah untuk mengakses port USB, tancapkan USB flash drive pada salah satu port, jika proteksi yang anda lakukan melalui edit registry windows ini berhasil

• Jangan Lupa Comment and follow blog ini ya... :D

08.13  Unknown  No comments

Read More

Creating Animation Loading on Header

Learning Blog Tutorial - How to Make a Loading Animation In Blog Header is a continuation of a tutorial blog tutorial How to Make a Loading Animation Blog More Interesting if the previous tutorial a blog appear animated when going in the open, just in this tutorial appears in the blog header.

Consider the following steps:

We recommend that you read the fine steps that have been given and do not forget to backup your template.

• LOADING ANIMATION IN BLOG HEADER

1. Log in to your blogger account

2. Click the Template »Edit HTML» Continue »Click Expand Widget Templates

3. Add the following CSS code above]]> </ b: skin>

.circlewrapper {
width: 98px;
height: 98px;
float: right;
font-size: 14px;
text-align: center;
text-shadow: 0 1px 1px black;
}

.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #ff0000;
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #ff0000;
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}

.circle2 {
background-color: transparent;
border: 5px solid rgba(255, 0, 0, 0.9);
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #ff0000;
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
top: -150px;
text-align: center;
line-height: 90px;
}

@-moz-keyframes spin1Pulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -moz-transform:rotate(145deg); opacity:1;}
100% { -moz-transform:rotate(-320deg); opacity:0;}
}
@-moz-keyframes spin2Pulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);}
}
@-webkit-keyframes spin1Pulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0;}
}
@-webkit-keyframes spin2Pulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg);}
}

.circlebg {
width: 53px;
height: 53px;
position: relative;
border-radius: 50px;
-moz-animation: spin3Pulse 3s infinite ease-in-out;
-webkit-animation: spin3Pulse 3s infinite linear;
}

.circlewrapper2 {
width: 53px;
height: 53px;
text-align: center;
border-radius: 50px;
border: 3px solid rgba(0, 0, 0, 0.9);
padding: 8px;
background: -webkit-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
background: -moz-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
}

.circlewrapper3 {float:right;}

.circlewrapper3 a {
width: 78px;
height: 78px;
float: right;
font-size: 14px;
text-align: center;
border-radius: 50px;
text-shadow: 0 1px 1px black;
margin-top: -50px;
position: absolute;
line-height: 20px;
}

.circle4 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
}


.circle5 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -51.5px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
}

.circle6 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -103.5px;
}

.circle7 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -155px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
}


@-moz-keyframes spin3Pulse {
0% { -moz-transform:rotate(360deg); }
100% { -moz-transform:rotate(0deg);}
}
@-webkit-keyframes spin3Pulse {
0% { -webkit-transform:rotate(360deg);}
100% { -webkit-transform:rotate(0deg); }
}

span[class*="l-"] {/*Blog Johanes-Djogzs.blogspot.com*/
height: 4px; width: 4px;
background: #fff;
display: inline-block;
margin: 2px 2px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-webkit-animation: loader 4s infinite;
-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-webkit-animation-fill-mode: both;
-moz-animation: loader 4s infinite;
-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-moz-animation-fill-mode: both;
animation: loader 4s infinite;
animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
animation-fill-mode: both;}/*Blog Johanes-Djogzs.blogspot.com*/
span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}
@-webkit-keyframes loader {
0% {-webkit-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}/*Blog Johanes-Djogzs.blogspot.com*/
50% {-webkit-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}
@-moz-keyframes loader {
0% {-moz-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-moz-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}
@-keyframes loader {
0% {-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}/*Blog Johanes-Djogzs.blogspot.com*/
.tombol-readmore {clear:both;font-size: 14px;text-shadow: -0px 1px 1px black;}
.loading:hover {-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 1);-moz-box-shadow: 0 1px 5px rgba(0,0,0,1);}
.loading {line-height: 7px;margin: auto;text-align:center;width: 110px;color:#fff;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);border-bottom: 1px solid #333;border-left: 1px solid black;
border-right: 1px solid #333;border-top: 1px solid black;/*Blog Johanes-Djogzs.blogspot.com*/
background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);/*Blog Johanes-Djogzs.blogspot.com*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76, 76, 76, 1)), color-stop(12%,rgba(89, 89, 89, 1)), color-stop(25%,rgba(102, 102, 102, 1)), color-stop(39%,rgba(71, 71, 71, 1)), color-stop(50%,rgba(44, 44, 44, 1)), color-stop(51%,rgba(0, 0, 0, 1)), color-stop(60%,rgba(17, 17, 17, 1)), color-stop(76%,rgba(43, 43, 43, 1)), color-stop(91%,rgba(28, 28, 28, 1)), color-stop(100%,rgba(19, 19, 19, 1)));border-radius: 14px;-webkit-border-radius: 14px;-moz-border-radius: 14px;}

Then add the jquery code above the code </ head>, if the template you have installed jquery then                  no longer need the additional jquery, so that the effect of loading smoothly.

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

And the last step, attach the following code below <div id='header-wrapper'>.

<div class='circlewrapper'>
<div class='circle'/>
<div class='circle1'/>
<div class='circle2'/>
</div>

So I made a tutorial about Creating Loading Animation In Header Blog, if you are using a script css to make loading animation tutorial blog, stay longer need to add css above, stay straight plug

<div id='loadhalaman'>

<div class='loadball'> </ div>

<div class='loadball-2'> </ div> </ div>

<div under id='header-wrapper'> after the save.

Hopefully useful ...

09.01  Unknown  No comments

Read More

Kumpulan Link Auto Follower

Hari gini ga punya akun Twitter ?? #kamseupay =))
Berikut Kumpulan URL/Link Free Twitter Auto Followers :

1. http://hitfollow.info/

2. http://plusfollower.info/

3. http://newfollow.info/

4. http://followback.info/

5. http://letgetmorefollowers.info/

Jadi, penjelasannya gini.... 

1. Login ke akun Twiiter kamu.
2. Klik semua url/link di atas.
3. Setelah semua di-klik, masukkan user + pass akun Twitter kamu pada semua web di atas. Tenang 100% aman. Kalau takut, coba saja pake akun palsu.
4. Selanjutnya ikuti petunjuk dari masing - masing web di atas.
5. Sampai detik ini apabila semua web di atas anda jalankan secara bersamaan, minimal 200 followers/hari untuk akun Twitter anda.
6. Web - web di atas hanya bisa anda gunakan 1 x 24 jam.

Nih buktinya @ricky_s5 

00.10  Unknown  No comments

Read More

Membuat Animasi Loading pada Header

Tutorial Belajar Blog  - Cara Membuat Animasi Loading Di Header Blogmerupakan tutorial lanjutan dari tutorial blog Cara Membuat Animasi Loading Blog Lebih Menarik apabila tutorial sebelumnya merupakan muncul animasi pada saat blog mau di buka ,cuma pada tutorial ini muncul di header blog.

Simak langkahnya berikut ini :

Sebaiknya anda membaca dengan baik langkah yang telah diberikan dan jangan lupa backup template anda.

ANIMASI LOADING DI HEADER BLOG

1. Login ke akun blogger anda

2. Klik Template » Edit HTML » Lanjutkan »  Klik  Expand Template Widget

3. Tambahkan kode CSS berikut ini diatas ]]></b:skin>

.circlewrapper {
width: 98px;
height: 98px;
float: right;
font-size: 14px;
text-align: center;
text-shadow: 0 1px 1px black;
}

.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #ff0000;
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #ff0000;
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}

.circle2 {
background-color: transparent;
border: 5px solid rgba(255, 0, 0, 0.9);
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #ff0000;
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
top: -150px;
text-align: center;
line-height: 90px;
}

@-moz-keyframes spin1Pulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -moz-transform:rotate(145deg); opacity:1;}
100% { -moz-transform:rotate(-320deg); opacity:0;}
}
@-moz-keyframes spin2Pulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);}
}
@-webkit-keyframes spin1Pulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0;}
}
@-webkit-keyframes spin2Pulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg);}
}

.circlebg {
width: 53px;
height: 53px;
position: relative;
border-radius: 50px;
-moz-animation: spin3Pulse 3s infinite ease-in-out;
-webkit-animation: spin3Pulse 3s infinite linear;
}

.circlewrapper2 {
width: 53px;
height: 53px;
text-align: center;
border-radius: 50px;
border: 3px solid rgba(0, 0, 0, 0.9);
padding: 8px;
background: -webkit-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
background: -moz-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
}

.circlewrapper3 {float:right;}

.circlewrapper3 a {
width: 78px;
height: 78px;
float: right;
font-size: 14px;
text-align: center;
border-radius: 50px;
text-shadow: 0 1px 1px black;
margin-top: -50px;
position: absolute;
line-height: 20px;
}

.circle4 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
}


.circle5 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -51.5px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
}

.circle6 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -103.5px;
}

.circle7 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -155px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
}


@-moz-keyframes spin3Pulse {
0% { -moz-transform:rotate(360deg); }
100% { -moz-transform:rotate(0deg);}
}
@-webkit-keyframes spin3Pulse {
0% { -webkit-transform:rotate(360deg);}
100% { -webkit-transform:rotate(0deg); }
}

span[class*="l-"] {/*Blog Johanes-Djogzs.blogspot.com*/
height: 4px; width: 4px;
background: #fff;
display: inline-block;
margin: 2px 2px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-webkit-animation: loader 4s infinite;
-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-webkit-animation-fill-mode: both;
-moz-animation: loader 4s infinite;
-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-moz-animation-fill-mode: both;
animation: loader 4s infinite;
animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
animation-fill-mode: both;}/*Blog Johanes-Djogzs.blogspot.com*/
span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}
@-webkit-keyframes loader {
0% {-webkit-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}/*Blog Johanes-Djogzs.blogspot.com*/
50% {-webkit-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}
@-moz-keyframes loader {
0% {-moz-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-moz-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}
@-keyframes loader {
0% {-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}/*Blog Johanes-Djogzs.blogspot.com*/
.tombol-readmore {clear:both;font-size: 14px;text-shadow: -0px 1px 1px black;}
.loading:hover {-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 1);-moz-box-shadow: 0 1px 5px rgba(0,0,0,1);}
.loading {line-height: 7px;margin: auto;text-align:center;width: 110px;color:#fff;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);border-bottom: 1px solid #333;border-left: 1px solid black;
border-right: 1px solid #333;border-top: 1px solid black;/*Blog Johanes-Djogzs.blogspot.com*/
background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);/*Blog Johanes-Djogzs.blogspot.com*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76, 76, 76, 1)), color-stop(12%,rgba(89, 89, 89, 1)), color-stop(25%,rgba(102, 102, 102, 1)), color-stop(39%,rgba(71, 71, 71, 1)), color-stop(50%,rgba(44, 44, 44, 1)), color-stop(51%,rgba(0, 0, 0, 1)), color-stop(60%,rgba(17, 17, 17, 1)), color-stop(76%,rgba(43, 43, 43, 1)), color-stop(91%,rgba(28, 28, 28, 1)), color-stop(100%,rgba(19, 19, 19, 1)));border-radius: 14px;-webkit-border-radius: 14px;-moz-border-radius: 14px;}

Kemudian tambahkan kode jquery ini diatas kode </head>, jika dalam template kalian sudah terpasang jquery maka tidak perlu lagi tambahan jquery tersebut, aga proses efek loading lancar

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

Dan langkah yang terakhir, pasang kode berikut dibawah  <div id='header-wrapper'>

<div class='circlewrapper'>
<div class='circle'/>
<div class='circle1'/>
<div class='circle2'/>
</div>

Demikian tutorial yang saya buat mengenai Membuat Animasi Loading Di Header Blog,apabila anda sudah menggunakan script css pada tutorial membuat animasi loading blog, tinggal perlu lagi menambahkan css diatas , tinggal langsung saja pasang

<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div> </div> 

dibawah <div id='header-wrapper'> setelah itu save .
Semoga bermanfaat...

22.30  Unknown  No comments

Read More

Animasi Login

Animasi Login Di Home Blog ini memberikan efek manipulasi terhadap blog agar nampak seperti sedang login dengan Cap Jempol. Inspirasi ini saya dapatkan dari tetangga blogger kita dan saya padukan dengan pengalaman tentang jQuery saya. Yah, lumayan memberikan kesan yang menarik para pengunjung ketika berada di home blog kita.

Ya udah langsung tancap tutorialnya gan.

ANIMASI LOGIN HOME BLOG

Letakkan Element dibawah ini tepat di atas </body>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Animasi Login Begin -->
<div id='animasi-loginSM' style='position:fixed;z-index:9001;background:transparent;height:100%;width:100%;left:0;top:0;'>
<script type='text/javascript'>
// ----- Gambar Ukuran 28 x 28 Pixel -----
var  Gambar_Login_Anda ='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqlMbtDQjWOBWkrIlprXnegti3JHEJzORl0t4rhLAuBK58luCS-10ASw4pD1byGJrGoKkGi9pbmGWfvLdPLT1-uD-QAHaSimztoDKQ0KeOffue4dm9ZC01Q8ttmyYOyCE4OhOIL99qvL8/s28/Shutdown.png',
       Nama_Login_Anda = 'Santa_Mars';
</script>
<script src='http://not-remove-admin-3.googlecode.com/files/animasi-login3.js' type='text/javascript'></script>
</div>
<div id='animasi-munyer1' style='position:fixed;z-index:9000;background:black;height:55%;width:100%;left:0;top:0;'></div>
<div id='animasi-munyer2' style='position:fixed;z-index:9000;background:black;height:55%;width:100%;left:0;bottom:0;'></div>
<div id='animasi-munyer3' style='position:fixed;z-index:9000;background:black;height:100%;width:55%;left:0;top:0;'></div>
<div id='animasi-munyer4' style='position:fixed;z-index:9000;background:black;height:100%;width:55%;right:0;bottom:0;'></div>
<!-- Animasi Login End -->
<b:else/>
</b:if>

02.25  Unknown  No comments

Read More