. Catatan Si Virgo Girl: October 2011

 Subscribe in a reader

Berlangganan gratis Via Email Di bawah ini

Friday, October 28, 2011

Andeca Andeci-7 Ikans yang dulunya Smosh

Pencinta OVJ sekarang ada lagu terbarunya para wayang OVJ loh... ni dia  7 Ikans yang dulunya Sm#sh berjudul Andeca Andeci



Andeca andeci la bora bora bori
Andeca andeci la bora bora bori

si gumbal gambul ya nona si gumbal gambul
si gumbal gambel ya nona si gumbal gambel
perkenalkan kamu semua anak gaul
walau anak gaul yang penting tampangnya gembel

andeca andeci la bora bora bori
andeca andeci la bora bora bori

makan pare ya nona campur sekuteng
makan di jakal ya nona bareng bang amin
temen saya si andre orangnya ganteng
tapi sayang ya nona gagal nyalonin

andeca andeci la bora bora bori
andeca andeci la bora bora bori
andeca andeci la bora bora bori
andeca andeci la bora bora bori

kota jogja ya nona sebelum jatim
janganlah lupa mampir di rumah si tahrim
kami ini berdua pasangan intim
sayang disayang kita ini belum muhrim


andeca andeci la bora bora bori
andeca andeci la bora bora bori

minum kopi ya nona makannya duren
pergi ke gandul ya none ke rumeh rojak
lihat bang opi ya nona orangnya keren
liat si adul tampangnya kek jambu rujak

si sule andeca andeci, si parto andeca andeci
si andre andeca andeci, si azis andeca andeci
si nunung andeca andeci, si opi andeca andeci
si adul andeca andeci, semuanya andeca andeci

Kalau sobat ingin download lagu ini bisa klik aja di bawah ini

Photobucket

Wednesday, October 26, 2011

Archimedes (287-212 SM)


Archimedes pintar di bidangnya, dia dianggap penemu prinsip pengukit dan konsep gaya berat tetentu.

Nyatanya pengukit itu sudah di kenal dan dipergunakan orang berabad sebelum ada Archimedes. Tapi, tanpaknya dia orang pertama yang jelas menerangkan formula hal’ihwal pengungkit meskipun ahli-ahli mesin sudah berulang kali dan mampu menggunakan pengungkit jauh sebelum Archimedes.

Konsep tentang kepadatan (berat per volume unit) dari suatu benda sebagai lawan berat keseluruhan suatu objek tanpaknya sudah diketahui sebelum Archimedes dan mahkota (cerita tentang dia melompat dari tempat mandinya dan berlari-lari sepanjang jalan sambil berteriak “Eureka”), apa yang diemukan Archimedes bukanlah barang baru melainkan sekedar pemakaian terang-terang dari konsep yang sudah di kenal terhadap sesuatu masalah spesifik.

Archimedes hamper sampai pada memformulasikan “kalkulus intergral” lebih dari delapan abad sebelum Isaac Newton berhasil melaksanakannya, malangnya system yang mudah untuk melukiskan lambing-lambang jumlah masih kurang di masa Archimedes. Bagitu pula malangnya, tak ada pelanjut-pelanjutnya yang cukup bermutu selaku metamatikus. Akibatnya, kebrilianan pandangan matematika Archimedes menjadi semakin berkurang daya cekamnya seperti sebelumnya. Karena itu tampak jelas sekali, betapa pun mengagumkan bakan Archimedes, pengaruh riilnya tidak cukup besar untuk bias diyakini.

Tuesday, October 25, 2011

ST. THOMAS AQUINAS (Sekitar 1225-1274)


Filosof Italia Thomas Aquinas masyur karena tulisan-tulisan teologinya, khusus tulisan Summa Theologica–nya yang mungkin pernyataan punya bobot kuasa terbesar dalam dotrin teologi Khatolik yang pernah ada.

Tak salah kalau dibilang, tak pernah ada orang yang menggarap system filosofi yang begitu lengkap dan begitu terperinci, serta sangat dipertimbangkan secara cermat seperti dilakukan oleh Thomas Aquinas. Tapi, sebagian besar tulisan-tulisan Aquinas berisi masalah abstrak dan metafisika yang awam yang tidak melihat makna praktisnya, dia mempermasalahkan soal-soal etika juga dan tidak mencerminkan perubahan besar dalam cita-cita etika atau dalam pandangan politik. Juga tampaknya tulisan-tulisan Aquinas ini tidak punya pengaruh banyak terhadap perilaku manusia atau terhadap jalannya arah sejarah.

Saturday, October 22, 2011

Yang Kabur Balik Lagi

Beberapa waktu sempat di blog ku terjadi sebuah masalah, yakni kotak komentar di halaman statisq sempat kabur, tapi sekarang alhamdullih sudah muncul kembali, walaupun kemaren sempat pusing n bingung banget n menguras tenaga mencari solusinya, hehhehehe...

Sebagian blog yang sudah lama dan gak heran dengan hal seperti ini mungkin menggangap hal ini biasa bagi blog, tapi bagi pendatang baru seperti saya ini, hehehehe khan bingung jika terjadi hal seperti ini, tapi di suatu hari jika terjadi hal seperti ini lagi saya gak bakalan pusing lagi.. :) biarkan saja blogspot memperbaharuin fitur'y n membuat blogspot semakin baik n makin bagus..

Friday, October 21, 2011

Rayuan Gombalan Si Andre OVJ

Pasti sobat gak asing lagi dengan aksi jurus rayuan gombalan Si Andre Taulani kepada bintang tamu OVJ yang cantik-cantik dalam acara Opera Van Java yang dibintangi oleh Eddy Supono (Parto), Andre Taulany (Andre), Entis Sutisna (Sule), Muhammad Azis (Aziz) dan juga Tri Retno Prayudati (Nunung). Jika Andre sudah mengeluarkan jurus jitu rayuan mautnya, maka kita bakalan ketawa, bahkan sebagian lagi ada yang langsung update status dengan gombalan si Andre.

Berikut beberapa rayuan andre pada acara OVJ

Andre: Bapak Kamu tukang servis AC ?
Bintang Tamu: Kok bisa tahu sih bang
Andre: Soalnya Eneng sudah menyejukan hatiku

Andre: eh eh, kerasa gak ada gempa barusan?
Bintang Tamu: nggak tuh…perasaanmu aja kali
Andre: oh, ternyata cuma hatiku saja yg bergetar kencang karena ada kamu

Andre : Neng, Bapak Neng pasti pemain bola kan?
Bintang Tamu : Ih, kok Abang tau sih Bang?
Andre : Soalnya Eneng telah mencetak gol di hati Abang

Andre: Kamu pasti suka gaya Briptu Norman ya ?
Bintang Tamu: Kok tau..?
Andre: Soalnya kamu udah men chaiyya-chaiyya kan hatiku

Andre : Neng, Suka main internet ya?
Bintang Tamu: Iya, kok tau?
Andre : Soalnya Neng udah men-download hatiku..

Andre : Neng tau gak perbedaan monas ama neng
Bintang Tamu : gak tau, apa perbedaannya
Andre : Klo monas punya negara, klo neng punya Ku.

Rayuan gombal lainnya

Cowe : “1 + 1 berapa Neng?”
Cew : “2 Bang..”
Cow : “2 + 2 =..”
Cew : “Ya 4 Abang..”
Cow : “Kalo cinta+cinta, sama dengan apa Neng..??”
Cew : “Hah, berapa ya..?!?”
Cow : “Cinta+cinta itu, sama dengan aku dan kamu..”

Cow : “Neng, Bapakmu orang Garut ya?”
Cew : “Emang kenape Bang?”
Cow : “Karena kamu telah mendodolkan hatiku..”

Cow : “Dik, Ibunya orang Padang ya?!?”
Cew : “Kok Abang tau Bang?”
Cow : “Soalnya senyummu telah me-rendang-kan hatiku”

Cow : “Neng, Bapak Neng tukang gali kuburan ya?”
Cew : “Kok gitu Bang?!”
Cow : “Soalnya Eneng udah mengubur kesedihan di hati Abang..”

Cow : “Neng, Bapak Neng pasti asli Jakarta kan?”
Cew : “ih kok Abang bisa tau sih?!”
Cow : “Soalnya Eneng telah memonaskan hatiku..”

Cow : “Eh Neng, ajarin Abang berenang ya”
Cew : “Emang kenapa Bang?
Cow : “Soalnya Abang tenggelam di hati Eneng nih!”

Cow : “Dek, Bapak kamu kamu pilot ya?”
Cew : “Iya Bang..”
Cow : “Soalnya kamu udah nerbangin hatiku”

Cow : “Di rumah kamu pasti punya banyak kaset Rhoma Irama ya?!?”
Cew : “Kok Abang tau sih??”
Cow : “Soalnya kamu telah mengadu dombakan hatiku..”

Cow : “Neng, punya nomor rekening nggak?”
Cew : “Ada Bang, emang buat apaan??”
Cow : “Buat transfer hatiku ke hatimu”

Thursday, October 20, 2011

Membuat Kotak Banner/Link-Ekschange

Kali ini saya juga bakal membahasa mengenai pertanyaan dari sala seorang sobat blogging mengenai cara membuat banner link. Sebagian orang mungkin ini hal yang mudah, tapi ada juga yang masih belum bisa menerapkannya di blog mereka.

OK, untuk mempersingkat waktu langsung aja menuju langkah-langkah yang harus dilakukan untuk membuat banner link. Bagi teman-teman yang masih belum mempunyai banner silahkan kenuju situs http://cooltext.com di sana menawarkan berbagai macam banner yang telah disediakan, sobat tinggal pilih banner yang sobat suka.

Selanjutnya akan muncul fomr untuk mensetting banner yang telah pilih tadi, sobat bisa mensetting textnya, warna text, warna background, ukuran, effect, dll. Jika sudah merasa cocok lalu klik tombol "Rander Logo", Tunggu sebentar sampai proses rendering selesai maka banner sobat akan langsung jadi, sobat bisa mengambilnya dengan mengklik link "Download Image". dan simpan banner sobat (biasanya file bannernya akan berupa file gif).

Setelah km mendapatkan bannernya maka langkah selanjutnya supaya bannernya bisa sobat pasang yaitu dengan menguyplaod file tadi ke webhosting. Sobat bisa menguplaodnya di http://www.photobucket.com/ atau di http://tinyurl.com/ disanan nanti sobat akan mendapat link untuk banner sobat. 

Selanjutnya mari kita bahas bagaimana cara membuatkotak banner link/link-ekschange

Kalo kita mau tukeran link biasanya ada kotak seperti ini :


Nha trus gimana cara buat kotak tersebut?
gini lho,
pertama Login ke blogger trus pilih Layout --> Page Elements
trus klik Add a Gadget lalup pilih HTML/Java Script
trus kopi kode berikut ini di tempat yang disediakan.

<textarea cols="45" rows="5"><a href="http://recha-seprina.blogspot.com" target="_blank"><img border="0" width="300" title="Catatan Si Virgo Girl" src="http://i1106.photobucket.com/albums/h371/ryecha1/Banner/205030_1324638412060_1713872237_543030_21162_n.gif" height="100"><a></textarea></div>

Ket :
Text yang berwarna hijau menunjukkan labar dan panjang kotak banner sobat, text warna biru adalah link sobat, ganti text tersebut dengan alamat blogmu sedangkan text orange adalah lebar dan tinggi banner sobat. dan yang berwarna merah merah adalah alamat/url gambar, ganti text tsb dengan alamat gambar sobat. Terakhir simpan di blog sobat.

Tuesday, October 18, 2011

Pendapatan Sampingan Dengan AdsenseCamp


Beberapa waktu yang lalu ada teman blogger yang menanyakan gimana sich.. caranya daftar di AdsenseCamp dan gmn cra nerapinnya ke blog, ok mari kita baha menganai AdsanseCamp

Pertama apa itu AdsenseCamp

AdsenseCamp adalah website Adsense Indonesia yang merupakan salah satu divisi usaha dari perusahaan CV JogjaCamp yang berada di Yogyakarta. AdsenseCamp menitikberatkan pada pelayanan dengan menempatkan 3 customer support yang melayani secara online (YM, email, sms, dan telpon) ataupun offline dengan datang langsung ke kantor kami.

AdsenseCamp merupakan website yang memberikan kesempatan bagi Anda untuk memperoleh penghasilan tambahan dengan menyediakan ruang pada website Anda sebagai tempat pemasangan iklan bagi advertiser.

AdsenseCamp juga memberikan kesempatan kepada para Advertiser yang berkeinginan mempromosikan iklannya yang bakal disebarkan kepada pemilik website yang memiliki jaringan di AdsenseCamp.

Ketentuan AdseseCamp yakni :

Tiap klik valid yang dihasilkan pada iklan AdsenseCamp di website kita, akan mendapatkan Rp 300 (tiga ratus rupiah) untuk iklan teks dan Rp 400 untuk iklan banner, dimana pembayaran akan ditransfer melalui rekening bank (BCA, Mandiri, BNI, dan PayPal) pada tiap bulan tiap tanggal 1-5 apabila saldo telah mencapai minimal Rp 10.000 atau sesuai dengan minimum transfer yang Anda tentukan pada member area. Jumlah iklan per halaman dalam satu blog yang dibolehkan maksimal adalah tiga buah.

Cara Pendaftaran

Tertarik untuk mencobanya? Silahkan klik banner di bawah ini untuk mendaftar ke AdsenseCamp.
Adsense Indonesia

Setelah ini sobat bakalan dibawa langsung masuk ke situsnya, klik tombol CREATE PUBLISHER ACCOUNT yang berada di kolom Web Owner.

Jika proses registrasi sukses, kita akan dikirimi email untuk konfirmasi dan mengaktifkan akun AdsenseCam.  kemudian bukalah email sobat dan temukan link yang dikirim oleh AdsenseCamp untuk  mengkonfirmasi tAnsenseCampsb, maka kita akan kembali ke situs AdsenseCamp dan mendapat pemberitahuan bahwa kita telah resmi menjadi member AdsenseCamp.

Cara untuk mendapatkan kode HTML skrip iklan yang akan dipasang di blog/web.

Silahkan login, kemudian pilih menu Publisher, kemudian klik link Pasang Script Iklan. Karena masih baru dan belum mempunyai channel iklan, maka kita akan diarahkan untuk membuat channel iklan terlebih dahulu baru kemudian masuk ke halaman Pasang script Iklan.


Isilah data-data yang diminta pada halaman Tambah Channel Iklan, setelah itu klik tombol SAVE.
Kemudian kembali klik menu Publisher kemudian pilih kemudian klik link Pasang Script Iklan.

Pilihlan tampilan iklan yang dinginkan dan klik tombol Pilih Tampilan Iklan Ini untuk mendapatkan Kode HTML Script Iklan-nya.
Kemudian copy code AdsenseCamp untuk blog/web sobat meduan pasang di web sobat.

Selanjutnya login ke Blogspot --> Tata Letak --> Elemen Halaman, lalu klik link Tambah Gadget ditempat dimana iklan ingin diletakan. Pilih  HTML/JavaScript, lalu paste kode html iklan dan klik tombol simpan dan selesai. Sekarang blog telah dipasangi iklan AdsenseCamp.

Selamat mencoba dan moga pendapatan blog/web sobat bisa bertambah dengan menempatkan AnsenseCamp.


Sunday, October 16, 2011

Kotak Komentar Halaman Statis Tiba-Tiba Menghilang

Baru-baru ini terdapat masalah di blogger, beberapa blog mengalami permasalahan menghilangnya kotak komentar di halaman statis, bahkan komentar yang sudah ada disana juga ikut2n menghilang, tapi tidak smua blog mengalami hal yag sama karena masih ada beberapa blog yang kotak kometarnya masih setia berada disana. Sebenarnya apa yang terjadi dengan blogger. Hal ini juga terjadi di blog saya dan ketika saya mencoba untuk membuat blog baru juga kotak komentarnya di halam statis tetap saja bersembunyi.

Ini terjadi kira2 pada rabu pagi saya melihat bahwa di semua halaman statis komentar yang ada lenyap, jika pengaturannya dipilih untuk izinkan pilihan halaman statis, maka posting tersebut kembali untuk tidak menampilkan komentar, bahkan jika mencoba pengaturan izinkan lagi dan lagi, maka pengaturannya bakalan kembali lagi untuk tidak menampilkan komentar. Hal ini mungkin akan menyebalkan bagi beberapa orang yang kotak komentarnya hilang di halaman statis.Segala cara sudah saya coba namun tidak ada perubahan apapun.

Dari beberapa sumber di help forum mengatakan blogger melakukan beberapa perubahan kode yang benar-benar membuat kita benar2 bingun, sepertinya blogger telah menghapus beberapa kode dari template dan tidak jelas alasannya mengapa blogger menghapusnya, bahkan belum tau sampai kapan blogger bisa mengatasi hal ini dan kenapa mengubah kode yang seharusnya tidak perlu di otak-atik lagi dan kode yang tidak punya masalah seperti ini. Mari kita tunggu aja kapan blogger bisa mengatasi hal seperti ini.

Saturday, October 15, 2011

Cara Membuat Link-Exchange Otomatis

Kemaren ada yang nanyain cara buat link exchane bisa langsung masuk secara otomatis, mari kita bahas di sini.


Cara Membuat Widget link Exchange Otomatis ini adalah dengan menggunakan aplikasi yang disediakan oleh pihak ketiga. Cara membuat widget link exchange otomatis ini sangat sederhana. widget ini akan membantu mempermudah kita untuk memasang dan mengkoordinir link - link yang akan kita masukan ke dalam blog. Sebagai contoh silahkan lihat widget link exchange otomatis disini.

Buat sahabat yang ingin mencoba Cara Membuat Widget link Exchange Otomatis seperti yang saya gunakan ini, caranya sebagai berikut.

1.      Silahkan lakukan registrasi terlebih dahulu di website penyedianya di Mister linky's lengkapi semua formulir yang disediakan, kemudian klik Register, selanjutnya sobat diminta untuk mengkonfirmasi pendaftaran sobat.
2.      Login ke akun e.mail sobat dan Copy kode konfirmasi yang dikirim oleh Mister linky's, selanjutnya masukan kode konfirmasi ke dalam menu konfirmasi. berikut screenshotnya.



 

3.      Setelah melakukan Konfirmasi, silahkan Login dengan menggunakan User ID dan Password yang sobat gunakan pada saat registrasi.
4.      Pada kotak dialog yang muncul selanjutnya, sobat bisa memilih menu Wizard untuk melakukan setting untuk widget link exchange.



5.     Pada Step 1. choose your server....Pilih jenis server yang sesuai dengan server yang sobat gunakan saat ini, misalnya Blogger, Wordpress dll...
  1. Pada step 2. choose your widget....silahkan pilih jenis widget Original Auto-Linkies karena kita adalah free member (ahah..gratisan nech..)
  2. Pada step. 3 generate code....silahkan sobat abaikan menu Select a Meme (optional) lanjutkan dengan mengklik Generate Code yang ada dibawahnya.
  3. Selanjutnya sobat akan dibawa pada sebuah kotak dialog yang berisi code script untuk widget link exchange otomatis ini.
  1. Copy paste kode script yang berada dalam kotak selanjutnya masuk kedalam Dashbor blog sobat, pilih Tata Letak, Tambah Gadget, HTML /java script, paste kode javascript didalamnya kemudian simpan.
  2. Agar widget ini berfungsi sobat perlu menambahkan sedikit kode kedalam blog sobat.
  3. Masuk ke Dashbor, Tata Letak, kemudian klik Edit html.
  4. Untuk berjaga - jaga silahkan back up terlebih dahulu template sobat (Download Template Lengkap)
  5. Selanjutnya cari kode <head> letakkan kode script berikut ini dibawah kode <head>
  6. <script type="text/javascript" src="http://www.blenza.com/linkies/header.js"> </script>
  7. Simpan template sobat dan lihatlah tampilan widget link exchange otomatis di blog sobat. Silahkan atur letak widget link exchange otomatis ini pada tempat  yang sobat kehendaki atau jika sobat ingin lebih leluasa buatlah sebuah posting untuk halaman Link Exchange selanjutnya sobat bisa masukan kode script widget link exchange otomatis ini didalamnya.
Selesai juga akhirnya...
Waktunya jalan - jalan keliling dunia maya, sobat tunggu kehadiran saya. Buat sobat yang  ingin memiliki widget link exchange otomatis silahkan ikuti Cara Membuat Widget link Exchange Otomatis .
Terimakasih, sukses buat kita semua!

Friday, October 14, 2011

Modifikasi Kotak Feed Burner/Email Subscribtion

Kadang kita merasa bosan dan ingin merubah kotak email subscribtion atau berlangganan artikel via email yang diberikan oleh feedburner. Bagi Sobat yang pusing karena tidak tau bagaimana cara untuk memodifikasinya, mari bergabung bersama saya untuk memodifikasinya bersama. Sebenarnya, untuk memodifikasinya sangat mudah. Hanya diperlukan kode-kode. Antara lain kode yang dibutuhkan adalah, kode untuk background, kode untuk tulisan, link dan lain-lain. Bagi yang sudah tidak sabar, mari kita langsung menuju ke tutorialnya saja,


Ini adalah tampilan kotak feedburner/email subscribtion/berlangganan artikel versi default.

Enter your email address:


Delivered by FeedBurner

Kode'y :

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qRnkW', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="blogspot/qRnkW" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

Note : 

1. Warna ungu (yang pertama) adalah alamat FEED Sobat.
2. Warna ungu (yang kedua) adalah nama uri/ID Sobat  
3. Warna merah (yang pertama) adalah kata pembuka  
4. Warna merah (yang kedua) adalah tulisan pada tombol  
5. Yang bergaris bawah adalah kata " Delivered by FeedBurner"

    Modifikasi versi biasa

    Berlangganan artikel secara gratis.Masukkan alamat email Anda, kemudian verifikasi pada kotak masuk email



    kodenya :

    <div style="border:1px solid #ccc;padding:3px;text-align:center;background:url(http://authentikartists.com/wp-content/uploads/2009/10/feedburner.png) no-repeat top right;padding:25px 0px">
    <p>Berlangganan artikel secara gratis.Masukkan alamat email Anda, kemudian verifikasi pada kotak masuk email</p>
    <p><form action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qRnkW', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <p><input name="email" onblur="if (this.value == '') {this.value = 'masukkan email';}" onfocus="if (this.value == 'masukkan email') {this.value = '';}" style="background: white; width: 300 px;" value="masukkan email" />
    <p><input type="submit" value="Berlangganan"/></p></form></p>
    </div>

    Note :
    •  Kode warna hijau adalah Url gambar. Sobat bisa ganti dengan Url gambar Sobat (Lihat Stok gambar saya di sini dan di sini) cara melihat url gambar ---> klik kanan pada gambar >> Copy image location/Copy image Url
    • Kode warna merah (yang pertama) adalah kata-kata pembuka, Sobat bisa menggantinya dengan kata-kataSobat sendiri.
    • Kode warna merah (yang kedua) adalah tulisan pada tombol. Sobat bisa menggantinya
    • 300 adalah lebar kotak untuk menuliskan Email.

    Modifikasi versi kedua



     Subscribe in a reader
    Atau Berlangganan gratis Via Email Di bawah ini


    Kodenya :

    <form action="http://feedburner.google.com/fb/a/mailverify" style="border:1px solid #ccc;padding:5px;text-align:left;background:#fff;color: #000000" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qRnkW'', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

    <div style="background:url(http://i622.photobucket.com/albums/tt309/kokobota/rss1.jpg)no-repeat top right;padding:10px 0px">


    <p><a href="http://feeds.feedburner.com/blogspot/qRnkW" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" alt="" style="vertical-align:middle;border:0"/></a>&nbsp;<a href="http://feeds.feedburner.com/blogspot/qRnkW" rel="alternate" type="application/rss+xml">Subscribe in a reader</a></p>
    <p>Atau Berlangganan gratis Via Email Di bawah ini</p>
    <p><input name="email" onblur="if (this.value == '') {this.value = 'masukkan email';}" onfocus="if (this.value == 'masukkan email') {this.value = '';}" style="background: white; width: panjang input px;" value="masukkan email" /><input value="Langganan" type="submit" /></p><p><p><a href="http://feeds.feedburner.com/blogspot/qRnkW"><img src="http://feeds.feedburner.com/~fc/blogspot/qRnkW?bg=99CCFF&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p>
    </p></div></form>

    Note :
    • Warna ungu (yang pertama) adalah alamat FEED Sobat. 
    • Warna ungu (yang kedua) adalah kode Chicklet Chooser
    • Kode warna hijau (yang pertama) adalah Url gambar. Sobat bisa ganti dengan Url gambar Sobat  cara melihat url gambar ---> klik kanan pada gambar >> Copy image location/Copy image Url
    • Kode warna hijau (yang kedua) adalah kode feed Count
    • Kode merah adalah kata-kata, ubah sesuai selera.
    • Yang bergaris bawah bisa Sobat ganti, antara lain
    • white = warna bacground kotak untuk menuliskan email
    • panjang input = panjang kotak untuk menuliskan email
    • langganan = tulisan pada tombol

    Tuesday, October 11, 2011

    Membuat Menu Dropdown CSS Bertingkat dengan Efek jQuery


    Udah lama gak update posting n kali ini CSVG akan membuat menu dropdown bertingkat dengan CSS yang kemudian diberikan sentuhan efek jQuery agar lebih indah. 

    Mari kita buat menu dropdown bertingkat (Multilevel Dropdown Menu)

    Langkah 1

    Struktur dasar dari menu dropdown yang akan kita buat menggunakan stuktur XHTML misalnya seperti dibawah ini:

    <ul id="nav">

        <li><a href="#">Beranda</a></li>

        <li><a href="#">Kontak</a></li>

        <li><a href="#">Arsip</a>

            <ul>

                <li><a href="#">jQuery</a>

                    <ul>

                        <li><a href="#">Download</a></li>

                        <li><a href="#">Tutorial</a></li>

                    </ul>

                </li>

                <li><a href="#">Bloghack</a></li>

                <li><a href="#">JavaScript</a></li>

            </ul>

        </li>

    </ul>

    Lihat hasil langkah 1 disini

    Langkah 2

    Setelah itu kita menggunakan kode CSS untuk memperbaiki penampilannya:

    #nav, #nav ul{

        margin:0;

        padding:0;

        list-style-type:none;

        list-style-position:outside;

        position:relative;

        line-height:1.5em;

    }
    Kode CSS diatas akan menghilangkan identasi pada browser dan membuang semua tanda bullet pada #nav dan semua elemen yang ada didalamnya. Kode "position:relative;" digunakan untuk menyusun ulang posisi menu yang akan ditempatkan secara relative dan absolute. Hal ini nantinya digunakan untuk menata menu-menu berikutnya yang akan disusun sesuai dengan isi blok serta atribut-atribut lainnya. Kode "line-height:1.5em;" digunakan untuk mendefinisikan tinggi setiap item menu. Kita dapat mengesetnya sesuai dengan tinggi yang kita inginkan, tetapi link teks akan berada pada posisi center secara vertikal hal ini makanya kita tidak memerlukan pengesetan margin dan padding pada kode CSS ini.
    Langkah 3

    Percantik menu dengan setting CSS lebih lanjut:

    /* keadaan menu normal, aktif dan pernah diakses */
    #nav a:link, #nav a:active, #nav a:visited {
       display:block; /* link menu di blok */
       padding:0px 5px; /* jarak atas bawah 0 dan kiri kanan 5 pixel */
       border:1px solid #333; /* ketebalan garis pinggir dan warna garis */
       color:#fff; /* warna teks */
       text-decoration:none; /* menghilangkan garis bawah pada link menu */
       background-color:#333; /* warna latar belakang menu */
    }
    /*  keadaan menu saat dipilih */
    #nav a:hover {
       background-color:#fff; /* warna latar belakang menu */
       color:#333; /* warna huruf */
    }
    Kode CSS diatas ini pelengkap dari kode CSS sebelumnya, hal ini untuk membedakan efek pada menu yang sedang dipilih (hover) dengan menu yang tidak dipilih. Pada saat keadaan menu normal, aktif, dan pernah diakses maka menu memiliki tampilan yang sama.
    Lihat hasil langkah 2 dan 3 disini.

    Langkah 4

    Menyempurnakan tampilan dengan kode CSS berikutnya:
    #nav li {
       float:left; /* menu ditempatkan pada sebelah kiri */
       position:relative; /* posisi relatif */
    }

    Kode CSS diatas akan membuat menu tersusun secara horisontal
    #nav ul {
       position:absolute; /* posisi absolute */
       width:12em; /* lebar menu */
       top:1.5em; /* jarak menu bagian atas */
       display:none; /* menu disembunyikan */
    }

    Kode CSS diatas digunakan untuk menyembunyikan menu berikutnya (menu utama tetap tampil). Lebar masing-masing menu ditetapkan 12em (width:12em;) hal ini agar menu memiliki ukuran tetap, jika kurang anda bisa set lebih lebar lagi. Jarak 1.5em (top:1.5em;) harus sama dengan jarak yang telah ditetapkan sebelumnya di kode CSS "line-height:1.5em;" pada #nav (lihat langkah 2)
    #nav li ul a {
       width:12em;
       float:left;
    }

    Kode CSS diatas digunakan untuk mengeset lebar link menu selebar 12em.
    #nav ul ul{
     top:auto;
    }
    #nav li ul ul {
       left:12em;
       margin:0px 0 0 10px;
    }
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
       display:none;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
       display:block;
    }#nav ul ul dan #nav li ul ul digunakan untuk memperbaiki penempatan menu. Hal ini sangat penting untuk memperbaiki posisi menu saat dipilih (hover) dan susunan tingkatnya.
    Sampai disini sebenarnya menu sudah bagus, silahkan lihat hasil langkah 4 disini. Tetapi menu belum memiliki efek yang lembut saat menu-menu ditampilkan.

    Langkah 5

    Sekarang mari kita kombinasikan menu-menu dropdown yang sudah kita buat dengan sentuhan efek jQuery, tambahkan kode dibawah ini:

    $(document).ready(function(){

    $(" #nav ul ").css({display: "none"});

    $(" #nav li").hover(function(){

    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);

    },function(){

    $(this).find('ul:first').css({visibility: "hidden"});

    });

    });
    Fungsi dari masing-masing script jQuery:

    $(" #nav ul ").css({display: "none"}); // Perbaikan di Opera
    Kode diatas merupakan perbaikan untuk Opera yang tidak mampu menyembunyikan menu dengan cepat. Pada saat kita menggeser mouse (hover) pada sub menu, maka menu akan memiliki efek berkedip (flicker). $(" #nav ul ") script jQuery digunakan untuk memilih semua daftar yang tidak berurutan (unordered lists - ul) didalam #nav dan kemudian mengesetnya menjadi tidak ditampilkan (display:none).

    $(" #nav li").hover(function(){ //memberikan efek saat menu dipilih (hover)

    },function(){ //memberikan efek saat pointer mouse meninggalkan menu

    });
    Kode diatas untuk memberikan efek pada menu sesuai dengan posisi pointer mouse (hovering). Sederhananya memberikan efek pada saat menu dipilih dan tidak dipilih.
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);

    Kode ini berfungsi untuk menampilkan sub menu pertama yang tersembunyi dari menu yang sedang dipilih. Sedangkan script .show digunakan untuk menampilkan menu dengan durasi waktu yang ditentukan didalam kurung (400). Hal ini akan memberikan efek menampilkan menu yang sangat lembut.
    $(this).find('ul:first').css({visibility: "hidden"});

    Kode ini berfungsi mengembalikan posisi menu kembali tersembunyi melalui blok mode pada akhir animasinya. Menggunakan kode visibility untuk mencegah berkedip (flicker) pada animasi menu.

    Alhamdulillah langkah demi langkah telah selesai, silahkan lihat hasil akhirnya disini. Dan kembangkanlah menu ini semenarik dan seindah mungkin menurut keinginan anda.

     

    My Followers

    Page Like

    Copyright© 2011 Catatan Si Virgo Girl | Template Blogger Designer by : Utta' |