Membuat Facebook di Blog

Membuat facebook di blog pada saat sekarang ini seperti menjadi suatu kewajiban yang harus diterapkan oleh para blogger, kenapa? karena banyak keuntungan yang diperoleh oleh anda sebagai pemilik blog ketika anda memasang facebook di blogspot. Facebook adalah jejaring sosial terbesar di samping twitter, ada sekitar 400juta pengguna aktif dan akan terus bertambah di setiap harinya dan Indonesia adalah pengguna terbesar ke-2 setelah Amerika.

Tidak seperti artikel saya sebelumnya yaitu cara membuat blog berbahasa inggris tetapi artikel saya yang lain yaitu cara memasang widget twitter blogspot, salah satu cara memasang facebook di blog adalah dengan memasang widget facebook. widget facebook inilah yang bisa menghubungkan account facebook dengan blog anda, di situlah anda bisa berbagi informasi blog, profil, bisnis kepada pengguna facebook.

Ada sekitar delapan widget atau tool facebook yang saya rangkum dan bisa anda pasang di blog, diantaranya:

1. Like Badge, Widget ini dapat menampilkan halaman facebook anda di blog, untuk membuatnya anda bisa mengikuti link berikut:
   http://www.facebook.com/facebook-widgets/fanbadges.php 
2. Profile Badge, Widget ini dalam bahasa indonesia disebut Lencana facebook yang berfungsi untuk berbagi informasi profil pilihan untuk blog sehingga akan memudahkan komunikasi dan bisa menambah banyak teman. Link untuk membuatnya adalah:
   http://www.facebook.com/facebook-widgets/profilebadges.php?creating 
3. Photo Badge, widget ini memungkinkan ada untuk berbagi Photo yang ada di facebook dengan pengunjung blog anda, ada beberapa type tata letak photo badge yang bisa anda pilih horizontal atau vertikal. Link untuk membuatnya adalah:
   http://www.facebook.com/facebook-widgets/photobadges.php?creating 
4. Like Box, Widget yang satu ini yang sering kita jumpai di blog, dengan widget ini anda bisa mengetahui seberapa banyak pengunjung yang follow/like ke facebook anda. untuk membuat widget facebook like bon ini, ikuti saja link berikut:
   http://developers.facebook.com/docs/reference/plugins/like-box/ 
5. Share Button, Widget facebook yang satu ini menurut saya sangat baik di pasang di blog, karena memudahkan pengunjung untuk berbagi konten pemilik blog di facebook. artinya pengunjung secara tidak langsung dapat mempromosikan blog anda melalui facebooknya. untuk membuat widget facebook ini dipasang di blogspot, ikuti link berikut:
   http://www.facebook.com/facebook-widgets/share.php 
6. Page Badge,  memasang widget facebook page badge memungkinkan ada bisa berbagi halaman Facebook (yang telah anda update) pada blog anda. link untuk memasangnya adalah:
   http://www.facebook.com/facebook-widgets/pagebadges.php 
7. Menghubungkan Facebook dengan Twitter..
   nah yang ini sudah saya bahas pada artikel khusus yang telah saya tulis dengan judul Cara menghubungkan twitter ke facebook
8. Comments Box atau komentar facebook di blog, widget ini dapat berfungsi setiap pengunjung dapat mengomentari isi artikel blog anda dengan account facebooknya. serukan widget ini?, cara membuat widget comment box facebook di blog, ikuti link ini:
   http://developers.facebook.com/docs/reference/plugins/comments/

Sebenarnya ada beberapa widget dan tool facebook lain yang bisa anda pasang di blog, sementara 8 link cara membuat facebook di blog di atas cukup mewakili dan bisa diterapkan. semoga bermanfaat.

Cara Memasang Widget Twitter Pada Blog

Pernakah anda melihat burung tweeter terbang pada halaman blogger? menclok ke-sana-kemari menyesuaikan pergerakan halaman blog? tampak unik dan blog pun terlihat cantik. Bagaimana caranya ya? nah pada pembahasan kali ini saya akan menjelaskan cara memasang widget twitter blogspot baik yang sifatnya diam dengan menampilkan status twitter, maupun widget burung twitter yang terbang.

Fungsi widget ini sama halnya dengan widget facebook yang sudah saya tulis sebelumnya seperti "Cara Membuat Widget Melayang Facebook Like Box". widget ini juga berguna untuk:
1. Menampilkan Status twitter anda di blog
2. Mempromosikan blog anda melalui twitter
3. Sebagai cara mempercantik blog anda.

Singkat cerita :) cara memasang widget twitter adalah sebagai berikut:

1. Masuk ke situs twitter, atau cepatnya masuk ke link berikut: https://twitter.com/about/resources/widgets. 
2. Kemudian pilih "situs web saya".
3. Pilih "widget profile" > pada kolom nama pengguna, isikan ID twitter anda.
4. Anda bisa mengatur tampilan widget twitter anda melalui tab Preferensi, Tampilan dan ukuran.
5. Setelah dirasa cukup Klik tombol "selesai & ambil kode".
6. Ada dua pilihan yang diberikan yaitu mengambil atau copy kode scriptnya dan nantinya dipasang/paste sendiri pada gadget blog anda, atau dengan meng-klik tombol "add to blogger" yang secara otomatis nanti dituntun masuk ke gadget blog anda secara otomatis.
7. Dari langkah 6 di atas misalkan anda memilih copy code scrpitnya cara pasang nya adalah pada langkah 8 berikut:
8. Masuk dan log in ke akun blogspot anda.
9. Klik tombol rancangan > tata letak
10. Tambah gadget > HTML/JavaScript
11. Kemudian copy kode script pada langkah 6 tadi.
12. Simpan pekerjaan anda dan lihat hasilnya..

Sekarang bagaimana cara memasang widget burung twitter melayang di blog? caranya adalah:

1. Ikuti langkah 8 sampai 10 pada penjelasan di atas. 
2. Copy kode di bawah ini dan ikuti seperti langkah 11 dan 12 di atas.

Widget Twitter Terbang Di Blog burung twitter warna biru

        <script src="http://imemovaz.googlecode.com/files/tripleflap.js" type="text/javascript">
</script>
        <script type="text/javascript">
        var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7up4iu5gSiiOQnU-f1QFDaim_YXXHkpIex8EDyiWf2wcC1DFk26Lh08vDkmJXqO5pSW9yGbxOCjFCyFpSCHk0suNKA08h365NCOUMCgLDCWadp7Bs1MTXk_-lUkHe89jpHVWJXbYk0IM/"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit();
      
</script>

Widget Twitter Terbang Di Blog burung twitter warna merah

        <script src="http://imemovaz.googlecode.com/files/tripleflap.js" type="text/javascript">
</script>
        <script type="text/javascript">
        var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDL9v8uXg3sbow0Bhzrk_-_nroCMaUHsiSoJ96Sl9nYo8VKzfUM8JJsBxAop6wCLgp_uBpjh3RhdXo4O8rxVDcU7n0BCd2OVDOJWLOXU3GnkocgeP38MBxD3ta9kbfkL1JXOUPpCZJgjU/"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit();
      
</script>

Keterangan: tulisan yang berwarna merah, silahkan ganti dan sesuaikan dengan alamat akun twitter dan alamat situs blog anda.

Demikian kupas tuntas cara memasang widget twitter blogspot - blogger, baik yang sifatnya diam (status twitter) atau dengan animasi burung twitter yang terbang di blog. Bagaimana dengan blog anda, apakah sudah dipasang twitternya?

Cara Mempercantik Blog

Banyak cara mempercantik blogspot anda, template bawaan dari blogger kalau kita bisa mempercantiknya dengan tepat maka akan terlihat lebih professional dan pengunjungpun  akan betah berlama-lama singgah di blog anda. Trik mempercantik blog atau memperindah blog anda  dapat dimulai dengan pemberian Header yang tepat, penambahan beberapa menu navigasi, widget,  efek-efek blog, dan lain sebagainya.

Cara mempercantik  dan memperindah blogspot dengan pemberian header yang tepat. 
Pada umumnya sebuah blog atau website mempunya sebuah header, baik itu berupa teks atau sebuah gambar. Header ini sangat penting dalam sebuah blog atau website, kenapa? Karena sebuah header akan pertama kali dilihat oleh pengunjung ketika masuk ke blog anda sebuah header juga berfungsi sebagai penyampai informasi awal tentang isi keseluruhan blog anda. header yang cantik dan informative  maka pengunjung akan penasaran ingin segera mengetahui apa isi blog anda. Bagaimana cara memasang header pada blogspot , silahkan anda baca kembali artikel sebelumnya tentang  membuat header blog dengan gambar. 
 

Cara mempercantik dan memperindah blogspot dengan widget. 

Banyak sekali widget blogspot yang bisa anda pakai, baik widget bawaan dari blogger ataupun widget yang disediakan oleh pihak ketiga. Widget-widget yang biasa dipakai oleh para blogger seperti: new article, popular post, random post, guest book atau buku tamu, widget social bookmark dan network (facebook, twitter, lintas berita, dll), statistic, banner, dan lain-lain.  Artikel yang pernah saya tulis berkaitan dengan widget seperti: 4 Cara mempercantik blogspot dengan widget, cara memasang widget twitter blogspot, Cara membuat buku tamu di blogspot, dll.

 

Cara mempercantik memperindah blogspot dengan efek blog. 

Pastikan anda bijak dalam memilih efek untuk blog anda. Efek-efek blog yang berlebihan bisa membuat pengunjung malah tidak betah karena blog menjadi terlalu rame, juga terkadang efek blog bisa membuat blog anda menjadi berat dan lama untuk loading. Efek blog yang sering ditemui seperti: mengganti kursor menjadi icon tertentu atau di tambah dengan efek bintang bertaburan, efek salju, efek link berwarna- warni, efek text, dan lain-lain. Artikel yang pernah saya buat seputar efek blog seperti:  flash animasi dengan jam, efek salju pada blog, cara mengganti kursorblog.

 

Demikian sedikit pembahasan cara mempercantik blogspot yang bisa saya sampaikan, mudah-mudahan blog anda semakin cantik dan indah sehingga pengunjung blog anda semakin betah.

Menghilangkan Navbar Blog

Sebelum kita mengulas bagaimana cara menghilangkan navbar blogspot, alangkah baiknya kita tau apa itu Navbar blogspot? bagi yang Newbie mungkin sebagian masih tidak tau yang namanya Navbar ini. Oke langsung saja, Navbar Blogspot adalah suatu tab atau frame yang berada di bagian atas sebuah blog, ukurannya sih kecil dan navbar ini berfungsi untuk memudahkan para blogger untuk log in ke blogger, menginformasikan blog yang dikunjungi ke pihak blogger apabila blog tersebut mengandung yang tidak diizinkan oleh pihak blogger

seperti: melangggar TOS blogger, mengandung unsur SARA dan Fornografi. Sebenarnya sih menghilangkan Navbar ini bisa jadi melanggar dari TOS blogger sendiri, jadi pikir-pikir dulu yah..^_^ sebelum menghilangkannya. Baca TOS nya lagi yah..
 
Gimana sudah baca TOS nya blogger? mau keukeuh (apa itu keukeuh ya..?) menghilangkan Navbar blogspot, ya sudah.. caranya gampang kok, anda 2 (dua) cara untuk menghilangkannya yaitu: menambahkan pada style sheet CSS nya dan dibawah kode <body>, jelasnya:

kode pada style sheet CSS:

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

kode dibawah kode <body>

<style type='text/css'>
#navbar-iframe {display:none;}
</style>

Lebih jelasnya lagi:

• Sign in pada blogger anda 
• Rancangan --> edit HTML 
• Download template dulu untuk berjaga-jaga jikalau ada masalah saat edit kode 
• centang "Expand Template Widget" 
• cari kode </style> dan letakan kode dibawah ini tepat diatasnya: (template klasik)

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

• Atau cari kode ]]></b:skin>  dan  letakan kode dibawah ini tepat diatasnya: (template baru)

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

• Jangan lupa simpan pekerjaan anda.

Mengganti Favicon Blog

Sebelum kita memulai pembahasan cara mengganti favicon pada blog-spot, apakah sobat tau apa itu favicon? Fungsinya apa sih? Nih.. bagi yang belum tau, Favicon adalah kependekan dari Favorit icon, yaitu sebuah gambar kecil berbentuk bujur sangkar yang berada di bagian atas sebelah kiri link address blog sobat. Ekstension file gambar yang digunakan adalah *.ico, file ico adalah khusus untuk favicon
dan biasanya tidak semua image editing yang support untuk ekstension *.ico ini, salah satunya adalah adobe photoshop, namun tidak perlu khawatir dalam cara mengganti favicon blog ini karena sekarang banyak tool-tool penyedia convert online dari file .jpg, .png, dll menjadi *.ico.

fungsi dari gambar favicon itu sendiri adalah adalah sebagai jati diri blog anda atau ciri khas blog anda, sehingga semakin bagus favicon anda makan blog anda semakin menarik dilihat oleh pengunjung.
Nah sekarang kita akan mencoba merubah gambar favicon standar (gambar bawaan ) dengan yang baru tanpa merubah tau mengedit melalui HTML, caranya adalah:

1. Jika sobat belum mempunyai gambar untuk favicon dengan ekstensi file .ico maka untuk membuatnya sobat bisa mengunjungi salah satu penyedia favicon convert ekstensi ke .ico yaitu http://www.icoconverter.com/ kemudian ikuti langkah-langkah dalam situs tersebut sehingga sobat mempunyai  gambar dengan ekstension file .ico 
2. Setelah punya gambar favicon dengan ekstension .ico, selanjutnya buka blogger dan log in dengan akun sobat 
3. klik rancangan  --> klik edit laman 
4. Pada halaman laman bagian atas sebelah kiri cari dan Klik edit Favicon setting 
5. Setelah klik akan muncul window baru yaitu konfigurasi favicon, kemudian unggah gambar favicon yang sudah sobat siapkan. 
6. Setelah selesai Jangan lupa simpan pekerjaan sobat 
7. Lihat hasilnya pada blog sobat, apakah favicon barunya sudah baru?

Demikian 7 langkah cara mengganti favicon pada blog yang sobat bisa coba..

Mengganti Kursor Blog

Agar blog terlihat lebih bervariasi, terkadang para blogger mengganti tampilan kursor blog nya ke kursor sesuai yang disenanginya. secara default kursor blog adalah berbentuk panah putih, cara mengganti kursor blog bermacam-macam bisa dengan ikon gambar atau menambahkan efek seperti bintang berjatuhan dll. Apabila anda tidak punya gambar pengganti untuk kursor anda, anda bisa memanfaatkan http://www.totallyfreecursors.com, karena pada situs tersebut terdapat ratusan/ribuan kursor yang unik.

Untuk menggantinya, berikut caranya:

• Log in ke Blogger anda 
• Klik Rancangan > Edit HTML 
• Cari kode </head> 
• Letakan kode CSS dibawah ini diatas </head>

<style type="text/css">
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/cool1.gif"), auto;}
</style>

• Jangan lupa simpan pekerjaan anda

Catatan:
Teks yang berwarna kode diatas adalah alamat kursor baru, anda bisa menggantinya dengan alamat kursor yang akan anda gunakan.
Demikan cara menganti kursor pada blog, semoga berhasil, Happy blogging

Efek Daun Berjatuhan Pada Blog

Satu lagi artikel cara membuat efek pada blog yaitu cara membuat efek daun berjatuhan di blogspot, cara ini sangat gampang sekali di praktekan dan mesih menggunakan javascript. Tapi perlu diingat sesuai dengan artikel saya tentang cara mempercantik blogspot, disarankan anda bijak menggunakan efek blogspot ini, jika blog anda sudah menggunakan efek lain seperti efek salju berjatuhan di blog, jikalau terasa berat loading blog anda, maka pilihlah salah satu efek saja.

Berikut cara membuat efek daun berjatuhan pada blogspot anda.

1. Pastikaln anda sudah login ke blogger anda

2. Pada halaman dashboard klik rancangan > Edit HTML

3. Jangan lupa centang Expand widget template.

4. Dengan menggunakan Ctrl+ F, atau tekan F3 cari kode</head>

5. Copy code dibawah dan letakan kode tersebut tepat diatas kode </head> tadi.

<script src='http://arti.master.irhamna.googlepages.com/daun.js'/>

6. Simpan pekerjaan adan dengan menekan tombol SAVE

7. Lihat hasilnya.. bagus kan? ^_^

Demikianlah ke-7 langkah cara membuat efek daun berjatuhan pada blogspot anda, sangat mudah diikuti atau dipraktekan. Selamat mencoba dan Happy blogging.

Membuat Scrollbar Pada Blog

Okey Langsung saja Sobat kali ini saya ingin mengasih tutorial Membuat Kotak Scrolling si Blog, memang sih tutorial ini udah lama banget mungkin yach,,tapi tidak apa-apa dech berhubung saya temen-temen di kampus sering merequest tentang Bagaimana sih membuat Kotak Scrolling di Blog.
Nach Malam ini saya Akan Memberikan Tutorial-Tutorialnya Sebagai Berikut :

Untuk membuat kotak ini caranya sangat mudah:

1. Login dulu Account Blogger. 

2. Pilih menu Design -> Page Elements
2. Pilih Add a Gadget lalu klik HTML/Javascript

3. Masukkan kode yang dibawah ini:

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Letakkan Teks atau Kode HTML</div>

Jika Anda ingin menambahkan teks kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal dengan teks yang ingin Anda tampilkan.

Sebagai contoh, saya memasukkan:

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Kotak Scrollbar buatan Duta XP</div>

Keterangan :
Untuk mengganti ukuran Kotak Scrollbar anda tinggal mengganti angka yang berwarna Merah.


4. Save Templates

Cara Membuat Background Blog Bergambar

bosen ya kalau warna background blog kita hanya berupa warna saja, tentunya kurang gimana gitu, nach tenang saja gan kali ini saya akan memberikan sebuah tutorial Bagaimana Cara Membuat Background Blog Bergambar.

Untuk lebih jelasnya ikuti tutorial berikut ini :

1.       Carilah dulu background gambar blog yang ingin kamu pasang nantinya.

2.       Bila sudah ketemu copy link (alamat) dari gambar tersebut Klik Kanan (gambar), Copy Link Image.

Bila alamat URL file gambar yang anda inginkan sudah di dapat. Kini kamu bisa memasanganya pada template blog. Caranya sama, kamu harus melakukan perubahan pada kode HTML, berikut caranya :

1.       Login ke Blogger.

2.       Pilih menu Tata Letak à Edit HTML.

3.       Pada kotak Edit Template, cari kode CSS yang berkepala body.

Body {

Background:#696969

....

....

4.       Pada baris background, ganti kode yang berwarna Biru diatas dengan URL file gambar yang sudah agan siapkan tadi.

Misalnya seperti di bawah ini :

Body {

Background:url(http://static1.grsites.com/archive/texture/lgren.jpg);

........

........

5.       Klik tombol SAVE TEMPLATE.

Sekiranya itu saja tutorial yang bisa saya berikan ke

Memasang Iklan di Bawah Judul

kita tidak hanya bisa membuat atau menaruh iklan dibawah kalimat terakhir artikel (atau di atas komentar), kita juga bisa memasang iklan di atas kalimat awal artikel, atau tepatnya di bawah judul.

Iklan baru akan di tampilkan setelah kamu membaca dengan lengkap, yaitu dengan mengklik Read More atau mengklik judulnya, untuk lebih jelasnya silahkan ikuti langkah berikut :

1.       Login pada Blogger

2.       Masuk pada halaman Tata Letak à Edit HTML.

3.       Klik atau Centang pada bagian Expand Template Widget.

4.       Cari kode seperti berikut :

<data:post.body/>

atau

<p><data:post.body/></p>

5.       Letakkan kode iklan agan di atas kode “<data:post.body/>” atau kode “<p><data:post.body/></p>”.

6.       Jika sudah, klik tombol SAVE TEMPLATE.

7.       Sekarang coba lihat bagaimana Hasilnya.

Cara Membuat Buku Tamu di Samping Kiri dan Kanan Blog

Duta XP, Cara Membuat Buku Tamu di Sisi Kanan atau Kiri Blog
Hai Sobat Blogger apa kabar ??? Berhubung tadi saya mencoba membuat shoutbox di blog saya dan berhasil tampil,sekarang giliran saya membagi-bagikan hasilnya atau tutorial-tutorialnya kepada sobat sekalian. Mungkin Sebaiknya baca juga tentang Bagaimana Membuat Breaking News di Blog.
Membuat Shoutbox/ Buku Tamu memang bisa di buat dengan berbagai cata ada yang langsung kita dapatkan di penyedia layanan shoutbox itu sendiri dan tinggal memasang script itu di blog kita, ada juga yang meletakkan dengan Tombol atau gambar floating, ada juga yang meletakkan dengan Tombol Pop Up. Tapi Kali ini kami akan mempostingkan Bagaimana Cara Memasang Buku Tamu di Sisi Kanan atau Kiri di Blog anda.









Berikut Ini Tutorialnya :
Pertama :
Login dulu ke Account Blogger. 

Kedua :
Masuk ke Menu Rancangan / Design pada Dashboard Anda

Ketiga :
Untuk Meletakkan Buku Tamu Disisi Kanan Blog :
Tambahkan Script/ Kode berikut di blog Sobat

<!-- right hidden chatbox by http://idesainer.blogspot.com/ START --> <style> #hcr { position:fixed;top:100px; z-index:+1000; } * html #hcr {position:relative;} .hcrtab {height:100px;width:30px; float:left; cursor:pointer; background:url('http://i1227.photobucket.com/albums/ee440/danghilal/idesainer/shoutbox-1.png') no-repeat; } .hcrcontent { float:left; border:2px solid #003e82; background:#f3f6f7; padding:10px; } .hc-credit {font-size:9px} .hc-credit a {text-decoration:none} </style> <script type="text/javascript"> function showHidehcr(){ var hcr = document.getElementById("hcr"); var w = hcr.offsetWidth; hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0); hcr.opened = !hcr.opened; } function movehcr(x0, xf){ var hcr = document.getElementById("hcr"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcr.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);} } </script> <div id="hcr"> <div class="hcrtab" onclick="showHidehcr()"> </div> <div class="hcrcontent"> <!-- KODE SHOUTMIX ANDA DISINI --> <br /> <div class="hc-credit"> <span style="float:left"> <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE --> <span > <span > Get this</span> <a href="http://idesainer.blogspot.com/2012/02/cara-membuat-buku-tamu-di-sisi-kanan.html" target="_blank"> <span class="Apple-style-span" > Desaign1</span> </a></span> <span style="float:right"> <a href="javascript:showHidehcr()"> [close] </a> </span> </div> </div> </div> <script type="text/javascript"> var hcr = document.getElementById("hcr"); hcr.style.right = (30-hcr.offsetWidth).toString() + "px"; </script> <!-- right hidden chatbox by http://idesainer.blogspot.com/ END -->

Untuk Memasang buku tamu di sisi sebelah kiri blog anda :
Tambahkan Script/ Kode berikut di blog Sobat

<!-- left hidden chatbox by http://idesainer.blogspot.com/ START --> <style> #hcl { position:fixed;top:100px; left:0px; z-index:+1000; } * html #hcl {position:relative;} .hcltab {height:100px;width:30px; float:left; cursor:pointer; background:url('http://i1227.photobucket.com/albums/ee440/danghilal/idesainer/shoutbox-1.png') no-repeat; } .hclcontent { float:left; border:2px solid #790909; background:#f3f6f7; padding:10px; } .hc-credit {font-size:9px} .hc-credit a {text-decoration:none} </style> <script type="text/javascript"> function showHidehcl(){ var hcl = document.getElementById("hcl"); var w = hcl.offsetWidth; hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0); hcl.opened = !hcl.opened; } function movehcl(x0, xf){ var hcl = document.getElementById("hcl"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcl.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);} } </script> <div id="hcl"> <div class="hclcontent"> <!-- KODE SHOUTMIX ANDA DISINI --> <br /> <div class="hc-credit"> <span style="float:left"> <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE --> <span > <span > Get this</span> <a href="http://idesainer.blogspot.com/2012/02/cara-membuat-buku-tamu-di-sisi-kanan.html" target="_blank"> <span class="Apple-style-span" > Desaign1</span> </a> </span> </span> <span style="float:right"> <a href="javascript:showHidehcl()"> [close] </a> </span> </div> </div> <div class="hcltab" onclick="showHidehcl()"> </div> </div> <script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script> <!-- left hidden chatbox by http://idesainer.blogspot.com/ END -->

Keterangan :
1. Ubah Kode yang berwarna Merah dengan kode buku tamu / shoutbox Anda
2. Jika Anda Belum Punya Kode Shoutbox anda bisa membuatnya disini atau di Fibox.
Terakhir :
Save Template / Rancangan Blog Anda