Create Animasi Custom Error 404 file Not Found Page

Untuk hari ini Adithya Blog akan share cara membuat Error 404 file Not Found Page dengan animasi. untuk demonya silahkan anda klik disini

Berikut Tutorialnya :

• Login ke blogger
• Pilih menu template >> edit HTML >> lanjutkan
• Dengan menggunakan ctrl + F, cari kode </body>
• Lalu letakkan kode berikut diatasnya 

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
/* CSS reset */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
html,body{margin:0;padding:0;overflow:hidden;}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:&#39;&#39;}
abbr,acronym{border:0}
#error-not-found{background:#310404 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLyVhqxhpfk9att7KuilnIDsNwElz8TxZ2dIKnU0B61Dlnl-OOV7YuC2qUZTVW0FiDUpNFvB-QmpC6Ol7DsKdmkh24x-GCzKazOQfpcBSvW_UABgt-5qU1W809bvUw6kXs6oM2ZR0YP7A/s1600/overlay.png) repeat;font-family:&#39;BebasNeueRegular&#39;;z-index:999999;position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:999999;overflow:hidden;}
.eror-page{background:-webkit-radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));background:-moz-radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));background:-ms-radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));background:radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));position:absolute;width:100%;height:100%;left:0px;top:0px;z-index:1000}
#error-not-found h2{position:absolute;top:50%;line-height:100px;height:100px;margin-top:-50px;font-size:100px;width:100%;text-align:center;color:transparent;-webkit-animation:blurFadeInOut 3s ease-in backwards;-moz-animation:blurFadeInOut 3s ease-in backwards;-ms-animation:blurFadeInOut 3s ease-in backwards;animation:blurFadeInOut 3s ease-in backwards}
#error-not-found h2.frame-1{-webkit-animation-delay:0s;-moz-animation-delay:0s;-ms-animation-delay:0s;animation-delay:0s}
#error-not-found h2.frame-2{-webkit-animation-delay:3s;-moz-animation-delay:3s;-ms-animation-delay:3s;animation-delay:3s}
#error-not-found h2.frame-3{-webkit-animation-delay:6s;-moz-animation-delay:6s;-ms-animation-delay:6s;animation-delay:6s}
#error-not-found h2.frame-4{font-size:200px;-webkit-animation-delay:9s;-moz-animation-delay:9s;-ms-animation-delay:9s;animation-delay:9s}
#error-not-found h2.frame-5{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none;color:transparent;text-shadow:0px 0px 1px #fff}
#error-not-found h2.frame-5 span{-webkit-animation:blurFadeIn 3s ease-in 12s backwards;-moz-animation:blurFadeIn 1s ease-in 12s backwards;-ms-animation:blurFadeIn 3s ease-in 12s backwards;animation:blurFadeIn 3s ease-in 12s backwards;color:transparent;text-shadow:0px 0px 1px #fff}
#error-not-found h2.frame-5 span:nth-child(2){-webkit-animation-delay:13s;-moz-animation-delay:13s;-ms-animation-delay:13s;animation-delay:13s}
#error-not-found h2.frame-5 span:nth-child(3){-webkit-animation-delay:14s;-moz-animation-delay:14s;-ms-animation-delay:14s;animation-delay:14s}
.sp-backg{position:absolute;width:470px;height:239px;left:50%;top:50%;margin:-137px 0 0 -141px;background:transparent url(http://www.naturalhealthencyclopedia.com/skin/img/404.png) no-repeat top left;-webkit-animation:fadeInBack 3.6s linear 14s backwards;-moz-animation:fadeInBack 3.6s linear 14s backwards;-ms-animation:fadeInBack 3.6s linear 14s backwards;animation:fadeInBack 3.6s linear 14s backwards;-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=30)&quot;;filter:alpha(opacity=30);opacity:0.3;-webkit-transform:scale(2);-moz-transform:scale(2);transform:scale(2)}
.sp-circle-link{position:absolute;left:50%;bottom:5%;margin-left:-50px;text-align:center;line-height:100px;width:100px;height:100px;background:#fff;color:#3f1616;font-size:25px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-animation:fadeInRotate 1s linear 16s backwards;-moz-animation:fadeInRotate 1s linear 16s backwards;-ms-animation:fadeInRotate 1s linear 16s backwards;animation:fadeInRotate 1s linear 16s backwards;-webkit-transform:scale(0.8) rotate(0deg);-moz-transform:scale(0.8) rotate(0deg);transform:scale(0.8) rotate(0deg)}
.sp-circle-link:hover{background:#85373b;color:#fff}
/**/@-webkit-keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;-webkit-transform:scale(1.3)}
20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;-webkit-transform:scale(1)}
100%{opacity:0;text-shadow:0px 0px 50px #fff;-webkit-transform:scale(0)}
}
@-webkit-keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;-webkit-transform:scale(1.3)}
50%{opacity:0.5;text-shadow:0px 0px 10px #fff;-webkit-transform:scale(1.1)}
100%{opacity:1;text-shadow:0px 0px 1px #fff;-webkit-transform:scale(1)}
}
@-webkit-keyframes fadeInBack{0%{opacity:0;-webkit-transform:scale(0)}
50%{opacity:0.4;-webkit-transform:scale(1)}
100%{opacity:0.2;-webkit-transform:scale(2)}
}
@-webkit-keyframes fadeInRotate{0%{opacity:0;-webkit-transform:scale(0) rotate(360deg)}
100%{opacity:1;-webkit-transform:scale(1) rotate(0deg)}
}
/**/@-moz-keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;-moz-transform:scale(1.3)}
20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;-moz-transform:scale(1)}
100%{opacity:0;text-shadow:0px 0px 50px #fff;-moz-transform:scale(0)}
}
@-moz-keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;-moz-transform:scale(1.3)}
100%{opacity:1;text-shadow:0px 0px 1px #fff;-moz-transform:scale(1)}
}
@-moz-keyframes fadeInBack{0%{opacity:0;-moz-transform:scale(0)}
50%{opacity:0.4;-moz-transform:scale(1)}
100%{opacity:0.2;-moz-transform:scale(2)}
}
@-moz-keyframes fadeInRotate{0%{opacity:0;-moz-transform:scale(0) rotate(360deg)}
100%{opacity:1;-moz-transform:scale(1) rotate(0deg)}
}
/**/@keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;transform:scale(1.3)}
20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;transform:scale(1)}
100%{opacity:0;text-shadow:0px 0px 50px #fff;transform:scale(0)}
}
@keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;transform:scale(1.3)}
50%{opacity:0.5;text-shadow:0px 0px 10px #fff;transform:scale(1.1)}
100%{opacity:1;text-shadow:0px 0px 1px #fff;transform:scale(1)}
}
@keyframes fadeInBack{0%{opacity:0;transform:scale(0)}
50%{opacity:0.4;transform:scale(1)}
100%{opacity:0.2;transform:scale(2)}
}
@keyframes fadeInRotate{0%{opacity:0;transform:scale(0) rotate(360deg)}
100%{opacity:1;transform:scale(1) rotate(0deg)}
}
</style>
<div class='container'>
<div id='error-not-found'>
<div class='eror-page'>
<div class='sp-backg'/>
<h2 class='frame-1'>Mohon Maaf..!!!</h2>
<h2 class='frame-2'>Halaman Yang Anda Cari Tidak Ada</h2>
<h2 class='frame-3'>Go To Homepage</h2>
<h2 class='frame-4'>Now... !!</h2>
<h2 class='frame-5'><span>Error 404.!!</span> <span>Page Not</span> <span>Found.</span></h2>
<a class='sp-circle-link' expr:href='data:blog.homepageUrl' title='Home page'>HOME</a>
</div>
</div></div> <!-- end-->
</b:if>

• Jika ingin mengubah pesannya. kamu hanya tinggal mengganti text yg berwarna merah dengan pesan yg ingin kamu tampilkan.
• Setelah itu simpan HTML kamu.

Nah sekarang coba kamu cek, apakah berhasil. jika berhasil jangan lupa untuk meninggalkan komentar. karena komentar anda sangat membantu perkembangan blog ini!!

Icon Muncul Apabila Cusor Menyentuh Blockquote

Adithya Blog kali ini akan share cara membuat icon atau animasi pada kotak Blockquote. Apabila cursor menyorot Blockquote maka otomatis akan ada icon atau animasi yang muncul dari ujung kiri atas menuju sudut kanan bawah. mau lihat demonya, silahkan kamu sorot blockquote yang ada di postingan berikut ini.. HERE

Berikut tutorialnya :

• Login ke blogger
• Pilih menu template >> edit HTML >> lanjutkan
• Dengan menggunakan ctrl + F, cari kode blockquote:hover
• Lalu ganti semua kode tersebut dengan kode berikut ini

blockquote:hover {
background-color: #FFC8F2;
-webkit-transition-duration: 3.5s;
background-image:url(http://th929.photobucket.com/albums/ad135/wae_arix/th_NarutoGif.gif);
background-position:bottom right;
background-repeat:no-repeat;
}

• Apabila di HTML kamu tidak terdapat kode blockquote:hover. kamu dapat meletakkan kode diatas ini, di bawah kode .post blockquote {
• Ubah code yg berwarna kuning untuk merubah warna background blockqute pada blog kamu.
• Dan kamu juga dapat mengganti icon atau animasinya dengan merubah code yg berwarna hijau.
• Setelah itu simpan HTML milik kamu.

Nah, sekarang coba kamu lihat blockquote yg ada di postingan kamu, apakah icon atau animasinya muncul atau tidak. jika belum muncul coba kamu periksa kembali letak kodenya....

Award Top Desain Header dari Igihcksn

Adithya Blog kembali menerima award. dan kali ini datangnya dari igihcksn. dalam katagori top desain header. Dan Adithya Blog mendapatkan posisi ke - 6. berikut awardnya...

Thanks buat igihcksn

Membuat Join This Site dan Like Button Melayang

Kali ini Adithya Blog akan share cara Membuat Join This Site dan Like Button Facebook Melayang, seperti yg ada di Blog ini. Sebenarnya trick ini juga berguna untuk menurunkan berat loading blog kamu dan tentunya juga menghemat tempat. Bagaimana anda ingin mencobanya, silahkan ikuti tutorial berikut.

Tutorial :

• Login ke blogger
• Pilih menu template >> edit HTML >> lanjutkan
• Cari Kode ]]></b:skin> Lalu letakkan code di bawah ini tepat diatasnya...

#Apnavbar3{border-bottom:4px solid #fff;border-top:4px solid #fff;border-left:4px solid #fff;border-right:4px solid #fff;border-style:solid;border-radius:7px;width:115px;height:auto;margin-bottom:455px;margin-left:1px;font-family:Comic Sans Ms;color:white;text-align:left;background:rgba(0,0,000,0.5);background:rgba(0,0,000,0.5);background:rgba(0,0,000,0.5);padding:2px;z-index:999;bottom:1px;left:1px;right:1px;position:fixed;-webkit-transition:all .9s ease-out;-moz-transition:all .9s ease-out;-ms-transition:all .9s ease-out;-o-transition:all .9s ease-out;transition:all .9s ease-out}#Apnavbar3 .left{float:left;text-align:left;font-family:Supermercado;font-size:10px;font-style:normal;font-weight:normal;color:White;padding:2px 10px}#Apnavbar3:hover{font-size:13px;font-style:bold;width:115px;height:auto;margin-bottom:455px;margin-left:13px;margin-right:95px;-webkit-transition:all .9s ease-out;-moz-transition:all .9s ease-out;-ms-transition:all .9s ease-out;-o-transition:all .9s ease-out;transition:all .9s ease-out}

• Lalu simpan HTML kalian.
• Kemudian Copy code di bawah ini lalu masukan ke HTML/Javascript

<div id='Apnavbar3' style='position:fixed;'>
<span class='left'><img src='' title=''/>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/pages/Adithya-putr4/214058702032211&send=false&layout=button_count&width=85&show_faces=false&action=like&colorscheme=light&font&height=21' style='border:none; overflow:hidden; width:85px; height:21px;'></iframe>
</span>
<a href='http://www.Blogger.com/follow-blog.g?blogID=2425499272764146735' onclick='window.open(this.href, &#39;dmfollow&#39;, &#39;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521&#39;);return false;' style='text-align:center;font-weight:bold;text-decoration:none;' title='Join this site / follow'><img alt='Join this site' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxnWEtO9TCledk70h5UaOd_0CAuOshRw6d1bid_AAGZXyQ25pg_ekoRfik9yBUQtad2t6B3qlhHv-apGR_OjyOCEwCr2XWmdsJIdd3E21XU4fU5S6VoI5ONhvoAS1AqxAJff8NKa0pOG8/s1600/aaaa.png' style='vertical-align:center;border:0px;cursor:pointer;' width='110'/></a></div>
<div id='ApNavbar' style='position: fixed;'></div>

• Ganti text yg berwarna kuning dengan URL fans page kamu
• Ganti text yg berwarna hijau dengan ID blog kamu
• Setelah itu Simpan.

Bagimana cara mengetahui ID blog milik kita, silahkan klik disini

Bad Pieggies For Android | 32 MB

pasti diantara sobat semua ada android user kan, nah kali ini saya mau share game untuk android nih. jika kemarin saya share bad piggies for PC, nah kali ini saya akan share Bad piggies for android, mau tau gmn serunya? silakan sobat coba sendri ya.

Download Bad Pieggies For Android

Features:

• 60 levels crammed with flying/driving/crashing fun!
• 30 additional puzzles unlocked by three-starring levels!
• Free updates!
• 4 sandbox levels to stretch your creativity!
• Ultra-special, ultra-secret, ultra-difficult sandbox level to unlock bycollecting all the skulls!
• 33 objects to create the ultimate machine: motors, wings, fans, bottle rockets, umbrellas, balloons, and much more!

Sumber

Best Award Template Dari Katsu™

Sukur Alhamdulillah dalam seminggu ini Adithya Blog banyak menerima Award. Kali ini Awardnya datang dari Katsu™, dan Adithya Blog mendapatkan peringkat ke 2. Berikut gambar Awardnya..

Gak Cuma Itu Sob Hadihnya,Para Pemenangnya Juga Mendapatkan Template Redesign Dari Katsu™, Silahkan Dilihat Templatenya...

DEMO HERE

Thanks To Katsu™

Satu Hati Blogger Award Dari bizanniusz-hackers

Adithya Blog kembali menerima Award. kali ini Awardnya datang dari bizanniusz-hackers. Berikut Awardnya..

Thanks atas Awardnya

Anti Klik Kanan Dengan Gambar | New Version

Kali ini Adithya Blog akan share script anti klik kanan, yang tentunya berbeda dari milik dickeymaru. bedanya trick ini di lengkapi dengan tombol close. Mau liat demonya, silahkan klik disini

Berikut Tutorialnya :

• Login ke blogger
• Pilih menu template >> edit HTML >> lanjutkan
• Cari Kode </body> Lalu letakkan code di bawah ini tepat diatasnya...

<style> .overlay{ background-color:rgba(0,0, 0, .9); position:fixed; top:0px; bottom:0px; left:0px; right:0px; z-index:100; } .box{ position:fixed; height:258px; width:375px; left:-80%; top:22%; background-color:rgba(0,0, 0, .4); background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRVM1oImDHsnvXZYzjbZqVU30XRHm44rTXlCSFXco0yVtNF_VXt4GhUt3fcEMc2SVEBt1qq7VJ5S-CwJuCdD4u1DjsZLKgo3MEevMu_tLp1WBPwFp4ZIbrpmkEtYP9lv0R4B9Tx4NKZBDb/s1600/a.jpg); color:#777; font:20px arial,sans serif; padding:20px; border:1px solid #222; -moz-box-shadow: 0 1px 5px #000; -webkit-box-shadow: 0 1px 5px #000; z-index:9999; } .close{ float:right; width:36px; height:36px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhsHUo_4G1nDeW4bMdEqLizTMgBaSqn98PoaH_dWKkQARptyrY_W7I_5iYaEjGp57WHT3TVX57Z9E872qgM8ololMfQNK8rLcmEZBKmVbWkSAsNIUwXnU_BJpsg-mDXZpbY433kqLJS7B/s1600/close_icon.png) repeat top left; margin-top:-45px; margin-right:-40px; cursor:pointer; } .box h1{ font:60px arial black,sans serif;line-height:0.8em; color:red; } </style>
<script src='http://anthzo.webs.com/2012-blog/disble-right-click.js' type='text/javascript'></script>
<div class='overlay' id='overlay' style='display:none;'>
</div>
<div class='box' id='box'>
<a class='close' id='close'></a>
</div>

• Ubah text yg berwarna kuning dengan url gambar kalian. 
• Gunakan gambar yg berukuran 415 x 298 agar tampilan lebih maksimal
• Setelah itu Simpan HTML milik kalian

Sekarang coba kalian lihat hasilnya, sukses kan. Sekian Tutorial blog hari ini dan semoga berguna.... 

Award Blogger Most Crazy World dari Deny Stroom

Adithya Blog akhirnya kembali mendapatkan Award dari Deny Stroom, dalam katagori Blogger Most Crazy World. dan alhamdulillah saya mendapatakn posisi pertama.

Thanks Deny Stroom atas award nya

Free Download Bad Piggies 1.0.0 For PC Full

Bad Piggies 1.0.0 For PC Full merupakan game terbaru yang dirilis oleh Rovio. dimana kali ini kita tidak lagi menggunakan burung sebagai pemeran nya. sesuai nama game nya, kali ini babi lah yang akan berperan dalam game ini. Game ini membutuhkan kita untuk menganalisa bagaimana kita bisa menerbangkan/membawa babi hingga misi nya berhasil.

Download Bad Piggies | 42 Mb

Fitur :

• 60 level penuh dengan terbang / mengemudi / menabrak.
• 30 teka-teki tambahan dibuka oleh tiga bintang di setiap tingkat.
• 33 objek untuk menciptakan mesin utama: motor, sayap, penggemar, botol roket, payung, balon, dan banyak lagi!

Hack Energi Chef Ville

Hai.. sobat Adithya blog. hari ini saya akan share cara Hack Energi Chef Ville. yang mau mencoba silahkan download dulu semua peralatannya.....

Peralatan :

• Bot
• Plugin

Cara Penggunaan

~Selamat Mencoba~

Membuat Link Otomatis Terbuka Saat Disorot

Tutorial ini berawal dari rasa penasaran saya ketika membuka daftar link dan banner sahabat blogger yang ingin bertukar link. Saat mengecek keberadaan link blog ini, tanpa sengaja menyorot sebuah banner dengan cursor mouse. Dan saat itu pula dengan tiba-tiba link yang disorot tadi terbuka tanpa klik sedikit pun.

Sebagai contoh coba kamu sorot banner berikut...

Bagaimana linknya terbuka otomatiskan tanpa di klik. jadi apabila banner yg ada di blog temen kamu tanpa sengaja tersorot oleh mouse maka secara otomatis akan teralihkan ke blog milik kamu, dan tentu saja visitor kamu juga akan meningkat.

Bagi sobat yang ingin membuat banner seperti contoh di atas, berikut adalah susunan scriptnya:

Untuk teks:

<a href="http://link-anda.com/"onmouseover="window.location=this.href" target="_blank">Tulis judul link disini</a>

Contoh:

<a href="http://adithya-putr4.blogspot.com/"onmouseover="window.location=this.href" target="_blank">Adithya Blog</a>

Untuk Banner:

<a href="http://link-anda.com/"onmouseover="window.location=this.href" target="_blank" title="judul link"><img alt="judul gambar" src="Link gambar anda disini" /></a>

Contoh:

<a href="http://adithya-putr4.blogspot.com/" onmouseover="window.location=this.href" target="_blank" title="judul link"><img alt="Adithya Blog" src="http://i1224.photobucket.com/albums/ee373/adi1993/my-banner-1.gif" /></a>

Sedikit ulasan tentang cara modifikasi link, mudah-mudahan bermanfaat . . .