Cara Ganti Blockquote Modifikasi di Blogger

Di dalam posting blogger pada menu ada tombol seperti di atas. Tombol tersebut adalah menu untuk membuat blockquote. Apasih blockquote itu? Menurut yusman-blog blockquote berarti petikan posting. Blockquote memperjelas apa yang kita posting di blogspot. Misalnya kita memposting beberapa sub judul. Dalam sub judul itu kita dapat memperjelas dengan petikan posting yang kita sebut sebagai blockquote. Mari kita bahas cara ganti blockquote modifikasi di blogger

Secara default atau bawaan, blockquote di tunjukkan kurang lebih seperti ini

Dari gambar di atas, kode dalam membuat blockquote bawaan kurang lebih adalah di bawah ini

.blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: #e0ffff;
border: 2px solid #4aa02c;
border-left: 20px solid #4aa02c
}

.......

Dan pada saat posting (Posisi Edit HTML) adalah

<blockquote style="overflow:auto;height:200px;padding:10px;background:black;color:lime;">
Disini Text Anda
</blockquote>

Jika sahabat tidak suka dengan blockquote bawaan blogger dan ingin merubah blockquote bawaan blogspot dengan style modifikasi berikut ini caranya

1. Login di blogspot

2. Sahabat akan di bawa ke dashboard.

3. Klik Menu Design seperti gambar di bawah ini :

4. Klik Template

5. Backup dulu template sobat dengan klik tombol seperti di bawah ini

6. Klik edit HTML

7. Klik Proceed


8. Centang  Expand Widget Template


9. Cari kode blockquote seperti ini  (Biasanya 2 baris) :

.blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: #e0ffff;
border: 2px solid #4aa02c;
border-left: 20px solid #4aa02c
}


.......

10. Hapus semua kode tersebut dan ganti dengan pilihan kode berikut :

a. Blockquote dengan background kertas bergaris

.post blockquote {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Ydslpe2byQAbZ20M8xAZVTKca-_tdffgqldPGSxvCgAVdWSBlu1OMJaz3yLv_2sX5BJhKp9oEmuAP4o8c3k9ZY0h1y2OA0SR23S1_lIWLRaEZO6ZA2I4g2Woz5c4LRo87O-MrADQ5q4/s1600/notebook-with-numbers.gif) repeat-y;

margin: 0 20px;

padding: 0px 20px 5px 55px;

color:#7a7a7a;

font: bold 0.9em  "Comic Sans MS", verdana;
line-height: 153%;
}
.post blockquote p {
margin: 0;
}

Ket : ubah kode yang ditandai dengan warna-warni di atas sesuai selera sobat.  Untuk ganti background gambar, Tinggal klik kanan dan klik simpan lokasi gambar. Dan berikut pilihan backgroundnya  :

b. Blockquote efek timbul dan shadow

.post blockquote {
    border:5px #dcdcdc solid;
    background:#f6f6f6 url(http://www.opendrive.com/files/7045660_cNVdE/quote.png) 0px 0px no-repeat;
    padding:7px;
    padding-left:65px;
    margin:20px 0;
    }

    blockquote:hover {
    border:5px #f2f2f2 outset;
    color:#000
    background:#f2f2f2 url(http://www.opendrive.com/files/7045660_cNVdE/quote.png) 10px 15px no-repeat;
    -moz-box-shadow: 0 0 40px #B0C4DE;-webkit-box-shadow: 0 0 40px #B0C4DE;box-shadow: 0 0 40px #B0C4DE;
    color:#000;
    }

    .post blockquote p {
    margin: 0;
    padding-top:10px;
    }

c. Blockquote dengan scrool

Untuk blogquote dengan scrool, cara pembuatannya adalah manual seperti membuat text area. Yaitu dengan kode berikut ini pada posisi Edit HTML saat posting.

<blockquote style="overflow:auto;height:200px;padding:10px;background:black;color:lime;">
Disini Text Anda
</blockquote>

Keterangan :
Description: Mencoba Suasana yang baru / Memodifikasi Blockquote.

Saya lebih suka Cara Ganti Blockquote Modifikasi di Blogger untuk menampilkan kode html dengan blockquote dari pada dengan text area. Mohon maaf tidak disertai dengan demo nyata. So, silakan tentukan pilihan sobat.

READMORE

Membuat Postingan Mirip Koran

Membagi postingan membagi menjadi 2 kolom ini maksudnya membagi post secara terpisah di kanan dan kiri. Biar tidak bingung coba deh lihat gambar di bawah ini.

Berjajar mirip koran

Sudah tahukan maksudnya ? jika tertarik ingin mencoba, berikut tutorialnya ..

1. Silahkan Login ke blog kamu

2. Kemudian klik Rancangan

3. Klik Edit Html

4. Back up template, buat jaga-jaga jika nanti terjadi kesalahan saat mengedit.
5. Nah, tinggal cari kode ]]></b:skin> ( gunakan ctrl + f agar mudah mencarinya ) dan copy code berikut ini di bawahnya.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post {
width:285px;
height:400px;
margin-right:5px;
overflow:hidden;
float:right;
border:3px double #808080;
}
</style>
</b:if>

Lanjut dengan mencari css .post{ contoh css nya seperti ini ( mungkin ada perbedaan dari template kamu )

.post{
background:#fff;
border:3px double #a5a5a5;;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin:0.5em 0.5em;
padding:0.5em;
font-family:"Verdana";
text-align:justify}

Jika sudah ketemu, coba perhatikan margin:0.5em 0.5em; kamu tinggal menyisipkan auto pada margintersebut hingga menjadi seperti di bawah ini.

.post{
background:#fff;
border:3px double #a5a5a5;;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin:0.5em auto 0.5em;
padding:0.5em;
font-family:"Verdana";
text-align:justify}

Jika sudah selesai simpan !

Kalau masih kesulitan anda bisa ganti Css milikmu dengan Css .post{ di atas !

Tutorial di atas saya ambil dari blog home-catalog.blogspot.com, serta saya source dari blog Tips Handphone jadi silahkan edit width, height, border, margin dan lainnya sesuai dengan template anda.

Semoga bermanfaat dan berhasil anda coba ^^

READMORE

Membuat / Memabagi Postingan Mejadi 2 Kolom

Cara Menambahkan Iklan Disamping Kotak Komentar - Bagi sebagian blogger sangat gemar menambahkan pernak-pernik blog mereka, terutama penambahan iklan disetiap sisi blog agar supaya potensi klik semakin besar. Setelah melakukan uji coba pada template Belajar Komputer dan akhirnya berhasil, kini saya berbagi mengenai cara menambahkan iklan disamping kotak komentar.

Ok sobat tanpa basa-basi saya langsung saja membahasnya. Dan perlu sobat ketahui bahwa tidak semua template sama dan cukup perhatikan kode yang menjadi penekanan disini. Bila Anda ingin mengetahui lebih lanjut mengenai bagaimana cara membuat isi posting menjadi dua kolom di Blogger, silakan dibaca terus ya artikel ini sampai selesai.

1. Login ke blog sobat kemudian ke posting terus posting baru 
2. klik edit html di postingan 
3. masukkan kode di bawah ini di edit html posting

<table cellpadding="10" cellspacing="10"><tbody>

<tr> <td align="justify" valign="top" width="300">Postingan Sebelah Kiri</td> <td align="justify" valign="top" width="300">Postingan Sebelah Kanan</td></tr>

</tbody></table>

Keterangan Kode Di atas :

Keterangan:

• cellpadding="10" >> ini untuk mengatur jarak antara tepi kolom dengan tulisan sebesar 10 piksel.
• cellspacing="10" >> ini adalah untuk mengatur jarak antara dua kolom sebesar 10 piksel.
• align="justify" >> merupakan perataan teks (justify untuk rata kanan-kiri, right untuk rata kanan, left untuk rata kiri, dan center untuk rata tengah).
• valign="top" >> mengatur perataan vertikal (top untuk rata atas, bottom untuk rata bawah, dan middle untuk rata tengah).
• width="300" >> merupakan lebar untuk kolom, dalam hal ini sebesar 300 piksel.

 Semoga Bermanfaat :).

READMORE

Cara Membuat Bubble Tooltip di Blog/Web

Hallo Sobat Maya apa kabar? hari Ini ./DeeJayHan mau berbagi tips bagaimana cara membuat bubble tooltip dengan mudah. sebelumnya ada yang tau ga apa itu bubble tooltips? bubble tooltips adalah sebuah aplikasi yang hampir mirip dengan snapshoot, yang mana bila teks maka akan muncul keterangan tambahan, dan tentunya bisa kita arahkan ke link tertentu.

contoh :

Nah pada contoh di atas terlihat. saat teks "di sini" di sorot oleh pointer (mouse) maka akan muncul keterangan "untuk konfirmasi" itulah yang di maksud dengan bubble tooltip

Dengan memasang dan membuat bubble tooltip di blog, maka blog kitaakan terlihat lebih menarik. kita lihat yuks bagaimana cara buatnya! ^_^

1. Login ke Blogger

2. Saat di dasbor pilih edit tampalete/tata letak

3. Lalu pilih Edit HTML

4. Copy aja kode di bawah ini :

/*---------- bubble tooltip -----------*/a.tt{ position:relative; z-index:24; color:#3CA3FF; font-weight:bold; text-decoration:none;}a.tt span{ display: none; }/*background:; ie hack, something must be changed in a for ie to execute it*/a.tt:hover{ z-index:25; color: #aaaaff; background:;}a.tt:hover span.tooltip{ display:block; position:absolute; top:0px; left:0; padding: 15px 0 0 0; width:200px; color: #993300; text-align: center; filter: alpha(opacity:90); KHTMLOpacity: 0.90; MozOpacity: 0.90; opacity: 0.90;}a.tt:hover span.top{ display: block; padding: 30px 8px 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXwurya7T8R1_c-fqGpZz4eURkL4Fghp2_ACw3NieeWc5iRGAZ_6eW0y_0dkfbCZt1eCKDCVo04_HEPToCu9z5UOeVMXm-ckBUkudhnpv8ZZHqqsArUfTCrX16ymF58wQ1_dLdQyeq9r4/) no-repeat top;}a.tt:hover span.middle{ /* different middle bg for stretch */ display: block; padding: 0 8px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqKtEdpws1c_NgQWpqmdtOxA8scvhcP_SofcKX-KklLOSEySF_Mg2NMR8jeS4ynKV0xqFRRohrjyQHPR20PYjjBHWFhYVDEWVTojBsc11g_DLvLbDSKa96JSkNkBKrs6G5go-s5xbNmdE/) repeat bottom;}a.tt:hover span.bottom{ display: block; padding:3px 8px 10px; color: #548912; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXwurya7T8R1_c-fqGpZz4eURkL4Fghp2_ACw3NieeWc5iRGAZ_6eW0y_0dkfbCZt1eCKDCVo04_HEPToCu9z5UOeVMXm-ckBUkudhnpv8ZZHqqsArUfTCrX16ymF58wQ1_dLdQyeq9r4/) no-repeat bottom;}

2. Simpan (paste) di atas ]]></b:skin>

3. Lalu Save

Selanjutnya Untuk membuat teks yang memiliki bubble tooltip silakan copy kode di bawah ini :

klik <a class='tt' href='Tujuan link yang di inginkan'>di sini<span class='tooltip'></span><span class='top'/><span class='middle'>untuk konfirmasi</span><span class='bottom'/></span></a>

Hasilnya :

Keterangan :

1. Link biru : bisa anda gunakan untuk membuat link ke arah artikel lain, bisa juga di kosongkan jika tidak diperlukan.
2. Link hijau : adalah teks yang akan di buat bubbletip, yang mana bila disorot oleh mouse maka akan muncul keterangan tambahan yang telah anda buat
3. Link warna orange adalah keterangan tambahan yang ingin anda tambahkan.

Ok semoga bermanfaat.

READMORE

Membuat Energy Saving Mode Jquery Blogger

Selamat Malam Sobat Blogger. Malam ini kita akan memodifikasi tampilannya dengan gambar sehingga tampilan screensaver berupa gambar, namun perlu Anda ketahui bahwa penambaan gambar pada energy saving ini akan membuat loading blog akan semakin berat karena mendapat tambahan satu gambar lagi yaitu gambar pada energy saving mode, hal ini dapat Anda jadikan pertimbangan jika ingin membuat energy saving mode dengan gambar, untuk yang benar-benar ingin memasangnya ikuti langkah berikut :

• Pertama login ke Akun Blogger Anda
• Kedua klik Rancangan
• Ketiga Klik Edit HTML
• Keempat Masukkan Kode dibawah ini dan Letakkan di atas kode </head>

<script language='javascript' src='http://jquery-new.googlecode.com/files/energisavingmode.js' type='text/javascript'/>

• Dan Simpan Template.
• Semoga Bermanfaat.
• NB : Semua Script sudah dijadikan satu di Javascript .

READMORE

Membuat Back To Top dengan Efek Smooth Scroll

"Back to Top" adalah salah satu fasilitas yang dapat digunakan pada blog untuk memudahkan pengunjung menavigasi halaman pada blog anda. Fungsi dari Back To Top yaitu mengantarkan kembali pengujung anda ke halaman paling atas. Penggunaan JQuery dengan fungsi ini dapat memberikan hasil scroll yang lebih baik, dalam hal ini scroll menjadi lebih smooth atau halus. Jika anda udah gak sabaran pengen membuatnya langsung aja dipraktekin...

1. Login ke blogger.
2. Pilih Rancangan -- Edit HTML
3. Masukan script jquery berikut ini diatas </head> 

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/> <script src='http://blogtrikdantips-blogspot.googlecode.com/files/sed_back_to_top.js' type='text/javascript'/> <script src='http://vianjb.googlecode.com/files/to%20top.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { /* var defaults = { containerID: 'moccaUItoTop', // fading element id containerHoverClass: 'moccaUIhover', // fading element hover class scrollSpeed: 1200, easingType: 'linear' }; */ $().UItoTop({ easingType: 'easeOutQuart' }); }); </script>

4. Letakkan kode dibawah ini diatas kode ]]></b:skin> 

#toTop {<br /> display:none;<br /> text-decoration:none;<br /> position:fixed;<br /> bottom:10px;<br /> right:10px;<br /> overflow:hidden;<br /> width:51px;<br /> height:51px;<br /> border:none;<br /> text-indent:-999px;<br /> background:url(http://1.bp.blogspot.com/-jl2zCOaMrgc/T8R3jjBc44I/AAAAAAAADUo/fhv5oCrzd7E/s400/ui.totop.png) no-repeat left top;<br /> }<br /> #toTopHover {<br /> background:url(http://1.bp.blogspot.com/-jl2zCOaMrgc/T8R3jjBc44I/AAAAAAAADUo/fhv5oCrzd7E/s400/ui.totop.png) no-repeat left -51px;<br /> width:51px;<br /> height:51px;<br /> display:block;<br /> overflow:hidden;<br /> float:left;<br /> opacity: 0;<br /> -moz-opacity: 0;<br /> filter:alpha(opacity=0);<br /> }<br /> #toTop:active, #toTop:focus {<br /> outline:none;i



5. Simpan template sobat dan lihat hasilnya.

READMORE

Cara Mengganti dan Menambah Style Font di Template Blogger

Hai sobat bloggers, kembali kita ketemu lagi di Blog Trik dan Tips "tak ada blog jika tak ada trik"....he3. Mungkin anda sudah tau apa itu font, font adalah jenis atau gaya tulisan. Pada blogspot (blogger), anda bisa mengganti font pada template anda, namun jumlah jenis font sangat terbatas. Beberapa jenis font yang dimiliki blogger yaitu arial, courier, georgia, lucinda grande, times, trebuchet, verdana dan webdings. Jenis font ini kadang tidak sesuai dengan keinginan anda. Ada pasti ini memiliki font dengan gaya blog anda sendiri yang lebih stylis atau elegan. Untuk itu saya akan memberikan trik dan tips bagaimana kita bisa memperoleh bermacam-macam font untuk digunakan ditemplate anda. Simaklah tutorial berikut ini:

1. Buka situs Google Web Font http://www.google.com/webfonts/#ChoosePlace:select
2. Silahkan cari jenis font yang anda inginkan, tambahkan beberapa font dengan mengklik tombol Add to Collection.
3. Klik tombol Use disebelah kanan bawah browser

4. Kemudian kopi kode dari Google Font (kodenya seperti ini, kode ini hanya contoh saja tidak perlu anda kopi):

<link href='http://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'>

5. Pada template anda carilah kode seperti ini <![CDATA[/*

6. Paste kode yang dikopi dari Google Web Font diatas kode <![CDATA[/*

7. Tambahkan kode slash "/" yang berwarna merah pada akhir kode yang dipaste tadi sehingga terlihat seperti dibawah ini:

<link href='http://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'/>

8. Sekarang anda tinggal mengganti font pada template anda. Saya akan memberikan contoh bagi anda untuk mengganti font header di template anda, caranya seperti berikut ini:
9. Carilah kode #header h1 atau h2.postTitle {
10. Setelah itu ganti font family yang tadi anda pilih, contohnya seperti dibawah ini:
Kode awal pada template yang belum dirubah

 #header h1{color:#00008B;font-size:26px;font-family: Arial ;font-weight:700;text-decoration:nnne;margin:0;padding:10px 0 0 10px}

Kode setelah dirubah saya

 #header h1{color:#00008B;font-size:26px;font-family:'Condiment', cursive;font-weight:700;text-decoration:nnne;margin:0;padding:10px 0 0 10px}

Begitulah caranya kita menambahkan font baru ke template, bagaimana tertarik untuk membuatnya. Silahkan dicoba aja, tapi jangan lupa ikuti langkah di atas dengan baik dan ingat untuk back up template anda. Sekian dan selamat mencoba!

READMORE

Membuat Widget Penilaian Artikel Menggunakan Jempol

Pada Trik dan Tips kali ini kita akan membuat Penilaian Menggunakan Jempol atau Thumbs Up and Down Rating Widget pada blog anda. Jompol atas dan jempol bawah adalah dua penilaian yang berbeda. Jempol atas menunjukan isi dari artikel anda disukai oleh pembaca, sebaliknya jempol bawah menunjukan isi artikel tidak disukai oleh pembaca. Widget jempol ini akan tampil dengan jumlah banyaknya jempol atas dan jempol bawah. Jika ingin membuat blog anda lebih menarik maka cobalah tampilkan widget ini. Untuk membuatnya ikutilah langkah berikut ini:

1. Masuklah ke Rancangan --> Edit HTML
2. Klik Expand template widget
3. Carilah kode seperti ini <data:post.body/>
4. Letakan kode dibawah ini diatas kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title' view='score'></div>
</b:if>

Keterangan: kode biru diatas menunjukan widget ini hanya tampil pada posting artikel.

5. Letakan kode dibawah ini diatas kode </body>

<script src="http://js-kit.com/ratings.js"></script>

6. Lalu simpan template anda.

Coba anda lihat bagaimana widget ini tampil pada posting anda. Anda akan melihat Jempol Up dan Jempol dawn dengan tampilan yang sangat menarik. Smoga artikel in ibermanfaat. Selamat mencoba ya semoga bermanfaat.

READMORE

Pasang Emoticon di Kotak Komentar(Versi Baru)

Versi Baru? (Emang ada yang versi lama ya?). Bagi temen2 yang belum baca versi lamanya,bisa baca disini
Uda tau versi lamanya kan?Kalo dalam versi lama,emoticon yang ditampilkan adalah seperti ini:

Emoticon Yahoo :



Emoticon Kucing :


Maka,Dalam versi baru,emoticonnya adalah seperti berikut:



Gimana? Kamu Pengen memasang emoticon ini? Pengen nggak pengin nih aku kasih tahu caranya

Begini cara membuatnya :

1. Pertama,seperti biasa harus login blogger dulu, trus menuju ke "Layout (Tataletak) --> Edit HTML "
2. Beri tanda centang pada kotak "expand widget template"
3. Lalu letakkan script berikut sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
a = document.getElementsByTagName('LABEL');
if(a) {
for(i=0; i < a.length; i++) {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-005.gif'' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-002.gif' alt='' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-007.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-008.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-012.gif' alt='' class='smiley'/>")


a.item(i).innerHTML = _str;
}
}

a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-body') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-005.gif'' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-002.gif' alt='' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-007.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-008.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-012.gif' alt='' class='smiley'/>")
b.item(i).innerHTML = _str;
}
}
}

a = document.getElementById('comments');
if(a) {
c = a.getElementsByTagName("DD");
for(i=0; i < c.length; i++) {
if (c.item(i).getAttribute('CLASS') == 'owner-Body') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-005.gif'' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-002.gif' alt='' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-007.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-008.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-012.gif' alt='' class='smiley'/>")
c.item(i).innerHTML = _str;
}
}
}
//]]>
</script>

4. Kemudian cari kode berikut ini :

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

5. Ketemu kan?Kalo sudah ketemu letakkan kode2 berikut setelah kode
<p class='comment-footer'>

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 200; text-align: center; border: 0px solid #90be35; padding: 5px; background: #ffffff; height:350'>
<b>
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-001.gif' width='30'/> :a:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-005.gif' width='30'/> :b:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif' width='30'/> :c:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif' width='30'/> :d:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif' width='30'/> :e:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif' width='30'/> :f:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gif' width='30'/> :g:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif' width='30'/> :h:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-002.gif' width='30'/> :i:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif' width='30'/> :j:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-007.gif' width='30'/> :k:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif' width='30'/> :l:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-008.gif' width='30'/> :m:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-012.gif' width='30'/> :n:
</b>
</div>

6. Langkah terakhir dan terpenting adalah SAVE TEMPLATE

Kemudian coba akses blog sobat, lalu klik salah satu postingan, kalo di kotak komentar keluar emoticonnya,berarti sobat melakukan langkah2 tersebut dengan benar "MISSION COMPLETE".SELAMAT MENCOBA ya sobat semoga berhasil.

Catatan
@ Kadang-kadang ada beberapa template memiliki kode yang beda. Jika sudah melaksanakan cara2 di atas dengan benar tapi hasilnya tidak terjadi apa2 atau kodenya tidak berubah menjadi emoticon, kemungkinan itu karena Kode pada templatenya berbeda atau bisa jadi karena mugnkin hosting untuk upload file emoticon dan javascriptnya sedang bermasalah.

READMORE