Pasang Kotak Komentar Melayang (Floating) ala akaUTta'

Kali ini saya ingin berbagai ilmu lagi sob, yaitu 'Pasang Kotak Komentar Melayang (Floating)', trik ini sengaja sy buat krna kemarin ada salah satu teman blogger kita yg menanyakan kepada saya via twitter nmanya raka. dia blg kesaya 'bang, tlg share cra membuat kotak komentar melayang sperti buku tamu pada umumnya', it ungkpan dia kesya.!! nah sbnarnya sih sy gk ada pkran smpai kesitu tentang cra merubah kotak komentar melayang layanknya, buku tamu. :D

Dan setelah sy pkirkan lagi, kyanya itu menjadi inspirasi lg buat sy untuk bs memberikan tutorial kepada pengunjung setia blog ini.hehee...
Oke berikut screenshoot yg akan kita praktekkan,. maaf saya tdk memberikan demo langsung. :D
http://picturestack.com/158/943/quhuttascreenj7U.jpg
Oke kita mulai saja ya, tidak usah banyak cing cong...haha..!!
Silahkan ikuti tahap-tahap berikut :

1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Cari Kode </head> , Lalu Masukan Kode Berikut tepat diatasnya.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
    $(&quot;.gambar&quot;).click(function(){
        $(&quot;#UTKM-komentar&quot;).slideToggle(&quot;slow&quot;);
        $(this).toggleClass(&quot;UTKM-active&quot;); return false;
    });
});
</script>
<style type='text/css'>
.UTKM-float {
position:fixed;
top:0px;
right:450px;
z-index:+1000;}
#UTKM-komentar { /* trik by akautta of blog */
height:auto;width:auto;
display:none;padding:10px;
border:2px solid rgba(0,0,0,0.9);
background:rgba(255,255,255,0.8);
padding:10px;}
.gambar {
position:fixed;_position:relative;left:30px;bottom:-82px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight)
}
.UTKM-active {background-position:right 12px;}
</style>
NB:: - Teks yg sy beri warna biru adlah scriptnya, jika sdh terpsang ditemplate sobat, mka kode diatas diperlu lagi. ;))

4. Selanjutnya Cari lagi kode <div class='comment-form'> , jika menemukan ada 2 kode yang sma, mka simpan kode berikut diatas kode <div class='comment-form'> yang pertama.
<div class='UTKM-float'><!-- Start trik by akautta -->
<div id='UTKM-komentar'>
5. Lanjut cari kode sperti ini BLOG_CMT_createIframe(&#39; , kode lengkapnya kurang lebih sprti ini :
  •     <script type='text/javascript'>
          BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
        </script>
      </div>
Jika sudah ketemu, maka sobat perhatikan kode yg sy beri warna kuning, lalu letakkan kode berikut dibawah kode yang berwarna kuning.
</div>
</div>
<div id='gambar'>
<a class='gambar' href='#'><img alt='Buku Tamu' border='0' heigth='115' src='http://picturestack.com/157/201/qK0ut2a4downgifg.png' width='250'/></a>
</div> <!-- end trik by akautta -->
6. Privew dl, jika tdk terjadi keslahan, baru Simpan template..........


Selamat Mencoba!!



Jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^
Silahkan anda laporkan jika ada link yang rusak atau beberapa tutorial yang tidak bekerja, karena saya akan segera memperbaikinya, dan berhubung saya baru mengganti themes blog, jadi pasti banyak artikel yang berantakan! Saya harap anda dapat membantu saya untuk memperbaiki semuanya dengan berkomentar di artikel yang bermasalah.. thanks sebelumnya sudah berkunjung keblog utta yang sederhana ini...
Please rate this article:
{[['', '']]}
{["Useless", "Boring", "Need more details", "Perfect"]}

Jika Artikel ini menarik, Silahkan copy paste permalink berikut ini di blog sobat!

thumbnail
About The Author

Hai,.. I am just an ordinary man who just might share the knowledge that I know ahead of you, No one is more perfect. Always keep learning and sharing of knowledge, Just be Yourself and be The Unique that makes them know who you are.!!


7 Comments
Comments

+ komentar + 7 Diskusi pada 'Pasang Kotak Komentar Melayang (Floating) ala akaUTta''

  1. waduh ada" az ilmunya nie,,,,

    newbi mau nanya mas,, ap itu nanti kotak komwntar yang ada di bawah postingan akan hilang?

    BalasHapus
  2. Gambanya bisa diganti tulisan ga gan misalnya tulisan add komentar di letakannya di footter gan mohon dijawab

    BalasHapus
  3. @Eka heriyansah: jlas bsji gan, ckup ganti kode gambr pda yg sy bri gmbar yang dngan tulisan, jd nnt tggal edit code cssnya, untuk pnemptan tulisan add comentar mau diltakkan dibgian mn!! :D

    BalasHapus
  4. kunjung jg blog ane ya gan http://fransescowd.blogspot.com ini isinya gado2 wkwkwkwkwk.

    BalasHapus
  5. knapa klo komen'ya udah di publiksaikan tombolnya ga muncul lg gan...?

    BalasHapus

Tolong memberi komentar yang tidak melanggar norma-norma. Kami berhak menghapus komentar yang kasar, mengejek, bersifat menyerang, dan tidak berhubungan dengan artikel di atas. Oleh sebab itu, kiranya dapat menggunakan bahasa yang jelas!

Pedoman wajib untuk memasukkan komentar:
1. Tidak boleh memakai lebih dari satu kolom komentar.
2. Pertanyaan/masukan harus berhubungan dengan uraian diatas.
3. Sebaiknya satu atau dua pertanyaan dalam satu kolom komentar.
4. Hanya menggunakan bahasa Indonesia yang umum dan dimengerti semua orang.
5. Tidak diperbolehkan menggunakan huruf besar untuk menekankan sesuatu.
6. Tidak diijinkan mencantumkan hyperlink dari situs lain.

Bila Anda punya nama atau blog gunakan komentar sebagai "Name/ URL".

Sebelumnya utta minta maaf yg sebsr2Nya jka komentar anda blm sempat dibls. ^^