Posts Subscribe comment Comments

0 komentar

Cara Membuat ToolTips

INI ADALAH PETUNJUK YG SAYA DAPAT DARI TEMEND SAYA!!!!!...Banyak cara untuk memperkeren tampilan blog kita.. membuat perbedaan dengan blog lainnya... ini akan menjadikan blog kita mempunyai ciri khas tersendiri... salah satunya ialah dengan menambahkan efek tooltips di blog.. dimana pada saat di mouseover pada tautan URL (saya fokuskan di tautan saja) akan muncul pop-up Tooltips yang keren...

MySpace...Tooltips yang saya bahas ini merupakan hasil ekperimen saya dalam beberapa hari terakhir ini ...dari source code yang saya dapatkan via Mbah Google... Saya telah mencoba berbagai cara & kode untuk membuat Tooltips versi saya sendiri.. dan berhasil dengan ToolTips yang :
1. Gambar background yang bisa diganti-ganti...
2. Efek transparansi yang bisa diubah-ubah.. atau bisa juga tanpa transparansi...
3. Tidak memberatkan blog.. karena tidak memakai javascript (.js)...
4. Font-text nya bisa diganti-ganti...

...Ini Contoh Tooltips untuk di Postingan.. coba kalian MouseOver Link di bawah ini :


  • CaRa MemBuat ToolTips di bLog..
    Dimana pada saat di MouseOver pada tautan URL (saya fokuskan di tautan saja) akan muncul Pop-Up Tooltips yang keren...



  • ..tapi tooltips ini masih belum sempurna... jadi harap maklum ya.. silahkan sobat blogger sekalian memperbaruinya menjadi lebih baik lagi...

    MySpace...Oke.. langsung saja kita mulai Sharing Knowledge- nya , pahami langkah-berikut ini ;

    A. Kode tooltips untuk di ditempatkan di dalam Kode HTML Template Blog...
    1. Login ke Blogger > Rancangan > Edit HTML ...lalu Copy kode ToolTips dibawah ini...
    li.sfhover .tooltips, li:hover .tooltips {
    display:block;
    }
    .tooltips {
    margin:6px 6px 0 6px;
    padding:15px 10px 15px;
    position:absolute;
    width:250px; >
    display:none;
    background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) bottom repeat-x;
    opacity: 0.8;filter:alpha(opacity=80);zoom:1;
    border:1px solid #FFFFFF;
    -moz-border-radius:10px;
    }
    .tooltips {
    margin-top:-50px;
    margin-left:-290px;
    }
    .tooltips:hover {
    display:none!important;
    }
    .tooltips p {
    font-size:12px;
    font-family:Rockwell;
    font-weight:bold;
    color: #0060C8;
    text-align:center;
    margin:0 15px 0 0;
    }
    2. Cari kode berikut ini.. ]]></b:skin> ..dan Paste -kan kode tadi diatasnya... Seperti contoh dibawah ini...
    li.sfhover .tooltips, li:hover .tooltips {
    display:block;
    }
    .tooltips {
    margin:6px 6px 0 6px;
    padding:15px 10px 15px;
    position:absolute;
    width:250px;
    display:none;
    background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) bottom repeat-x;
    opacity: 0.8;filter:alpha(opacity=80);zoom:1;
    border:1px solid #FFFFFF;
    -moz-border-radius:10px;
    }
    .tooltips {
    margin-top:-50px;
    margin-left:-290px;
    }
    .tooltips:hover {
    display:none!important;
    }
    .tooltips p {
    font-size:12px;
    font-family:Rockwell;
    font-weight:bold;
    color: #0060C8;
    text-align:center;
    margin:0 15px 0 0;
    }

    ]]></b:skin>
    Ket :

    background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) = Gantilah dengan URL gambar background kamu sendiri.. tetapi usahakan ukuran gambarnya disesuaikan... silahkan ganti yang berwarna biru...

    border:1px solid #FFFFFF; = Untuk mengatur ketebalan dari garis border ToolTipnya.. disini saya memakai 1px dengan warna border putih.. silahkan ganti yang berwarna biru...

    -moz-border-radius: = Ini untuk memberi efek Lingkaran pada siku gambar tooltips.. semakin besar nilainya maka hasilnya akan semakin berbentuk lingkaran... jadi biarkan saja default 10px..

    opacity: 0.8;filter:alpha(opacity=80);zoom:1; > angka berwarna biru ini untuk mengatur tingkat Transparansi ToolTips... aturlah sesuka kalian...

    margin-top:-50px; = Untuk mengatur posisi Tinggi rendahnya Tooltips... ubah angka yang warna biru...
    margin-left:-290px; = Untuk mengatur posisi ke kiri-kanannya Tooltips... ubah angka yang warna biru...

    font-family:Rockwell; = Kata yang berwarna biru ini ubahlah dengan font yang sesuai dengan keinginan kalian...

    ..Dan Seterusnya... silahkan kalian Modifikasi sendiri ya... banyak jika harus dijelaskan satu-persatu.. capek ngetiknya.. :)) ..saya yakin kalian mengerti kode-kode sisanya... ;)

    3. Jika telah selesai.. Simpan Template Blog...


    B. Kode untuk memanggil tooltips pop-up (Muncul)...
    1. Perhatikan kode untuk memanggil tooltips ini atau kode agar membuat tooltips -nya berfungsi..
    <li><a href="http://.....URL yang berkaitan dengan ToolTips...." > Judul URL yang berkaitan dengan ToolTips </a><div class="tooltips"><p> Kata-kata untuk ditampilkan pada Pop-up ToolTips</p></div></li>
    Ket :
    > Yang saya warnai merah adalah kode terpenting.. jadi jika kalian terlupa memasukannya makan tooltips-nya tidak akan berfungsi...

    ...Ini Contoh Pengunaannya... yang saya gunakan pada widget HTML/Javascripts.. (bisa juga kamu gunakan pada postingan loh..)...
    <li><img src="http://i466.photobucket.com/albums/rr22/wong284/arrow_DOWNLOAD.gif" /><a href="http://www.ziddu.com/downloadlink/7138173/FarmFrenzy2.rar" > GaMe Farm Frenzy 2</a><div class="TOLtip"><p>Permainan uji ketangkasan dalam mengelola lahan Pertanian...</p></div></li>
    ...Contoh ToolTips Nyatanya ada di Blog saya ini.. Coba kalian MouseOver Isi Menu pada Bagian Free DownLoad di sebelah kanan Blog ini.. seperti gambar dibawah ini... :)


    Note :
    > Sebaiknya Kemunculan Pop-Up Tooltip-nya kalian atur munculnya dibawah Link/gambar tautan.. agar Tooltips ini bisa digunakan di seluruh area dalam blog kamu (di widget sebelah kiri/kanan atau di postingan atau di header/footer)...
    > Kode Tooltips ini saya atur sedemikian rupa agar tampilannya sesuai dengan keinginan saya dan tema blog saya... makanya belum tentu akan cocok dengan blog lainnya... jadi silahkan kalian utak-atik sendiri sekreatif mungkin agar sesuai dengan tema blog/ keinginan kalian...


    MySpace
    ... Tooltips yang Simple...
    READ MORE - Cara Membuat ToolTips

    0 komentar

    Buat Teks Neon

    Demo teks neon Demo teks neon

    Gak usah lama-lama langsung aja

    1. Pasang kode js ini pada <body>

    <h3><script language="JavaScript1.2">
    var message="Demo teks neon Demo teks neon"
    var neonbasecolor="#BDBDBD"
    var neontextcolor="#32FC0A"
    var neontextcolor2="#DEFDD8"
    var flashspeed=100      // speed of flashing in milliseconds
    var flashingletters=3      // number of letters flashing in neontextcolor
    var flashingletters2=1      // number of letters flashing in neontextcolor2 (0 to disable)
    var flashpause=0      // the pause between flash-cycles in milliseconds
    var n=0
    if (document.all||document.getElementById){
    document.write('<font color="'+neonbasecolor+'">')
    for (m=0;m<message.length;m++)
    document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
    document.write('</font>')
    }
    else
    document.write(message)
    function crossref(number){
    var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
    return crossobj
    }
    function neon(){
    //Change all letters to base color
    if (n==0){
    for (m=0;m<message.length;m++)
    crossref(m).style.color=neonbasecolor
    }
    //cycle through and change individual letters to neon color
    crossref(n).style.color=neontextcolor
    if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
    if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
    if (n<message.length-1)
    n++
    else{
    n=0
    clearInterval(flashing)
    setTimeout("beginneon()",flashpause)
    return
    }
    }
    function beginneon(){
    if (document.all||document.getElementById)
    flashing=setInterval("neon()",flashspeed)
    }
    beginneon()
    </script></h3>

    2. Ucapkan TerimaKasih....


     

    READ MORE - Buat Teks Neon

    0 komentar

    Cara Pasang Loading Pda Blogger

    Pernah ada kepikiran di benakmu buat menghias blog??? nach ni ada solusinya...
    biasa nie dibuat sendiri lewat javasrcipt.. java scrip ituchhh.... panjang maw jelasinnya. dari pada susah2 upload javasript kepunyaan sendiri mending copy paste aja javasrcipt yang udah dikeluarkan ma temen kita yang baik hati yang mau membuat javasrcipt dan menguploadnya niech.... so u tinggal copas aja salah satu kode di bawah ini pada blog kamu lalu simpan jadi dechhh ujan salju di blog kamu.

    Langkah Langkah :
    1. Copas kode ini pasang di bawah <head> :

    <script src='http://tc.comze.com/js/preloadpage.js' type='text/javascript'/>
    2.Cari <body>, kemudian ganti dengan code ini :
    <body onLoad='waitPreloadPage();'>
    <div id='prepage' style='position: fixed; _position: absolute; top: 0px; right: 0px; clip: inherit; _top: expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-offsetHeight); _left: expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth-offsetWidth); width: 100%; height: 100%; background-color: #000; padding: 0px; border: 0px; text-align: center; filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; font-family: verdana; font-weight: bold; color: #ccc;'>
    <center><p style='margin-top: 250px;'><img src='http://tc.comze.com/js/images/ajax-loader.gif' style='border: 1px solid #555; padding: 2px;'/><br/>Memuat halaman...</p></center>
    </div>
    
    NB: Kalian bisa mengganti tulisan yang berwarna merah dengan loading pilihan anda sendiri. Seperti : http://images2.vnwallpapers.com/download/AnimatedForPhone/loading.gif?imgmax=800
    3. Ucapkan Terima Kasih....
    READ MORE - Cara Pasang Loading Pda Blogger

    1 komentar

    Buat Hujan Salju Dan Bunga Di Blog

    Dibaca dari judulnya kayanya dah asik kan...pokonya asyik banget lah low ada
    mawar melayang-layang diblog kita juga kayaknya lebih adem kalau ada guyuran salju juga...sejuk kayaknya....pingin tahu gimana caranya...
     CARANYA ADA DI PALIG BAWAH TAPI PILIH DULU .......!!!!

    langsung saja ni dy scriptnya.........
    Script Hujan Bunga


    untuk salju besar scripnya dibawah ini



    untuk salju kecil scripnya dibawah ini



    sengaja saya beri opsi rada banyak supaya anda bisa memilih mana yang terbaik
    dan seperti biasa untuk pemasanganya langkah - langkahnya sebagai berikut :


    1. login ke Blogger.
    2. Pilih Tata Letak.
    3. Pilih Elemen Halaman.
    4. Pilih tambah HTML JavaScript.
    5. Copy script diatas kemudian paste kedalam kotak HTML JavaScript.
    6. Klik tombol Simpan

    langsung saja praktekan biar sobat bisa lihat langsung keajaibannya...
    selamat mencoba...sukses selalu
    READ MORE - Buat Hujan Salju Dan Bunga Di Blog

    0 komentar

    CARA BUAT TEXT AREA DI BLOG

    CARA BUAT TEXT AREA DI BLOG

    Apa itu Text Area....? Setiap blog yang memasang text area rata2 mempunyai tujuan untuk copy paste kode HTML bagi para pengunjungnya, Baik itu untuk tukeran link, atau pun untuk menyimpan kode2 HTML atau javascript yang nantinya akan di copy paste oleh pengunjung. Nah...bagaimana cara membuatnya, Silahkan copy paste kode di bawah ini :





    Nah...Text yang berwarna merah itu, tinggal Anda ganti sesuai apa yang mau ditulis didalam text area tersebut. Jadi kalo lihat kode HTML di atas, hasilnya akan seperti ini :

    hasil :



    Di sini Anda bisa mengganti :

    rows="4" --> panjang area (Bisa diganti sesuai keinginan)
    cols="20" --> lebar area (Bisa diganti sesuai keinginan)
     
    READ MORE - CARA BUAT TEXT AREA DI BLOG