RadarURL

Artikel Terbaru

Membuat Tombol Show/Hide di Kotak Komentar

Banyak sekali artikel yang membahas tombol show/hide di kotak komentar, tetapi banyak pula cara yang dilakukan. Salah satunya adalah yang akan saya share berikut ini. Sebelumnya saya akan membahas keuntungan dari tombol ini. Adapun keuntungannya adalah meringkas blog agar terlihat rapi dan juga dengan adanya tombol ini bisa membuat tampilan blog menjadi lebih menarik. Setelah mengetahui fungsinya saya akan share langkah demi langkah.


1.  Seperti biasa masuk kedalam Edit Html dan cari kode

]]></b:skin>, kemudian pastekan kode berikut tepat diatas kode ]]></b:skin>





a.openpanel {display:block;width:900px;height:30px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#FFD700;font-size:20px;font-family:Comic Sans MS;color:#0099FF;border:2px solid #000000;text-shadow:0 1px 0 #CCC;-moz-border-radius: 3px;-webkit-border-radius:3px;border-radius: 3px;-moz-box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;-webkit-box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;}
    a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;}
    a.openpanel.active {background-color:#FFD700;}
    a.openpanel.active em {top:6px;border color:#ffffff;}
    div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}
    div.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;}



2. Cari kode </head> dan masukan kode berikut tepat diatasnya :



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    var panelSelector = '#comments',
    openPanelText = "Tampilkan Komentar",
    closePanelText = "Tutup Komentar",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed = 400;
    //]]>
    </script>
    <script type='text/javascript'>
    </script>
    <script src='http://membuatgempar.net23.net/comment.js' type='text/javascript'/>

 

4. Lalu simpan template dan lihat hasilnya.

Semoga membantu.

10 komentar:

  1. Yang ini jadinya seperti punya sobat ini ya?

    BalasHapus
  2. Sob kalo punya ku kiraw bagusnya di pasang yang beginian ngak ya

    minta saran sama mastah herman dan Anak baik

    BalasHapus
    Balasan
    1. yang penting enggak membuat blog semakin berat loadingnya sob

      Hapus
    2. Ya dipasang aja sob, biar lebih rapi, oh ya Em Albar, Blog kamu tak buka kok lambat ya..

      Hapus
    3. saya juga buka blognya emalbar juga lambat sob

      Hapus
  3. Balasan
    1. terserah kamu sob, cuma kalau dipasang kan terlihat rapi gitu

      Hapus
  4. Owh begitu ya sob

    dipikirin dulu

    aku sedikit bingung nih mau komen di blog ini

    mana ya artikel yang paling baru di posting
    soalnya banyak yang bacaanya New, New

    heheheh

    BalasHapus
    Balasan
    1. tenang aja sob saya lagi nyiapin template baru

      Hapus

Sebelum berkomentar baca dulu aturannya :

1. Jangan melakukan spam. Seperti mencantumkan link tertentu, baik link hidup atau link mati
2. Berkomentarlah dengan sopan,
3. Jangan menyinggung masalah SARA.


Jika ternyata melakukan tersebut diatas Admin berhak menghapus komentar tersebut. Harap dijadikan maklum

Silahkan mengisi komentar anda.

Terimakasih

 
AnakBaik © 2012 Enjoy Share With Us. |Tim Kreatif AnakBaik | Indahnya Berbagi AnakBaik