Gadget

Showing posts with label gadget. Show all posts

Cara menambah google Page Rank pada blog

1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
2. Pilih Tata Letak , lalu Tambah Gadget
3. Setelah itu akan muncul tab baru, pilih gadget Html Javascript
4. Lalu muncul halaman baru lagi
5. Isi Judul, dan isikan kode berikut pada kontennya

<script src="http://www.mypagerank.net/services/pagerankbutton/servicepr_js.php"></script>

6. Simpan Elemen Tersebut

Read User's Comments(0)

Cara Membuat Recent Post dengan Tumbnails pada blog

Labels: aksesoris blog, dasar blog, gadget, posting

Screenshot:

Gambar 1.1. Recent Post dengan Tumbnails

Mau buat seperti itu, mudah kok

<script language="JavaScript">

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "Alamat Blog";

</script>

<script src="http://tutorialblogger.googlecode.com/files/recentposttumbanail.js" type="text/javascript"></script>

6. Simpan Elemen Tersebut

Read User's Comments(0)

Cara membuat form login pada blog

Labels: dasar blog, gadget

Silakan Login melalui blogger <br/><br/><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> Username: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/></div><br/><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"/></form>

6. Lalu simpan Elemen tersebut

Hasil akhirnya ada dibawah ini

Silakan Login melalui blogger

Read User's Comments(0)

Cara membuat kotak pencarian multi pada blog

Labels: dasar blog, desain, gadget

Langsung saja ya tutorialnya

1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget

Gambar 1.1. Edit HTML

Gambar 1.2. Lanjutkan

2. Cari kode ]]></b:skin> (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

3. Setelah ketemu letakan kode dibawah ini tepat diatas kode yang tadi

/** css for the search box */
div#pm-search ul { /* unordered list */
margin-top: 0;
margin-right: 0;
margin-left: 0px;
margin-bottom: 5px;
padding: 0;
}
div#pm-search li { /* each list element */
list-style-type: none; /* don't edit this */
display: inline; /* don't edit this */
cursor: pointer; /* don't edit this */
margin-top: 0;
margin-bottom: 0;
margin-right: 5px;
margin-left: 0px;
text-indent: 0px;
padding: 0;
}
div#pm-search form { /* the search form */
margin: 0;
padding: 0;
}
div#pm-search-h {
display: block; /* don't edit this */
}
div#pm-search-g,
div#pm-search-b,
div#pm-search-t {
display: none; /* don't edit this */
}
div#pm-search input { /* the textbox and submit button */
background-color: transparent;
border: 1px dotted #999;
color: #999;
}
.pm-search-selected { /* which search service is currently selected */
color: #999;
border-bottom: 1px dotted #999;
}
.pm-search-unselected { /* which search services are not selected */
color: #777;
border-bottom: 1px dotted #777;
}

4. Sekarang cari kode </head>
5. Letakan kode yang tadi tepat diatas kode </head>
6. Simpan template tersebut
7. Setelah itu masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
8. Pilih Tata Letak , lalu Tambah Gadget
9. Setelah itu akan muncul tab baru, pilih gadget Html Javascript
10. Lalu muncul halaman baru lagi
11. Kosongkan Judul, dan isikan kode berikut pada kontennya lalu simpan

<div id="pm-search">
<ul>
<li id="li-h" class="pm-search-selected" onclick="selectH()">here</li><li id="li-g" class="pm-search-unselected" onclick="selectG()">google</li><li id="li-b" class="pm-search-unselected" onclick="selectB()">blogger</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">technorati</li>
</ul>
<div id="pm-search-h">
<form action="http://YOURBLOG.blogspot.com/search" method="get">
<input id="pm-f-h" value="" name="q" size="15" type="text"/>
<input value="Search" type="submit"/>
</form>
</div>
<div id="pm-search-g">
<form action="http://blogsearch.google.com/blogsearch" method="get">
<input id="pm-f-g" value="" name="as_q" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="YOURBLOG.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-b">
<form action="http://search.blogger.com/" method="get">
<input id="pm-f-b" value="" name="as_q" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="YOURBLOG.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-t">
<form action="http://www.technorati.com/search.php" method="post">
<input id="pm-f-t" maxlength="255" name="s" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="searchlet" name="sub" type="hidden"/>
<input value="YOURBLOG.blogspot.com" name="from" type="hidden"/>
<input value="n" name="authority" type="hidden"/>
<input value="n" name="language" type="hidden"/>
</form>
</div>
</div>

Ingat ganti kode YOURBLOG.blogspot.com

Dibawah ini adalah gambar dari hasil html yang tadi

Gambar 1.3. Hasil akhir

Read User's Comments(0)

Cara memasang widget share multi fungsi dan multi guna pada blog

Labels: desain, gadget

Bukankah menarik jika pada blog sobat memiliki widget yang memiliki fungsi multi guna? Gambarnya seperti ini

Gambar 1.1. Tampilan widget

Menarik bukan? Untuk membuatnya cukup mudah kok, ikuti aja langkah-langkah di bawah ini

1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget

Gambar 1.1. Edit HTML

Gambar 1.2. Lanjutkan

2. Cari kode </head> (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

3. Setelah ketemu letakan kode dibawah ini tepat diatas kode yang tadi

<style type="text/css">
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% "Tahoma",Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

4. Simpan templatenya

Untuk yang kalimat simpannya tidak terlihat, hilangkan dulu kotak pencariannya

5. Masuk ke Dashboard -> Blog Sobat -> Tata Letak -> Tambah Gadget -> HTML/JavaScript

6. Masukan script dibawah ini pada konten elemen tersebut

<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = "";}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5bUWNplvVdDjG4iTJ_AYVWcM_kNB-SzmpMjXHPjjNEt7wNqb9Wst1tWskjYaILWKeEljC5E_jbL7mhgIIrlmg69RJONbisgA5T61JNenfwUNCsFq8s2hCiBwEGpmvJZ_Vrsl9fDgY0PIr/" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV9Y076Gv7QxOnqNZF8-fMPQCcDwgIwJZ-0wZJ8TeOW662uT7bJMPn1EEiWass8pbkvFVEdcJuHQ-KyXLhAESqnWdbaZudGFVL9c1cvmQCjXiUJw6gjB8-Tw21lGpet4gjfax3H2bZ-to8/" alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_ofbLVOhYgAHCZ6P6Wj9VVI8FRms1rOEf8LynY27U4Z94YMIDeP0fLHeheH2_VL_vL-vzvZAm0vrHC2nwoww6PqTBvMlP11so-Koc79G0QTUSTDxaY8edT7q3hGpl_cKitEOWYbsEZCt/" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsCVUM1g6DBZh2sWg3O5-MWVYFrcubF6TwSH5kW3hIKTOF4Il2wTgxurgeIA3AUZKyeziwpQIyYA0wBgBfIKZEH-YflH8AQTsZyk0MuXIZzZR6OBJyK3sCPuq9_MtSbNxfBNVrJjqi2v4U/" alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://rizved.blogspot.com/" target="_blank">Tutorial Blogger</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX_RRTa_Ysu0nRrhjoU0dkYGm5IgnEA6bUvAo3RrrZ2zMuPZW7CeU0Ha0E2L_d-useXQ5KPioAyuy9N6XfxB0U1aqiy0Vu5AT0GkVvIv5I2guAoZj7g-ZUR0OeqG20zRFQSIMrS-hpLDY/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO8y33wYmHdMWM3J4WEtsFahl_Sj6IVzAXYjANoqQUqiE2Vm6YEETSs26W9v0ERWqkv3CT3pTrGkzO4RW04cbuxlaB0Rx4uZyxrZuXyP7CY0YBxx3WDeWgjedZ1JdBkhKCoBwgrtfxXYw/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq7Tm-ilcdIQ9uOKuxsUmjwNDfNU1eCfL8-IaUxohfERfiyq5X4fLkb9nw_hhrapEZksbE70pHDoTT8WssozuZawgrS10TvKc-KmjbMWnySfSlF3sITDZ3q1EMYKQ1YQqqBCIDyYSbLoc/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Z7QWLLDFHPngRLgesAtHJFF8LQVQHiA7reIZZbBDHhH2HFw_gPd5IQL935eY7c-7W-aTsPZEFgQY4OCU6rCpxN7eKCBYyaD4JjF_axuVXE_Bhtavxoxxzi-tM8Squ9qa_869WiiWZgI/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCWJoz5hnc67-_QUgXLC-64HWqikc_vE2Kon-QwtXo8aW-l9Gw9z-jsfOBsU3ZUnMQwpFZsdLIvpk-4MQLTGebXeDRbZc1QHgtZ-_Idi9Pg5p9N2vdy-Z-9V4wJAO3VntPtDEsr6cPdC0/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjua0KYDCoqDWPrjiQMCRClj8CzdaGO_eJvCpUz4SKmrOuthCYG9mFvFNyaTjC3DEh6GlbGrqowK3DTWbEgbLqYQhzVugtmg2P0zDKygzdBdRyEH0JuxV5ySXWYWm1AyBOOJEu0NvEvojY/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5FH6GA1d_-ZzmGivPK1q42DwzNrImIHx2KZDULyBBcO1iM3qwfE964jUyoh4gVfC5bPJoBEKXmo48LKzXIpkmCW4U3NaVdRJ2W93skQmGO07UCtpdRZ2uTzsQrNplUHhyjIuNyWAC_iE/' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div></div>

7. Simpan

Artikel ini saya kuti daari http://pelajari-selengkapnya.blogspot.com/2012/03/widget-blog-multi-fungsi-dan-multi-guna.html

Read User's Comments(0)

Cara Menambahkan Status Yahoo Messenger (YM) di Blog

Labels: desain, gadget

Siapa yang tak kenal dengan yahoo messenger (YM)? Yahoo Messenger atau YM adalah dunia chatting sebelum datangnya Facebook. Tetapi yahoo messenger tetap tidak tergoyahkan untuk urusan chatting dengan seseorang di halaman blog atau web, hebat kan? Ya meskipun reputasinya masih berada jauh di bawah si Facebook, tetapi menurut saya sama saja kok

Kali ini saya akan mencoba membahas tentang “Bagaimana cara menampilkan status Offline / Online Yahoo Messenger pada blog” (Panjang juga ya?). Jadi kalau ada status tombol Yahoo Messenger ini pengunjung blog sobat dapat secara langsung melakukan chatting dengan sobat (Bisa Dikatakan Mirip FB)

Langsung saja ikuti langkah-langkah di bawah ini

1. 1. Masuk ke Dashboard -> Blog Sobat -> Tata Letak -> Tambah Gadget -> HTML/JavaScript
Image

2. 2. Masukan script dibawah ini ke dalam konten HTML/JavaScript, ganti teks yang bercetak tebal dan bercoret tengah dengan user account Yahoo Messenger anda. Untuk angka yang bercetak tebal silakan ganti dengan angka lain sob (1-4) dan hasilnya, gambar ikon yang akan ditampilkan berbeda-beda

<a href=”ymsgr:sendIM?~~user~~”><img src=http://opi.yahoo.com/online?u=~~user~~&m=g&t=2&l=us/></a>

3. 3. Simpan elemen tersebut, lau refresh blog sobat. Munculkan status YM-nya? Apabila account YM sedang online maka icon akan berubah dengan sendirinya, begitu juga sebaliknya

Read User's Comments(0)

Cara Memasang Google Translate dalam bentuk bendera kotak pada Blog

Labels: dasar blog, gadget, posting

Pada tutorial yang lalu sebenarnya saya telah membahas postingan yang memiliki tema yang sama. Yaitu “Cara memasang google translate pada blog (Drop Down)” dan “Cara memasang google translate pada blog (Bendera bulat)”, untuk siang hari ini kita akan membahas postingan yang hampir mirip dengan sebelumnya cuma ada sedikit saja yang berbeda. Sudah tahukan apa yang akan kita bahas? (Baca aja tuh judulnya). Postingan ini sengaja saya bagikan buat anda yang menyukai ikon penerjemah dalam bentuk bendera seperti di bawah ini

Gambar 1.1. Tampilan Google Translate dalam bendera

Bagaimana ikonnya? Keren, biasa, tidak tertarik atau apa?
Oke deh kalau begitu kita mulai tutorialnya
1. Masuk ke Dashboard -> Blog sobat -> Tata letak -> Add Gadget -> HTML/JavaScript
2. Masukan kode yang di bawah ini pada konten elemen tersebut

<form action="http://www.google.com/translate">
<script language="JavaScript">

</script>
<input value="en" name="hl" type="hidden"/>
<input value="UTF8" name="ie" type="hidden"/>
<input value="" name="langpair" type="hidden"/>
<center>
<input onclick="this.form.langpair.value=this.value" title="Chinese Simplified" value="ro|zh-CN" type="image" height="20" src="http://www.google.com/images/flags/cn_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="English" value="ro|en" type="image" height="40" src="http://www.google.com/images/flags/uk_flag.gif" width="50" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Greek" value="ro|el" type="image" height="20" src="http://www.google.com/images/flags/gr_flag.gif" width="30" name="langpair"/>
<br/>
<input onclick="this.form.langpair.value=this.value" title="Hindu" value="ro|hi" type="image" height="20" src="http://www.google.com/images/flags/in_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="German" value="ro|de" type="image" height="20" src="http://www.google.com/images/flags/de_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Dutch" value="ro|nl" type="image" height="20" src="http://www.google.com/images/flags/nl_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Russian" value="ro|ru" type="image" height="20" src="http://www.google.com/images/flags/ru_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Bulgarian" value="ro|bg" type="image" height="20" src="http://www.google.com/images/flags/bg_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Polish" value="ro|pl" type="image" height="20" src="http://www.google.com/images/flags/pl_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Czech" value="ro|cs" type="image" height="20" src="http://www.google.com/images/flags/cz_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Croatian" value="ro|hr" type="image" height="20" src="http://www.google.com/images/flags/hr_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="French" value="ro|fr" type="image" height="20" src="http://www.google.com/images/flags/fr_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Italian" value="ro|it" type="image" height="20" src="http://www.google.com/images/flags/it_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Portuguese" value="ro|pt" type="image" height="20" src="http://www.google.com/images/flags/pt_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Spanish" value="ro|es" type="image" height="20" src="http://www.google.com/images/flags/es_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Arabic" value="ro|ar" type="image" height="20" src="http://www.google.com/images/flags/sa_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Japanese" value="ro|ja" type="image" height="20" src="http://www.google.com/images/flags/ja_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Korean" value="ro|ko" type="image" height="20" src="http://www.google.com/images/flags/kr_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Chinese (traditional)" value="en|zh-TW" type="image" height="20" src="http://www.google.com/images/flags/tw_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Danish" value="ro|da" type="image" height="20" src="http://www.google.com/images/flags/dk_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Finnish" value="ro|fi" type="image" height="20" src="http://www.google.com/images/flags/fi_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Norwegian" value="ro|no" type="image" height="20" src="http://www.google.com/images/flags/no_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Swedish" value="ro|sv" type="image" height="20" src="http://www.google.com/images/flags/se_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Catalan" value="ro|ca" type="image" height="20" src="http://www.google.com/images/flags/cl_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Filipino" value="ro|tl" type="image" height="20" src="http://www.google.com/images/flags/ph_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Hebrew" value="ro|iw" type="image" height="20" src="http://www.google.com/images/flags/il_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Indonesian" value="ro|id" type="image" height="20" src="http://www.google.com/images/flags/id_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Latvian" value="ro|lv" type="image" height="20" src="http://www.google.com/images/flags/lv_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Lithuanian" value="ro|lt" type="image" height="20" src="http://www.google.com/images/flags/lt_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Serbian" value="ro|sr" type="image" height="20" src="http://www.google.com/images/flags/rs_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Slovak" value="ro|sk" type="image" height="20" src="http://www.google.com/images/flags/sk_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Slovenian" value="ro|sl" type="image" height="20" src="http://www.google.com/images/flags/si_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Ukrainian" value="ro|uk" type="image" height="20" src="http://www.google.com/images/flags/ua_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Vietnamese" value="ro|vi" type="image" height="20" src="http://www.google.com/images/flags/vn_flag.gif" width="30" name="langpair2"/>
<h6>Widget By <u><a href='http://rizved.blogspot.com/2012/04/cara-memasang-google-translate-dalam.html'>Tutorial Blogger</a></u></h6>
</center>
</form>

1. 3. Setelah itu simpan elemen tersebut

Read User's Comments(0)

Cara Menambah Whos Amung ( Siapa yang Online )

Labels: desain, gadget

Selamat siang sobat blogger, sudah dua hari kita tidak bisa bertemu karena komputer saya lagi rusak :'(. Tapi sekarang sudah bisa kok jadi saya bisa berbagi ilmu dengan kalian semua

Okay topik/tema kali ini adalah Cara Menambah Whos Amung ( Siapa yang Online ). Apa maksudnya Whos Amung? Gak tau ya, Whos Amung adalah website yang menyediakan jasa berupa menu yang bisa mengetahui berapa banyak pengunjung yang sedang mengunjungi blog anda. Mungkin bisa sampai 1 Milyar :D, memang kalian tahu berapa jumlah pengunjung yang sedang mendiami blog kalian? Gak tau ya (sama dong :p) pasang aja badge website whos amung kalau begitu

1. Kunjungi alamat http://whos.amung.us/
2. Setelah itu putar kursor hingga menemukan bagian tengah website tersebut
3. Silakan sobat tentukan dimana sobat akan meletakan badge ini di blog

Gambar 1.1. Menentukan Letak Badge

4. Ketika sobat sudah yakin dengan letak badge, salin kode JavaScript

Gambar 1.2. Menyalin JavaScript (Kotak Merah)

5. Masuk ke Dasboard -> Blog Sobat -> Tata Letak -> Tambah Gadget -> HTML/JavaScript -> Paste Kode nya -> Save/Simpan

Gambar 1.3. Menambah Elemen

Gambar 1.4. Paste kode JavaScript

6. Jadi deh badgenya, gambar di bawah ini adalah contoh hasil akhir badgenya

Gambar1.5. Hasil Akhir Badge

Read User's Comments(0)

Cara Memasang Random Ayat Al-Quran di Blog

Labels: gadget, islam

Apabila blog sobat bernuansa Islami, alangkah baiknya jika sobat memasangkan gadget ini yaitu Random Ayat Al-Quran yang bisa menambahkan wawasan dan pencerahan ayat-ayat alquran yang selalu bergonta-ganti ayat disetiap orang lain mengunjungi blogsobat. Untuk memasangkan widget cukup mudah (Simple), lakukan saja langkah-langkah dibawah ini

1. Pertama-tama kunjungi situs widgets.mahesajenar.com
2. Setelah itu pada bagian menu utama klik Random Ayat

Gambar 1.1. Memilih Menu

3. Lalu pilih jenis gadget yang sobat inginkan, apakah teks atau gambar

4. Setelah sobat menentukan jenis gadgetnya, sekarang tentukan Jeda Auto Refresh dan Jumlah Random Ayatnya

Gambar 1.2. Menentukan jenis gadget

5. Kode HTML akan muncul pada bagian bawah, sebelum sobat mengopy kode tersebut alangkah baiknya jika sobat menekan menu Preview terlebih dahulu'

Gambar 1.3. Kode Widget/Gadget

6. Masuk ke Dasboard -> Blog Sobat -> Tata Letak -> Tambah Gadget -> HTML/JavaScript -> Paste Kode nya -> Save/Simpan

Gambar 1.4. Menambah Elemen

Gambar 1.5. Paste Kode HTML

Selain gadget Random Ayat, Sobat juga dapat membuat gadget Jadwal Adzan, Asmaul Husna, Tanggal Hijriah, Counter, dan Komentar

Read User's Comments(0)

Cara Membuat Forum Di Blog

Labels: dasar blog, gadget

Saat ini ajang untuk berinteraksi sosial secara online bisa dilakukan dengan banyak cara sebut saja blog, situs jejaring sosial, YM (Yahoo Messenger), dan salah satu media yang sudah cukup lama ada yaitu Forum (online tentunya) contohnya: Kaskus. Bagi seseorang yang ingin memiliki sebuah situs yang murni berisi forum tentunya cukup membungungkan, terutama bagi sobat yang masih belajar

Cara memasang forum itu sangat mudah, bahkan bisa dibilang paling mudah, karena kita hanya perlu memasukan kode script tertentu dan memasangnya pada sebuah halaman/ artikel blog. Untuk memasangkan Widget ini ikuti langkah di bawah ini

1. Kunjungi alamat nabble di http://n6.nabble.com/free-forum.html
2. Masukan username sobat, email sobat, password, centang I have read and I agree to Nabble's, Nama Forum, Deskripsi forum, dan masukan kode captcha

Gambar 1.1 Contoh Biodata yang saya isi

3. Apabila semua data yang sobat masukan benar, maka forum telah sukses dibuat. Setelah itu sobat akan melihat tulisan yang berlatar belakang bewarna kuning, Klik Go to next message

Gambar 1.2 Tulisan yang saya maksud

4. Setelah sobat klik akan muncul code HTML/JavaScript, copy kode tersebut

Gambar 1.3 Kode yang saya terima

5. Masuk ke Dasboard -> Blog Sobat -> Tata Letak -> Tambah Gadget -> HTML/JavaScript -> Paste Kode nya -> Save/Simpan

Gambar 1.4 Menambah Elemen baru pada blog

Gambar 1.5 Paste Kode nya

6. Posisikan forum tersebut di posisi yang srategis sehingga pengunjung bisa melihat forum ini di halaman utama dan melakukan posting pesan pada forum sobat

Gambar 1.6 Hasil Preview forum pada blog

Bagi pengunjung yang akan posting pesan cukup mudah kok, tanpa harus register terlebih dahulu. Cukup dengan klik New Topic dan mengisi nama, subjek, dan pesan yang dikirim lalu Post Message. Posting akan muncul.

Jangan memasang forum pada bagian footer (Seperti Gambat Diatas) karena para pengunjung jarang memerhatikan bagian footer blog. Jangan lupa kunjungi forum saya di sini

Read User's Comments(0)

Memasang IP Address pada blog

Labels: desain, gadget

Kita bisa melacak pengunjung berdasarkan IP Addres. Untuk mengetahuinya, pasang saja widget pelacak IP Address yang bisa kita dapatkan secara gratis. Caranya ada di bawah ini

1. Kunjungi website http://www.ipnow.org/, lalu pilih custom salah satu gambar yang berada dibagian bawah

Gambar 1.1. Memilih custom image.

2. Setelah itu pilih warna background dan teks, lalu klik Create My Image

Gambar 1.2. Memilih Warna Background dan teks.

3. Setelah itu copy kode HTML pada "Linked Image"

Gambar 1.3. Menyalin Kode Linked Image.

4. Setelah itu Masuk ke Dasboard -> Blog Sobat -> Tata Letak -> Tambah Gadget -> HTML/JavaScript -> Paste Kode nya -> Save/Simpan

Gambar 1.4. Menyalin kode pada Elemen Blog.

5. Setelah itu buka blog sobat dan lihat hasilnya

Gambar 1.5. Contoh hasilnya

Read User's Comments(0)

Gadget

Gadget Unik Menarik

About

Archives

Categories

Cara menambah google Page Rank pada blog

Cara Membuat Recent Post dengan Tumbnails pada blog

Cara membuat form login pada blog

Cara membuat kotak pencarian multi pada blog

Cara memasang widget share multi fungsi dan multi guna pada blog

Cara Menambahkan Status Yahoo Messenger (YM) di Blog

Cara Memasang Google Translate dalam bentuk bendera kotak pada Blog

Cara Menambah Whos Amung ( Siapa yang Online )

Cara Memasang Random Ayat Al-Quran di Blog

Cara Membuat Forum Di Blog

Memasang IP Address pada blog