Post Game

Cara Membuat Search Box Mirip Apple com

Maybe bagi anda pengguna produk apple seperti safari tidak asing lagi dengan search box seperti di atas, karena jenis Search Box pada gambar tersebut memang di buat mirip dengan situsnya mendiang kaka ipar saya, itu tu Steve Jobs hehe (ngarep). Saya dapatkan Search Box tersebut saya dapatkan dari Bloggermint, dan yang membuatnya Rethnaraj Rambabu (katanya) Search Box tersebut menggunakan CSS 3 dan yang pasti keren lah di pasang  di blog.
Kalo mau liat contohnya emg lagi di pake ma saya salah satunya, tapi kalo mau liat contoh lainnya klik disini.

Nah sekarang kita langsung saja ke cara pembuatanya, cekidot.

1. Langkah paling wahid sih yang pasti masuk dulu ke Blogger.
2. Setelah itu masuk ke Template > Edit HTML > Lanjutkan
3. Lalu cari kode ]]></b:skin>
4. Lalu untuk Search Box jenis berikut,

COPAS kode berikut di atas kode ]]></b:skin>

#search {
}
#search input[type="text"] {
    background: url(http://www.bloggermint.com/demos/css3searchbox/search-dark.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    width: 200px;
    }

kalo untuk gambar berikut,

#search {
}
#search input[type="text"] {
    background: url(http://www.bloggermint.com/demos/css3searchbox/search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    width: 200px;
    }

nah kalo Search Box yang saya pake

kodenya sebagai berikut

#search {
}
#search input[type="text"] {
    background: url(http://www.bloggermint.com/demos/css3searchbox/search-white.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    width:150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    background: url(http://www.bloggermint.com/demos/css3searchbox/search-dark.png) no-repeat 10px 6px #fcfcfc;
    color: #6a6f75;
    width: 200px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

4. Nah kalo udah pilih salah satu, terus klik Simpan Template
5. Jika sudah, terus klik Tata Letak > Tambah Gadget > HTML/Java Script
6. Terus COPAS kode berikut.

 <form method="get" action="/search?s=" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

 7. Terakhir klik Simpan
end....

Go to link Download

Cara membuat text mengkilat Oketoon blogspot com

1. Buka Adobe Flash CS5 (bebas)
    Yang belum punya silahkan download [Windows]

2. Buat lembar baru, Create New > Action Script... Terserah

3. Atur Ukuran lembar kerja di bagian properties

4. Pilih Text Tool atau dengan menekan tombol T, buat sebuah tulisan atau kata yang ingin di buat berkilau. ini contohnya:

saya menggunakan dua teks dengan font Bauhaus 93 dan Comic Sans MS, yang perlu di perhatikan adalah setelah selesai membuat text jangan tekan enter, enter hanya untuk ganti baris yang harus di lakukan adalah klik sembarang tempat atau pilih tool yang lainya.

5. Blok text yang telah di buat tadi dengan selection tool atau tekan V, kemudian klik kanan > break apart atau Ctrl+B sebananyak dua kali atau setelah muncul titik titik di text yang anda seleksi.

6. Copy text atau yang sekarang menjadi shape tersebut dan pastekan (paste harus in place atau Shift+Ctrl+V) pada layer baru, anda dapat membuatnya di menu timeline. Nah sekarang ada dua leyer yang memiliki objek yang sama di dalamnya

7. klik di layer 2 atau layer yang paling atas kemudian pilih menu modify > Convert to Symbol ... pilih type movie clip setelah itu text akan di pagari oleh seleksi

8. Klik dua kali pada objek itu, anda akan masuk ke movie clip tulisan tadi

9. Buat layer baru (masih di dalam movie clip) kemudian buat sebuah shape kotak pada sebelah kiri teks dengan menggunakan rectangle tool atau dengan menekan R. buat persegi panjang mengarah vertikal


10. warnai dengan menggunakan paint bucket tool atau tekan K, warnai dengan warnai linear gradient. jadinya seperti ini

11. kemudian anda dapat memutarnya sedikit dengan bantuan free transform atau tekan Q (saat anda menggunakan free transform anda harus menyeleksi objek yang anda buat) jadinya kurang lebih seperti ini


12. klik kanan di frame pertama layer yang berisi persegi kemudian pilih create classic tween.
13. klik kanan di frame 40 pilih insert key frame, kemudian geser objek tersebut melewati teks ke sebelah kanan, dan klik kanan frame 40 di layer yang berisi teks dan pilih insert frame. hasilnya seperti ini


14. geser layer yang berisi persegi kebawah dan yang berisi teks di tempatkan di atas.

15. klik kanan di layer 1 atau layer text kemudian pilih mask


16. masuk kembali ke stage atau keluar dari movie clip

cara mengeceknya Ctrl+Enter
17. animasi text berkilau sudah jadi, anda dapat mengexportnya dengan menu file export to movie...

sekian tentang membuat animasi text berkilau dengan flash, semoga dapat bermanfaat untuk anda. bila terdapat banyak salah kata saya sangat minta maaf dan ini datangnya dari saya, terima kasih.

Go to link Download

Cara membuat blog di Blogger com

Pada postingan ini saya ingin berbagi tutorial cara membuat blog di blogger.com nggak pakai ribet dan dijamin nggak bikin mumet.

Tutorial ini saya buat tentunya khusus buat sobat yang sedang tertarik untuk memulai belajar ngeblog di blogger.com.

Kenapa Blogger.com?

Selain blogger.com sebenernya di internet masih ada banyak sekali layanan blogging yang bisa digunakan. Tapi hampir kebanyakan orang di Indonesia lebih memilih blogger.com.

Alasannya karena blogger.com terkenal mudah digunakan, gratis, dan juga memiliki fitur yang lumayan lengkap.

Selain itu kita juga bisa menggunakan blog yang kita buat di blogger.com sebagaitempat untuk menghasilkan uang.

Cara membuat blog di blogger.com

Ok. langsung saja, di bawah ini adalah tutorialnya.

Silakan dibaca dengan pelan-pelan.

#1. Masuk ke https://blogger.com

#2. Login menggunakan akun Google milik sobat. Jika belum punya, silakan dibaca: Cara membuat email gratis dari Google


#3. Jika sebelumnya sobat belum membuat profil Google+ maka klik "Buat profil Google+" tapi kalo sudah punya profil Google+ maka langsung lompat ke langkah berikutnya.

#4. Klik "Lanjutkan ke Blogger"

#5. Klik "Blog baru" untuk membuat blog baru
#6. Isi detail blog sobat, setelah itu klik "Buat blog!"
#7. Horeee...!! Blog sudah jadi..

Kalau sudah bikin blog terus ngapain?

Hal yang bisa dilakukan selanjutnya tentu saja mulai mengisi blog sobat dengan tulisan. Silakan baca tutorial Cara posting artikel di blogger.

Selain itu hal yang paling penting adalah mempelajari menu-menu dasar yang ada di blogger supaya sobat lebih mudah dalam mengelolanya. Silakan baca:Memahami menu-menu dasar di blogger.

Begitulah kira-kira tutorial cara membuat blog di blogger nggak pakai ribet. Semoga bisa memberi manfaat untuk sobat semua.

Jika Ada Kritik dan Saran Shilakan Komentar Di bawah ini Atau Bisa menghubungi saya di:

Facebook        :Ahmad Sahlan
Email              : Ahmad.sahlan300@gmail.com
CP                  : 082332734874

Go to link Download

Cara Membuat VPN Premium Gratis di TcpVpn Com

Yap lanjutan dari postingan saya sebelumnya yaitu Web Penyedia VPN Gratis Untuk PC dan Android TCPVPN.COM, Kali ini mimin akan share Cara Membuat VPN Premium Gratis di TcpVpn.Com

Go to link Download