Menerapkan Efek Neon Pada Teks Atau Tulisan Blog

Menerapkan Efek Neon Pada Teks Atau Artikel Blog - Sudah tahu belum tentang Neon Effect yang diterapkan dalam sebuah teks? Jika belum silahkan cari infonya di Google karena disana lebih banyak tersedia dan tentunya juga berbeda. Dan pada artikel Menerapkan Efek Neon Pada Teks Atau Artikel Blog ini, saya akan mencoba membahas dari sebuah kode yang saya dapatkan di Codepen. Entah siapa pemilikinya, saya juga tidak tahu karena tidak tercantum disana, atau lebih lengkapnya bisa di lihat di Codepen

Didalam Codepen tersebut sudah ada kode html, css, dan javascript dari efek neon pada teks. Jika sobat memasang secara langsung ke dalam kode template maka, saya yakin blog sobat akan jadi berantakan karena adanya struktur kode yang terdapat pada tag div di dalam kode tersebut. Selain itu, penggunaan kode html dari efek neon pada teks tersebut juga tidak akan bekerja karena tidak sesuai dengan kode CSS yang terdalam dalam kode efek neon teks tersebut

Dan untuk itulah, saya mencoba untuk menyempurnakan agar kode efek neon tersebut bisa diterapkan ke dalam teks artikel blog

Silahkan ikuti petunjuk berikut ini jika sobat ingin memasangnya:
Ingat! Menerapkan efek Neon pada teks ini akan mengakibatkan tampilan blog berantakan, saya sudah menerapkan kode neon teks ini ke dalam blog ini tapi karena adanya tag div dan penggunaan karakter i, memaksa saya untuk tidak menggunakannya tapi kode efek neon teks ini sangat bekerja baik di blog saya yang lain, silahkan lihat bagian DEMO di bawah
Jadi, saya sarankan jika didalam template blog sobat sudah di modifikasi sedemikian rupa maka saya tidak menjamin

CSS
salin CSS berikut ini kedalam template blog sobat

div {
	text-align: left;
	vertical-align: middle;
}

i {
  font: normal 40px/40px 'Oswald', Helvetica, Arial;
    background-color:#222;
	color: #EEDDE0;
	text-shadow: 0 0 30px #EC637B, 
		0 0 10px rgba(230, 161, 173, 0.41), 
		0 0 100px #E6A1AD, 
		0 0 500px #F36780, 
		5px 9px 5px rgba(0, 0, 0, 0.5);
}

i.off {
	color: rgba(46, 46, 46, 0.61);
	text-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
}

Untuk font, jika didalam template blog sobat belum terdapat jenis fonts seperti itu, silahkan pasang link fonts berikut ini:
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'/>
Untuk efek warna, silahkan sobat sesuaikan sendiri warna-warna yang ingin ditampilkan atau lihat di kode warna lengkap

JAVASCRIPT
Untuk javascript silahkan dipasang sebelum kode </body>

<script type='text/javascript'> 
//<![CDATA[
var textHolder = document.getElementsByTagName('div')[0],
  text = textHolder.innerHTML,
	chars = text.length,
	newText = '',
	i;	

for (i = 0; i < chars; i += 1) {
	newText += '<i>' + text.charAt(i) + '</i>';
}

textHolder.innerHTML = newText;

var letters = document.getElementsByTagName('i'),
	flickers = [5, 7, 9, 11, 13, 15, 17],
	randomLetter,
	flickerNumber,
	counter;

function randomFromInterval(from,to) {
	return Math.floor(Math.random()*(to-from+1)+from);
}

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

function flicker() {		
	counter += 1;
	
	if (counter === flickerNumber) {
		return;
	}

	setTimeout(function () {
		if(hasClass(randomLetter, 'off')) {
			randomLetter.className = '';
		}
		else {
			randomLetter.className = 'off';
		}

		flicker();
	}, 30);
}

(function loop() {
    var rand = randomFromInterval(1000,5000);

	randomLetter = randomFromInterval(0, 20);
	randomLetter = letters[randomLetter];
	
	flickerNumber = randomFromInterval(0, 10);
	flickerNumber = flickers[flickerNumber];

    setTimeout(function() {
            counter = 0;
            flicker();
            loop();  
    }, rand);
}());
//]]>
</script>

HTML
Untuk pemasangan di HTML, biasanya ini yang menjadi banyak pertanyaan, pasang dimana saja terserah sobat dengan pemasangan kode html seperti berikut ini

<div><i class="">p</i><i class="off">a</i><i class="">n</i><i class="off">d</i><i class="">u</i><i class="off">a</i><i class="">n</i><i class="off"> </i><i class="">t</i><i class="off">e</i><i class="">m</i><i class="off">p</i><i class="">l</i><i class="off">a</i><i class="">t</i><i class="off">e</i><i class=""> </i><i class="off">b</i><i class="">l</i><i class="off">o</i><i class="off">g</i></div>

Real DEMO


Bagaimana? Tertarik untuk memasang efek neon pada teks atau tulisan blog ini? Silahkan.. Oya, sekali lagi, jika ada perubahan terhadap tampilan blog, saya sarankan lebih baik ditinjau ulang terlebih dahulu karena hal ini kemungkinan adanya tag div yang terpasang didalam kode, jika bingung, lebih baik segera hapus semua kode efek neon pada teks tersebut. Jika masih tetap menginginkan terpasang tapi masih mengalami kesulitan, mari kita diskusikan bersama dengan berkomentar di artikel ini, Menerapkan Efek Neon Pada Teks Atau Artikel Blog