Teks Nbshow

Teks Nbshow
 Nbshow
Hai jumpa lagi dengan Agussalikur, ada yang baru lagi Sobat. Tips blog ini namanya Teks Nbshow untuk blog sobat. Tutorial ini didapat dari blog tetangga, yang mungkin berguna untukmu. Penasarankan, nah yuk ikuti tips aku :

Cara membuat Teks Nbshow:
1.Anda harus punya blog dahulu.
2.Masuk ke Blogger.
3.Cari Template lalu Edit.
4.Cari kata ]]></skin> saran agar pencarian cepat menggunakan Ctrl+F.
5.Letakkan CSS dibawah ini sebelum ]]></skin>

/* CSS Nbshowtulisan*/
#nbshowtulisan {background:transparent;
height: 30px;line-height: 30px;margin: 20px auto;width: 100%;overflow: hidden;display: block;float: left;font-size: 30px;font-weight: 400;padding: 0;color: #fff;list-style: none outside none;}

Baca : Cara membuat breadcrumb

6.Cari kata </body> saran agar pencarian cepat menggunakan  Ctrl+F; .
7.Jika sudah ditemukan letakkan kode dibawah ini diatasnya.

<div class='nbshow'>
<div style='left: 0px; position: flexi; top: 0px; height:50px;'>
<span id='nbshowtulisan' style='clip: rect(0px, 10px, auto, 0px); left: 0pt; line-height: 30px; padding: 5px; position: absolute; top: 0px;'>Mari bersama - sama mengucapkan lafaz Bismillah,</span>
</div>
 </div>




Teks Hollywood Console

Teks Hollywood Console
Hollywood Teks Cosole
HTML
<span id="play_info_text" class="pre_play_info_text">We are all console</span>
CSS
body {
  background: #345;
}
.pre_play_info_text {
  visibility: hidden;
}
.play_info_text {
  font-size: 1.5em;
  font-family: "Courier";
  color: #fff;
  text-transform: uppercase;
  animation: blur-play-info-text-in .5s ease-in;
  text-shadow: 0px 0px 3px #fff,
      0px 0px 5px #fff;
}
.play_info_text_out {
  font-size: 1.5em;
  font-family: "Courier";
  color: #fff;
  text-transform: uppercase;
  opacity: 0;
  animation: blur-play-info-text-out .5s ease-in;
  text-shadow:
      0px 0px 10px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 150px #fff,
      0px 10px 100px #fff,
      0px -10px 100px #fff;
}

@keyframes blur-play-info-text-in {
  from {
    opacity: 0;
    text-shadow:
      0px 0px 10px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 150px #fff,
      0px 10px 100px #fff,
      0px -10px 100px #fff;
  }
}

@keyframes blur-play-info-text-out {
  from {
    opacity: 1;
    text-shadow:
      0px 0px 3px #fff,
      0px 0px 5px #fff;
  }
}

SCRIPT
var text = '';

function addChar(parent, j) {
  return function() {
    var character = document.createElement('b');
    character.setAttribute('class', 'play_info_text');
    character.innerHTML = text.charAt(j);
    parent.appendChild(character);
  };
}

function fadeChar(parent, j) {
  return function() {
    var character = parent.children[j];
    character.setAttribute('class', 'play_info_text_out');
  };
}

function animateInfoTextIn() {
  var element = document.getElementById('play_info_text');
  element.setAttribute('class', '');
  if (element.children.length == 0) {
    text = element.innerHTML;
  }
  var chars = text.length;
  element.innerHTML = '';
  for (var i = element.children.length; i < chars; ++i) {
    setTimeout(addChar(element, i), i*40+100);
  }
}

function animateInfoTextOut() {
  var element = document.getElementById('play_info_text');
  for (var charindex in element.children) {
    console.log(charindex.length, charindex.item);
    setTimeout(fadeChar(element, charindex), charindex*40+100);
  }
}

animateInfoTextIn();
setTimeout(function() { setInterval(animateInfoTextIn, 10000); }, 3000);
setTimeout(function() { setInterval(animateInfoTextOut, 10000); }, 10);
DEmo:
http://codepen.io/highfestiva/pen/lIcqF

Countdown

Hai sobat Agussalikur berjumpa kembali ! Kali ini admin berbagi tips seputar blogger dalam topik Time Countdown, kebetulan admin contohkan m...