Blog Cinangka

Membuat efect animasi titlebar dengan javascrip

Posted by Taufiq Rohman Friday, October 14, 2011
Share this Article on :

Kecenderungan penggunaan title bar effects di banyak blog tidak terlepas dari berbagai kelebihan yang dimiliki efek ini. Disamping akan semakin mempercantik blog, title bar effects (TBE) dapat dipergunakan untuk menampilkan beberapa teks dengan fungsi yang berbeda. Sampeyan bisa saja menuliskan sebuah kata sambutan, ucapan terima kasih atau pun kata-kata yang lain yang mampu membuat pengunjung tertarik dan menikmati suasana yang diberikan melalui blog.
Javascript TBE didesain secara sederhana dengan beban yang amat ringan sehingga relatif tidak membebani blog. Hal ini sungguh amat kontradiktif dengan hasil yang mampu diberikan. Berbagai animasi teks yang tertampilkan secara atraktif di bagian teratas bar, atau di atas tool bar dan address bar sungguh diluar perkiraan jika ternyata mampu dipertunjukkan hanya dengan segelintir script. Dengan mempertimbangkan hal ini, sangat layak bila javascript cantik ini kita pakai sebagai pelengkap keindahan blog dan sebagai sarana penyampaian informasi kepada pengunjung. Pemasangan javascript TBE ini juga amat mudah dan dengan gampang dilakukan oleh siapapun. Kita tinggal copy dan pastekan di atas kode ]]></b:skin>, maka selesai sudah dan lihatlah keindahan yang mampu ditampilkannya.

  1. Login ke Blogger : Untuk login ke blogger hanya perlu dilakukan dengan menuliskan User Name/Nama Pengguna atau Email Address/Alamat Email serta Password/Sandi.
  2. Dasbor : KLIK link Design/Rancangan.
  3. Design/Rancangan : KLIK link Edit HTML.
  4. Cari Kode : Cari kode link ]]></b:skin>. Gunakan Ctrl+F (pada keyboard) untuk memudahkan pencarian kode.
  5. Copy - Paste Javascript : Copy dan Pastekan Javascript di bawah ini di atas kode ]]></b:skin>
<script type="text/javascript">
//<![CDATA[
/* gubhug reyot  - bgsGR*/
var message = new Array();
// Tulis teks di sini
message[0] = "CINANGKA BLOG";
message[1] = "KUMPULAN INFO MENARIK";
message[2] = "TUTORIALS BLOGGING";
message[3] = "TUTORIAL HACKING";
message[4] = "TUTORIALS KOMPUTER OS";
message[5] = "TUTORIALS LINUX OSS";
message[6] = "INFO TERBARU";
// Atur pengulangan teks dan kecepatan di sini
var reps = 2;
var speed = 250; // Set the overall speed (larger number = slower action).
// jangan rubah KODE di bawah
var p = message.length;
var T = "";
var C = 0;
var mC = 0;
var s = 0;
var sT = null;
if (reps < 1) reps = 1;
function doTheThing() {
T = message[mC];
A();
}
function A() {
s++;
if (s > 8 ) { s = 1;}
// you can fiddle with the patterns here...
if (s == 1) { document.title = '|============CB| '+T+' == |CB|'; }
if (s == 2) { document.title = '|========= CB| '+T+' == |CB|'; }
if (s == 3) { document.title = '|======= CB| '+T+' == |CB|'; }
if (s == 4) { document.title = '|===== CB| '+T+' == |CB|'; }
if (s == 5) { document.title = '|=== CB| '+T+' == |CB|'; }
if (s == 6) { document.title = '|= CB| '+T+' == |CB|'; }
if (s == 7) { document.title = '|CB| '+T+' == |CB|'; }
if (s == 8 ) { document.title = '|CB| '+T+' == |CB|'; }
if (C < (8 * reps)) {
sT = setTimeout("A()", speed);
C++;
}
else {
C = 0;
s = 0;
mC++;
if(mC > p - 1) mC = 0;
sT = null;
doTheThing();
}
}
doTheThing();
//]]>
</script>

  1. SAVE Template/Simpan Template : KLIK link SAVE Template/Simpan Template, kemudian lihat hasilnya dengan membuka blog.
Catatan/Keterangan :
  • KODE yang perlu dirubah :
    1. message[0] s/d message[6] ♥ Isi dengan teks yang sesuai dengan blog sampeyan.
    2. var reps = 2; angka 2 ♥ Jumlah pengulangan kemunculan teks
    3. var speed = 250; ♥ angka 250 adalah variable kecepatan dimana semakin kecil semakin cepat.
  • Setelah seluruh variable javascript disesuaikan dengan kebutuhan dan tampilan blog, sampeyan bisa meng-upload javascript TBE ini di file hosting dan menggunakan link-nya saja supaya kode html dan javascript blog tidak terlalu penuh sesak seperti bonek yang datang dan pulang nonton bola! Iya, khan rek?! Podho suk-sukan nganti podho lungguh neng nduwur kreta? He … he ….

Related Post:

Post a Comment