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

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 ^_^

Berbagi :