Widget parse html

Selamat datang sobat,  kali ini saya menjelaskan cara membuat widget parse html. bagi yang belum tahu parse html akan saya beritahu. beberapa karakter yang kita ketik punya notasi jika dilihat HTML-nya. seperti ini :

< notasinya &lt;
> notasinya &gt;
& notasinya &amp;
' notasinya &#039;
" notasinya &quot;
spasi notasinya &nbsp;

Karena itulah widget Parse HTML diperlukan. Berikut langkah caranya
1. Login akun blog anda
2. Klik tata letak
3. Klik tambahkan gadget
4. Pilih HTML/Javascript
5. Lalu copy paste script dibawah ini

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&amp;up_grows=10&amp;up_conv1=1&amp;up_conv2=1&amp;up_conv3=1&amp;up_conv4=1&amp;up_conv5=1&amp;synd=open&amp;w=315&amp;h=200&amp;title=Post-Code%3A+code+converter&amp;border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&amp;output=js"> </script>

3 jenis textarea

Selamat datang sobat! Kali ini saya akan menjelaskan beberapa jenis textarea. Berikut adalah tutorial jenis-jenis textarea

Textarea Biasa
Textarea ini sangat sederhana

<textarea style="width: 200px; height: 100px;" readonly="readonly">TULISAN ANDA</textarea>

Hasilnya :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis.

Keterangan :
- Ganti tulisan anda dengan tulisan yang anda butuhkan

Textarea dengan tombol select all
Semua tulisan dalam textarea ini akan terblok jika tombol "select all" diklik

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 200px; HEIGHT: 90px" name="txt" rows="100" wrap="VIRTUAL" cols="55">TULISAN ANDA</textarea></p></div></form>

Hasilnya :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis

Keterangan :

- Ganti tulisan anda dengan tulisan yang anda butuhkan

Textarea otomatis

Hanya dengan meletakan kursor anda di text area, otomatis terblok semua

<textarea onmouseover="this.select()" style="width: 200px; height: 100px;" readonly="readonly">TULISAN ANDA</textarea>

Hasilnya :

Silahkan letakan kursor anda disini - Please put your mouse in here

Keterangan :

- Ganti TULISAN ANDA dengan tulisan yang anda butuhkan

Situs penyedia template blog gratis

Bagi anda yang sudah bosan memakai template blog yang disediakan oleh blogger, anda hanya mengganti template blog anda dengan template yang sudah disediakan situs ini.

1. Blogger Themes

2. Blogger Templates Blog

3. Blogger Styles

4. BTemplates

5. Theme Craft

6. Hook Up Your Blog

7. Deluxe Templates

8. Blogger Templates Free

9. Blogger Blog Templates

10. Blog Crowds

11. Zoom Template

12. Blog Template 4 U

13. Chica Blogger

14. Blogger-Templates

15. All Blogspot Templates

Widget Jadwal imsyak

Marhaban yaaa Ramadhan
Semua umat muslim telah memasuki bulan yang penuh suci dan barokah. Yaitu bulan Ramadhan. Dimana semua umat muslim berkewajiban untuk menunaikan ibadah puasa. Yaitu menjaga hawa nafsu dan emosi. Tentu jadwal imsyak memang suka berubah-berubah waktunya. Karena itulah saya memberikan widget jadwal imsyak. Saya mengambilnya dari http://pkpu.or.id/imsyak

1. Login akun blog anda
2. Klik tata letak
3. Klik tambahkan gadget
4. Pilih HTML/Javascript
5. Lalu copy paste script dibawah ini

<iframe src="http://www.pkpu.or.id/imsyak/" width="600" height="350"></iframe>

Anda bisa melihat secara langsung jadwal imsyak disini

Widget search blog

Mencari entri yang diperlukan visitor di arsip blog dan widget daftar isi merupakan cara yang lama untuk blog yang sudah banyak entrinya. Untuk mencegah masalah tersebut, harus diperlukan sebuah widget yang dapat mencari entri blog secara cepat terutama untuk blog yang sudah banyak entrinya. seperti pada gambar diatas, widget ini cukup sederhana sehingga tidak membebani loading blog anda. Kali ini saya akan memberikan tutorial cara membuat widget search blog.

1. Login akun blog anda
2. Klik tata letak
3. Klik tambahkan gadget
4. Pilih HTML/Javascript
5. Lalu copy paste script dibawah ini

<form action="kumpulwidget.blogspot.com/search" method="get"> <input class="textinput" name="q" size="56" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Keterangan
- Ganti tulisan warna merah dengan url blog anda
- Tulisan warna hijau merupakan ukuranya. Atur sesuai keinginan

Widget TV online

Ternyata acara televisi tidak hanya ditanyangkan di televisi, tetapi dapat juga ditayangkan melewati TV streaming. Ini juga dapat menjadi sekedar hiburan dan visitor berlama-lama diblog anda karena merasa terhibur dengan widget ini.

1. Login akun blog anda
2. Klik tata letak
3. Klik tambahkan gadget
4. Pilih HTML/Javascript
5. Lalu copy paste script dibawah ini

<embed align="top" allowfullscreen="true" allowscriptaccess="sameDomain" bgcolor="#ffffff" devicefont="false" height="790" menu="true" name="MivoTV" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" scale="noscale" scroll="auto" src="http://id.imediabiz.com/MivoTV.swf?r=' + Math.round(Math.random() * 99999) + '" type="application/x-shockwave-flash" width="100%" wmode="transparent"></embed>

Widget daftar isi blog

Jika anda mencari halaman di buku, anda harus melihat daftar isi. Ini dapat disebut membaca secara scanning (memindai). bukan hanya di buku saja, tetapi di blog juga terdapat daftar isi. Gunanya untuk mencari entri yang anda perlukan. Widget arsip blog merupakan cerminan dari widget ini. Kali ini saya akan membahas tutorial cara membuat widget daftar isi di blog.

1. Login akun blog anda
2. Klik tata letak
3. Klik tambahkan gadget
4. Pilih HTML/Javascript
5. Lalu copy paste script dibawah ini

<div style="border: 0px solid rgb(51, 255, 51); overflow: auto; height: 350px;" margin="5px" ;> <script style="text/javascript" src="http://sites.google.com/site/masfaysblog/Home/codedaftarisi.txt"></script><script style="text/javascript">var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://kumpulwidget.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script> </div>

Keterangan
- Ganti tulisan yang berwarna biru muda dengan alamat blog anda
- Tulisan berwarna ungu adalah tinggi widget tersebut. Tingginya bisa diatur

Widget kalkulator

Misalkan blog anda adalah blog toko, anda akan punya kesulitan satu ini, yaitu mengalkulasi harga barang yang tidak dapat anda hitung secara sekilas. Atau pembeli ingin mengalkulasi harga barang yang tak terhingga. masalah tersebut dapat diatasi dengan menambahkan widget kalkulator diblog anda.

1. Login akun blog anda
2. Klik tata letak
3. Klik tambahkan gadget
4. Pilih HTML/Javascript
5. Lalu copy paste script dibawah ini

<center>
<form action="" name="Keypad">
<table>
<b>
<table border="2" width="50" cellpadding="1" cellspacing="5" height="60">
<tr>
<td colspan="3" align="middle">
<input width="100%" value="0" name="ReadOut" size="24" type="Text"/>
</td>
<td
>
<td>
<input value=" C " name="btnClear" onclick="Clear()" type="Button"/>
</td>
<td><input value=" CE " name="btnClearEntry" onclick="ClearEntry()" type="Button"/>
</td>
</td
></tr>
<tr>
<td>
<input value=" 7 " name="btnSeven" onclick="NumPressed(7)" type="Button"/>
</td>
<td>
<input value=" 8 " name="btnEight" onclick="NumPressed(8)" type="Button"/>
</td>
<td>
<input value=" 9 " name="btnNine" onclick="NumPressed(9)" type="Button"/>
</td>
<td>
</td>
<td>
<input value=" +/- " name="btnNeg" onclick="Neg()" type="Button"/>
</td>
<td>
<input value=" % " name="btnPercent" onclick="Percent()" type="Button"/>
</td>
</tr>
<tr>
<td>
<input value=" 4 " name="btnFour" onclick="NumPressed(4)" type="Button"/>
</td>
<td>
<input value=" 5 " name="btnFive" onclick="NumPressed(5)" type="Button"/>
</td>
<td>
<input value=" 6 " name="btnSix" onclick="NumPressed(6)" type="Button"/>
</td>
<td>
</td>
<td align="middle"><input value=" + " name="btnPlus" onclick="Operation('+')" type="Button"/>
</td>
<td align="middle"><input value=" - " name="btnMinus" onclick="Operation('-')" type="Button"/>
</td>
</tr>
<tr>
<td>
<input value=" 1 " name="btnOne" onclick="NumPressed(1)" type="Button"/>
</td>
<td>
<input value=" 2 " name="btnTwo" onclick="NumPressed(2)" type="Button"/>
</td>
<td>
<input value=" 3 " name="btnThree" onclick="NumPressed(3)" type="Button"/>
</td>
<td>
</td>
<td align="middle"><input value=" * " name="btnMultiply" onclick="Operation('*')" type="Button"/>
</td>
<td align="middle"><input value=" / " name="btnDivide" onclick="Operation('/')" type="Button"/>
</td>
</tr>
<tr>
<td>
<input value=" 0 " name="btnZero" onclick="NumPressed(0)" type="Button"/>
</td>
<td>
<input value=" . " name="btnDecimal" onclick="Decimal()" type="Button"/>
</td>
<td colspan="3">
</td>
<td>
<input value=" = " name="btnEquals" onclick="Operation('=')" type="Button"/>
</td>
</tr>
</table>
</b></table>

</form>
</center>
<font face="Verdana, Arial, Helvetica" size="2">
<script language="JavaScript">
<!-- Begin
var FKeyPad = document.Keypad;
var Accum = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
}
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Accum += parseFloat(Readout);
else if ( '-' == PendingOp )
Accum -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accum /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accum *= parseFloat(Readout);
else
Accum = parseFloat(Readout);
FKeyPad.ReadOut.value = Accum;
PendingOp = Op;
}
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
}
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
}
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accum = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);
}
// End -->
</script></font>

Widget ini berkerja dengan Javascript.

Widget translate untuk blog

Pernahkan anda melihat di statistik bahwa ada orang luar negeri yang browsing di blog anda? Itu disebabkan karena ada kata kunci di entri blog anda yang diketik pada search engine misalnya google. Mungkin mereka (orang luar negeri) tidak berlama-lama browsing diblog kita karena mereka tidak terlalu memahami bahasa kita. Jika anda tidak ingin kehilangan visitor dari tersebut, coba gunakan widget yang dapat menterjemahkan bahasa pada blog anda menjadi bahasa yang mereka gunakan. kali ini saya akan memberikan tutorial cara membuat widget translate di blog anda

1. Login akun blog anda

2. Klik tata letak

3. Klik tambahkan gadget

4. Pilih HTML/Javascript

5. Lalu copy paste script dibawah ini

<style> .google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; border:0; } </style> <div> <a class="google_translate" href="" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu7X81jxPL-pRG5oGJYanCGrPU9XsE8qIkCu5y-Ylk77xx2Zbjg287CNhdYQED_otC28xYhId_CXk7oItaruodhE1t3I4ILYQdIsdT5JbzKqhnxsCBT1i87VNGoeJpZmB-j-6f74SEyVc/?imgmax=800" style="cursor: pointer;margin-right:10px" width="30"/></a> <a class="google_translate" href="#" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYPY1B5UyCq3GOx8xqJqMJUAXRVkY7aLFa7ZftNLLCORQ6xnZXiGk2ILs_JA1sM7iO8bBsbaVPZnJR2bXHR0zYtjjAHAwsWJF1zAl5js0fXefWLyhHiukGii9aoVHVNn2V5sEJqTweyYU/?imgmax=800" style="cursor: pointer;margin-right:10px" width="30"/></a> <a class="google_translate" href="#" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ2TzQXBNLwCDVdoNdPvjA_2nJLWGKi_u55G3NKoHXTcfmDdO0wcUaATVOfzNTW3HiEp8Mq_1A0Dv-g5ONiA3Bf7ev5IMix8wgnWjx7NR_-SoIDl1jBK0BLaSnOyX8hV8rjzZ9xm56J_Yg/?imgmax=800" style="cursor: pointer;margin-right:10px" width="30"/></a> <a class="google_translate" href="#" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_DQLfwZnnSIZpJAZyG0otySfFQxnRou8GXuuCv-nGk4c5IBSWpCo-oFQ6pnZvndoIviNarbvTm-n5TEUMBwyJHyBI9ICSzyxpTfTIvwPisA9IBrHwqwljHeHgYGN-DEChyAl4ujR00nI-/?imgmax=800" style="cursor: pointer;margin-right:10px" width="30"/></a> <a class="google_translate" href="#" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG6PLkO78a5yuqtFQ8A4-1SuGgM-tTSc6JtuZWkN_L-OmIi0qbDsO-AtCXojzlHVQcHhhnuA7T-I_kifJFD3jG7dLK4cvh8LR7AWjSc2W-eIltK9K8G0U3WHVF8379OFsHQUVE-z4Jss8/?imgmax=800" style="cursor: pointer;margin-right:10px" width="30"/></a> <a class="google_translate" href="#" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihVJ2KGc_psstH2Z1e9DJICsB48IothOMdQCT804oiRfgjJ75xmZea5-tlk9UV3TAdkfLByR7rqtOubprRZ6_W4L52hG_3LmNf5vFq6Wk-ae3MlbofSw4PrHkfQZYoZZ4Nv12626n1TFo/?imgmax=800" style="cursor: pointer;margin-right:10px" width="30"/></a> <br /><br /> <a class="google_translate" href="#" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmwf33LnV0mK2Dyk6ns2kkd6_HPxzEEeRqSCKyOVpLoTkWOZe4ZyhjT2R8-XuT3lRu7CM0T_jft__tbzf4viER0pHww2DNSEUTR0E1AoNZcrzWdLlqKJZ4ux094CBguR1cgz0bg1hEaL4/?imgmax=800" style="cursor: pointer;margin-right:10px" width="30"/></a> <a class="google_translate" href="#" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhImIwNahPbQelWj_jEKYPwGtI7j6j0QxjtKRQwACslX5vta4t7iTlPvU1M73CvqocpkPq-T3I63diCo8uXWYDxCv85mQEjf14872LDeOWbkykXlSnQwTKv_TDcWObJUjV9E0fgSATFaOo/?imgmax=800" style="cursor: pointer;margin-right:10px" width="30"/></a> <a class="google_translate" href="#" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJJHqr1YCZLkSnixs7txz3swOCohcRXlrQ-w6_PsqAwCQZ_x0Mzod1f_oAwxBoT5rqjSLlgztQNbckILeHhl-75ckk9wJL5N4o2pJxgAkb03YIkwtSSDT64Q4H0YJYdrMTc8tlTXTCRqUM/?imgmax=800" style="cursor: pointer;margin-right:10px" width="30"/></a> <a class="google_translate" href="" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2RyrsDRfPPIyIhO_yN_EGaLy6j4HLxPc4Vy17sdjIx0B9rZsHZyyYJv4fPZSYm1ZC8qFUFzDYhfuPl9CaAvhV8NP-_KOtZKt0s-yxc3slxVDEVCioIdWFuwBgg3E3DrUbg8oqu-Qcn98/?imgmax=800" style="cursor: pointer;margin-right:10px" width="30"/></a> <a class="google_translate" href="" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn1NOcqwqxF3A_HN-_kA-oLaOVY4ohIvfoXSo0-mXRfG2rKtH6TtEoH53a51nKEQITrY9iOG6-p6Ni1rZdgSDsIlwbdbNVvVbCG7anUBagVfoso29HDbJkXQcc9DeTyS_UfFn_nQQnjh0/?imgmax=800" style="cursor: pointer;margin-right:10px" width="30"/></a> <a class="google_translate" href="" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5TkKGrU7scXEnWXHS9M1s05GBvHSxFLUGn9FHcKRJaVcHpa5h7gvsI-N0sbvBflS0AANb1xY9OK_NlftJo0gwx5Rsf2JKvzQcPlJ_Z_CIp82E65xx04mvgloNCKcDlloDD2Or5h4cD0/?imgmax=800" style="cursor: pointer;margin-right:10px" width="30"/></a> </div></center> <div style="text-align: center;">