Penyusunan dokumen perencanaan tahunan Desa atau sering disebut dengan
Dokumen RKP Desa. Pada postingan ini akan dibagikan terkait dengan dokumen
RKP Desa ...
Halaman Error Page 403 Responsive
Halaman error ini untuk lebih menyajikan hal-hal dari kekurangan blog ata website. Jadi Admin pikir ini wajib diterapkan dalam blog kita. Seperti yang di tuliskan sebelumnya bagaimana cara menyajikan Halaman error page ini valid HTML5? kunjungi disini
Penerapannya
Carilah kode<body> dalam template Anda dan terapkan kode dibawah ini.<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
body {
background:#FFF;
font-family:Verdana,Geneva,sans-serif;
color:#686868;
font-size:14px;
line-height:16px;
}
#error-page {
position:relative;
width:100%;
}
#my-logo-line {
position:absolute;
width:100%;
height:1px;
background:#acddef;
top:62px;
left:0;
z-index:1;
}
#my-logo {
position:relative;
width:1000px;
height:27px;
margin:0 auto;
padding:48px 0 0 0;
z-index:5;
}
.my-logo {
display:block;
position:absolute;
top:48px;
left:135px;
background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiylSkYRY6NYHnxe-USoHIQCpWGDuPF6A6yijUoS49WH_md7SEDCkvyplUCP370WFB3-rlMyiRBvEAW6_u__ROCV6YId14ATBoJYQ8zgxW7qqAuzecC6yM7ot_sjDCAk1k3gjs-ADVh8eE/s1600/icon.png) no-repeat 50% 0;
width:75px;
height:27px;
font-size:0;
color:transparent;
text-decoration:none;
}
#error_page {
width:1000px;
margin:0 auto;
padding:42px 0 301px 0;
}
#error_page.permission {
padding:40px 0 389px 0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2aBOkQRlNFvgZgT-lz0vaZ8k2PqGHCNdjzRMjOJE9wQaUmETcChJly6M4nI-DF9MwA3SJVoXDOkIAzDER_Z4_KpwG0x9Usc8CV7Kjvh-vL0w-rXLWB0ulRM0PyltOXr6IZ7WnoSfI_Fs/s1600/permission.png) no-repeat 317px 100%;
margin-bottom:55px;
}
.error-title {
display:inline-block;
position:absolute;
width:76px;
top:52px;
left:50%;
margin-left:-38px;
text-align:center;
background:#FFF;
font-size:17px;
line-height:18px;
color:#6bc0e1;
}
#error_page-link {
font-size:22px;
line-height:26px;
text-transform:uppercase;
text-align:center;
color:#6bc0e1;
}
.noactivated #error_page-link,
.noconfig #error_page-link,
.deactivated #error_page-link,
.domain #error_page-link,
#error_page-link.nofound {
font-size:24px;
}
#error-descr {
font-size:14px;
line-height:25px;
color:#686868;
text-align:center;
margin:18px 0 0 0;
padding:0 100px;
}
#error-descr a {
color:#6bc0e1;
text-decoration:underline;
}
#error-descr a:hover {
text-decoration:none;
}
@media screen and (max-width:1240px) {
#my-logo {
width:1000px;
}
#error_page {
width:1000px;
}
}
@media screen and (max-width:990px) {
#my-logo {
width:770px;
}
#error_page {
width:770px;
}
#error_page.permission {
background-position:203px 100%;
}
}
@media screen and (max-width:793px) {
#my-logo {
width:550px;
}
.my-logo {
left:10px;
}
#error_page {
width:550px;
}
#error_page.permission {
background-position:91px 100%;
}
}
@media screen and (max-width:570px) {
#my-logo {
width:290px;
}
.my-logo {
left:47%;
margin-left:-30px;
top:10px;
}
#error_page {
width:290px;
}
#error-descr {
padding:0;
}
#error_page.permission {
padding:23px 0 277px 0;
background-position:7px 100%;
background-size:75%;
}
#error_page-link {
line-height:30px;
}
}
</style>
<div id='error-page'>
<div id='my-logo'>
<a class='my-logo' href='https://nama_blog.blogspot.com' target='_blank'>Title Blog</a>
<span class='error-title'>403</span>
</div>
<div id='my-logo-line'/>
<div class='permission' id='error_page'>
<p id='error_page-link'>PESAN HALAMAN ERROR PAGE 403</p>
<p id='error-descr'>Back to the <a expr:href='data:blog.homepageUrl'>home page</a></p>
</div>
</div>
<b:else/>Selanjutnya Anda cari kode </body> dan terapkan kode </b:if> diatasnya
2 comments
Nyimak aja la...