Membuat Tombol Show Hide Smile dan Konverter HTML

Unknown

Trik Blog, Tutorial Blog

5 Mar 2014

Belum ada komentar

Setelah beberapa hari fakum dan tidak update blog, akhirnya pada kesempatan kali ini saya update lagi ni blog, dan mencoba berbagi sedikit trik cara membuat tombol show hide smile dan konverter HTML, dan pada artikel berikut saya akan merangkum kedua kode tersebut menjadi satu buah tombol saja, jadi akan menjadi sedikit lebih mudah dan simpel.

Nah bagi sobat dan sobit yang ingin mencoba, silahkan simak beberapa langkah berikut ini.

1. Copy kode CSS berikut dan paste di atas kode //]]>
   

   123456789101112131415161718192021222324252627282930313233343536373839404142434445.gs-button {
     color:#111;
     cursor:pointer;
     margin-right:10px;
     padding:4px 8px;
     background-color:#eee;
     font-size:12px;
     font-family:'
     Open Sans'
     ,sans-serif,'
     Segoe UI'
     ,Arial,Tahoma;
     font-weight:400;
     text-transform:none;
     border-radius:5px;
     text-decoration:none;
     outline:none;
     box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),0px 1px 1px #888;
     transition:background-color 1s ease-out 0s;
   }
   a.lightbox.gs-button {
     color:#111 !important;
   }
   .gs-button a:hover {
     text-decoration:none;
   }
   .gs-button:hover {
     background-color:#90c3eb;
     color:#111;
   }
   .konverter {
     display :none;
     width :100%;
     height :231px;
     margin-bottom :5px;
     border-radius :5px;
   }
   .ngguyu {
     display :block;
     width :100%;
     height :40px;
     margin-bottom :5px;
     border-radius :5px;
   }
   

2. Hapus kode CSS yang menyembunyikan emoticon seperti di bawah ini 
.comment_emo_list {display:none}
3. Hapus kode emoticon yang ada di Comment_Form
   <div class='comment_emo_list'/>
4. Cara kode <p><data:blogCommentMessage/></p> terdapat 4 buah kode, cari kode ke 2 dan ke 4 lalu ganti dengan kode berikut
   

   123456789<p><data:blogCommentMessage/>
   <span class='nyengir gs-button' style='display:none'>Smile</span><span class='konver gs-button'>Konverter HTML</span>
   </p>
   <script>
   $(document).ready(function(){$(&#39;.nyengir&#39;).click(function(){$(&#39;.ngguyu&#39;).show();$(&#39;.konver&#39;).show();$(&#39;.nyengir&#39;).hide();$(&#39;.konverter&#39;).hide()});$(&#39;.konver&#39;).click(function(){$(&#39;.ngguyu&#39;).hide();$(&#39;.konver&#39;).hide();$(&#39;.nyengir&#39;).show();$(&#39;.konverter&#39;).show()})});
   </script>
   <div class='ngguyu'><div class='comment_emo_list'/>
   </div>
   <div class='konverter'><iframe align='center' height='230' src='http://wap.gond3s.com/converter.php' width='626'/></div>

5. Simpan Template