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



21 Orang Yang Cerewet:

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

PERTAMAX! Sahabat Blogger! Ganti link sama name saya donk

link http://dodezone.blogspot.com
nama DodeZone

^_^

WahyuGetOne Blog mengatakan...

pertamax..

WahyuGetOne Blog mengatakan...

asem keduax....

Uda Cucanto mengatakan...

@Dode : ok"

Uda Cucanto mengatakan...

@wahyu: kasian deh lo!!!

biologi mengatakan...

Mantap widgetnya

WahyuGetOne Blog mengatakan...

keren gan,, btw bisa jadi blockquote gk...?

Arndi mengatakan...

mantaf Gan.... ijin Coba

Share Our Knowledge mengatakan...

mantab gan, bsog ane coba nih. :D

Uda Cucanto mengatakan...

@biologi : pastilah! :D

Uda Cucanto mengatakan...

@wahyu : bisa kalau mau ngedit dulu!

Uda Cucanto mengatakan...

@Arndi : ok"

azdha blog mengatakan...

bagus banget sob. ini dia yang aku tunggu-tunggu

Uda Cucanto mengatakan...

@azdha : silhkan dicoba!

Torayasurabaya mengatakan...

Ini yang saya tunggu...

Ridzahul Khairin mengatakan...

wahhhh keren nihh sob,,, ijin coba yaa

Uda Cucanto mengatakan...

@tora : ok"

Uda Cucanto mengatakan...

@Ridzahul : yap!

bhotol™ mengatakan...

mantap .... ntar ane coba :)

Uda Cucanto mengatakan...

@bhotol : silahkan!

Ridhwan mengatakan...

keren sooobbbb

Posting Komentar