Widget Dengan CSS


Dapatkah Anda Membuat Seperti Ini? Saya Tidak Dapat Membuatnya! Saya Hanya Mencurinya Dari Firefox.com

Dapatkah Anda Membuat Widget Seperti Di Atas?

Apakah Anda Ingin Widget Seperti Di Atas?

Jika Tidak Bisa & Ingin Membuatnya Mari Kita Ikuti Tutorial Di Bawah Ini !

Langkah 1

Copy CSS Dibawah

.site-tip, .site-balloon {
    -moz-border-radius: 10px 10px 10px 10px;
    border: 2px solid #E3873B;
    display: none;
    font: 14px/16px Arial,sans-serif;
    margin-top: 22px;
    position: relative;
}
.site-tip h3, .site-balloon h3, .site-tip p, .site-balloon p {
    display: inline;
}
.site-tip p a, .site-balloon p a {
    font-weight: bold;
}
.site-tip {
    background-color: rgba(255, 255, 255, 0.5);
    border-color: #C9DDF2;
    color: #666666;
    padding: 10px 45px 10px 15px;
}
.site-balloon {
    background-color: #FCEFB7;
    color: #333333;
    padding: 15px 45px 15px 15px;
}
.site-balloon h3, .site-balloon strong {
    font-weight: bold;
}
.site-balloon:before, .site-balloon:after {
    border-left: 18px solid #E3873B;
    border-top: 18px solid transparent;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    width: 0;
}
.site-balloon:before {
    left: 34px;
    top: -18px;
}
.site-balloon:after {
    border-left-color: #FCEFB7;
    left: 36px;
    top: -13px;
}
.site-balloon p a {
    color: #C40000;
}
#site-notice {
    display: block;
}
.site-balloon .site-tip . {
    -moz-border-radius: 4px 4px 4px 4px;
    cursor: pointer;
    height: 25px;
    margin: 0;
    overflow: hidden;
    position: absolute;
    right: 1em;
    text-indent: -1000em;
    top: 1em;
    width: 25px;
}
.site-balloon  .site-tip  {
    background-color: #C40000;
    background-position: -25px 0;
}
.site-balloon .site-tip  {
    bottom: 0;
    margin: auto;
    top: 0;
}
.site-balloon,  .site-tip {
    padding: 15px 15px 15px 45px;
}

Paste Di Atas Kode ]]></b:skin>
Langkah 2

Copy HTMLnya Di Bawah Ini

<div class="site-balloon" id="site-nonfx" style="display: block;">
Ganti Tulisan Ini Dengan Widget/Kode" Yang gak PEnting <a href="http://tentangduniadanweb.blogspot.com/">Firefox.com</a></div>

Paste Di HTML/Javascript

Selesai

30 Orang Yang Cerewet:

Share Our Knowledge mengatakan...

PERTAMAX gann.. hehe.
sukses slalu jadi pencurinya... :D

Mbah Qopet mengatakan...

pertamaX

Wahyu Silenticlever mengatakan...

keduaxx...

Uda Cucanto mengatakan...

@share : Bener" Pertmaxx!! :D

Uda Cucanto mengatakan...

@Mbah Qoepet : Belum PErtamaxx gan!! :D

Uda Cucanto mengatakan...

@Wahyu : anda Ketigaxx!! :D

Mbah Qopet mengatakan...

asem keduaX , kebetulan nih lagi cari CSS yang kaya gini thanks sobat...

Harun Hasibuan mengatakan...

Wahhh...........makin manteb aja neh widget2 nya.........coba ah..........
:)

Uda Cucanto mengatakan...

@mbah qoepet : Silahkan!

Wajib dicoba!! :D

Uda Cucanto mengatakan...

@it : harus itu! :D

Farixsantips mengatakan...

mantap widget barunya :D

Dayz mengatakan...

wihh,,, keren neh sob :D

Wirang geni mengatakan...

Manteb,Sob... :D
kapan2 di coba ah...!

DodeZone - Portal Berita Terhangat dan Terunik! mengatakan...

wes kapan-kapan saya coba!

Shinobi Caemk mengatakan...

boleh juga nih dicoba ...
kayaknya keren nih .... :)

system mengatakan...

boleh juga nih

Uda Cucanto mengatakan...

@Farixsantips : Harus Dicoba LHo!!!!

Uda Cucanto mengatakan...

@Dayz : ya! thx! :D

Uda Cucanto mengatakan...

@Aku mau gratisan : Coba Sekarang Aja! :D

Uda Cucanto mengatakan...

@Dode :Sekarang aja sob!! :D

Uda Cucanto mengatakan...

@Shinobi Caemk : memank keren! :P :D

Uda Cucanto mengatakan...

@system : yap! :P

Unknown mengatakan...

maksudnya ganti tulisan ini dengan kode-kode atau widget yang tidak penting itu apa?

Bayu mengatakan...

wehhh, ,, keren neh . .
sudah izin belom yak ke yang punya?? :P :D :D

tapi keren beneran sob :)

Uda Cucanto mengatakan...

@trisna : au ah gelap!

Uda Cucanto mengatakan...

@bayu : ok"

Stay Cool Tour mengatakan...

Menurut saya sama aja,, wkwk

enaxan html lg,, wk kcuali WP,
follow kemari ya,, blog baru

dedy mengatakan...

aku g bisa, ajari dong.. hehehehe

Mr.Randy mengatakan...

wkwkw hbat uy bisa curi wwwkwk

Coporation mengatakan...

budayakan maling :D

Posting Komentar