Tutorial Blogger: desain

Home » Semua post berkategori desain

Tampilkan postingan dengan label desain. Tampilkan semua postingan

Cara Mengganti / Merubah Favicon Blog

Favicon adalah suatu lambang khusus yang dimiliki oleh setiap blog, favicon dapat dilihat dengan mata telanjang (siapa bilang mata pake baju?). Dan dibawah ini adalah contoh favicon Tutorial Blog

Gambar 1.1 Contoh Favicon

Mungkin untuk kalian yang belum merombak favicon blog akan di beri favicon bawaan oleh pihak blogger.

Dan kali ini Tutorial Blog akan memberikan tutorial Cara Mengganti / Merubah Favicon Blog.

1. Cari gambar yang menurut kalian unik di mbah google. Setelah ketemu simpan gambar tersebut
2. Lalu kunjungi http://www.favicongenerator.com/
3. Upload gambar yang telah kalian dapatkan di kolom yang tersedia lalu klik Generate Favicon

Gambar 1.2 Upload Favicon

4. Lalu simpan kembali gambar yang telah dirubah

Gambar 1.3 Simpan gambar

5. Lalu pegi ke Dashboard ~> blog sobat ~> Tata Letak

6. Klik edit pada menu favicon, dan unggah favicon yang telah disimpan

Gambar 1.4 Masukan Favicon

7. Selesai dan cek blog anda

Cara alternatif jika favicon tidak muncul
1. Pergi ke http://tinypic.com
2. Upload favicon kalian di kolom yang tersedia

Gambar 1.5 Upload favicon di tinypic

3. Lalu anda akan dialihkan ke laman baru, dan copy alamat yang tersedia di kolom ke-4 di notepad

Gambar 1.6 Menyimpan link

4. Setelah itu Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget
5. Cari kode dibawah ini (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

<b:include data='blog' name='all-head-content'/>

6. Letakan kode di bawah ini tepat dibawah kode yang tadi

<link href='favicon.ico' rel='shortcut icon'/>
<link href='~~http://i50.tinypic.com/20h6igw.png~~' rel='icon' type='image/gif'/>

7. Simpan

Cukup disini tutorial kali ini

Cara membuat jendela pop-up selamat datang saat masuk ke blog

Mungkin efek ini hanya bekerja jika monitor tersebut menggunakan mozila

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

2. Cari kode dibawah ini (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

</head>

3. Letakan kode dibawah ini tepat diatas kode yang tadi

<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://tutorialblogger.googlecode.com/files/leightboxTutorialBlogger.js</span>"></script>
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://tutorialblogger.googlecode.com/files/prototypeTutorialBlogger.js</span>"></script>

4. Setelah itu pilih Tata Letak , lalu Tambah Gadget
5. Setelah itu akan muncul tab baru, pilih gadget Html Javascript
6. Lalu muncul halaman baru lagi
7. Kosongkan Judul, dan isikan kode berikut pada kontennya

<style>a.lbAction {
padding: 0 3px;
text-decoration: none;
float: right;
position: absolute;
top: -20px;
right: -20px;
color: #000000;
border: 5px solid #000000;
background: #CCCCCC;
z-index: 102;
}
a.lbAction:hover {
background: #FFFFFF;
}
a.lbAction:active {
background: #999999;
}

div.leightbox {
color: #333;
display: none; /* toggle display to show/hide the popups when designing & previewing */
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -200px;
width: 500px;
height: 400px;
padding: 0;
border: 1em solid #000000;
background: #FFFFFF;
z-index: 101;
overflow: none;
}
div.scrollbox {
margin: 0 auto;
width: 100%;
height: 100%;
text-align: left;
overflow: auto;
}

.scrollbox h1{text-align: center;}
.scrollbox p{text-align: center;}
.scrollbox img{float:left;margin:0px 0px 0xp 10px;}
div#overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color:#000000;
-moz-opacity: 0.80;
opacity: .80;
filter: alpha(opacity=80);
}

div.lightbox[id]{ position:fixed; }
div#overlay[id]{ position:fixed; }
</style><div style="padding-top:15px;">
<a id="EPEntryButton" onclick="document.getElementById("HTML88").style.display="none";document.getElementById("Text88").style.display="none"">Masuk</a>
</div>
<div id="EPGrab"><a href="http://tutorialseo-blog.blogspot.com/2012/04/cara-membuat-jendela-pop-up-saat-masuk.html" target="_blank">Get This!!</a></div>
<div id="EPDarkLayer"></div>

<style>
#welcome-wrapper{width:40%;margin:0 auto;height:0px;text-align:center;}
/* welcome message widget */
#Text88, #EPEntryButton, #EPGrab {position:relative;z-index:510;top:100px;}
#Text88 {background-color:#fff;border:solid 10px orange;color:#222;display:none;padding:15px;}
#HTML88 {z-index:499;display:none;}
/* DarkLayer div */
#EPDarkLayer {background-color:#000;opacity:0.6;filter:alpha(opacity=60);top:0px;left:0px;z-index:500;position:fixed;}
/* Entry button */
#EPEntryButton {background-color:lawngreen;border:outset 3px #000;color:#333;cursor:pointer;font-size:25px;padding:5px;text-decoration:none;}
#EPGrab {color:white;padding-top:10px;}
</style>


<div id="pop01" class="leightbox">

<div class="scrollbox">
<h1>Selamat Datang di Blog Saya</h1>
<p>Oleh <a href="MASUKAN URL ANDA/ ">JUDUL BLOG ANDA</a></p>
<a href="" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="300" width="294" src="MASUKAN LINK GAMBAR" /></a>

</div>
<a href="#" class="lbAction" rel="deactivate">MASUK KE BLOG</a></div>


<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script>

Silakan ganti kalimat bewarna merah

8. Selesai

Cara membuat kotak pencarian multi pada blog

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

Cara memasang widget share multi fungsi dan multi guna pada blog

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/AVvXsEjeoobw6b9DYEkj2U7xK-rUG4rLeLj4ftECD9O6cQgtq4n_SVewKZ0Jb3xe8ndSEXgv_Me3w_84i_JAfPCZpy-o0r_dFK88mgsC9Hyfv-qpfNCaBQ9h4pL4477Cb96q_62uuRdowTfXSn28/" 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/AVvXsEiePG0EKUiF9WjqQhjIiUGkQ2Dswmjt5_H-C7pp6hzbtxi51W7Cg3RP9d6KX-CLbAMMqANBE_VK2DQgnT4LgCHKETzKYzfAMwdaSRybxGoEe_grTd3HfghyphenhyphenXFeASFSLDhsL9wGp1cgVH7vo/" 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/AVvXsEiGPYgd3Eyy3l7V2cl1p7vdtQL6pJwr7pSl7KGanIXp89VghJ2Bah_s7O5lUJuFyXLQZFVeobDJjmhNkvTnT7u4nktlRazFoylrdZ_6n9CBsp1x4XOXHrYq5a_vcktO9ShC0cJfh2Aw5JV3/" 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/AVvXsEiWnckKYMiTPoPiGYRPv0nLjSVHetfyE1OUP2GPTqxft1ep9losAl8IvH7UiEfCRPZHYNXPln6Wtr2fTXd1e8lzhWTAOgVVdn9oddtL0L6jl-O1P5ILktZwPcPIVY2IT274eMnxemWPjgj9/" 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://tutorialseo-blog.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/AVvXsEhciDywDUt1oNNl-SToekY17UQHa29wsVm7gF6cObTFxy0q3Lrvlmuzkk1owgra-0eoQGTO7uAdnnCnIKA8FYocfP3eGTUUezZQnv7h4qWtwSO6HNv4cnH5gui9iqtXk4IYhEeopnnOHL0/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSiOJ4xzMZf-OLzD_af3lWbEe_ESWBzRRQFMuGWHlLWc_abbn8N5gPUdh8_f4-ZIt9r1FYQl-uz-z5i-UYAegZUtwPxBAo7C91-SbIrM_RFkSXYAVrIeauyFNsmeDyYgPgLa97pm_5zmU/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj5MymTIWEOAfeo0_ET5LgFhFBmm4QhGNsjRC5kPdTJxef-cEO0_nc68DWX1H6vhGhqXJ0V-chtaUEtSxmizIcY9DpZBw3H96XBCzUXhKr7BbOzd6yofyKczyDeL0lyq68cYa6qjmwkO4/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI31puQ4Kwl3-OUc9zMaW45lPdvYQlXZD6gG7FiUvuvHL4L2Fu-Rp7J1QLLWTI-RCXlqOQIKkMem9Hp6IAcdx3PlxFLx4aIBFWv635W6YltM4bSNXV_TEiD6yidA2iRlBmdfkM_KKI8Jw/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNriW_Ry0JfiUZcAamZftNXaKUD9xjTwVQsh6bFRrPozVcJi5Pl7I3cgRtbasQxJZVrbQAjl6Mv07yMCviZQlpSbozg90xvkruyABYFq63o8BEc0cbc2k0igOI-3Z25HlAKCoNK5cvyrM/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjITxqkfYNwifm__j3yc74zu6zHe66Xqlkc5Cw9BfwFOvNDY3IWIPyHrySL1XNx4PgH1fAuM8m4cAphyphenhyphenroBQWrFL5zEhzR02Mt2N5WPNO03aAQO7-T3C_gew4To_0QouC-8GDURwjjokXk/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrAYECBquhVrE0jufZM3iK01qarFV9x0d6lgCIsqknyvrMSFCFOyb2iY3_miQ18tX4nE8WR2UbVmpdBy90QIBdAgyGXWlpmCEh_LwkwA4aaZep9Bphfw7MtWNiSlNQxetCUUG9q8A4fG4/' 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

Cara Menambahkan Status Yahoo Messenger (YM) di Blog

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

Cara Menambah Whos Amung ( Siapa yang Online )

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

Memasang IP Address pada blog

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

Cara Menambahkan Google Translate pada blog (Drop Down)

Google baru saja mengumumkan perbaikan lebih pada pelayanan terjemahan gratis. Disini Tutorial Blogger akan mengajarkan cara untuk memperkenalkan Google Translation otomatis ke website Sobat, dengan menggunakan daftar drop-down dilengkapi beberapa fitur bahasa. Sebelumnya Tutorial Blogger telah mengajarkan kepada sobat tentang Cara Memasang Google Translate Pada Blog (Bendera Bulat)

Google sekarang menawarkan layanan terjemahan bebas dalam 51 bahasa, yaitu lebih dari 98% dari semua pengguna Google Menggunakannya. Luar Biasa Bukan??