Halaman 404 Disertai Video Youtube Responsive

Halaman 404 Disertai Video Youtube Responsive, Saya rasa Anda sudah tahu fungsi dari halaman error 404 bukan? Kalau belum tahu silahkan simak saja posting saya sebelumnya disini. Pada posting kali ini sengaja saya akan membagikan sebuah widget yang sara rasa cocok buat Anda yang suka memodifikasi halaman ini, dimana halaman 404 yang akan saya bagikan disini berbedah dengan yang digunakan oleh kebanyakan blogger yang ada disono.Kalau Anda tidak ingin melihat Artikel sebelumnya baiklah saya akan sedikit memberikan penjelasan tentang halaman 404 ini.

Halaman 404 not found biasanya berupa halaman yang sudah kita hapus, namun masih terindeks oleh mesin pencari. Bisa pula terjadi akibat kita mengubah settingan permalink pada kategori maupun tags. Nah, itulah kondisi yang terjadi pada blog/web sehingga menyebabkan banyak sekali halaman not found.

Sedangkan Video yang saya pasang disini diambil dari youtube.com dan CSS, HTML serta JavaScript masi menggunakan code yang dibagikan oleh Mas Adhy pada salah satu blognya www.kompiajaib.com, dan saya gabung pada halaman 404 agar terlihat lebih asoiiiii.

Baiklah sebelum memasanya pada blog Anda, sebaiknya terlebih dahulu lihat demonya pada link di bawah ini

DEMO HALAMAN 404

Oke sudah lihat? kalau begitu saksikan tayangannya di bawah ini...

1. Masukan CSS berikut ini diatas kode ]]></b:skin> atau </stytle>

#error-page {
  background:#eaeaea;
  position:fixed !important;
  position:absolute;
  text-align:center;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:99999;
}

#error-inner {
  margin:0 auto;
}

#error-inner h2 {
  text-transform:uppercase;
  color:#fff;
  font-size:50px;
  margin:0 auto 20px;
  font-family:Arial;
  background-color:#E94918;
}

#error-inner p {
  line-height:0.9em;
  font-size:15px;
  color:#999;
  text-transform:uppercase;
  text-shadow:1px 1px 0 #fff;
}

.video-responsive {
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
  margin:8px;
}

.video-responsive iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

.videos {
  text-align:center;
  background:linear-gradient(to bottom,#fefefe 0%,#d1d1d1 100%);
  border:1px solid #A8A8A8;
  border-radius:5px;
  margin:30px auto;
  width:50%;
  box-shadow:1px 30px 30px -26px #818181;
}

2. Paste kode berikut ini di bawah <body>

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

3. Paste lagi kode ini tepat di atas </body>

</b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-page'>
<div id='error-inner'>
<h2>Error 404</h2>
<p>halaman telah dihapus, atau anda salah menulis URL blog.<br/><br/> Kembali ke <a href='/' title='LAGIOKE'><span style='background:#f1f1f1;border:1px solid #e8e8e8;border-radius:3px;padding:2px 5px'><b>BERANDA</b></span></a> Atau Nonton Dulu Video Di Bawah ini</p>
<div class='videos'>
<div class='video-responsive'>
<div class='videos1 loader' data-src='//www.youtube.com/embed/TGtWWb9emYI'/>
</div>
</div>
</div>
</div></b:if

Untuk mengganti video dengan video Anda, silahkan ganti code yang saya tandai dengan kode embed yag ada pada Youtube

4. Terakhir Paste kode JavaScript di bawah ini tepat di atas </body>

<script type='text/javascript'>
//<![CDATA[
setTimeout(function(){
$('.videos1').each(function(){
$(this).replaceWith('<iframe class="videos1 loader" src="'+$(this).data('src')+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5000);
//]]>
</script>

5. Save dan lihat hasilnya

ADS HERE !!!