Tutorial Blog

Belajar blog, belajar SEO, belajar Internet, Tekhnologi, Internet dan komputer

Site Map Rileknet

Kompres CSS untuk loading cepat


Kompres kode CSS untuk mempercepat loading blog, siapa yang tidak mau blognya mempunyai loading yang cepat, hargi gini geto lho banyak persaingan antara 1 blogger denganblogger lainnya yang rebutan traffic. Ya salah satunya meningkatkan kecepatan loading blog ,karena para pengunjung paling males jika menemui blog yang loadingnya minta ampun beratnya dan jangan berharap para pengunjung akan kembali lagi ke blog kamu. Walaupun posisi blog kamu pada hasil pencarian sering masuk 10 besar namun dengan melihat alamat blog kamu pengunjung tidak akan meng-klik di hasil pencarian untuk mengunjungi blog kamu, ih . . . Gak mau deh kalo geto, amit-amit.

Untuk mengatasi hal tersebut blog tutorial blogtegal mempunyai trik untuk masalah kecepatan loading blog yakni dengan meng-kompres kode CSS pada template blogspot. Mungkin sudah banyak tutorial tentang cara mengkompres kode CSS namun pada kesempatan ini blogtegal akan berbagi trik yang berbeda tentang kompres-kompresan kode CSS, walaupun tidak jauh-jauh amat dari kebanyakan tutorial yg bertebaran.
Ada dua cara tentang meng-kompres kode css:
  1. Kompres kode CSS pada umumnya.
  2. Kompres kode CSS melalui trik blogtegal
Mari kita bahas satu-persatu.

1. KOMPRES KODE CSS PADA UMUMNYA

Untuk trik yang pertama ini adalah trik yang pada umumnya para bloggerlakukan.
  • pertama cek dulu kecepatan loading blog kamu untuk membandingkan.
  • login ke dashbord blog kamu.
  • pilih Rancangan »» Edit HTML
  • download template lengkap dulu barangkali terjadi kesalahan (wajib / harus)
  • Kemudian blok dan POTONG semua kode CSS dari setelah kode <b:skin><![CDATA[ sampai pada kode sebelum ]]></b:skin> 
    Kalau kurang jelas begini, potong kode mulai dari
    <b:skin><![CDATA[ disini mulainya | . . . . . . . . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . . . . . . KODE-KODE CSS. . . . . . . .
    . . . . . . . . . . . . . . . . . . . . . . . . .
    sampai disini |
    ]]></b:skin>
  • buka situs CSS compressor disini
  • kemudian setting pengaturannya seperti berikut:
    ¬- Compression mode = pilih 'Normal'
    ¬- Comment handling = pilih 'Don't strip any comments'
  • pastekan kode CSS yang telah di potong tadi pada kotak kosong.
  • kemudian klik Compress-It
  • kemudian copy hasil kompresan tadi dan tempatkan pada template kamu diantara kode
    <b:skin><![CDATA[
    Pastekan disini kode CSS yang telah di kompres tadi
    ]]></b:skin>
  • terakhir klik SIMPAN
Sekarang bandingkan dengan loading blog kamu sebelum di kompres, awak yakin pasti lebih cepat, kalau lebih lambat loadingnya berarti emang koneksiinternet kamu yang LOL cara kompres kode CSS untuk meningkatkan kecepatan loading blog

2. KOMPRES KODE CSS MELALUI TRIK BLOGTEGAL

Untuk trik yang kedua ini tidak jauh berbeda dengan trik yang pertama hanya saja pada saat meng-kompres kode css pengaturannya di bedakan. Dan trik blogtegal ini agak ribet dan rumit, ini hanya di khususkan untuk kalangan blogger dengan tingkat level menengah keatas, namun jika para newbie yang mau pake trik juga boleh. Syarat utama untuk memakai trik yang kedua ini adalah pastikan kamu tidak akan merubah tampilan layoutblog kamu baik dari CSS sendiri maupun dari kode HTML. Atau syarat lainnya adalah menyimpan template kamu yang terakhir jika sewaktu-waktu kamu ingin menambahkan menu atau merubah layout blog, setelah ditambah atau di perbaiki, ulangi pengompresan seperti trik yang kedua ini. cara kompres kode CSS untuk meningkatkan kecepatan loading blog bingung kan dg trik yang kedua ini. Habis bingung menyusun kata-katanya dan emang sengaja di bikin bingung cara kompres kode CSS untuk meningkatkan kecepatan loading blog Jika siap bingung lets do it.

Seperti cara diatas yakni memotong kode CSS diantara kode <b:skin><![CDATA[ dan kode ]]></b:skin> Dan pastikan kamu telah menandai kotak kecil pada  Expand Widget Template.
  • masuk ke situs CSS compressor disini
  • setting pengaturannya seperti berikut:
    ¬- compression mode = pilih 'Super Compact'
    ¬- comment handling = pilih 'Strip all any comments'
  • kemudian tempatkan hasil kompresannya diantara kode
    <b:skin><![CDATA[
    Pastekan disini kode CSS yang telah di kompres tadi
    ]]></b:skin>
  • kemudian potong kembali pada kode diantara kode
    <body>
    Bla. . . . .bla. . . . .bla. . . . . Bla . . . . .
    </body>
  • buka halaman berikut dan kompres kode tersebut disini namanya HTML OPTIMIZER
  • copy dan pastekan kode hasil kompresan tadi diantara kode
    <body> dan </body>
  • terakhir klik SIMPAN
Sekarang bandingkan dengan loading blog sebelum di kompres dengan trik yang pertama dan dengan trik yang kedua, lebih cepat mana? Silahkan dan tentukan pilihan mana yang kamu suka. Selamat berexperimen. Pusing-pusing dah loe cara kompres kode CSS untuk meningkatkan kecepatan loading blog

Cara Mengetahui Nilai Blog dalam Dollar


Cara Mengetahui Nilai Blog dalam Dollar


Bookmark and Share
Selain mengetahui nilai blog dalam rupiah melaluiBIZinformation Indonesia, kita juga dapat mengetahui berapa nilai blog kita dalam dollar dengan memanfaatkan layanan dari web lainnya, salah satunya yaitu YOUR WEB$ITE VALUE.COM. Situs ini menghitung nilai blog atau website berdasarkan banyak faktor seperti jumlah halaman yang terindeks di search engine atau mesin pencari, jumlah link yang mengarah ke website, kualitas website, popularitas website, dan lain-lain.

Untuk mengetahui nilai blog dalam dollar, silakan simak langkah-langkahnya di bawah ini.

1. Kunjungi situs YOUR WEB$ITE VALUE.COM dihttp://www.yourwebsitevalue.com/

2. Silakan isi URL blog Anda pada tempat yang disediakan dan klik tombolEstimate Website Value.


3. Silakan tunggu beberapa saat, YOUR WEB$ITE VALUE.COM sedang menghitung nilai blog Anda dengan 10 tahapan yaitu:
Step 1/10: Detecting Website
Step 2/10: Initial Analysis
Step 3/10: Checking Site Usage
Step 4/10: Popularity, Recognition, Longevity
Step 5/10: Checking Search Engines Recognition
Step 6/10: Checking Inlink
Step 7/10: Checking Search Engines Qty
Step 8/10: Checking Search Engines Population
Step 9/10: Checking Inlink #2
Step 10/10: Calculating All Results

4. Kemudian akan muncul nilai dari blog Anda dalam dollar serta detail nilai lainnya seperti Value of History Graph dan Analysis.


5. Bila Anda ingin memasang bannernya, silakan pilih banner yang Anda mau, kemudian copy kodenya dan paste di blog Anda.


6. Bila ingin memasang Search Box, silakan copy kodenya dan paste di blog Anda.


Cara Menampilkan Navbar Blogger Auto Hide


Bookmark and Share
Navbar auto hide maksudnya navbar akan tersembunyi atau tidak terlihat, namun begitu kursor mouse mengenai bagian atas blog di tempat Navbar berada maka Navbar tersebut akan muncul kembali. Salah satu kegunaan Navigasi bar atau Navbar ini adalah untuk mempercepat akses masuk atau login ke akun Blogger. Selain itu masih ada manfaat lainnya yang bisa diambil dengan memasang Navbar ini pada blog.

Nah, di bawah ini merupakan langkah-langkah untuk membuat Navbar tampil secara auto hide pada blog. Bila di template blog Anda Navbarnya sudah hilang, maka Anda harus menampilkan Navbar tersebut terlebih dahulu.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Cari kode ]]></b:skin>. Tekan tombol Ctrl + F pada keyboard kemudian ketikkan kode yang dimaksud untuk mempercepat pencarian.

4. Kemudian copy kode di bawah ini lalu paste di atas kode ]]></b:skin>.
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

5. Klik tombol SIMPAN TEMPLATE.

Cara Menghemat Pulsa Saat Browsing di Ponsel

Bookmark and Share
Browsing internet dengan ponsel (telepon selular/handphone) sekarang sudah sangat mudah. Apalagi sekarang banyak merek ponsel berfitur internet ditawarkan dengan harga yang relatif terjangkau. Operator pun berlomba-lomba menawarkan koneksi internet dengan tarif yang bersaing. Untuk menghemat pulsa saat browsing di ponsel, gunakanlah kartu yang menawarkan tarif per kilobyte (kb) paling murah. Selain itu gunakan aplikasi Opera Mini. Aplikasi java yang gratis ini mempunyai banyak keunggulan bila dibandingkan dengan browser bawaan ponsel/hp. Dengan menggunakan Opera Mini dapat menghemat pulsa karena saat mengakses halaman web, Opera Mini memroses, mengompresi dan mengubah halaman tersebut di server-nya dengan besar data yang sudah berkurang dan menyesuaikan tampilannya agar cocok dengan ukuran layar ponsel.

Untuk mendapatkan Opera Mini ini dapat diunduh di http://m.opera.commelalui browser bawaan ponsel. Agar dapat menghemat banyak pulsa, lakukan pengaturan Opera Mini dengan cara klik Menu > Alat > Pengaturan. Hilangkan tanda centang di "Muat gambar", beri tanda centang di "Tampilan posel" kemudian klik Simpan. Dengan pengaturan ini, Opera Mini hanya akan menampilkan teks di halaman web. Bila ada halaman web yang akan sering dibuka di kemudian hari, manfaatkanlah fasilitas Bookmark agar di lain hari dapat mengakses halaman tersebut dengan lebih cepat dan lebih hemat. Klik Menu > Penanda. Silakan diberi nama sesuai selera dan simpan halaman web tersebut.

Cara membuat RSS Feed untuk meningkatkan page rang


RSS Feed bermanfaat untuk berlangganan postingan blog favorit, RSS Feed dapat dipasang di blog wordpress. Dengan  RSS feed pengunjung wesite kita dapat langsung melihat apa yang baru dari isi website kita, bahka mereka dapat mendaftar agar terkirim email otomatis bila kita mengupdate isi website kita.  Contoh Rss Reed saya adalah http://feeds.feedburner.com/sinarweb

Cara memasang atau membuat RSS Feed sebagai berikut :
* Akses  www.feedburner.com.
* Masukkan username dan password gmail Anda.
* Setelah itu akan tampil My Feeds.  Tuliskan URL blog anda Anda  (misal sinarweb.com),  Bila Anda menghendaki memasukkan video berupa podcast, centang I am a podxaster! Bila tidak, klik Next.
* Setelah muncul tampilan Wellcome! Let us burn a feed for you. Pada kolom Feed Title, tuliskan judul feed Anda. Misalnya Blog Anda Feed.  Pada kolom Feed Adress, ketikkan alamat Feed Anda. Misalnya Blog Anda sinarweb.com, Lalu klik Next.
* Lalu muncul tampilan Congrat!.  Lalu klik Next untuk membuat Traffic Statistics.  Centang kotak-kotak yang ada sesuai selera Anda. Setelah itu klik Next.
* Lalu muncul tampilan yang menyatakan You have succsessfully updated the feed…
* Klik Publicize untuk membuat tombol berlangganan yang memudahkan pengunjung web anda untuk berlangganan. Lalu klik Friendly Graphics.
* Klik Chicklet Chooser
* Lalu Copy kode HTML yang tampil
* Login ke worpress Anda.  Klik appereance,  klik widget. Pilih text lalu drag ke sidebar,  Klik Save.
* Klik tanda segitiga widget text tersebut.
*kolom Tittle diisi judul atau kosongkan saja, lalu Paste kode HTML pada kolom di bawahnya.
* Klik Save Changes.
* Lihat tampilannya dengan mengunjungi blog anda.
Demikian itu cara membuat RSS feed di blog wordpress. Bisa juga dipasang di wordpress gratisan Anda.

Mendesain dengan Multimedia Genggam Jari (HP)

PERKEMBANGAN teknologi telekomunikasi informasi sekarang ini begitu cepat, karena diaplikasikan untuk kebutuhan pasar konsumen yang luas. Dari telepon kabel menjadi telepon satelit atau seluler, dari satu fungsi menjadi multifungsi, dari model besar menjadi alat komunikasi genggam jari (fleksibel dan modem).
Multemedia genggam jari (Handfhone atau HP) dasawarsa sekarang semakin memasyarakat, karena harganya semakin terjangkau. penggunaannya dari pelajar sampai direktur, dari tukang sampai pedagan, dari pembantu sampai presiden.
Diantara fungsi majemuk alat komunikasi genggam jari yaitu media visual (fotografi digital) dan pengolahan foto sederhana (editor foto) yang sudah menyatu dengan perangkat tersebut. pemanfaatan media visual ini bagi pemakaiannya berkaitan dengan citra diri, dokumentasi, hal rekreatif dankreativitas. bisa dikatakan revolusi visual ini akan lebih bermanfaat dan berguna bila digunakan untuk hal-hal yangn positif, misalnya un tuk berkreasi (kreativitas). bagi pelajar atau siapa pun, media ini dapat di manfaatkan untuk peningkatan studi, misalnya di bidasng mata pelajaran biologi, studi lingkungan,jurnalistik, atau seni rupa dan desain atau untuk materi pelajaran lainnya.
penulis mengembangka fasilitas multmedia di HP ini berkaitan dengan fotografi digital, sebagai media komunkasi genggam jari yang biasanya diperlukan sebagai alat komunikasi dan sarana rekreatif juga bisa untuk mengasah kreativitas di bidang visual, dalam hal ini patchtografi desain atau desain dari fotografi. Sebearnya projek patchtografi (patchwork -- kain tambal -- dan fotografi, digabungkan menjadi patchtografi) ini sudah dikerjakan sekitar 10 tahun yang lalu, sewaktu dunia fotografi masih menggunakan media film atau seloid.
Sehubugan dengan prosesatau aplikasinyaagak lama dan memerlukan perangkat lain (komputer) dan biayanya lumayan. sekarang dengan HP --multimedia genggam jari --yang berfasilitas foto dan editor foto, perencanaan patchtografi desain ini dapat dikerjakan dalam suasana rekreatif dan berbiaya tidak mahal.
patchtografi desain penulis kembangkan untuk kebutuhan beragam. pola dasarnya dari memotret (foto), kemudian bisa di potong atau di-cropping, diperkecil, atau disusun berulang-ulang (repeat), dan divariasikan sesuai dengan rancangan nya atau desainnya.***

         yayat Irrayanto, penggagas komunitas pemotret genggam jari dan "patchtografi" desain. salah seorang pendesain ragam hias Mushaf Al Quran Mesjid Istiqlal, Indonesia.

Tips Otomatis Merubah Warna Background Blog Sesuai Keinginan Pembaca

Alhamdulillah Malam ini saya bisa membuat postingan baru lagi, setelah Blogwalking kesana kemari saya tertarik sama salah satu blog yg saya temui, di situ tersedia form untuk memilih theme warna background sesuai dengan keinginan pembaca, muungkin aja ada pembaca yang tidak suka dengan warna background Template kita (Ini Khusus blog yang warna backgroundnya memakai warna dari HTML bukan yang memakai image/gambar),  klo image saya belum nyoba masih, silahkan sobat coba sendiri jika template blog sobat memakai image. Baiklah sekarang saya ingin membuat tutorial temtang Merubah Warna Background Blog Sesuai Keinginan Pembaca. berikut langkah langkah-langkahnya:
1. Login ke Blog Sobat (www.blogger.com)
2. Design (Rancangan)
3. Akan langsung active di menu elemen laman, klik Add a Gadget (Tambah Gadget)
4. Cari dan pilih  HTML/JavaScript
5. Copykan Kode Script di bawah ini

<div class="widget-content">
<center><b>Silahkan pilih warna Background kesukaan sobat</b></center>
<br/>
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
<table border="1" width="100%" height="20">
<tbody><tr>
<td onclick="bgChange('#8B008B')" bgcolor="#8B008B">
</td>
<td onclick="bgChange('#9400D3')" bgcolor="#9400D3">
</td>
<td onclick="bgChange('#008080')" bgcolor="#008080">
</td>
<td onclick="bgChange('#808080')" bgcolor="#808080">
</td>
<td onclick="bgChange('#CD853F')" bgcolor="#CD853F">
</td>
<td onclick="bgChange('#2F4F4F')" bgcolor="#2F4F4F">
</td>
<td onclick="bgChange('#DC143C')" bgcolor="#DC143C">
</td>
<td onclick="bgChange('#4B0082')" bgcolor="#4B0082">
</td>
<td onclick="bgChange('#A52A2A')" bgcolor="#A52A2A">
</td>
</tr></tbody></table>
</div>
6. Simpan 
7. Silahkan sobat drag atau pindahankan dimana letak/posisi gadget ingin di lestakkan.
keterangan : 
  • Teks yang berwarna biru bisa sobat ganti dengan kata-kata kesuakaan sobat.
  • Teks yang berwarna merah silahkan sobat ganti dengan warna yang ingin sobat sediakan di Blog sobat (disarankan memilih warna-warna yang cocok atau sesuai dengan template), misalkan warna tulisan di blog sobat warna hitam, maka jangan membuat pilihan warna hitam juga), ntar malah ga keliatan tulisannya.. hehehe.
  • Jika ingin mangurangi pilihan warna, sobat hapus saja baris-baris pilihan warnanya warna, <td onclick="bgChange('#A52A2A')" bgcolor="#A52A2A"> </td>, dan misalkan sobat ingin menghapus 1 warna, hapus saja baris <td onclick="bgChange('#A52A2A')" bgcolor="#A52A2A"> </td>, dan jika ingin menambah pilihan warna silahkan copykan baris code
Selesai deh, gampang aja kan, Ga ada salahnya kita menyiapkan suatu menu yang bisa membuat para pembaca senang dengan memilih warna kesukaan mereka.  demikian sedikit tips dari saya.

Semoga Bermanfaat

Read more: http://www.ainisastra.com/2011/03/merubah-warna-background-blog-sesuai.html#ixzz1QpCFngFb

Cara menghilangkan gambar obeng dan tang pada blog



Hari ini aku posting tentang cara ngilangkakan (baca :menghilangkan) sesuatu dari blog lagi nih ..
Setelah kemaren aku posting tentang cara ngilangin (kotak) yang muncul saat membuka salah satu label, sekarang aku akan berbagi tentang cara ngilangin gambar tang sama obeng di blog. Sebenarnya ini masalah sepele, tetapi karena teman teman banyak yang tanya, jadi kuposting aja ya .. He he ..
"Put, gak apa cara ngilangkan gambar obeng ngan tang ni ?" .. (Indonesia :Put, gimana sih cara menghilangkan gambar tang sama obeng ini ? Tanya temanku ..

Sory ni,, pake bahasa kutai dikit dikit .. he he ..
Ok,, sekarang coba buka halaman blog kamu pake komputer /laptop lain yang IP nya beda ..
Gimana ...... ?
Udah ilang kan ,,
Iya Put,,, dah ilang ,,
Jadi kesimpulannya begini ,,
Gambar obeng sama tang itu muncul karena kita masih dalam keadaan login (masuk) di blogger.
Ok ,, sudah mudeng,,
Kalau kita keluar (sign out), gambar itu pastilah ilang ,,
Gambar tang dan obeng itu untuk memudahkan kita untuk editing cepat aja ,,
jadi nggak perlu masuk element halaman lagi untuk ngeditnya ..
OK ,, sudah kan ,, ya Udah ,,
Sekian dulu tutorial kecilnya ,, semoga bermanfaat ,, dan ... kutunggu komentarnya ya ..

 

Menghilangkan tulisan yang muncul saat membuka salah satu label /tag

Wah .. tu judul apa judul Put ,,
Iya nih, jadi bingung mau ngasih judul apa ..
Tapi kalau dibaca ampe abis pasti mudeng deh ,,
Kemaren kan aku dan posting tentang cara masang gambar tetap seperti yang ada di kiri blog ini ..
Sekarang aku mau bagi bagi ilmu lagi tentang modif blog.
Kali ini tentang gimana cara mbuang (baca :membuang) tulisan dalam kotak yang muncul pas kita ng-klik salah
satu label atau menu.
Ini nih yang akan kita buang jauh jauh ..




Atau yang ini ..




Sebagian besar template blogger punya kotak ini ,,
Template ku ini juga ada kotak gitu nya ,, tapi udah ku buang,,
Karena menurutku itu cuma ngusuti (Indonesia :mengganggu) pemandangan blog.
Ya udah bagi yang mau ngilangin, baca artikel ini sampai selesai,,
Bagi yang nggak mau ngilangin,,,
Ya mendingan baca yang lain aja ,,

Ok ..
Caranya mudah saja ..
Wah, semua tutorial di blog ini mudah semua ya ...
Memang mudah,, kalau sulit nggak akan kuposting .. He he..
Begini ..

Pertama :
Seperti biasa,, Login ke blogger ,, trus masuk ke tata letak > edit HTML ..

Kedua :
Cari kode ini



Udah ketemu ?
Kalau susah carinya ,, bisa menggunakan fungsi search (CTRL+F)
Kalau masih nggak nemu juga,, cari aja yang mirip mirip ,,
Ok ,, sudah .. Lanjuut ,,

Ketiga :
copy code dibawah ini dan paste PAS di atas kode tadi ..



Terakhir :
Simpan,, dan coba lihat hasilnya dengan mengklik salah satu label di blog kita ..
Kalau nggak ada kotak ngusut itu, berarti selamat anda berhasil..
Kalau masih ada kotak ngusut itu , berarti mohon maaf ,, anda belum beruntung ..
Silahkan dicoba lagi. (mirip kupon yang ada di warung warung ya ..)

Sekian dulu posting kali ini .. Semoga bermanfaat.
Kalau ada yang ingin diungkapkan, silahkan disemprot di kotak komentar .. Ok

 

Cara Membuat Buku Tamu Melayang

Artikel ini khusus aku posting buat sahabat ku Triando yang ingin membuat buku tamu melayang, sebenarnya ia telah lama meminta ku untuk membuat tutorialnya, tapi karena kesibukkan baru kali ini Admin bisa mempostingnya. Ok, langsung aja nich . . .

Pernah tidak melihat sebuah blog yang di samping kanan atas ada tulisan Buku Tamu dengan background hijau, yang kalau diklik akan keluar form isian yang menanyakan Nama, Website dan Message.

Buku Tamu tersebut melayang yang artinya tidak terpengaruh oleh scroll mouse, walaupun mouse digulir ke bawah Buku Tamu tersebut tetap nampak. Mau tahu caranya?

1. Sign in ke blogger dan silahkan Login dengan Account Anda

2. Pilih Layout/Tata Letak

3. Pilih Page Elemen/Elemen Halaman

4. Klik Add a Gadget/Tambah Gadget

5. Lalu pilih "HTML/JavaScript"

Kemudian Copy-Paste kode di bawah ini :

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="m4n0" src="http://www6.shoutmix.com/?m4n0" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?m4n0">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->

<br/>
Anda berminat buat Buku Tamu seperti ini?<br/>
Klik di
<a href="http://makassar-09.blogspot.com/2009/08/trik-membuat-buku-tamu-melayang.html">
sini </a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>


CATATAN :
1. Ganti tulisan yang berwarna merah dengan kode yang anda peroleh dari ShoutMix

2. Icon Buku Tamu dapat anda ganti sesuka hati dengan terlebih dahulu merancangnya di Photoshop atau di CorelDraw, setelah itu upload di hosting image seperti photobucket dsb. lalu ambil URLnya dan pasang di background.

3. Selamat Mencoba !!!