PSD to CSS XHTML with form fields - 1 page by MammothSG

May 4th, 2011
Simple PSD to XHTML CSS slice job needed super urgently (today). Need to feature form field for name and email that then displays a results page when subscribe button clicked. Easy and fast job see… (Budget: $30-$250 USD, Jobs: CSS, HTML, Photoshop, PSD to HTML)
Original post by Freelancer.com - New Projects

No Comments »

No comments yet.

Leave a comment

 
 
 
:mrgreen: :neutral: :twisted: :shock: :smile: :???: :cool: :evil: :grin: :oops: :razz: :roll: :wink: :cry: :eek: :lol: :mad: :sad:

[ Read More ]

Membuat Animasi Text Di Blogger

Terkadang kita perlu menampilkan text yang bisa bergerak baik itu naik, turun, kesamping kiri ataupun kanan untuk menarik perhatian pembaca. Kali ini saya coba menyajikannya lengkap khusus untuk anda yang ingin mengutak-atik blog anda agar lebih keren. 


Membuat Text Berjalan Kesamping Kiri 

Bagaimana caranya untuk menambahkan teks yang bergeser kesamping, baik dibagian sidebar, posting blog dan lain-lain. Cara ini merupakan cara lain untuk menarik pengunjung agar memperhatikan beberapa tulisan yang kita kehendaki.

Tapi, sebaiknya kita jangan memasangnya terlalu banyak, karena justru akan mengganggu dan merusak konsentrasi pembaca. Anda dapat menambahkan tulisan bergulir pada kalimat / frase tertentu seperti : posting paling populer, iklan, berita terkini dll. Okedeh, tanpa perlu basa-basi kepanjangan. Langsung aja nih...

Berikut adalah kode untuk menambahkan teks bergulir sederhana dari kanan ke kiri

kode <marquee> bergulir sederhana teks </ marquee>

Output akan seperti:
Contoh 1:

contoh text bergulir

jangan lupa, anda mengetiknya di tab Edit HTML seperti gambar dibawah ini


kemudian akan terlihat seperti ini :


Bagaimana jika background text berjalan Anda ingin diwarnai? Silahkan coba ini...

Tambahkan warna latar belakang teks,
<marquee bgcolor="#99ccff">kode scrolling text sederhana</marquee>

Contoh 2:

kode scrolling text sederhana

Bagus bukan? kalau Anda ingin merubah warna backgroundnya dengan warna lainnya anda bisa melihat di kode heksadesimal di sini

Lanjut yuk...

Membuat Text Berjalan Kesamping Kanan

Ini merupakan trik lanjutan tentang marquee script, yaitu membuat text yang berjalan dari kiri ke kanan. Yang perlu Anda lakukan adalah :

  • Copy dan paste kode dibawah ini pada posting blogger di tab EDIT HTML seperti yang saya tunjukkan pada gambar diatas :
<marquee direction="right&quot; bgcolor="#99CCFF">contoh text bergeser kekanan</marquee>

silahkan Anda lihat, pada tulisan yang saya stabilo kuning, merupakan perintah arah bergesernya text.
  • Hasilnya akan terlihat seperti dibawah ini:
contoh text bergeser kesamping

Membuat text naik pada blogroll

Ini merupakan trik yang ke-3 untuk geser-menggeser text, dan untuk kali ini, saya ingin mengajak Anda untuk mempelajari trik membuat text naik, dan ini tidak terbatas pada blogroll, perintah script ini bisa anda terapkan di text apapun di blogger, simak ya.
  • Seperti biasa, inilah kode rahasia yang harus Anda copy paste kan, cara untuk copy dan pastenya sudah saya kasih tau pada posting sebelumnya.
 <marquee direction="up" bgcolor="#99CCFF">contoh text rolling keatas</marquee>

  • Jika Anda sudah melakukannya dengan benar, maka akan muncul tampilan seperti dibawah ini:
contoh text rolling keatas

  • warnanya koq beda ya? : ) ya iyalah... orang kode warnanya saya ubah he..he..
Sudah siap untuk trik yang keempat? lanjuut... 
    Membuat text turun pada blogroll

    Kayaknya kalo untuk buat text turun sudah banyak ya yang bikinin, tapi daripada Anda harus repot buka blog lainnya, mendingan sekalian saya tuliskan aja disini. Begini nih caranya :

    • Copy paste kode berikut ini :
    <marquee direction="down" bgcolor="#9900FF">text rolling turun</marquee>

    • Lihat pada tulisan yang saya stabilo kuning ya, ya... itulah kunci perintahnya. Jadi textnya bisa rolling kebawah. Hasilnya akan terlihat seperti dibawah ini:
    gue lagi turun nich..

      
    Menggeser text kekiri dan kekanan

    Untuk kali ini, kita tidak hanya akan menggeser text saja, melainkan mengaturnya sehingga dia bisa bergeser kekiri dan kekanan secara otomatis (mulai agak sulit? tidak juga). Silahkan perhatikan langkah-langkah berikut ini:

    • Pada script yang sudah ada silahkan Anda menambah perintah seperti yang di stabilo kuning dibawah ini:
    <marquee behavior="alternate" bgcolor="#33FFCC">text goyang kiri dan kanan</marquee>
    • Hasilnya seperti dibawah ini, text akan berjalan kekri dan kekanan secara otomatis.
    text goyang kiri dan kanan


    Mengurangi Kecepatan Geser Text

    Untuk merubah kecepatan bergesernya text, kita tinggal menambah perintah sebagai berikut (yang distabilo kuning ya...)
    • Anda harus menambah beberapa perintah di scriptnya seperti yang tertera dibawah ini:
    <marquee behavior="alternate" direction="left" bgcolor="#9999CC" scrollamount="2">text bergeser pelan</marquee>
    • Hasilnya akan terlihat, pergeseran text bisa terlihat lebih lambat :
    text bergeser pelan
    • Jika kita ingin agar pergeseran textnya justru lebih cepat bisa merubah angka yang distabilo ini ya
     <marquee behavior="alternate" direction="left" bgcolor="#9999CC" scrollamount="6">text bergeser cepat</marquee>
    • Nah, kelihatan kan tambah kenceng larinya.. kayak kuda binal hehehe...
    kudaku lari kencang

    Text Berhenti Saat Cursor Diatasnya

    Kalau Anda bingung sama judul postingan ini, silahkan baca sejarahnya, alias baca postingan saya sebelumnya. Pasti deh tambah bingung hehe... becanda lho.
    Langsung aja ya, yang perlu Anda lakukan adalah mengikuti langkah-langkah berikut ini:

    • copas kode berikut
    <marquee behavior="alternate" direction="left" bgcolor="#CCCCCC" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="50">  kalo ada cursor berhenti</marquee>

    catatan : tulisan yang saya stabilo kuning diatas hanya untuk menunjukkan kepada Anda disitulah kunci perintahnya. Bukan berarti hanya tulisan itu yang Anda copasin lho.. copas semua bleh!
    • Hasilnya akan terlihat seperti dibawah ini:
        kalo ada cursor berhenti


    Mengubah Warna Text Pada Text Berjalan

    Untuk kali ini, kita akan membahas cara untuk mengubah warna pada text berjalan

    • Pertama, Anda harus mengawali dengan tag <div dan diakhiri tag </div>
    • Kedua, Anda tinggal menambahkan kode warna sesuai dengan keinginan Anda
    <div style="color: red;">
    <marquee>contoh text berwarna</marquee></div>

    Nb: pokoknya copas aja deh, biar gak ada kelirunya...(warna stabilonya diilangin ya...)
    • Hasilnya seperti ini
    contoh text berwarna
      Membuat Hyperlink Pada Text Berjalan

      Inilah yang menurut saya paling keren, membikin text berjalan jadi hyperlink text alias text yang jika diklik akan membuka situsnya. Berikut step bay stepnya :

      • pertama, copas kode dibawah ini:

        <marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">    <a href="url#1">LINK#1</a>  <a href="url#2">LINK#2</a>  <a href="url#3">LINK#3</a>  </marquee>

      • hasilnya akan terlihat seperti dibawah ini

           LINK#1  LINK#2  LINK#3 

      Jangan lupa ganti tiap tulisan url#1,url#2,url#3 dengan alamat URL situs/blog yang Anda kehendaki dan LINK#1 dst dengan nama situs/blog yang Anda kehendaki

      Contoh:
      • copas kode berikut ini:

      <marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">    <a href="http://www.matasehat.com/">Kesehatan Mata</a>  <a href="http://www.bongkarrahasia.blogspot.com/">Rahasia Bisnis Online</a>  <a href="http://www.entrepreneur-on.blogspot.com/">Entrepreneur Tips</a>  </marquee>

      • hasilnya seperti ini

          Kesehatan Mata  Rahasia Bisnis Online  Entrepreneur Tips 

      Jangan lupa commentnya : )

      Anda dapat memilih warna latar belakang anda dengan mengganti kode heksadesimal.
      Klik di sini untuk melihat kode warna yang berbeda.

      Ditunggu komentarnya ya boss, jika Anda ingin mendownload artikel ini silahkan klik disini
      [ Read More ]



        Avira Key Finder Tool
        Avira Key Finder Tool
        Bagi sobat inisip yang menggunakan antivirus Avira baik Avira antivir Premium atau Avira Premium Security Suite atau ada yang ingin mencoba menggunakan antivirus Avira Avira Key Finder merupakan tool yang ...
        Uniblue SpeedUpMyPC 2010 Gratis License Serial Key
        Uniblue SpeedUpMyPC 2010 Gratis License Serial Key
        Uniblue SpeedUpMyPC? adalah salah satu software terbaik saat ini dengan mendapatkan penghargaan dari Microsoft sebagai software optimize terbaik yang terbukti mampu meningkatkan kecepatan komputer dengan engine terbaru dapat dengan cepat ...
        FotoMix 8.1.2 Cara Mudah Mengganti Backround Foto
        FotoMix 8.1.2 Cara Mudah Mengganti Backround Foto
        FotoMix adalah salah satu editing foto gratis namun mempunyai fitur menarik sebagai salah satu trik untuk mengganti latar belakan atau Backround sebuah foto sehingga menjadikan foto lebih menarik. Terkadang sebuat ...
        Uniblue RegistryBooster 2010 Crack Activation
        Uniblue RegistryBooster 2010 Crack Activation
        Uniblue RegistryBooster salah satu software favorit yang selalu setia menemani di kompie sebagai salah satu tool untuk membersihkan sampah registry sisa-sisa uninstall software dengan dimulai melakukan deep scan registri, memeriksa ...
      [ Read More ]