Tips Agar Emoticon Berhasil Muncul pada Kotak Komentar

Saya dapati ada beberapa kawan blogger yang tidak berhasil memunculkan emoticon komentar seperti yang diutarakan pada postingan Tambah Emoticon pada Kolom Komentar Blog. Bukan berarti postingannya error, atau salah memasang kode, tetapi keanekaragaman template blog yang membuat hal tersebut tidak berhasil.

Untuk itu, kali ini saya mencoba berbagi tips agar emoticon berhasil muncul pada kotak komentar. Langkahnya antara lain:

1. Lihat postingan kawan yang telah ada komentarnya
2. Blok sebagian tulisan isi komentar, lalu tekan Ctrl + C (Copy), lihat gambar di bawah ini
   
   
   
3. Tekan Ctrl + U untuk membuka tab Page Source
4. Tekan Ctrl + F (Find), lalu tekan Ctrl + V (Paste, tulisan yang tadi diblok)
5. Lihat kode HTML yang dibuat Blogger pada tulisan yang diblok, seperti ini:
   <p id='bc_0_0MC' class='comment-content'>Postingannya bersambung gan :c:</p>
   
6. Edit javascript yang telah diberikan pada artikel Tambah Emoticon pada Kolom Komentar Blog, pada tag dd - class - comment-body menjadi p - class - comment-content
7. Simpan javascript, upload melalui Google Code dan catat URL nya, seperti
   http://moalmules.googlecode.com/files/comment-content-p-emoticon.js
   
8. Sign in ke Blog - Template - Edit HTML - Lanjutkan
9. Cari (Ctrl + F) kode </body>
10. Pasang kode script dengan URL yang baru tadi diatasnya, seperti ini:
    <script src='http://moalmules.googlecode.com/files/comment-content-p-emoticon.js' type='text/javascript'/>
11. Simpan Template dan Reload postingan yang telah ada komentarnya tadi
12. Gambar di bawah menunjukan tips ini berhasil
    
    
    
13. Go Blogger.. Go Open Source.. Alhamdu.. lillah

Tips emoticon pada kotak komentar ini, telah berhasil saya praktekkan pada beberapa template bawaan Blogger, seperti:

Blogger Template Style
Name: Ethereal
Designer: Jason Morrow

Blogger Template Style
Name: Awesome Inc.
Designer: Tina Chen

Blogger Template Style
Name: Travel
Designer: Sookhee Lee

Lanjut baca »»

Memasang Tab View atau Tab Switch Lebih dari Satu

Memasang tab view atau tab switch lebih dari satu. Dengan sedikit modifikasi kode tab view pada artikel sebelumnya, kita bisa membuat tab view tersebut menjadi beberapa buah.

Lihat kode HTML berikut ini
<style type="text/css">
body {color: #444444; font-size: 13px; font-family: serif; margin: 10px; background: #F9F5EA;}
.TabView .Tabs { overflow: hidden; }
.Tabs a { float: left; text-align: center; padding: 5px 8px; text-decoration: none; }
.Tabs a:hover, .Tabs a.Active { background: yellow; text-decoration: none; font-weight: bold; }
.Pages { overflow: hidden; height: 75px; width: 395px; }
.Page { background: yellow; padding: 5px 10px; }
/* overflow: hidden berfungsi untuk tampil ok pd opera mini*/
</style>
<script src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/moalmules/tabview.js" type="text/javascript"></script>
<!-- TabView1 -->
<div id="TabView1" class="TabView">
<div class="Tabs" >
<a>planetcaang</a>
<a>bumicaang</a>
<a>electro-study</a>
<a>elektronika</a>
</div>
<div class="Pages">
<div class="Page">TEST 1</div>
<div class="Page">TEST 2</div>
<div class="Page">TEST 3</div>
<div class="Page">TEST 4</div>
</div>
</div>
<script type="text/javascript">tabview_initialize('TabView1');</script>
<!-- TabView2 -->
<div id="TabView2" class="TabView">
<div class="Tabs" >
<a>planetcaang</a>
<a>bumicaang</a>
<a>electro-study</a>
<a>elektronika</a>
</div>
<div class="Pages">
<div class="Page">TEST 5</div>
<div class="Page">TEST 6</div>
<div class="Page">TEST 7</div>
<div class="Page">TEST 8</div>
</div>
</div>
<script type="text/javascript">tabview_initialize('TabView2');</script>
<!-- TabView3 -->
<div id="TabView3" class="TabView">
<div class="Tabs" >
<a>planetcaang</a>
<a>bumicaang</a>
<a>electro-study</a>
<a>elektronika</a>
</div>
<div class="Pages">
<div class="Page">TEST 9</div>
<div class="Page">TEST 10</div>
<div class="Page">TEST 11</div>
<div class="Page">TEST 12</div>
</div>
</div>
<script type="text/javascript">tabview_initialize('TabView3');</script>

Keterangan:

• Copy paste kode HTML di atas dalam gadget HTML/JavaScript blog
• Kode tersebut akan menghasilkan tiga buah tab view atau tab switch
• Style CSS bisa kawan ubah sesuai dengan keinginan, misalnya color: #444444; menjadi color: red; ukuran font-size: 13px; menjadi font-size: 15px; atau ingin mengubah lebar tab view width: 395px; menjadi 250px;
• Ganti judul tab view planetcaang, bumicaang, electro-study, dan elektronika dengan judul yang kawan inginkan
• Ganti isi tab view (gadget) mulai dari TEST 1 s/d TEST 12, dengan gadget blog kawan
• Semoga berhasil

Lanjut baca »»