Tampilkan postingan dengan label Belajar JavaScript. Tampilkan semua postingan
Tampilkan postingan dengan label Belajar JavaScript. Tampilkan semua postingan

Minggu, 30 Desember 2012

Membuat Animasi Auto Typing Text Menggunakan JavaScript


Membuat Animasi Auto Typing Text Menggunakan JavaScript - Kalo kita bicara mengenai animasi, pastinya kita akan lagsung merasa penasaran dan ingin segera melihat atau bahkan mengetahuinya. Nahh, kali ini saya akan share tentang cara membuat animasi auto typing text menggunakan JavaScript. Animasi auto typing text di sini maksudnya adalah animasi ketikan otomatis (mengetik sendiri), artinya tulisan yang sudah kita siapkan akan secara otomatis mengetik sendiri (muncul satu persatu dengan sendirinya).

Masih bingung? Kalo begitu langsung saja kita menuju ke tutorial cara membuat animasi auto typing text menggunakan JavaScript berikut ini... Silahkan bisa anda simak lalu ikuti dengan baik dan seksama!

Animasi auto typing text menggunakan JavaScript ini bisa anda letakkan di dalam postingan ataupun di sidebar sebagai widget eksternal. Jadi anda tidak usah kebingungan karena mau di letakkan di mana saja bisa. Caranya anda tinggal copy/salin script kode di bawah ini lalu pastekan di tempat yang anda inginkan.

<form name="news">
<textarea cols="50" name="news2" rows="3" wrap="virtual"></textarea>
</form>
<script type="text/javascript">
//<![CDATA[
var newsText = new Array();
newsText[0] = "Hello Sobat Ngeposta!";
newsText[1] = "Anda Sedang Membaca Artikel Tentang:";
newsText[2] = "Membuat Animasi Auto Typing Text";
newsText[3] = "Semoga Bermanfaat Bagi Sobat Semua...";
newsText[4] = "Dan Selamat Mencoba!";
newsText[5] = "Jangan Lupa Tinggalkan Komentar Sobat...";
var ttloop = 1; // diulang-ulang teksnya ganti dengan 1 (1 = True; 0 = False)
var tspeed = 100; // Typing speed in milliseconds (larger number = slower)
var tdelay = 1000; // Time delay between newsTexts in milliseconds
// ------------- NO EDITING AFTER THIS LINE -------------
var dwAText, cnews=0, eline=0, cchar=0, mxText;
function doNews() {
mxText = newsText.length - 1;
dwAText = newsText[cnews];
setTimeout("addChar()",1000)
}
function addNews() {
cnews += 1;
if (cnews <= mxText) {
dwAText = newsText[cnews];
if (dwAText.length != 0) {
document.news.news2.value = "";
eline = 0;
setTimeout("addChar()",tspeed)
}
}
}
function addChar() {
if (eline!=1) {
if (cchar != dwAText.length) {
nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
document.news.news2.value = nmttxt;
cchar += 1;
if (cchar != dwAText.length) document.news.news2.value += "_";
} else {
cchar = 0;
eline = 1;
}
if (mxText==cnews && eline!=0 && ttloop!=0) {
cnews = 0; setTimeout("addNews()",tdelay);
} else setTimeout("addChar()",tspeed);
} else {
setTimeout("addNews()",tdelay)
}
}
doNews()
//]]>
</script>

Hasilnya :


Note :
Untuk value (isi) dari newsText[0] sampai dengan newsText[5] bisa anda ganti dan sesuaikan dengan keinginan anda sendiri.

Sekian dulu postingan tentang cara membuat animasi auto typing text menggunakan JavaScript ini, semoga bermanfaat dan selebihnya saya mohon ma'af atas segala kesalahan yang ada. Salam sejahtera by ngeposta...

Minggu, 23 Desember 2012

Membuat Widget Pintar "Tahukah Anda?"


Membuat Widget Pintar "Tahukah Anda?" - Widget yang satu ini lain dari pada yang lain, karena jika pada umumnya jika widget itu di khususkan untuk mempercantik tampilan blog, namun widget pintar "tahukah anda?" ini lebih untuk tujuan memberikan wawasan dan pengetahuan yang lebih kepada para pengunjung.

Widget pintar "tahukan anda?" ini di buat menggunakan JavaScript, lebih tepatnya menggunakan fungsi array yang ada dalam bahasa JavaScript. Berikut lagkah-langkah untuk membuat widget pintar "tahukah anda?" menggunakan JavaScript!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".


3. Klik "Tambah Gadget".


4. Kemudian pilih "HTML/JavaScript".


5. Lalu masukkan script kode berikut ini :

<b><blink>Tahukah Anda?</blink></b>
<div style="margin-top: 5px; text-align: justify;">
<b>"</b><script language="JavaScript">
var Quotation=new Array() // do not change this!
Quotation[0] = "Bahwa kipas angin di langit-langit menggunakan tenaga listrik yang sama banyaknya dengan lampu 60 watt. Itu berarti listrik yang di gunakan sekitar 98% lebih sedikit daripada kebanyakan pendingin udara.";
Quotation[1] = "Bahwa setiap kali Napoleon Bonaparte mengenakan sapu tangan hitam di lehernya pada suatu pertempuran, ia selalu menang. Di Waterloo, ia mengenakan dasi putih dan kalah.";
Quotation[2] = "Bahwa bayi manusia di lahirkan dengan 300 potong tulang, namun pada usia dewasa manusia hanya mempunyai 206 tulang di tubuhnya.";
Quotation[3] = "Bercumbu baik untuk menyembuhkan rasa sakit. Penelitian menunjukkan bahwa aktivitas berciuman bisa meningkatkan kekencangan kulit, membantu sirkulasi darah, mencegah gigi berlubang, bahkan bisa mengusir sakit kepala.";
Quotation[4] = "Bahwa katak mampu bertahan hidup bertahun-tahun tanpa makan & minum.";
Quotation[5] = "Bahwa lebah ternyata dapat mengenali wajah manusia.";
Quotation[6] = "Indonesia adalah negara Asia pertama yang ikut Piala Dunia 1938 dengan nama Hindia-Belanda.";
Quotation[7] = "Bahwa rolet di ciptakan oleh filsuf dan matematikawan besar Perancis, Blaise Pascal. Rolet adalah produk sampingan dari eksperimennya tentang gerakan abadi.";
Quotation[8] = "Bahwa Adolf Anderssen adalah pemain catur paling tangguh di dunia antara tahun 1859-1866. Ketika meninggal dunia, obituarinya mencapai 19 halaman.";
Quotation[9] = "Bahwa simbol mata uang dollar $ tidak di ketahui berasal dari mana, namun kemungkingan berasal dari huruf U dan S (U.S).";
Quotation[10] = "Tertawa dengan keras bisa mendorong otak keluar dari tengkoraknya.";
Quotation[11] = "Bahwa sebelum uang kertas di gunakan, Amerika menggunakan kulit rusa (buckskins). Hingga sekarang orang mengenall istilah bucks.";
Quotation[12] = "Jika kamu memiliki 10 triliun rupiah dan menghabiskan 1000 rupiah setiap detik, di butuhkan 317 tahun sebelum kamu jatuh miskin.";
Quotation[13] = "Rata rata remaja bermain internet 31 jam per minggu.";
Quotation[14] = "Dalam seumur hidupnya seseorang menghasilkan air liur rata-rata 25.000 liter.";
Quotation[15] = "Bahwa jika kamu berteriak terus menerus selama 8 tahun, 7 bulan dan 6 hari, energi yang kamu keluarkan akan cukup untuk memanaskan secangkir kopi.";
Quotation[16] = "Jika kamu kentut secara konsisten selama 6 tahun 9 bulan, kamu akan menghasilkan gas yang cukup untuk menciptakan energi yang di perlukan dalam membuat bom atom.";
Quotation[17] = "Tulang paha manusia lebih kuat daripada dinding semen.";
Quotation[18] = "Saat ini ada 45 negara yang ada mengajarkan bahasa Indonesia, di antaranya Australia, Amerika, Kanada, & Vietnam.";
Quotation[19] = "Membenturkan kepala ke tembok dapat menghabiskan 150 kalori setiap jamnya.";
Quotation[20] = "Seekor kecoa mampu bertahan hidup selama 9 hari tanpa kepala, sebelum mati karena kelaparan.";
Quotation[21] = "Warna kebiruan pada pangkal kuku menandakan kurang beresnya sirkulasi darah dan merupakan gejala penyakit jantung.";
Quotation[22] = "Seekor induk kelinci bila ketakutan dapat meninggalkan atau bahkan memakan anak-anaknya.";
Quotation[23] = "Dari hasil penelitian di Amerika, kemasan Barbie mengandung bahan dari kayu hutan alam Indonesia.";
Quotation[24] = "Dalam sebuah survei di AS, 81% pengacara perceraian melihat adanya peningkatan bukti kasus yang berasal dari situs jejaring sosial.";
Quotation[25] = "India mundur dari Piala Dunia 1950, karena para pemainnya tidak mau memakai sepatu.";
Quotation[26] = "Jika Facebook merupakan sebuah negara, maka akan menjadi negara terbesar ke-3 di dunia.";
Quotation[27] = "Harga bensin di Venezuela lebih murah dari pada harga air.";
Quotation[28] = "Sebelum menulis Harry Potter, J.K. Rowling menganggur dan hidup pada bantuan pemerintah.";
Quotation[29] = "Mengendarai sepeda dengan tangan terlepas di Sun Praire, Wisconsin, merupakan hal yang melanggar hukum.";
Quotation[30] = "Para wanita dari suku Tiwi di Pasifik Selatan kebanyakan menikah saat lahir.";
Quotation[31] = "Satu juta orang di dunia per tahun melakukan bunuh diri. Artinya satu kematian setiap 40 detik. Kasus bunuh diri meningkat sebanyak 60% di 45 tahun terakhir.";
Quotation[32] = "Bahwa perempuan berkedip dua kali lebih banyak dari pada laki-laki.";
Quotation[33] = "Ketika kita tersenyum, kita melibatkan 17 otot.";
Quotation[34] = "Rata-rata orang Amerika berjalan 18.000 langkah per hari.";
Quotation[34] = "Bahwa Vatikan bukan hanya kota terkecil di dunia, tetapi juga salah satu negara di dalam negara lain, yaitu Italia. Negara lainnya adalah San Marino, juga terdapat di dalam Italia.";
Quotation[35] = "Pada 1984, Jeff Bezos ingin menamai usahanya di Internet 'Cadabra', seperti dalam 'abracadabra' atau 'sim salabim'. Tetapi pengacaranya meyakinkannya bahwa dalam bahasa Inggris nama itu kedengaran mirip sekali dengan 'jenazah' (cadaver). Akibatnya, Bezos mengambil pilihan yang kedua, yaitu Amazon.com.";
Quotation[36] = "Bahwa benda hidup terbesar di bumi adalah sebuah jamur di bawah tanah di Oregon, Amerika Serikat. Panjangnya melintang sekitar 5,6 km.";
Quotation[37] = "Uang kertas dengan nilai tertinggi di keluarkan Bank of England senilai &#163;1,000,000 pada tahun 1948.";
Quotation[38] = "Bahwa telapak tangan dan kaki memiliki lebih banyak kelenjar keringat dari pada bagian-bagian tubuh yang lainnya.";
Quotation[39] = "Hawaii bergerak ke arah Jepang 10 cm per tahun.";
Quotation[40] = "Bahwa hari ulang tahunmu memiliki kesamaan dengan sekitar 9.000.000 orang lainya di dunia.";
Quotation[41] = "Bahwa kulit pohon kayu merah tahan api. Kebakaran di hutan kayu merah terjadi di dalam pohonnya.";
Quotation[42] = "Bahwa Yaman memiliki tingkat kesuburan total tertinggi di dunia, yaitu 7,6. Sementara itu negara dengan tingkat kesuburan terendah adalah Swiss, yaitu 1,5.";
Quotation[43] = "Bahwa kelelawar coklat kecil dapat menangkap 1.200 serangga sebesar nyamuk dalam waktu 1 jam saja.";
Quotation[44] = "Game action melatih otak membuat keputusan yang cepat dan akurat.";
Quotation[45] = "Bahwa golongan darah para anggota SS Nazi di jadikan tato di ketiak mereka.";
Quotation[46] = "Tahun 2007, pemerintah Perancis tidak mengizinkan parlemennya menggunakan Blackberry.";
Quotation[47] = "Bahwa belum ada lobster biru yang melahirkan anak berwarna biru. Artinya warna biru tersebut bukanlah warna turunan dari induknya.";
Quotation[48] = "Naik mobil ke matahari bisa di capai 193 tahun dengan kecepatan 88,5 km/jam.";
Quotation[49] = "Berat patung Liberty mencapai lebih dari 225 ton.";
Quotation[50] = "Memakai Headphone selama 1 jam dapat mengembangbiakan bakteri dalam kuping 700 kali lebih cepat.";
Quotation[51] = "Perempuan Jepang jago dalam urusan seks. Mereka memiliki usia harapan seks paling lama di dunia. Rata-rata perempuan di Negeri Matahahari Terbit itu, masih bisa melakukan hubungan seksual di usia 86 tahun.";
Quotation[52] = "Bahwa Pria yang memiliki usia harapan seks paling lama adalah penduduk San Marino. Di rata-rata usia 81 tahun, pria San Marino masih bisa melakukan hubungan seks.";
Quotation[53] = "Bahwa lidah kita mempunyai kurang lebih 10.000 indra perasa untuk mencicipi makanan.";
Quotation[54] = "Merokok dapat mengurangi massa tulang dan terganggunya sistem hormonal, terutama Estrogen pada wanita sehingga menyebabkan menopause dini.";
Quotation[55] = "Bahwa semakin cepat anda bergerak, maka anda akan semakin berat. Hal ini tidaklah permanen, tetapi sesaat akan menambah berat anda. Menurut teori relativitas, massa dan energi adalah sama. Semakin banyak energi yang di keluarkan, semakin berat massanya.";
var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation(){document.write(Quotation[whichQuotation]);}
showQuotation();
</script><b>"</b>
</div>

6. Lalu klik save/simpan dan selesai.

Note :
Untuk teks quotation bisa anda ganti sesuai dengan selera anda sendiri. Dan silahkan di kembangkan lagi agar lebih bagus...

Cukup sekian postingan tentang cara membuat widget pintar "tahukah anda?" ini, semoga bermanfaat dan selebihnya saya mohon ma'af atas segala kekurangan yang ada. Special thanks to ZamrudBlog. Salam sejahtera by ngeposta...

Rabu, 05 Desember 2012

Membuat Widget Date and Time Ala Ngeposta (Stylus Version)


Membuat Widget Date and Time Ala Ngeposta (Stylus Version) - Pada kesempatan kali ini saya ingin share sebuah tutorial tentang cara membuat widget date and time ala ngeposta (stylus version), sebenarnya pada postingan yang dulu saya juga sudah pernah membahas tutorial ini, namun pada postingan yang dulu tampilan widget date and time ala ngeposta yang saya share sangat simple dan biasa saja. Sedangkan pada widget date and time ala ngeposta yang akan saya share ini tampilannya lebih elegant / stylus.

Langsung saja simak cara membuat widget date and time ala ngeposta (stylus version) di bawah ini dengan baik dan seksama!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".


3. Klik "Tambah Gadget".


4. Kemudian pilih "HTML/JavaScript".


5. Lalu masukkan script kode berikut ini :

<div style="background: lime; background:
-moz-linear-gradient(top, green, lime); background:
-webkit-linear-gradient(top, green, lime); background:
-o-linear-gradient(top, green, lime); background:
linear-gradient(top, green, lime); border-right: 1px solid #000;
border-bottom: 1px solid #000; color: white;
padding: 5px 5px 5px 10px; height: 16px; font-weight:
bold; text-shadow: 1px 1px #000; margin: 0 auto;
-moz-border-radius: 5px; -webkit-border-radius: 5px;
-o-border-radius: 5px; border-radius: 5px;">

<script type="text/javascript">
now = new Date();

if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000))

else (a=now.getTime());
now.setTime(a);
var tahun=now.getFullYear()
var hari=now.getDay()
var bulan=now.getMonth()
var tanggal=now.getDate()
var hariarray=new Array("Minggu","Senin","Selasa","Rabu",
"Kamis","Jum'at","Sabtu")
var bulanarray=new Array("Januari","Februari","Maret","April","Mei",
"Juni","Juli","Agustus","September","Oktober","November","Desember")

document.write(hariarray[hari]+", "+tanggal+" "+bulanarray[bulan]+"
"+tahun)
</script> →

<script type="text/javascript">
window.setTimeout("jam()",1000);
function jam() {
var tanggal = new Date();
setTimeout("jam()",1000);
document.getElementById("ngeposta").innerHTML =
tanggal.getHours()+":"+tanggal.getMinutes()+":"+tanggal.getSeconds();
}
</script>

<span id="ngeposta"></span>

</div>

6. Setelah itu klik save/simpan, selesai dan lihat hasilnya...

Note :
Untuk previewnya bisa di lihat langsung pada gambar yang ada di atas, tampilan hasil jadinya kurang lebih seperti itu.

Cukup sekian dulu postingan tentang cara membuat widget date and time ala ngeposta (stylus version) ini, semoga bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Terima kasih atas kunjungannya, salam sejahtera by ngeposta...

Kamis, 08 November 2012

Membuat Ucapan Selamat Datang dan Selamat Tinggal di Blog


Membuat Ucapan Selamat Datang dan Selamat Tinggal di Blog - Puji syukur alhamdulillah saya panjatkan kehadirat Allah SWT yang telah melimpahkan rahmat dan hidayahnya sehingga sampai pada saat ini saya masih bisa menghirup udara dengan bebas dan dalam keadaan sehat. Pada kesempatan kali ini saya akan share mengenai cara membuat ucapan selamat datang dan selamat tinggal di blog, apa maksudnya? Maksudnya adalah ketika blog kita di buka/di kunjungi maka akan tampil sebuah pesan/ucapan selamat datang. Dan ketika blog kita di tutup/di close dari tab browser internet maka akan tampil sebuah pesan/ucapan selamat tinggal. Ucapan selamat datang dan selamat tinggal ini bisa anda rubah dengan teks sesuai yang anda inginkan. Perlu anda ketahui bahwa untuk membuatnya di sini kita hanya menggunakan javascript saja.

Oke, bagi anda yang sudah penasaran dan ingin langsung mencoba untuk membuat ucapan selamat datang dan selamat tinggal di blog silahkan anda bisa simak dengan baik dan ikuti langkah-langkah berikut ini!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".


3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".


4. Kemudian cari kode </head> dan letakkan script kode berikut ini tepat di atasnya.

Script untuk menampilkan ucapan selamat datang :
<script type='text/javascript'>
// welcome alert by http://ngeposta.blogspot.com
alert("Selamat Datang Di Ngeposta Blog!
Semoga Anda Menikamti Sajian Artikel yang Ada");
</script>

Script untuk menampilkan ucapan selamat tinggal :
<script type='text/javascript'>
// goodbye alert by http://ngeposta.blogspot.com
function ngeposta() {
alert("Terima Kasih Atas Kunjungan Anda!
Jangan Lupa Untuk Berkunjung Kembali");
}
parent.window.onunload=ngeposta;
</script>

5. Setelah itu klik save/simpan template, selesai dan lihat hasilnya...

Note  :
Untuk menampilkan ucapan selamat datang saja, maka anda hanya perlu meletakkan script yang pertama sesuai dengan petunjuk pada langkah no. 4 di atas, begitu juga sebaliknya. Dan jika anda ingin menampilkan keduanya, makan letakkan kedua script kode tersebut sesuai dengan petunjuk pada langkah no. 4 di atas. Ganti tulisan "Selamat Datang di Ngeposta Blog! Semoga anda menikmati sajian artikel yang ada" dan "Terima Kasih Atas Kunjungan Anda! Jangan Lupa Untuk Berkunjung Kembali" yang ada di atas dengan tulisan sesuai yang anda inginkan.

Saya akhiri cukup sekian, semoga postingan tentang cara membuat ucapan selamat datang dan selamat tinggal di blog ini bisa bermanfaat bagi anda. Selamat mencoba! Selebihnya saya mohon ma'af atas segala kesalahan yang ada, salam sejahtera by ngeposta...

Rabu, 24 Oktober 2012

Membuat Efek Zoom Image Pada Postingan di Blog


Membuat Efek Zoom Image Pada Postingan di Blog - Efek zoom image ini akan tampak seperti halnya pada tampilan zoom image di facebook atau pada pencarian gambar di google. Dan dengan adanya efek zoom image ini maka akan memberikan kesan yang lebih indah dan lebih unik.

Langsung saja bagi anda yang berminat dan ingin mencoba untuk membuat efek zoom image pada postingan di blog silahkan ikuti tutorial di bawah ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".


3. Klik "Tambah Gadget".


4. Kemudian pilih "HTML/JavaScript".


5. Lalu masukkan script kode berikut ini di dalamnya :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>

<script src="https://sites.google.com/site/jombinabelogefekzoom/jombinabelog-efekzoom.js" type="text/javascript">
</script>

6. Klik save/simpan, selesai dan lihat hasilnya...

Jika efek zoom image yang telah kita buat tidak berhasil, maka kita tambahkan script kode untuk memanggil kembali script kode efek zoom image yang sudah kita save/simpan tadi. Caranya cukup mudah, yaitu tinggal kita masukkan kode berikut ini pada setiap gambar yang akan di tampilkan pada postingan blog kita.

<img src="#" class="magnify" data-magnifyby="2" style="cursor: url(magnify.cur),
-moz-zoom-in, -webkit-zoom-in, -o-zoom-in, zoom-in; height: auto; width: auto;" />

Note :
Ganti tanda # dengan alamat url gambar yang akan di tampilkan.

Nahh, untuk previewnya kurang lebih seperti gambar di bawah ini :

(Klik gambar di atas, dan lihat hasilnya)

Mungkin cukup sekian dulu postingan tentang cara membuat efek zoom image pada postingan di blog ini. Selebihnya saya ucapkan terima kasih atas kunjungan anda dan semoga bermanfaat. Mohon ma'af atas segala kekurangan yang ada. Special thanks to jombinabelog. Salam sejahtera by ngeposta...

Jumat, 12 Oktober 2012

Memasang Widget Date and Time (Waktu dan Tanggal) Ala Ngeposta

MemasangWidget Date and Time (Waktu dan Tanggal) Ala Ngeposta - Puji syukur saya panjatkan kepada Tuhan Yang Maha Esa yang telah memberikan karunia dan anugrahnya sehingga sampai saat ini saya masih bisa mengirup udara segar dan melanjutkan aktifitas kehidupan sehari-hari. Pada kesempatan kali ini saya akan share alias berbagi sebuah widget sederhana, widget ini saya beri nama "Widget Date and Time Ala Ngeposta". Pra tampil (preview) tampilan dari widget date and time ala ngeposta ini kurang lebihnya adalah seperti pada gambar berikut :

Cara membuatnya sebenarnya cukup mudah sekali, yaitu menggunakan JavaScript di kombinasikan dengan tag tertentu pada html serta menambahkan selector CSS untuk memperindah output/tampilannya.

Silahkan bagi anda yang berminat memasang widget date and time (waktu dan tanggal) ala ngeposta ini langsung saja simak dan ikuti langkah-langkah di bawah ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".


3. Klik "Tambah Gadget".


4. Kemudian pilih "HTML/JavaScript".


5. Lalu masukkan script kode berikut ini :

<div style="background: #009900; border-left: 3px solid black; color: white;
padding: 5px 5px 5px 10px; height: 17px; text-shadow: 1px 1px #000; margin-top: 0;">

Hari :
<script type="text/javascript">
now = new Date();

if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000))

else (a=now.getTime());
now.setTime(a);
var tahun=now.getFullYear()
var hari=now.getDay()
var bulan=now.getMonth()
var tanggal=now.getDate()
var hariarray=new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu")
var bulanarray=new Array("Januari","Februari","Maret","April","Mei","Juni","Juli",
"Agustus","September","Oktober","November","Desember")

document.write(hariarray[hari]+", "+tanggal+" "+bulanarray[bulan]+" "+tahun)
</script> →

<script type="text/javascript">
 window.setTimeout("jam()",1000);
 function jam() {
 var tanggal = new Date();
 setTimeout("jam()",1000);
 document.getElementById("ngeposta").innerHTML =
 tanggal.getHours()+":"+tanggal.getMinutes()+":"+tanggal.getSeconds();
 }
 </script>

<span id="ngeposta"></span>
</div>

6. Klik save/simpan, selesai dan lihat hasilnya...

Cukup sekian dulu postingan tentang cara memasang widget date and time (waktu dan tanggal) ala ngeposta ini dan semoga bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by ngeposta...

Senin, 01 Oktober 2012

Membuat Teks Berjalan Pada Tab Browser


Membuat Teks Berjalan Pada Tab Browser - Efek yang satu ini memang terbilang unik, bagaiamana tidak? Kalau biasanya efek teks berjalan hanya pada bagian tulisan dalam artikel yang di posting atau pada bagian sidebar tertentu yang di sisipi dengan tag marquee, namun efek yang satu ini bisa menghasilkan suatu efek yang berbeda dengan tag marquee tersebut. Yang pada intinya, efek ini akan membuat tulisan yang ada di tab browser berjalan sesuai dengan kecepatan yang telah di atur.

Penasaran? Langsung saja simak dengan baik langkah-langkah cara membuat teks berjalan pada tab browser berikut ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".


3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".


4. Kemudian letakkan script kode berikut ini tepat di bawah kode <head>.

<script type='text/javascript'>
//<![CDATA[
msg = "Text berjalan 2";
msg = "Text berjalan 1" + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>


5. Klik save/simpan template, dan lihat hasilnya...

Note :
Ganti teks yang saya beri warna orange dengan teks atau tulisan yang anda inginkan, teks atau tulisan ini merupakan teks yang akan berjalan pada tab browser. Dan ganti angka yang saya beri warna hijau, sesuaikan dengan selera anda. Angka tersebut merupakan kecepatan pada efek teks berjalan tersebut.

Selamat mencoba, semoga berhasil... Cukup sekian postingan kali ini tentang cara membuat teks berjalan pada tab browser. Selebihnya saya mohon ma'af atas segala kesalahan dan kekurangan yang ada. Salam sejahtera by ngeposta...

Selasa, 25 September 2012

Membuat Widget Jam Dinamis (Dynamic Clock) Menggunakan JavaScript


Membuat Widget Jam Dinamis (Dynamic Clock) Menggunakan JavaScript - Jam adalah sebuah hal yang penting dalam setiap waktu karena tanpa adanya jam kita mungkin akan kesulitan menentukan waktu sekarang. Maka dari itu, pada kesempatan kali ini saya akan memberikan sedikit tutorial tentang cara membuat widget jam dinamis (dynamic clock) menggunakan JavaScript yang bisa kita pasang pada situs web/blog milik kita.

Seperti yang telah saya tuliskan di atas, bahwa dalam membuat widget jam dinamis (dynamic clock) ini kita akan menggunakan JavaScript. Karena menurut saya dengan menggunakan JavaScript ini scriptnya lebih mudah untuk di pahami dan lebih simple. Dan berikut script kode untuk membuat widget jam dinamis (dynamic clock) menggunakan JavaScript :

<center>
 <script type="text/javascript">
 window.setTimeout("jam()",1000);
 function jam() {
 var tanggal = new Date();
 setTimeout("jam()",1000);
 document.getElementById("ngeposta").innerHTML = 

 tanggal.getHours()+":"+tanggal.getMinutes()+":"+tanggal.getSeconds();
 }
 </script>

<b><span id="ngeposta" style="-moz-border-radius: 7px 0px 7px 0px; -o-border-radius: 7px 0px 7px 0px; -webkit-border-radius: 7px 0px 7px 0px; background: #009900; border-radius: 7px 0px 7px 0px; padding: 5px 10px 5px 10px;">
</span></b>
</center>

Note :
Script kode yang saya beri warna orange adalah script kode untuk membuat widget jam dinamis (dynamic clock), sedangkan script kode yang saya beri warna hijau merupakan script kode pemanggilan yaitu berfungsi untuk memanggil dan menampilkan bentukan dari script kode widget jam dinamis (dynamic clock) yang sudah di buat di atasnya (lihat script kode yang berwarna orange). Dan untuk previewnya bisa anda lihat pada gambar yang ada di atas. Hasil tampilannya kurang lebih seperti itu.

Bagaimana? Sangat mudah dan simple kan...??? So, selamat mencoba ya... Semoga berhasil. Kalau ada hal yang sekiranya ingin di tanyakan, silahkan bisa langsung di tanyakan lewat komentar. Oke, cukup sekian dulu saya akhiri postingan mengenai cara membuat widget jam dinamis (dynamic clock) menggunakan JavaScript pada kesempatan kali ini. Semoga bermanfaat bagi anda, dan selebihnya saya mohon ma'af atas segala kesalahan/kekurangan yang ada. Salam sejahtera by ngeposta...