Rasanya sudah lama sekali saya enggak membagikan tutorial lagi,
Nah kali ini saya ingin membagikan Cara memasang pesan error page not found 404 keren. untuk mempercantik blog anda.
langkang pemasangannya gampang lihat di bawah ini :
- langkah pertama buka blog sobat
- masuk ke setelan
- klik Preferensi penelusuran
- Kemudian sobat cari Pesan khusus untuk laman tidak di temukan
- klik edit
- kopas kode di bawah ini dan masukan di kolom yang telah di sediakan
<b:if cond='data:blog.pageType == "error_page"'> <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} 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:''} abbr,acronym{border:0} #error-not-found{background:#310404 url(https://css3-tutsplus.googlecode.com/svn/trunk/Erorpage404/images/red_texture.png) repeat;font-family:'BebasNeueRegular';z-index:999999;position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:999999} .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-globe{position:absolute;width:282px;height:273px;left:50%;top:50%;margin:-137px 0 0 -141px;background:transparent url(https://css3-tutsplus.googlecode.com/svn/trunk/Erorpage404/images/globe.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:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";filter:alpha(opacity=30);opacity:0.3;-webkit-transform:scale(2);-moz-transform:scale(2);-o-transform:scale(2);-ms-transform:scale(2);transform:scale(2)} .sp-circle-link{position:absolute;left:50%;bottom:100px;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);-o-transform:scale(0.8) rotate(0deg);-ms-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-globe"></div> <h2 class="frame-1">Mohon Maaf..!!!</h2> <h2 class="frame-2">Halaman Yang Anda Cari Tidak Ada</h2> <h2 class="frame-3">Pergi ke Home</h2> <h2 class="frame-4">Now !!</h2> <h2 class="frame-5"><span>Page Not</span> <span>Found.</span> <span>404.!!</span></h2> <a class="sp-circle-link" expr:href='data:blog.homepageUrl' title='home page'>HOME</a> </div> </div> </div> <!-- end--> </b:if>
- Selesai lihat hasilnya
Catatan :
Bila sobat ingin menjadikan pesan itu untuk memodif blog sobat caranya tinggal meng Copy kode di atas dan letakan di bawah kode </body>
Cukup sekian tutorial kali ini semoga bermanfaat khususnya bagi saya sendiri, salam blogger indonesia
Ditulis Oleh : Unknown ~ Czikart Software
Anda sedang membaca sebuah artikel yang berjudul Cara memasang pesan error page not found 404 keren, Silahkan download software, games, Antivirus ataupun tutorial sepuasnya secara gratis di czikart software dan tetap kunjungi czikart software. Dan bagi yang ingin Copy Paste, Silahkan sertakan link sumbernya karena kami tidak bertanggung jawab jika blog/web anda dihapus oleh google kareana tidak menyertakan link sumbernya sesuai aturan dari google, Semoga artikel tersebut bermanfaat untuk anda, Mohon maaf apabila konten yang anda baca rusak atau salah dalam penulisan. Jika ada pertanyaan, kritik, dan saran yang ingin di sampaikan silahkan komentar.
Posted in: Tutorial Blog
0 komentar:
Posting Komentar