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