Memasang Widget Tulisan Sedang di Ketik di Blog

Hi sahabat blogger, tutorial kali ni saya akan berbagi ilmu kepada sahabat blogger tentang Memasang Widget Tulisan Sedang Diketik di Blog silahkan ikuti langkah-langkah nya :
1. Login ke blogger
2. Masuk ke menu Layout
3. Klik Add a Gadget
4. Lalu pilih HTML/Javascript
5. Masukkan script di bawah ini

<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>

6. Lalu copykan kode Javascript di bawah ini dibawah kode css diatas
Javascript Ini Penting Untuk Membuat Efek Ketikan Teks Atau Apa Namanya

<script language="javascript">
var newsText = new Array();
newsText[0] = "Welcome to Cheats Soul !";
newsText[1] = "Please Follow me !";
newsText[2] = "Please Leave Your Comment";
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>

Keterangan
Ganti Teks Yang Bewarna Biru Dengan Teks yang Akan Sobat Tampilkan


7. Selanjutnya copykan kode HTML di bawah ini dibawah kode Javascript diatas
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: #38CC22; border-color: #3232FF;" wrap="virtual"></textarea></div>
</form>
</div>

8. Lihat hasilnya

Sobat juga bisa meletakkan widget ini pada post blog sobat seperti dibawah ini

DEMO