Trik Membuat Custom Page Not Found

Author : UnknownTidak ada komentar

cara membuat custom page not found for blogger by muizcyan-xp
dari blog smz

hai sobat blogger ketemu lagi sama saya saipul muiz( muizcyan-xp) yang sebelumnya saya telah share cara membuat animasi di header blog dan sekarang saya mau share tentang bagaimana cara membuat custom page not found di blogger..

custom page not found sering disebut halaman yang tidak ditemukan atau pada saat kita mencari artikel di blog dengan kata kunci yang salah maka custom page not found tersebut akan muncull

lahh langsung saja ikuti tutorialnya bagaimana cara membuat custom page not found yang menarik..


  • pergi ke template >> edit HTML

  • temukan kode </head> agar mudah gunakan ctrl+f dan simpan kode dibawah ini diatas kode </head>



<b:if cond='data:blog.pageType == "error_page"'>
<style type="text/css">.status-msg-wrap{font-size:100%;margin:none;position:static;width:100%}.status-msg-border{display:none}.status-msg-body{padding:none;position:static;text-align:inherit;width:100%;z-index:auto}.status-msg-wrap a{padding:none;text-decoration:inherit}</style>


  • save template

  • Lalu pergi ke setelan>> preferensi penelusuran>>pesan khusus halaman tidak ditemukan(custom page not found)


Custom Error 404 PAge Cara membuat halaman error 404 di blog

  • salin kode ini ke dalam kotak teks nya yang tersedia!!


<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgHjHQ44CkHnSClxrAdnKz-uzhRPnUXz55anwN4QSscKrluYB-ACn3BH5HjYmScM6NL_32r-5E_T5-f2ANjvV_UwXeQmEArYvSXKqaCrapl-KZZ8KjStMSQmdH0JnifuFVWkAkJQ4n-5w/s1600/404+error+page+4.jpg"/>

  • jika sudah simpan>>>
dan jika berhasil akan terlihat seperti gambar yang diatas lihat demonya

ini saya ngikuti tutornya blog smz

DEMO

dan ada juga buatan saya yang dilengkapi dengan kotak searc h blogger





<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h2 style="font-size: 35px;margin: 0;text-align: center;">MuizCyan Member I'm Sorry</h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="http://www.muizcyan.co.vu/">Click here</a> to go to Homepage <br> Have a nice Day... wayahna bongan maneh neangan teu pararuguh
wayahna sakali deuii nya bisi kahapus artikel ieu teh!!</h3>

<h3 style="font-size:17px;"><li>Silahkan gunakan kotak pencarian untuk mencari artikel lainnya</li></h3>
<center>
<form _lpchecked="1" action="/search" class="search-form" id="search_mini_form" method="get">
<input id="searchinput" name="q" onblur="if (this.value == '') {this.value = 'Type Here & Hit Enter';}" onfocus="if (this.value == 'Search the site') {this.value = '';}" type="text" value="Type Here & Hit Enter" />
<input id="searchbutton" style="vertical-align: top;" type="submit" value="Search!" />
</form>
</center>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgHjHQ44CkHnSClxrAdnKz-uzhRPnUXz55anwN4QSscKrluYB-ACn3BH5HjYmScM6NL_32r-5E_T5-f2ANjvV_UwXeQmEArYvSXKqaCrapl-KZZ8KjStMSQmdH0JnifuFVWkAkJQ4n-5w/s1600/404+error+page+4.jpg"/>

<style>
#searchinput {

background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhf3nWeYDuRvTMOg-obqq_6oFv06vsegl6M-_qFyl3gEECOO1dNcPahbpdSn2Dwt6blcCoM1iI5nlBYSINxzxaRpTiKxkHEIwflUBxWBd8w8PGsNZUtjICkeiB57YO7BXSSO556EdFAH9I/s0/search.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
color: #A0A0A0;
display: inline-block;
font-family:arial;
font-size: 12px;
font-weight:bold;
height: 24px;
width:300px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
#searchinput:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
}
#searchbutton {
background:#444;
color:#fff;
height:35px;
border-radius:5px 5px 5px 5px;
box-shadow:1px 2px 1px 1px #ABABAB;
border:1px solid #fff;
margin-top:3px;
padding:8px;
}
#searchbutton:hover{background:#555;}
</style>

sama kaya diatas tutornya bedanya hanya saat menyimpan kode di custom page not found nya aja ganti dengan kode yang diatas

tag
cara membuat custom page not found jadi lebih keren| trik mempercantik custom page not found di blogger| cara membuat gambar custom page not found| trik membuat redirect url custom page not found| trik membuat gambar ketika keyword yang kita cari di blog gagal atau not found 404
Posted On : Sabtu, 17 Mei 2014Time : 04.48
SHARE TO :
| | Template Created By : Binkbenks | CopyRigt By : Gracia Widyakarsa Group | |