Widget Modifikasi

Setelah Posting Sebelumnya Yaitu Widget Dengan CSS Saya Ingin Membuktikan Bahwa Saya Dapat Membuat Widget Sendiri Walau Baru Tahap Modifikasi.

Dan Hasilnya Adalah Widget Seperti Di Atas

Apakah Anda Tertarik Dengan Widget Saya?

Jika Tertarik Maka Anda Harus Ikuti Tutorial Di Bawah!


Langkah 1

Struktur CSSnya

<style type="text/css">
.site-tip, .site-balloon {
    -moz-border-radius: 10px 10px 10px 10px;
    border: 2px solid #000000;
    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: #3232FF;
    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 #000000;
    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: #3232FF;
    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;
}
</style>

Paste Di HTML/Javascript

Langkah 2

Javascript Ini Penting Untuk Membuat Efek Ketikan Teks Atau Apa Namanya

<script language="javascript">
var newsText = new Array();
newsText[0] = "Widget Baru Dari TeDuWeb";
newsText[1] = "Hasil Modifikasi";
newsText[2] = "Silahkan Dicoba!";
var ttloop = 1;
var tspeed = 70;
var tdelay = 1000;
var dwAText, cnews=0, eline=0, cchar=0, mxText;
function doNews() {
mxText = newsText.length - 1;
dwAText = newsText[cnews];
setTimeout("addChar()",1000)
}
function addNews() {
cnews += 1;
if (cnews <= mxText) {
dwAText = newsText[cnews];
if (dwAText.length != 0) {
document.news.news2.value = "";
eline = 0;
setTimeout("addChar()",tspeed)
}
}
}
function addChar() {
if (eline!=1) {
if (cchar != dwAText.length) {
nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
document.news.news2.value = nmttxt;
cchar += 1;
if (cchar != dwAText.length) document.news.news2.value += "|_";
} else {
cchar = 0;
eline = 1;
}
if (mxText==cnews && eline!=0 && ttloop!=0) {
cnews = 0; setTimeout("addNews()",tdelay);
} else setTimeout("addChar()",tspeed);
} else {
setTimeout("addNews()",tdelay)
}
}
doNews()
</script>

Paste Di HTML.Javascript Yang Tadi

Langkah 3

Kalau Tidak Ada HTMLnya Pasti Tidak Akan Berfungsi Kan?

<div class="site-balloon" id="site-nonfx" style="display: block;">
<form name="news">
<div align="center">
<textarea cols="55" name="news2" readonly="readonly" rows="1" style="background-color: #3232ff; border-color: #3232FF;" wrap="virtual"></textarea></div>
</form>
</div>

Paste Juga Di HTML/Javascript Tadi

Selesai
Keterangan :
Ganti Teks Yang Bewarna Merah Sesuai Dengan Teks Yang Ingin Ditampilkan