Wednesday, November 17, 2010

Custom Tabs Koneksi ke Facebook, Twitter & Yahoo!

Terinspirasi dari whos.amung.us versi JavaScript...
  • betuknya tab
  • letaknya di sisi halaman
  • rotasi 90° (searah jarum jam/kebalikannya)
  • muncul apabila ditunjuk kursor (hover)






Caranya:
Pertama salin [copy] HTML seperti berikut ini... Kemudian tempel [paste] ke Sidebar


Edit Sidebar
<div id="service"><a href="ymsgr:sendIM?juriglagu"><img title="juriglagu@yahoo.com" src="http://multiply.com/mu/juriglagu/image/2/photos/2507/500x500/8/Yahoo2.png?et=PhXuoxET15EHwiXmtSN38A&nmid=385893422" border="0"></a><br>

<a href="http://twitter.com/#!/juriglagu" target="_blank"><img title="@juriglagu" src="http://multiply.com/mu/juriglagu/image/1/photos/2507/500x500/7/twitter.png?et=lQCKs7,758cUT,aXCKrq3w&amp;nmid=385893422" border="0"></a><br>
<a href="http://www.facebook.com/juriglagu" target="_blank"><img title="http://www.facebook.com/juriglagu" src="http://multiply.com/mu/juriglagu/image/1/photos/2507/500x500/6/facebook.png?et=XOkbTSWyBg40heAPIxnNjA&amp;nmid=385893422" border="0"></a></div>


*Ganti tulisan juriglagu (warna kuning) dengan UserID/tautan [links] akun Anda

Klik

Beralih ke Custom CSS, tambahkan CSS seperti berikut...


Enter Custom CSS here
#service {
position: fixed;
bottom: 30px;
left: -10px;
}
#service a:hover {
position: relative;
left: 10px;
}


Keterangan:
Supaya ada efek timbul-tenggelam, sisipkan nilai negatif di script 1, dan positif di script 2 (hover)

Hasilnya: seperti @ My Site sekarang...

 

Selamat berkreasi!

Posisi dan image(s), boleh diatur terserah Anda ^_^
Posted by at
Labels: , , , , , , ,

66 comments:

  1. Michael JacksonNovember 17, 2010 at 5:24 PM

    wis mantep.. pertamax

    ReplyDelete
  2. Michael JacksonNovember 17, 2010 at 5:30 PM

    ko aku g muncul yahoonya yak?
    btw TFS

    ReplyDelete
  3. Ｙａｄｉ ＹｕｗａｎｄｉNovember 17, 2010 at 5:34 PM

    Image-nya error... kalo di-edit (kedua kali dst) suka gitu ^_^

    ReplyDelete
  4. Michael JacksonNovember 17, 2010 at 5:35 PM

    jyah.. tadi ane abis delete image yang lama... hehehe

    ReplyDelete
  5. Ｙａｄｉ ＹｕｗａｎｄｉNovember 17, 2010 at 5:42 PM

    Udah reupload, coba yang ini...
    http://multiply.com/mu/juriglagu/image/2/photos/2507/1200x120/8/Yahoo2.png?et=LQ0y2SFu9FRPiGGGRZbmmg&nmid=385893422

    ReplyDelete
  6. Evrin 'tjappLien'November 17, 2010 at 6:32 PM

    mantab...

    ReplyDelete
  7. Lilok Dangdut-KoploNovember 17, 2010 at 6:42 PM

    Seep.
    Musik asli Indonesia | Belajar & Berbagi

    ReplyDelete
  8. ハル -November 17, 2010 at 7:38 PM

    mantap.... lain kali pake ah, tfs!

    ReplyDelete
  9. Ｙａｄｉ ＹｕｗａｎｄｉNovember 17, 2010 at 7:41 PM

    You're welcome...

    Eh Fit... gantiin group's theme donk!
    peremajaan kulit, sedikit sentuhan dari seorang gadis... XDD

    ReplyDelete
  10. Lilok Dangdut-KoploNovember 17, 2010 at 9:43 PM

    Saya berkesan dengan ini "sentuhan seorang gadis" ... :)
    Saya juga setuju dengan peremajaan itu, usahakan CSS-nya ringkes, kurangi load graphic kecuali repeat dan hires tentunya ... *pesannya banyak banget ya*
    Musik asli Indonesia | Belajar & Berbagi

    ReplyDelete
  11. Ｙａｄｉ ＹｕｗａｎｄｉNovember 17, 2010 at 9:52 PM

    Aksesoris dari DK di-backup dulu Mas!

    ReplyDelete
  12. Lilok Dangdut-KoploNovember 18, 2010 at 12:14 AM

    Semua image file untuk group ini berada pada Photo Album, CSS dan HTML sudah diamankan di sana juga.
    Sekarang tinggal tunggu Fitri mengerjakan PR nya :)
    Musik asli Indonesia | Belajar & Berbagi

    ReplyDelete
  13. ハル -November 18, 2010 at 12:52 PM

    wah... dapet PR ya. eheheh
    peremajaan ya, dibikin agak cerah aja deh :p
    oh ya, kalo CSSnya ga ringkas kenapa emangnya Om?

    (dan agak lama dikit ga apa2 kan?)

    ReplyDelete
  14. Lilok Dangdut-KoploNovember 18, 2010 at 5:11 PM

    CSS itu Cascading Style Sheet (dah tau semua kalee) ... jika dibahasa-sederhanakan menjadi lembar style yang dibaca dari atas ke bawah.
    Dimana urutan terakhirlah yang pegang kendali. Dan apabila tidak ditentukan, berarti object tsb mendapat "warisan" dari setting terdahulu.
    CSS yang tidak ringkas ... akan memakan bandwidth, memakan resource ... mengakibatkan page lambat ditampilkan.

    Ringkas dalam hal ini adalah ... sesuai kebutuhan dan pemberian value hanya pada selector yang memang di-set beda.
    Contoh, tidak ada manfaatnya apabila pada table, font-size di set ke 12px ... karena dari awal MP dah men-declare font-size: 12px;
    Kira-2 begitu ... yang penting kerjakan dulu aja, pada saat awal tidak harus perfect ... temukan bentuknya dulu dan penambahan bisa dilakukan kemudian.

    Dibuat agak cerah ? ... setuju Fit.
    Musik asli Indonesia | Belajar & Berbagi

    ReplyDelete
  15. yentri ummihanaNovember 19, 2010 at 7:10 AM

    waduh gimana iniiii?? saya coba dikit2 aja dah, kalo belum punya twitter kumaha, bisa diilangin? tq.

    ReplyDelete
  16. Ｙａｄｉ ＹｕｗａｎｄｉNovember 19, 2010 at 7:13 AM

    Bisa atuh... silahkan kreasi sendiri

    ReplyDelete
  17. gea harovansiNovember 28, 2010 at 12:54 PM

    makasih...............mas, keren

    ReplyDelete
  18. Ｙａｄｉ ＹｕｗａｎｄｉNovember 28, 2010 at 12:55 PM

    Kembali kasih

    ReplyDelete
  19. ❀mochi❀ ^^vDecember 6, 2010 at 10:23 PM

    sidebar itu yang dimana ya mas? tq

    ReplyDelete
  20. Ｙａｄｉ ＹｕｗａｎｄｉDecember 7, 2010 at 4:34 AM

    Rail di bawah headshot
    javascript:create_and_show_right_rail_form();

    ReplyDelete
  21. μha ®December 7, 2010 at 2:14 PM

    kang sidebar eta naon nya?? bingung saya mah..*garuk2*

    ReplyDelete
  22. μha ®December 7, 2010 at 4:36 PM

    huwiiiik....baru yah...itu yg di rail kah????
    tingkyu Kang....

    ReplyDelete
  23. Ｙａｄｉ ＹｕｗａｎｄｉDecember 7, 2010 at 4:46 PM

    Iya rail... untuk free account udah setahun lebih, sejak 6 November 2009 :p

    ReplyDelete
  24. Lilok Dangdut-KoploDecember 7, 2010 at 8:54 PM

    Lah ... kan udah pasang di sana ID=custom_rail_html ... hehehe
    Sebutannya aja lain.

    ReplyDelete
  25. μha ®December 7, 2010 at 8:59 PM

    hoalaahh..iyes..iyes..baru ingat...
    gak nyadar kalo bagian itu dinamain "edit sidebar" :))

    ReplyDelete
  26. μha ®December 7, 2010 at 8:59 PM

    iyes mas..baru tau kalo itu sebutannya sidebar :))

    ReplyDelete
  27. Rangga & AiniDecember 22, 2010 at 9:54 AM

    mas kok yahoo mailnya ga mau ke buka ya? mohon pencerahan, thank u

    ReplyDelete
  28. Ｙａｄｉ ＹｕｗａｎｄｉDecember 22, 2010 at 9:56 AM

    Integrasi/setting-an di browsernya

    ReplyDelete
  29. Rangga & AiniDecember 22, 2010 at 10:52 AM

    masih newbie mas...tadi udah tampil, tp ga nge-link (yahoo mail ku ga kebuka) jadi dihapus aja deh! salh dimananya ya?

    ReplyDelete
  30. Ｙａｄｉ ＹｕｗａｎｄｉDecember 22, 2010 at 10:54 AM

    Pake Mozilla Firefox?
    coba lihat di Internet Explorer atau yang lain dulu...

    ReplyDelete
  31. Rangga & AiniDecember 22, 2010 at 11:41 AM

    oic..aku pake mozilla, ok thank u

    ReplyDelete
  32. Ｙａｄｉ ＹｕｗａｎｄｉDecember 22, 2010 at 11:45 AM

    Entahlah kenapa kadang Firefox suka gak konek gitu...
    belum tau pasti settingannya yang mana

    ReplyDelete
  33. Mahardika GamaDecember 31, 2010 at 5:58 PM

    nuhun akang-akang ^^

    ReplyDelete
  34. Friewan WalkerJanuary 7, 2011 at 4:36 PM

    tengkyu...

    selamat ya buat admin baru ^^

    ReplyDelete
  35. Suchi RamdaniJanuary 21, 2011 at 9:12 PM

    udah nyoba dan berhasil :D
    thanks so much....^^

    ReplyDelete
  36. Saptanu YuniarFebruary 6, 2011 at 8:00 AM

    makasih trick nya..

    ReplyDelete
  37. Hello! CatandogFebruary 13, 2011 at 1:57 PM

    maaf newbie, sidebar itu adanya dimana ya?

    ReplyDelete
  38. *Mega Fajarwati*February 17, 2011 at 8:58 PM

    mantaaapppppppppp :D

    ReplyDelete
  39. Dwiuwi SeptianaMarch 4, 2011 at 9:48 AM

    kok ini aneh ya site ku jadinya mas? bantuin dong hehe

    ReplyDelete
  40. muhamad afandiMarch 7, 2011 at 12:07 PM

    kalo posisinya mau dipindahin ke kanan bisa gak mas??

    ReplyDelete
  41. muhamad afandiMarch 7, 2011 at 12:15 PM

    kok gak bisa ya mas?? gak ada efek hovernya?? gimana iniiii??

    ReplyDelete
  42. Dwiuwi SeptianaMarch 8, 2011 at 4:21 AM

    kok aku jadinya di kiri bawah ya mas? hmm bantuin mas... hehe salah apa tu ya? hehe

    ReplyDelete
  43. Irfan OstmanMarch 8, 2011 at 2:36 PM

    nyobain ya kang nuhun

    ReplyDelete
  44. muhamad afandiMarch 10, 2011 at 4:38 PM

    yeeeyyy akhirnya bisaaaa hehehhe

    ReplyDelete
  45. muhamad afandiMarch 10, 2011 at 4:48 PM

    saya juga awalnya gitu hehehe. Kemudian saya tanya sama mas juriglagu, katanya mungkin gak cocok sama temanya. Jadi saya backup dulu semua CSS nya, kemudian saya Hapus. Setelah itu saya coba lagi masukkan CSS, tetapi yang saya masukkan bukan CSS yang di backup tadi, melainkan CSS yang untuk ini, saya preview, ternyata berhasil!! jadi langsung saya save. Baru setelah itu saya masukkan CSS yang sudah saya backup tadi.

    hasilnya bisa dilihat di SINI

    ReplyDelete
  46. Dwiuwi SeptianaMarch 11, 2011 at 6:08 AM

    wah iya bener yah... hm aku jg sempet mikir begitu... hmm lets try! hehe

    makasih ya..

    ReplyDelete
  47. Dwiuwi SeptianaMarch 11, 2011 at 6:13 AM

    eh jadi kau ganti tema ya? hmm

    ReplyDelete
  48. ★ Ingga Krishnaputri ★April 23, 2011 at 8:37 AM

    Thanks.. Yuhuuu berhasil! ^o^

    ReplyDelete
  49. Nurun SetiawanJune 10, 2011 at 3:25 PM

    berhasil berhasil, terima kasih ya ilmunya

    ReplyDelete
  50. Dina n Angga CraftJune 11, 2011 at 7:28 AM

    makasih bgt ya..... berguna bgt ni ^^

    ReplyDelete
  51. RIRIN DUMAYANIJune 11, 2011 at 10:37 AM

    ^^ sangat kreatiF. Dumarin.co.tv sangat bangga!! ♪♫•*¨*•.¸¸❤¸¸.•*¨*•♫♪

    Kalian akan menyesaL kalau gabung ( xixixi, maksudnya menyesaL " karena tidak dari dahulu kala bergabung )

    ReplyDelete
  52. imroni ,June 11, 2011 at 12:48 PM

    thankz brow... :)

    ReplyDelete
  53. nina marfuahJune 14, 2011 at 5:45 AM

    aq dah coba kok ga bisa ya?????hiks hiks hiks

    ReplyDelete
  54. Monkey bunnyJuly 13, 2011 at 4:14 PM

    Great tips^^ !! :)

    ReplyDelete
  55. Arfan .July 18, 2011 at 4:58 PM

    Nuhun tipsnya..
    Manfaat!

    ReplyDelete
  56. Linda ShabrinaSeptember 22, 2011 at 12:41 PM

    Kalo sidebarku pas mau pakek javascript, suka ada tulisan "anda tidak menggunakan javascript" *versi inggris tulisanna. Kumaha eta?

    ReplyDelete
  57. Ｙａｄｉ ＹｕｗａｎｄｉSeptember 22, 2011 at 12:44 PM

    Emang hukumnya haram, yang bisa cuma HTML hungkul

    ReplyDelete
  58. Linda ShabrinaSeptember 22, 2011 at 12:52 PM

    pami ieu ditamihan di mana?

    Keterangan:
    Supaya ada efek timbul-tenggelam, sisipkan nilai negatif di script 1, dan positif di script 2 (hover)
    *teu acan ngartos

    ReplyDelete
  59. Ｙａｄｉ ＹｕｗａｎｄｉSeptember 22, 2011 at 12:55 PM

    Script maksudnya kode yang ditandai warna
    masukin kodenya ke CSS (http://multiply.com/setup/pages/upload-css)

    ReplyDelete
  60. Linda ShabrinaSeptember 22, 2011 at 1:09 PM

    Yipiii! berhasil hore! hore! hatur nuhun inpona \(^,^)/

    ReplyDelete
  61. nabil ghazwanieJanuary 17, 2012 at 1:07 PM

    udah saya copas kode css (script) ke css
    tapi pas saya coba preview kok badge fb,twitt,ama ym-nya nongol di sebelah kiri bawah
    trus theme saya kembali ke theme saya sebelum saya pake sekarang (shadow box)? penampakannya seperti ini
    apa emang seperti itu?

    ReplyDelete
  62. Azuya KatsuhiroApril 1, 2012 at 10:23 AM

    setengah mati nginget apaaa ya site tempat trick modify MP, akhirnya nemu juga! terimakasih mas juriglagu ^^

    ReplyDelete
  63. *Aya* BFF *Anni* ♥ 김효연June 25, 2012 at 10:37 PM

    kalau BT-nya Dance With Me, naruh kode css-nya dimana?

    ReplyDelete
  64. Ｙａｄｉ ＹｕｗａｎｄｉJune 25, 2012 at 10:42 PM

    Naruh (CSS) mah mau di awal, di tengah, di akhir sama saja

    ReplyDelete
  65. *Aya* BFF *Anni* ♥ 김효연June 25, 2012 at 10:44 PM

    terpaksa jadi-nya biasa

    ReplyDelete
  66. *Aya* BFF *Anni* ♥ 김효연June 25, 2012 at 10:46 PM

    tapi kok malah 'mengambang' pas tadi kucoba? bukannya di sidebar, tapi ngambang.... gimana?

    ReplyDelete

Subscribe to: Post Comments (Atom)