Wednesday, 20 February 2013

Cara membuat chatbox di blogspot.com

Cara membuat chatbox di blog, chatbox ini sangat berguna buat para blogger hal ini bisa memberikan kemudahan kepada para pengunjung blog untuk meninggalkan pesan, kemudahan menulis pesan pun dapat dilakukan oleh para pengunjung pada kotak chatbox ini. berikut tutorialnya.
Sign Up dulu di sini
www.cbox.ws

Kemudian klik create my cbox
klik publish, kemudian isi url blog kamu

 Pada kolom step 1 pilih blogger

 Kemudian copy tuh kode ke HTML/javascript

Caranya memasangnya : login dulu ke akun blogger kamu - klik rancangan - tambah gadget HTML/javascript.
Terakhir simpan.
Silahkan kamu edit thema kotak cbox sesuai keinginan kamu

SELESAI....
Gampang kan, coba sendiri ya...


~~~~~Semoga Bermanfaat~~~~

Cara Menambah atau Membuat Aplikasi Zodiak, Shio atau Bintang ke Blogspot.com

Cara Menambah atau Membuat Aplikasi Zodiak, Shio atau Bintang ke Blog anda itu lah pembahasan Utama kita hari ini. Zodiak dan shio seringkali menjadi suatu saran untuk menentukan sifat dan karakter seseorang, bahkan beberapa orang menjadikannya sebagai dasar untuk meramal masa depan. Lepas dari akurat atau tidaknya sifat seseorang berdasarkan zodiak dan Shio, pada tip kali ini kita akan membuat sebuah script sederhana untuk menentukan zodiak dan shio berdasarkan tanggal tertentu. Script akan menerima masukan berupa tanggal, bulan dan tahun, kemudian dari masukan tersebut ditampilkan zodiak dan shio-nya.

Berikut langkah-langkah untuk membuatnya:


  • Kode HTML awal untuk script ini adalah:
    <html>
    <head>
    <title>Zodiak</title>
    </head>
  • Script kita letakkan di bawah tag . Function pada script untuk mencari zodiak dan shio dijadikan dalam sebuah function bernama function signs. cara penentuan zodiak adalah melalui seleksi tanggal:
    <body>
    <script language="javascript">
    function signs() {
    var start = 1901, birthyear = document.
    zodiac.year.value, date=document.zodiac.date.
    value,
    month=document.zodiac.month.selectedIndex;

    with (document.zodiac.sign){

    if (month == 1 && date >=20 || month == 2 && date <=18) {value = "Aquarius";}
    if (month == 1 && date > 31) {value = "tanggal tidak valid";}
    if (month == 2 && date >=19 || month == 3 && date <=20) {value = "Pisces";}
    if (month == 2 && date > 29) {value = "tanggal tidak valid";}
    if (month == 3 && date >=21 || month == 4 && date <=19) {value = "Aries";}
    if (month == 3 && date > 31) {value = "tanggal tidak valid";}
    if (month == 4 && date >=20 || month == 5 && date <=20) {value = "Taurus";}
    if (month == 4 && date > 30) {value = "tanggal tidak valid";}
    if (month == 5 && date >=21 || month == 6 && date <=21) {value = "Gemini";}
    if (month == 5 && date > 31) {value = "tanggal tidak valid";}
    if (month == 6 && date >=22 || month == 7 && date <=22) {value = "Cancer";}
    if (month == 6 && date > 30) {value = "tanggal tidak valid";}
    if (month == 7 && date >=23 || month == 8 && date <=22) {value = "Leo";}
    if (month == 7 && date > 31) {value = "tanggal tidak valid";}
    if (month == 8 && date >=23 || month == 9 && date <=22) {value = "Virgo";}
    if (month == 8 && date > 31) {value = "tanggal tidak valid";}
    if (month == 9 && date >=23 || month == 10 && date <=22) {value = "Libra";}
    if (month == 9 && date > 30) {value = "tanggal tidak valid";}
    if (month == 10 && date >=23 || month == 11 && date <=21) {value = "Scorpio";}
    if (month == 10 && date > 31) {value = "tanggal tidak valid";}
    if (month == 11 && date >=22 || month == 12 && date <=21) {value = "Sagittarius";}
    if (month == 11 && date > 30) {value = "tanggal tidak valid";}
    if (month == 12 && date >=22 || month == 1 && date <=19) {value = "Capricorn";}
    if (month == 12 && date > 31) {value = "tanggal tidak valid";}
    }
  • Untuk menentukan shio, caranya dengan mendapatkan sisa bagi tahun dengan 12 (karena shio akan berulang setiap 12 tahun sekali). sebenarnya, cara ini tidak terlalu akurat mengingat pergantian tahun dalam penanggalan Cina tidak tepat seperti pergantian tahun masehi:
    x = (start - birthyear) % 12
    with (document.zodiac.csign){

    if (x == 1 || x == -11) {value = "Tikus";}
    if (x == 0) {value = "kerbau";}
    if (x == 11 || x == -1) {value = "Macan";}
    if (x == 10 || x == -2) {value = "Kelinci";}
    if (x == 9 || x == -3) {value = "Naga";}
    if (x == 8 || x == -4) {value = "Ular";}
    if (x == 7 || x == -5) {value = "Kuda";}
    if (x == 6 || x == -6) {value = "Kambing";}
    if (x == 5 || x == -7) {value = "Monyet";}
    if (x == 4 || x == -8) {value = "Ayam";}
    if (x == 3 || x == -9) {value = "Anjing";}
    if (x == 2 || x == -10) {value = "Babi";}
    }
    }
    </script>
  • Langkah terakhir adalah membuat Interface :
    <center><b>Zodiak dan shio</b></center>
    <form name="zodiac">
    <center>
    <table bgcolor="#eeaa00" border="2" bordercolor="#000000" rules="none" cellspacing="0" cellpadding="4">
    <tr><td><b><i>year</i></b></td>
    <td><div align="right"><input type="text" size="10" name="year" value="Birth Year" onClick=value=""></div></td>
    <td><!--This empty field is just for appearance--></td>
    <tr><td><b><i>Month</i></b></td>
    <td><div align="right">
    <select name="month">
    <option value="x">Select Birth Month</option>
    <option value="1">Januari</option>
    <option value="2">Februari</option>
    <option value="3">Maret</option>
    <option value="4">April</option>
    <option value="5">Mei</option>
    <option value="6">Juni</option>
    <option value="7">Juli</option>
    <option value="8">Agustus</option>
    <option value="9">September</option>
    <option value="10">Oktober</option>
    <option value="11">November</option>
    <option value="12">Desember</option>
    </select>
    </div>
    </td>
    <td><!--This empty field is just for appearance--></td></tr>
    <tr><td><b><i>Day</i></b></td>

    <td><div align="right"><input type="text" name="date" value="Day" size="3" onClick=value=""></td>

    <td><input type="button" value="calculate" onClick="signs()"></div></td></tr>

    <tr><td><b><i>Sun Sign:</i></b></td>
    <td><div align="right"><input type="text" name="sign" size="16" value="" align="right"></div></td></tr>
    <td><!--This empty field is just for appearance--></td></tr>
    <tr><td><b><i>Chinese Sign:</i></b></td>
    <td><div align="right"><input type="text" name="csign" size="12"></div></td>
    <td><!--This empty field is just for appearance--></td></tr>

    </table>
    </center>
    </form>

    </body>
    </html>
  • Berikut ini adalah contoh tampilan yang di dapatkan dari script diatas

    year

    Month


    Day

    Sun Sign:
    Chinese Sign:

  • Untuk contoh di atas tidak berfungsi jika blum anda pastekan ke Elemen laman gadget anda.
  • Nah untuk menambah Aplikasi Zodiak ke blog anda, cukup copy paste kode diatas ke dalam Elemen laman Gadget anda:
  • Simpan dan Selesai...
Selamat mencoba.........



~~~~~Semoga Bermanfaat~~~~

Cara Memasukkan Music Auto Play di Blogspot.com

Pada dasarnya Cara Memasukan Musik Di Blog Dengan Auto Play 


Ini supaya pengunjung blogspot tidak sepi. jika anda tertarik ikuti langkah - langkah dibawah ini :
1. Masuk Ke link ini divine music
2. Pilih Kategori 6 diantaranya > Klik Kategori

3. Setelah pilih kategori > cari nama band yang kamu mau disimpan di blogspot mu > dan pilih juga judul musik nya
4. setelah ketemu judul musik nya copy code HTML.
setelah di copy HTML nya tinggal paste di Blogspot mu :
1. login ke blogger
2. Langsung ke tata letak > Tambah gadget > Pilih HTML/JavaScript
3. pastekan code HTML yang tadi kamu copy di kolom HTML/JavaScript.
4. Klik Simpan. Dan liat hasilnya

~~~~~Semoga Bermanfaat~~~~

Cara Membuat Efek Salju di Blog


Cara Membuat Efek Salju di Blog - Cara ini salah satu untuk mempercantik blog karena ada nya efek salju pada blog. Berikut ini cara membuatnya -

1.Login

2.Pilih Tata letak >> Add gadget >> HTML/JavaScript
3.Copy code script dibawah dan paste di kotak HTML/JavaScript, untuk judulnya kosongkan saja.





4.save, selesai dan lihat hasilnya.

~~~~~Semoga Bermanfaat~~~~

Cara Mengganti Kursor Di Blog

Cara Mengganti Kursor Di Blog - Berikut cara mengganti kursor diblog untuk mempercantik blog karena kursor akan tampil berbeda.
Berikut ini langkah-langkah membuatnya -

1.Login
2.Tata letak >> Tambah Gadget >> HTML/Javascript
3.Copy dan pastekan kode dibawah ini pada HTML/Javascript .



<style type="text/css">
body {
cursor:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifz5msOlTxYVLefjQuY-c72d_HRKHoMwF5dLAZ87lJnYMLDHnupCeOmXiK0Yv2NMHBntV3lIsYjFO_R9LE9pRWWJfZF6sp2iPH-7JAbce3dr6sL2Bu770uTUcsO8NZwf5rK49N01umoUE/h120/4.gif")
,default}
</style>

Menghasilkan Kursor seperti ini -
Kursor

4.Simpan. Lihat hasilnya.

Berikut ini ada beberapa kursor yang bisa sobat pilih (ganti tulisan yang berwarna diatas) -

Kursor
http://i771.photobucket.com/albums/xx357/cebol_01/Kursor.png

Kursor
http://i34.photobucket.com/albums/d132/JuL14_ok/pinkbutterflies.gif

Kursor
http://i40.photobucket.com/albums/e230/dh34sy/flame.gif

Kursor
http://i425.photobucket.com/albums/pp332/hippmibjkt/sym455.jpg

Kursor
http://i872.photobucket.com/albums/ab288/bebe_munya/kursor1.gif

Kursor
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg765bf0E77Af8uJauve8hWN0Bh9W4STIEqran2IXelmGk6t7vRBYgRK_-s7yKdVDeC3944QFYjyfmjtlnfSWzu0wOoEBuu2Nm7VzMy7HEtvEkglm5wnbv_QE64Vqe_zsnQT3ZNlVe5c6M/h120/2.gif


~~~~~Semoga Bermanfaat~~~~

Cara Memasang Burung Twitter Terbang di Blog

Cara Memasang Burung Twitter Terbang di Blog - Berikut ini adalah cara memasang burung twitter terbang diblog. Cara kerja burung ini yaitu terbang mondar mandir dan terkadang sedikit membuat emosi. Sobat tertarik ingin memasangnya? saya tidak.

Berikut ini cara memasang nya diblog -
1.Login

2.Tata Letak >> Tambah Gadget >> Pilih HTML/Javascript
3.Copy dan pastekan kode dibawah ini ke HTML/Javascript

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://tateluproject.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0y-6nh-fk6CGzPgE0fb4If95NMqNx9RrUz0kDPodILVCeJTDS6E0XQVKaxTITP8RseVZx8OUl-3oM8WUsID82K1yEbNSEa3VUaolFqd9AHaFQ4bwY3OmvvnJXvFtRylaKPM63rnxP5Fw/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/AndiRest";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>

4.Selanjutnya simpan dan lihat hasilnya.

NB - Ganti AndiRest, untuk icon burung twitter silah kan ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0y-6nh-fk6CGzPgE0fb4If95NMqNx9RrUz0kDPodILVCeJTDS6E0XQVKaxTITP8RseVZx8OUl-3oM8WUsID82K1yEbNSEa3VUaolFqd9AHaFQ4bwY3OmvvnJXvFtRylaKPM63rnxP5Fw/s1600/burung+twitter+terbang.png dengan icon dibawah ini -

Warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcTOWyOZaPh7Dq1I7e2fZi_zDkV4XcbaX_GGzmtIEE6YBpmHVQE0ikttNZt71xE0bblSW8R4dFVkbaMK_pMfoj0-62kjLQ4Bl9wrSm5J7RD5kzu_9FcHjobhYH5fGWsHseSYXx02nqRMA/s1600/yellow+bird.png

Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrarDGeB5MjGEw9Xvj7RilEUxKaGaYD8Cn-57LJF37xR3ji9Bq0yCQAx8Z4if4uHNoLdhWiBAZCnxi0v_Oawnk_GZLOoByflTr5XsK1ZKBuB4_NNZW7gLRojydU3ULmnjskZPma0rNr28/s1600/black+bird.png

Warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRe8zZfsZ8ut7E8KgQUdYcU2EHGdzvfby6bX8Zoyc05lydnLl9MuF8ieygtGjuOtiT8mfjOiDB7QKC6A43ERw6cQPWr8tBbpomvD-S8RRH3ldSN7DERJexs7BF8ZUYJAJHERhS-qeCNwA/s1600/Blue+bird.png

Warna Coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyT5Sch1t-0EGU2jgc3jvjXVZq5t_3DECtPizP6xCmWwzx_eV29MxTVZ89qxTAbLali8YOaiEPXwaXZA608sTVKpVhYc4twP2UmLqrhNZneYOTXSGfpndfsBddXLEwBC9YYpQjsMPBBxs/s1600/brown+bird.png

Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifjdS0eMVP5GZnbnGWN1csh04GRntEjKBe-z1gyppCWo3AhVv0Zw2Nlosg80tSAmdO7ZV2BAYHhxFBSzHmt6adVkG3Go-tsbcjq9dvyAObGBLSnRaimAnoR76pDex7r1SyMKrgbLRK1EQ/s1600/Green+bird.png

Warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqtvH5KnnxuPacYIapYjM9gT_PRO2Snt5g91PMs5ioFmbIQpCvPb4koRgKKCiNF8ODPzi1BE2Xo7NHbkciOdaYCh4pNDJGtnPjsiBeYrWj8Z3fESogZQafGS5jjOKEGd86mHXZgEk505Q/s1600/purple+bird.png

Warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3jCYhKFS6ZhYcgs6DiYR7P0FiRyVQHbWk4eyIp2YwGukRGabv5D5L6fwOqQ1JUlR3g4-zNFJM3C7MmY1p3HcCGFdhfvxN_W_j_DqIKQYzf_TgbtOnF850jTYdBo4dDZWXPAY6o9ZmI9Y/s1600/white+bird.png

Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAiqrTYhUDVnU799Eb9f-YWJyn1g-Kb9Q1_WPUuPgooHez4bbLFvqXyBDpbjmS-PDs5bPYawPcAukxqk91FOQikPUmJAqNGelPc-wCzFJ1c459MbE0tODzcGSJxB-_Sng6_tmcvMZMLlg/s1600/red+bird.png

~~~~~Semoga Bermanfaat~~~~

Cara Membuat Tombol Next Page DiBlog

Next page Number berfungsi untuk memudahkan pengunjung dalam menjelajahi situs,Next page Number ini hanya menampilkan angka 1|2|3|4..dst. Untuk lebih jelasnya silahkan lihat gambar berikut :


Langsung saja cara membuat nya :

1.Login ke blog sobat.
2.Pada tampilan Dashboard pilih Design kemudian klik Edit HTML.
3.Download Template lengkap ,untuk menjaga hal-hal yang tidak diinginkan.
4.Centang Expand Template Widged.
5.Silahkan sobat cari kode ]]></b:skin> (Ctrl+f untuk memudahkan pencarian).
6.Copy kode yang ada dibawah ini kemudian paste di atas kode ]]></b:skin>

.showpageArea a {text-decoration:underline;} .showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;} .showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;} .showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;} .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;} .showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;} .showpage a:hover {text-decoration:none;} .showpageNum a:link,.showpage a:link {text-decoration:none;color:#33333

7.Kemudian cari kode </body>
8.Copy kode yang ada dibawah ini dan paste kan diatas kode </body>

<script type="text/javascript"> var pageCount=5; var displayPageNum=5; var upPageWord='Previous'; var downPageWord='Next'; </script> <script src="http://yourjavascript.com/3043224162/blogger-page-navi.v1.js.txt.js" type="text/javascript"> </script>

9.Lanjut lagi, cari kode 'data:label.url'
10.Kemudian hapus 'data:label.url' dan ganti dengan kode dibawah ini

'data:label.url + &quot;?&amp;max-results=10&quot;'

11.Next simpan.~~~~~Semoga Bermanfaat~~~~

Cara Memasang TV Online di blog


Cara Memasang TV Online di blog - Cara Membuat TV Online - Kali ini, saya ingin share tentang bagaimana menambahkan TV online di blog. Cara memasangnya-pun sangat mudah, karena kita hanya menaruh script (embed) saja.

Kode yang akan kita gunakan adalah kode script gratis dari Mivo.TV. Kode script Embed MIVO TV gratis ini bisa anda pergunakan jika ingin nonton TV Indonesia secara online, Flash Live Streaming di internet baik itu berita, music, film, gossip dan masih banyak lagi. Cukup Anda copy dan paste di blog Anda, kode yang nanti akan saya tulis.

Pastikan, anda sudah install adobe flash player. Karena siaran yang di tampilkan oleh mivo tv ini dalam bentuk flash, jadinya untuk menonton siaran tv di perlukan adanya pemutar file flash.Oke, langsung saja ya ..
  • Login ke blog Anda. Jika menggunakan blogger, silahkan tambahkan ke dalam HTML/JavaScript atau langsung di dalam posting atau halaman statis.
  • Copy script berikut, dan paste
<embed width="100%" height="860" align="top" wmode="transparent" type="application/x-shockwave-flash"
src="http://id.imediabiz.com/MivoTV.swf?r=' + Math.round(Math.random() * 99999) + '" scale="noscale"
quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" name="MivoTV" menu="true"
devicefont="false" bgcolor="#ffffff" allowscriptaccess="sameDomain" allowfullscreen="true"
scroll="auto">
  • Simpan dan selesai.
Untuk melihat contoh tv online yang sudah terpasang, klik DI SINI.
~~~~~Semoga Bermanfaat~~~~

Cara Membuat Judul Blog bergerak

Judul/Title blog secara default, berada dalam keadaan statik. Namun, kita bisa memberikan efek pada judul blog kita dengan kode JavaScript, sehingga bisa bergerak dari kanan ke kiri.

 Mari kita buat :

  • Dari dashboard >> Design >> Add a gadget >> Html/Javascript 
  • Copy dan paste code berikut di HTML/Javascript :

<script language=javascript>
msg = "Test Blog ...Test Blog ...";

msg = "..." + 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>

Note: Ganti 'Test Blog ...Test Blog ...' dengan teks yang diinginkan.
  • Save/Simpan, dan lihat hasilnya.



~~~~~Semoga Bermanfaat~~~~

Pesan Berjalan Melayang Di Bawah Blog

Widget ini nyaris sama dengan headline news berjalan.

Hanya saja yang berjalan di sini bukan link-link postingan terbaru, akan tetapi sebuah pesan yang Agan kehendaki untuk para pembaca.

Cara membuatnya :


1. Masuk ke Template. Klik Edit HTML.
__Pilih Lanjutkan. Beri centang Expand Template Widget.

2. Cari kode ini ]]></b:skin>
__Pakai CTRL F untuk menemukannya.

3. Lalu masukkan kode ini di atas kode tadi.

. rbbox {border: 1px solid #D8D8D8; padding: 5px;
background-color: #E0F8E0;-moz-border-radius: 5px; margin: 5px;}
. rbbox: hover {background-color: #EFFBEF;}#ketagihan_baca {   
position:fixed;_position:relative;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);    _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }


4. Cari lagi kode ini </body>
__Pakai CTRL F untuk menemukannya.

5. Lalu masukkan kode berikut di atas kode tadi.

<div id='ketagihan_baca'>
&lt;font COLOR=&quot;#ffffff&quot;&gt;
&lt;B&gt;&lt;MARQUEE onmouseover=&quot;this.stop()&quot; onmouseout=&quot;this.start()&quot; direction=&quot;left&quot; BGCOLOR=&quot;#000000&quot; width= 100%px scrollamount=&quot;3&quot;&gt;

MASUKKAN PESAN TEKS PANJANG YANG INGIN DI BUAT DI SINI
&lt;/MARQUEE&gt;&lt;/b&gt;&lt;/font&gt;
</div>


6. Ganti pesan teks nya dengan pesan yang Agan kehendaki.

Ok, happy blogging !!

Tahun Kejuaraan ...