Saungjiwa Blog: Blogging

Tampilkan postingan dengan label Blogging. Tampilkan semua postingan

Cara Memasang Sitemap/Daftar Isi di Blog

Kamis, 07 Maret 2013

Sitemap/Daftar isi ini menampilkan seluruh konten-konten pada Blog sobat menurut label dan secara Alphabetis. Dan memberi tanda pada posting yang baru sobat buat.Sitemap dengan cara ini otomatis memperbrui ketika sobat membuat konyen baru pada site sobat. Dan sitemap sangat berguna untuk membantu pengunjung mempermudah menemukan informasi yang dicari pada Blog soba.
Sebelum membuat widget Sitemap, ada baiknya sobat mengoptimasi dahulu sitemap tersebut. Mengoptimasi sitemap dipercaya dapat menaikan pagerank Blog sobat. Baca Cara Mengoptimasi Sitemap Blog.
Kita dapat memasang Sitemap atau Daftar isi ini pada widget atau pada halaman di Blog sobat. Saya akan jelaskan kedua caranya. Simak baik-baik ya sob.

OK, kita mulai saja. Cara membuat Widget Sitemap di Blog:
1. Masuk ke akun Blogger sobat.

Untuk versi Widget.

2. Masuk ke bagian Tata Letak.
3. Klik tambah gadget di posisi yang sobat inginkan untuk memasang sitemap. (lebih baik di bawah postingan sob, agar tersedia ruang yang luas)
4. Pilih HTML/Javascript.
5. Masukan Kode di Bawah ini.

#Ubahlah ukuran pada kode warna biru dengan yang sobat inginkan. Dan ubah kode warna merah dengan URL Website sobat.

6. Klik Simpan.

Untuk versi Laman.

2. Masuk pada bagian Laman.
3. Klik Laman Baru dan pilih Laman Kosong.
4. Masukan Judul Laman seperti "Sitemap" atau "Daftar Isi".
5. Isi Post dengan mode HTML.
6. Masukan kode Berikut.

#Ubah kode warna merah dengan URL Website/Blog sobat.

7.Klik Publikasikan.

Selesai, sitemap telah terpasang. Semoga bermanfaat...

Rabu, 06 Maret 2013

Sitemap dipercaya dapat menaikan pagerank Blog dan mempermudah mesin pencari untuk mengindex posting pada blog sobat. Sebelum mengoptimasi sitemap, pastikan Blog sobat telah terverifikasi oleh google webmaster tools. Baca artikel tentang Cara Verifikasi Website/Blog di Google. Setelah mengoptimasi sitemap, baiknya sobat memasang Widget Sitemap di Blog sobat. Baca Cara Memasang Widget Sitemap di Blog.

Nah, cukup saja basa-basinya sob, kita mulai ke pokok pembahasan. OK siap ya...

Cara mengoptimasi sitemap blog di mesin pencari.

Ada beberapa mesin pencari yang populer seperti Google, Yahoo, dan Bing. Kali ini saya hanya membahas mengoptimasi sitemap di Google.

1. Masuk ke google webmaster tools. Pastikan telah masuk ke google akun sobat.

2. Klik kelola situs pada Blog yang diinginkan dan pilih Tambahkan atau hapus pengguna.

3.Perhatikan bagian kiri, Klik pengoptimalan dan pilih Peta Situs/ Sitemap

4. Perhatikan bagian kanan, Klik Tambahkan/Uji Peta Situs

5. Ada beberapa URL untuk mengoptimasi sitemap, diantaranya:

atom.xml?redirect=false&start-index=1&max-results=500
feeds/posts/default
feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc
feeds/posts/full

Masukan URL tersebut pada kolom yang ditunjukan panah dan klik Mengirim Peta Situs. Sobat bisa menggunakan salah satu URL diatas ataupun ketiga-tiganya.

Selesai. Semoga bermanfaat ya...

Jumat, 01 Maret 2013

Ada kalanya sobat ingin berkomentar pada komentar lain di Blog. Namun sulit untuk menandakan bahwa sobat melakukan komentar pada komentar lain. Nah, dengan Threaded Comment ini sobat bisa mengatasi masalah tersebut. Pada sebagian Template Blogspot Threaded Comment ini sudah tersedia. Namun ada juga template yang belum menyediakan Threaded Comment ini.

Threaded Comment di Blog menandakan bahwa komentar yang mengomentari komentar lain. Posisinya berada tepat di bawah komentar yang dikomentari. Bagi si pemilik blog Bagaimana membuat dan menyediakan Threaded Comment di Blog-nya?
Berikut cara membuat/menyediakan Threaded Comment di Blog.

Tanpa Edit HTML

Download/Backup dahulu seluruh element template sobat untuk antisipasi kegagalan.
1. Login ke akun Blogger sobat.
2. Masuk ke menu Template.
3. Pilih edit HTML.
4. Klik "Kembalikan Ttemplate Widget ke Default".

5. Klik Simpan Template.
Selesai, sekarang Threaded Comment telah tersedia di Blog sobat.

Peringatan
Cara ini akan memnghapus beberapa HTML dari Template yang digunakan. Jadi, amankan dulu HTML dengan cara Cadangkan HTML dan unduh HTML, atau pilih dahulu pratinjau sebelum menyimpan template untuk menghindari hal yang tidak diinginkan.

Dengan edit HTML.

Download/Backup dahulu seluruh element template sobat untuk antisipasi kegagalan.
1. Masuk ke Akun Blogger sobat.
2. Masuk menu Template.
3. Pilih Edit HTML.
4. Cari kode <b:include data='post' name='comments'/> dengan menggunakan tombol ctrl+F.
5. Hapus dan ganti kode tersebut dengan kode berikut.

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

6. Kllik Simpan Template.
Selesai, Threaded Comment telah tersedia pada Blog sobat.

catatan
Sobat akan menemukan beberapa kode <b:include data='post' name='comments'/>, hapus dan ganti semua kode tersebut.

Jika sobat ingin memakai threaded comment yang agak berbeda seperti ini, berikut caranya:

Download/Backup dahulu seluruh element template sobat untuk antisipasi kegagalan.

1. Login ke akun Blogger sobat.
2. Masuk pada menu template.
3. Klik Edit Template.
4. Cari kode ]]></b:skin> dan letakan kode berikut tepat diatas kode ]]></b:skin>.

/*----------------------------------------------------
{--------} Comment {--------}
----------------------------------------------------*/

#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}

.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}

.cm_head {
margin: 0;
width:60px;
float: left;
}

.cm_avatar {
margin: 0;
vertical-align: middle;
outline: 1px solid #fff;
border: 1px solid #ddd;
padding: 3px;
background-image: url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}

.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #ddd;
padding: 3px;
background:#c6e5f7;
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}

.cm_reply {
padding-top: 5px;
}

.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}

.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}

.cm_entry {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}
.cm_entry_a {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU9JQPiGifDyuU5vQPkpMq0PKa5rP-jGHzxmmcTt_XcdzNmX8IgOEhgrru4_IgjjP56lGuz18r2gD9I-EvOzXAr4L0XOoDx0cfZKRBCMZ9XoCXH6XCZHY7ifFpiel3soCrUCInMdM8tKs/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}

.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}

.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;

}
.cm_name_a {
font-family:"Francois One";
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: 250;
float: left;

}

.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;

}
.cm_date_a {
font-family:"Francois One";
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;

}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #dff0fa;
font-size: 13px;
color: #333;
word-wrap:break-word;
}

.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}

.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}

.cm_pagenavi a:hover {
text-decoration: underline
}

.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}

5. Cari kode </body> dan letakan kode berikut diatas kode </body>.

6. Cari kode berikut dan ganti kode yang agak panjang diantara 2 kode berikut.

<b:includable id='comments' var='post'>

Kode yang harus di ganti

</b:includable>

7. Ganti dengan kode berikut.

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
        <h4>
             <b:if cond='data:post.numComments > 0'>
          <b:if cond='data:post.numComments == 1'>
            <span id='cm_total'>1</span> comment
          <b:else/>
            <span id='cm_total'><data:post.numComments/></span> comments
          </b:if>
        </b:if>
        </h4>

        <div id='cm_reply_css'/>

        <div class='cm_pagenavi' id='cm_page'/>

        <div id='cm_block'>
            <b:loop values='data:post.comments' var='comment'>
                <b:if cond='data:comment.isDeleted'>
                <b:else/>

                    <div expr:id='data:comment.anchorName'>
                        <div class='cm_wrap'>
                            <a expr:name='data:comment.anchorName'/>

<b:if cond='data:comment.author == data:post.author'>
                               <div class='cm_head'>
                                <div class='cm_avatar_a'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>
                                </div>
                                <div class='cm_reply'>
                                    <a expr:href='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
                                </div>
                            </div>
<b:else/>

                            <div class='cm_head'>
                                <div class='cm_avatar'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>
                                </div>
                                <div class='cm_reply'>
                                    <a expr:href='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
                                </div>
                            </div>
</b:if>

<b:if cond='data:comment.author == data:post.author'>
                                <div class='cm_entry_a'>
                                <span class='cm_arrow'/>
                                <div class='cm_info_a'>
                                    <div class='cm_name_a'>

                                      <b:if cond='data:comment.author == data:post.author'>
                                                                                       <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                                           <b:else/>

                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                        <b:else/>
                                            <b><data:comment.author/></b>
                                       </b:if>
                                        </b:if>
                                    </div>

                                            <b:if cond='data:comment.author == data:post.author'>
                                     <div class='cm_date_a'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>

                                            <b:else/>

                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>
                                            </b:if>
                                </div>
                                  <b:if cond='data:comment.author == data:post.author'>
                                     <div class='comment-body-author'>
                                <p><data:comment.body/></p>
                                     </div>
                                            <b:else/>
                                <p><data:comment.body/></p>
                                 </b:if>
                            </div>


<b:else/>

                            <div class='cm_entry'>
                                <span class='cm_arrow'/>
                                <div class='cm_info'>
                                    <div class='cm_name'>

                                      <b:if cond='data:comment.author == data:post.author'>
                                                                                      <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                                           <b:else/>

                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                        <b:else/>
                                            <b><data:comment.author/></b>
                                       </b:if>
                                        </b:if>
                                    </div>

                                            <b:if cond='data:comment.author == data:post.author'>
                                     <div class='cm_date_a'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>

                                            <b:else/>

                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>
                                            </b:if>
                                </div>
                                  <b:if cond='data:comment.author == data:post.author'>
                                     <div class='comment-body-author'>
                                <p><data:comment.body/></p>
                                     </div>
                                            <b:else/>
                                <p><data:comment.body/></p>
                                 </b:if>
                            </div>
</b:if>
                        </div>
                    </div>
                </b:if>
     </b:loop>
        </div>

        <div class='cm_pagenavi' id='cm_page_copy'/>

    <b:if cond='data:post.embedCommentForm'>
            <b:if cond='data:post.allowNewComments'>
                <b:include data='post' name='comment-form'/>
            <b:else/>
                <data:post.noNewCommentsText/>
            </b:if>
            <b:else/>
            <b:if cond='data:post.allowComments'>
                <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
            </b:if>
    </b:if>

</b:if>
</div>

8. Ubah tulisan __BlogID__ dengan Blog ID sobat. Untuk mengrtahui Blog id, perhatikan gambar berikut.

9. Terakhir, klik simpan template.

Alhamdulillah, pembahasan telah selesai. Semoga bermanfaat Sob.

Senin, 25 Februari 2013

Cara Membuat Widget Like Box Facebook di Blog

Manfaat widget Like Box Facebook di Blog adalah pengunjung pada Blog sobat tau bahwa Blog tersebut juga mempunyai halamanya di Facebook dan pengunjung dapat menyukai halaman Blog sobat di Facebook dengan sekali klik.
Sebelum membuat Widget Like Box Facebook di Blog, sobat terlebih dahulu harus mempunyai halaman Blogspot sobat di Facebook. Jika sobat belum punya halaman Blogspot di Facebook, sobat bisa baca panuduan ini, Cara Membuat Halaman Blog di Facebook. Baca juga untuk tampilan lebih sederahana yaitu Tombol Like Facebook di Blog. Jika sobat telah mempunyai halaman Blogspot sobat di Facebook, maka membuat Like Box Facebook di Blog dapat dimulai.
OK, mulai saja sob. Cara membuat Like Box Facebook di Blog:
1. Login ke Facebook dengan akun sobat.
2. Isikan URL http://developers.facebook.com/docs/reference/plugins/like-box/ dan langsung kunjungi URL tersebut.
3. Atur Tampilan.
Masukan URL halaman blogspot sobat di Facebook.
Width, atur lebar Widget.
Height, atur panjang Widget.
Show Faces, menampilkan foto Profil Likers atau tidak.
Color Scheme, pilih antara dark atau light.
Stream, tampilkan ringkasan halaman Facebook atau tidak.
Border Color, tentukan warna garis luar.
Show header, tampilkan header atau tidak.
4. Setelah selesai klik Get Code untuk mendapatkan kode HTML widget Like Box.

5. Mendapatkan kode html Like Box, agar lebih mudah masuk pada bagian iFrame. Coppy seluruh kodenya.

6. Selanjutnya, masuk pada akun Blogger sobat.
7. Masuk pada bagian Tata Letak.
8. Kllik tambah gadget, pilih posisi mana yang sobat inginkan untuk memasang Widget Like Box.
9. Pilih HTML/Javascript.
10. Pastekan kode iFrame dan klik simpan.

Selesai, Widget Like Box Facebook telah berhasil dipasang pada Blog sobat. Silakan lihat hasilnya.

Minggu, 24 Februari 2013

Salah satu cara mempromosikan Website / Blogspot adalah memperkenalkanya di Facebook. Apalagi jika sobat baru membuat Blog, saya sangat menganjurkan untuk membuat halaman dan mempromosikanya di Facebook.
Setelah sobat membuat halaman Blogspot di Facebook, baiknya sobat membuat widget Like Box Facebook halaman Blogspot di Blog. Ini dilakukan untuk memberi tau pada pengunjung Blog bahwa Blog tersebut juga mempunyai halamanya di Facebook. Baca Cara Membuat Like Box Facebook di Blog dan Cara Membuat Tombol Like Facebook di Blog.
Baik, kali ini saya akan bahas dahulu cara membuat halaman di Facebook.
Berikut langkah-langkah untuk membuat halaman Website / Blogspot di Facebook:
1. Login ke Facebook dengan akun sobat.
2. Agar lebih cepat, langsung saja isikan alamat http://www.facebook.com/pages/create.php, dan masuklah ke URL tersebut.
3. Memilih Produk, pilih "Merek atau Produk" karena Blog merupakan produk yaitu konten dalam Blog sobat.

4. Pilih Kategori sesuai dengan isi konten Blog sobat dan buat nama halaman, setelah itu centang pada bagian kotak dan Klik mulai.

5. Masukan Foto Profil halaman, setelah selesai klik Selanjutnya.

6. Buat Informasi/deskripsi halaman, dan URL Blog sobat. Setelah selesai klik Simpan Info.

7. Membuat web Facebook sesuai dengan keinginan sobat. Setelah selesai klik Atur alamat.

8. Pada bagian ini, terserah sobat akan mengaktifkan iklan atau tidak. Pilih sesuai dengan yang sobat inginkan.

Selesai, halaman Blog sobat pada Facebook telah dibuat.
Untuk mengetahui URl halaman Blog. Masuk ke halaman utamanya, dan lihat URl nya pada tab URL.

Selasa, 19 Februari 2013

Tukar link adalah bertukar traffic / pengunjung atau saling menaruh link satu sama lain diblog kita. Keuntungannya begini , misal kita gak punya duit buat pasang iklan di blog blog ternama , pakai tukar link malah gratis (free), tentunya kita juga bayar dia dengan memasang linknya juga ke blog kita . Begitu banyak manfaat yang akan kita dapat hanya dengan ber tukar link. Sebagai junior dalam nge blog saya selalu mengunjungi blog-blog para blogger senior, karena dari merekalah kita banyak belajar nge blog yang baik dan jangan lupa etika nge blog harus selalu kita patuhi.

Berikut ini beberapa manfaat Tukar Link :

1. Mendapatkan banyak link partner untuk blog

2. Rangking blog pelan2 akan semakin meningkat

3. Mendapat banyak anchor text dari blog lain

4. Dapat meningkatkan page rank

5. Menambah jumlah pengunjung blog

6. Blog akan makin banyak menambah backlink dari blog lain

7. Mempererat tali silaturahim sesama blogger

Maka jika para sobat tertarik untuk tukar link, silakan ikuti langkah-langkahnya di bawah:
1. Sobat baiknya sediakan dahulu banner gambar untuk link sobat agar lebih menarik. Sobat bisa membuatnya pada software pembuat gambar atau agar lebih mudah buatanya dengan situs cooltext.
2. Jika gambar telah tersedia, maka sobat masuk ke akun blogger sobat.
3. Masuk pada bagian Tata Letak.
4. Klik tambahkan gadget di posisi yang sobat inginkan.
5. Pilih HTML/Javascript.
6. Masukan kode html berikut.

7. Sobat atur posisi dan ukuran pada kode yang berlatar abu-abu.
8. Berikan judul pada link sobat pada kode warna hijau.
9. Masukan URL banner gambar untuk link sobat pada kode warna merah.
10. Masukan alamat Blog sobat pada kode warna biru.
11. Selesai, klik simpan.

Maka hasilnya pada widget sobat akan tampil seperti milik saya.

Selanjutnya sobat dapat bertukar link dengan sobat Blogger lainya dengan link yang telah sobat buat.

Untuk mencantumkan link-link teman Blogger sobat, caranya adalah sebagai berikut:

1. Login ke akun Blogger sobat.

2. Masuk pada bagian Tata Letak.

3. Pilih tambah gadget di posisi yang sobat inginkan.

4. Pilih HTML/Javascript.

5. Masukan kode HTML berikut.

<h2 class=”title”>Link Sobat</h2>
<div class=”widget-content”>
<div style=”border: 0px solid rgb(153, 153, 153); overflow: auto; width: 200px; height: 300px; text-align: left;”>

Masukan Link Sobat Disini

Masukan Link Sobat Disini

</div>
</div>

Catatan:
Masukan judul widget pada kode warna biru.
Atur Ukuran pada kode warna hijau.
Masukan link-link teman blogger sobat pada tulisan warna merah.

OK, sekian saja seputar cara tukar link. Selamat bertukar link sobat...

Senin, 18 Februari 2013

Cara Memasang Widget Chat Box yang Tersembunyi di Kanan

Beberapa waktu lalu saya saya bahas cara buat widget chat box di blog. Nah kali ini saya akan bahas cara memasang widget chat box yang tersembunyi di kanan Blog. Dan keluar masuk ketika sobat klik ikon chat box-nya. Caranya gampang kok sob, ikuti langkah-langkahnya.
Yang pertama dan utama adalah sobat terlebih dahulu harus mempunyai kode html chat box tersebut. Salah satu caranya adalah dengan mempunyai akun pada situs cbox. Untuk langkah-langkah pembuatan akunnya sobat bisa klik disini. Atau langsung saja masuk ke situs cbox, klik disini.
OK, jika sobat telah mendapatkan kode html-nya, langsung saja sob ini dia langkah-langkahnya:
1. Masuk akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik tambah gadget di posisi mana saja.
4. Pilih HTML/Javascript.
5. Masukan kode html berikut.

6. Atur ukuran dan posisi pada kode berwarna biru.
7. Ganti tulisan warna merah dengan kode html chat box sobat.
8. Ganti URL gambar pada kode warna ungu dengan gambar yang sobat inginkan. Namun bila sobat tidak menggantinya hasilnya akan seperti berikut.
9. Atur warna background dan warna border pada kode warna hijau.

Url Gambar Lainya:

	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhzxgsqFBZcJu00R9BqLU-OJii2svO27cQnTL2b6_WQq_-7NFaTMnNogAV22VEDuPZK_lq0qaWjZRvVDJKtiwlWDUwiq4T9f6qGPwbzTzPmGtewAqRV5YDfr3d65ReZbNrKgSWXL0gPlE/s1600/Chatbox.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-nhndnwA7BU3QteUA3ygPzeZt73886fQ1lnMA6Qfhcbb-5DbAbvqmf3-NzCTjlRzyiWR5Mi9zX8tZX5nO_IHb0pTlsrOX7KrZsZvQ02iWV6jr7ORt-PUtqcS56RvkP2BkzufnWtNVHwo/s1600/Bukutamu3.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLDuQvApu07pNY-ntQc3Bu1Jlli2hFCILuer1EgMTDutPUzqu3VzOoTM6nV_vW-2SRwdZgNcjSOUN6bxqq3Ypn88yOi55LQmegdJOV_8EX8fPBlhH7Cb8dEBKPiGYT1nE5Ur_zrJVx_gY/s1600/bukutamu2.gif
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgknGNW3LjKC08psNcPbiPjUWGozmBNc38WX-rj-iyBR-CWQFIxjUHRtFeerQitWSWzgRpWTl7ylvE8M4c3OszxaXGJ4G-GsWSqVHJ8gfm-0G-cyA3uD92kMj9U2srxECpOq3u-jMDtZU0/s1600/bukutamu5.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiZpVk82XwmFem24fmmOUMFv8cXbaw3XUVvIQHRxdBP-lf6-y_AGA7bUQmnNc0u6fxDsmd-mG_u3EF8repigNV7GZ9Irw5N79TDw2T_RRp9Vyxaz9Zdkln08HSlV1LtZ_8KVYsRsHgiuk/s1600/2131wkl.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIQrba4DlegS-7RtCZqEcNGVamkLwuay0bzc05-s4q3jee3rvpJCuE3ZWWyLTSC4WRkXnKUDkkHGlPFOq-FaAQtGxmm-weu3Lt3S2gxT-SdVc1dxtveTOLAnyBL6kbVHmbd25plbl-c8/s1600/bukutamu4.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYhCXuu1uzkzPiRDancYqKDHG05HxdosmjTHodXvzohIFUgjtS3nlp_ZvEu0tNZGKtcI86Z4JPQ-6chs2dp7klcJjtrcQopU364uiqHgoi4zOMf0O9hwLcHkclqxPFhJc5vCzD44H_Rc/s1600/BukuTamu1.png