Showing posts with label Komentar. Show all posts
Showing posts with label Komentar. Show all posts

June 28, 2013

Cara Mencegah Link Aktif Dengan Menampilkan Salinan Komentar Pada Blog

Selamat siang...

Kali ini saya ingin berbagi tutorial yang rasanya cukup penting, meskipun sebelumnya saya sudah share tutorial yang mirip. Selain untuk tujuan berbagi tutorial, postingan ini juga saya buat untuk mengakomodir permintaan sahabat Dhestar Wirawan.



Jika sebelumnya kita hanya dapat menghapus link aktif yang disertakan dalam sebuah komentar seperti tutorial yang lalu, maka kali ini kita dapat menampilkan salinan dari komentar asli nya.


Kalau tertarik silahkan ikuti :

1. Login ke blogger.



2. Pilih Template - Edit HTML.



3. Cari kode </body> dan letakkan kode berikut ini diatas nya :

<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
    var parent = document.getElementById(parentID),
        content = parent.getElementsByTagName(children);
    for (var i = 0; i < content.length; i++) {
        if (content[i].innerHTML.indexOf('</a>') !== -1) {
            var salinan = content[i].innerHTML;
          content[i].innerHTML = "<div>Maaf, komentar Anda telah disembunyikan kemungkinan karena Anda menyisipkan link aktif yang tidak diperlukan oleh para pembaca. Berikut ini merupakan salinan dari komentar yang Anda berikan :</div><div><textarea>" + salinan + "</textarea> <div>Terima kasih atas perhatian Anda <div align='right'><img alt='no spam' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTg_TPShWwcjszvmlFS-hrT27UkkkKG7SR-TTh-1D2yHChn0_s_R9AKC-ctWhTy6-VqKRBGZ5utlqDwYje6uG2lBo3kioihCkOTv3jvXvrOe4mGxpoMU_YHgm1zyaOMEm7wgdNcUTMJfIS/s50/order.gif' style='border:0;'/></div></div>";
            content[i].className = "spammers";
        }
    }
}
// Jalankan fungsi!
blockLinks('comments', 'p');
//]]> 
</script>

4. Selanjutnya, cari kode ]]></b:skin> dan letakkan kode berikut diatas nya :

p .spammers {background-color:#A29A9A;color:white}
textarea {
 background-color:#F8D9B5;
 width:98%;
 height:80px;
 overflow:auto;
 display:block;
 margin:10px auto} 

5. Simpan Template.

6. Enjoy. smoke

Bagaimana sob? Kode-kode diatas dapat di edit sesuai dengan keinginan masing-masing termasuk warna dan kalimat mutiara nya.

Terima kasih dan semoga bermanfaat. :)

June 14, 2013

Membuat Guest Book Berbeda Pada Blog

Selamat siang...

Postingan kali ini berhubungan dengan hal-hal yang klasik dari kegiatan ngeblog, yaitu blogwalking. Nah, tentu banyak dari blogger yang biasanya memasang buku tamu atau guest book pada blog nya agar para blogwalker bisa meninggalkan jejak dan kemudian saling ganti mengunjungi.


Kebanyakan dari blogger (termasuk saya dulu... :D ) lebih cenderung memasang guest book melayang, biasanya di sisi kanan halaman blog, meskipun tidak sedikit pula yang memasangnya seperti widget-widget statis lainnya di bagian sidebar.

Pada tutorial ini, saya ingin berbagi cara memasang guest book pada blog namun dengan tampilan yang sedikit berbeda, dan untuk guest book nya sendiri saya gunakan dari cbox jadi bila temen-temen menerapkan tutorial ini, saya anggap kode cbox nya sudah temen-temen miliki.


1. Login ke blogger.

2. Buka menu Template - Edit HTML.

3. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya :

.aii-guest-boox {

  font:normal normal 12px/1.4 Awesome;
  color:#333;
  width:auto;
  border:1px solid #D580FE;
  border-bottom:none;
  background-color:#FEBFBF;
  position:fixed;
  left:10px;
  bottom:0;
  z-index:9999;
  -webkit-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  -moz-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  box-shadow:1px 1px 5px rgba(0,0,0,.2);
}
.aii-guest-boox > input[type="checkbox"] {
  display:block;
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:0;
  right:0;
  left:0;
  width:100%;
  height:auto;
  z-index:4;
  cursor:pointer;
  opacity:0;
  filter:alpha(opacity=0);
}
.aii-guest-boox > navibox {
  display:block;
  height:24px;
  line-height:24px;
  background-color:#D580FE;
  text-align:justify;
  color:#fff;
  font-weight:bold;
  padding:0 1em 1px;
}
.aii-guest-boox > navibox:before {content:attr(data-collapsed)}
.aii-guest-boox .aii-guest-boox-content {
  /* padding-bottom:10px; */
  display:none;
}
.aii-guest-boox > input[type="checkbox"]:hover + navibox {background-color:#FEBFBF}
.aii-guest-boox > input[type="checkbox"]:checked + navibox {background-color:#D580FE}
.aii-guest-boox > input[type="checkbox"]:checked + navibox:before {content:attr(data-expanded)}
.aii-guest-boox > input[type="checkbox"]:checked ~ .aii-guest-boox-content {display:block}


4. Simpan Template.

5. Lanjut, buka menu Tata Letak - Tambahkan Gadget - HTML/Javascript.

6. Letakkan kode berikut di dalam nya :
<div class="aii-guest-boox">
    <input type="checkbox" />
    <navibox data-expanded="Close Guest Book" data-collapsed="Open Guest Book"></navibox>
    <div class="aii-guest-boox-content">

<-- KODE GUEST BOOK -->

.........................................................................

.........................................................................

.........................................................................

    </div>
</div>

7. Simpan.

8. Enjoy. smoke

Terima kasih dan jangan lupa tinggalkan komentar pada kotak komentar dibawah... :)

April 23, 2013

Update!!! Cara Membuat Emoticon Di Kotak Komentar



Melihat banyaknya pertanyaan yang disampaikan kepada admin blog, yang mengatakan bahwa kode emoticon sebelumnya tidak berhasil diterapkan, maka saya sengaja membuat sebuah postingan baru guna mengakomodir permintaan teman-teman.

Untuk tutorial cara membuat emoticon kali ini sudah saya lakukan tes, work, dan contohnya bisa dilihat disini, sehingga postingan ini sekaligus menjadi pengganti dari postingan sebelumnya. Saya katakan ini sebagai tutorial pengganti, mengapa??? Karena, baik visual dari hasilnya maupun implementasi tutorialnya pun akan berbeda dengan postingan terdahulu.

Ok, langsung saja buka editor template temen-temen dan kemudian cari kode </body> lalu letakkan kode berikut ini diatas nya :

<style type='text/css'>
.emoWrap {
background-color:#EEDE86;
border:2px solid #D3BA59;
padding:10px 14px;
color:black;
font:bold 12px Tahoma,Arial,Sans-Serif;
text-align:center;
}

img.emo, input.emoKey {
display:inline-block; /* Penting! */
*display:inline;
vertical-align:middle;
}

input.emoKey {
border:1px solid #ccc;
background-color:white;
font:bold 11px Arial,Sans-Serif;
padding:1px 2px;
margin:0px 0px 0px 2px;
color:black;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
putEmoAbove = "#comment-editor",
emoMessage = false;
//]]>
</script>
<script src='http://aiizahh-reader.googlecode.com/svn/trunk/emotj.js' 
type='text/javascript'></script>

Setelah itu, simpan template temen-temen dan lihat hasilnya. Untuk membuat emoticon tersebut tampil pada komentar, lakukan klik pada salah satu emoticon lalu copy paste pada kotak komentar.

Terima kasih dan semoga bermanfaat...

Tips 1 :Untuk emoticon alternatif dengan tambahan beberapa emoticon seperti pada postingan sebelumnya, dapat mengganti kode berwarna ungu, dengan kode berikut :

<script src='http://aiizahh-reader.googlecode.com/svn/trunk/emotj-new.js'  type='text/javascript'></script>
Tips 2 :Untuk membuat emoticon muncul di dalam postingan/artikel tambahkan kode  "div.post-body, div.post-body span" pada bagian "var emoRange".

Thanks to : Mas Taufik & Forum MT5

April 13, 2013

Modifikasi Kotak Pesan Komentar Blog

Selamat malam sob...


Kali ini saya ingin share mengenai bagaimana cara membuat modifikasi pada kotak pesan komentar blog, dimana untuk contohnya bisa dilihat pada blog ini. Pemodifikasian kotak pesan komentar tersebut juga saya pelajari dari blog lain, namun saya lupa alamatnya...

Tutorial ini sendiri saya buat untuk mengakomodir permintaan sahabat Ariel Nicho yang bertanya mengenai kotak komentar saya ini, sehingga tidak ada salahnya saya pikir untuk membuat tutorialnya.

Ok, langsung aja sob :

1. Login ke blogger.


2. Pilih Template - Edit HTML.


3. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya :

#pra-comment{
position: relative; 
background:#FFFFFF;/* Warna background kotak */
width:100%;
padding:10px; 
font:normal 12px trebuchet ms; 
text-align:justify; 
border:3px solid #FE80DF;/* Warna border kotak */
   border-radius: 10px;
   box-shadow: 0 0 0 2px #000000, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
margin:0 10px 10px 0; 
margin-top: 10px; 
line-height: 1.3em; 
} 
#pra-comment::after, #pra-comment::before { 
top: 100%; 
border: solid transparent; 
content: " ";
height: 0; 
width: 0; 
position: absolute; 
pointer-events: none 
} 
#pra-comment::before { 
border-top-color: #FE80DF; 
border-width: 15px; 
left: 10%; 
margin-left: -36px 
}
#pra-comment::after { 
border-top-color: #FFFFFF; /* Samakan dengan warna background */
border-width: 9px; 
left: 10%; 
margin-left: -30px
} 

4. Kemudian cari kode <p><data:blogCommentMessage/></p>  dan ganti dengan kode berikut :
<div id='pra-comment'><data:blogCommentMessage/></div>

5. Simpan Template.

6. Selanjutnya, masuk ke Setelan - Pos dan Komentar.

7. Pada kolom pesan formulir komentar, masukkan tulisan atau kata-kata mutiara yang ingin ditampilkan.

8. Enjoy.

*Keterangan : Ganti kode berwarna kuning dengan warna-warna yang disukai dan cari kodenya disini.

Gimana sob???

Semoga bermanfaat dan jangan lupa untuk tinggalkan komentar yah...

April 9, 2013

Menampilkan Komentar Facebook Berdampingan Di Blog

Selamat pagi sob...

Gimana kabarnya hari ini ??? Semoga baik-baik saja yah...



Ok, langsung aja sob, kali ini saya mau share bagaimana cara menampilkan komentar facebook berdampingan dengan komentar blogger. Saya pikir, cara ini cukup menarik karena selain menggunakan akun google, wordpress, live journal, dan lain sebagainya yang biasa digunakan untuk memberikan komentar di artikel sebuah blog, maka dengan menerapkan cara ini, pengunjung yang tidak memiliki akun-akun tersebut pun bisa memberikan komentarnya dengan menggunakan akun facebook mereka.

Begini caranya sob :

1. Login ke blogger.


2. Pilih Template - Edit HTML dan centang "Expand Template Widget".


3. Letakkan kode dibawah ini dibawah kode <div class='comments' id='comments'> .

<div class='commblogfb-tab' id='fb-comments' onclick='javascript:
commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'>
 <img class='commblogfb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC14x7IrsCCRlgeMVFzVW60CpYMTJ8eimpOp7oDouFa6Jy2kznt9MlJHtD9JnwVoOTvO4_rNqLhUPaidiBDz3X_tx3_5912iQ3HLh_FNwXRgjOGZTo5ne3eN2-nd-TJtMt9f-AUTY7mVMB/s0/facebook.png'/> <fb:comments-count expr:href='data:post.url'/>
Facebook&#39;s Comments  </div>  <div class='commblogfb-tab inactive-select-tab'
id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);'
title='Add Comments via Blogger'> <img class='commblogfb-tab-icon'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4flxMuleYKSTNeEP1N9sDLpmJavHsQHLFoeE55fzQWFFPogOeKgAiWuQdiJkXhYFgyVHrfLiCJaivCK9oZKE61FawilKHlMby3Gh8keTh6TCelVa7r0U3WZXJ4GB289BH49uxLeOarCog/s0/rss.png'/>
<data:post.numComments/> Blogger&#39;s Comments  </div><div class='clear'/>
 </div>  <div class='commblogfb-page' id='fb-comments-page'>  <b:if
cond='data:blog.pageType == &quot;item&quot;'>    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='2' width='500px'/>
    </b:if>     </div>     <div class='comments commblogfb-page' id='blogger-comments-page'>     <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='ID FACEBOOK ANDA' property='fb:admins'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(&quot;.commblogfb-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
    $(selectTab).removeClass(&quot;inactive-select-tab&quot;);
    $(&quot;.commblogfb-page&quot;).hide();
    $(selectTab + &quot;-page&quot;).show();
    }
 </script><style type='text/css'>.commblogfb-page, .commblogfb-tab
{color:#3F3937;float:left;padding:5px;margin-right:5px;margin-left:5px;
cursor:pointer;font-weight:bold;background-color:#f2f2f2;border-radius:5px 5px 0
0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;position:relative;z-index:10;
box-shadow:0 -1px 2px #666;-moz-box-shadow:0 -1px 2px #666;-webkit-box-shadow:0 -1px 2px #666;
background-image:linear-gradient(#fff,#f2f2f2);background-image:-moz-linear-gradient(#fff,#f2f2f2);
background-image:-webkit-linear-gradient(#fff,#f2f2f2)}.commblogfb-page {background:
rgba(255,255,255,.4);margin-top:8px;}#blogger-comments-page {padding:0px 5px;display:none;}
.commblogfb-tab {background-color:#6196DB;background-image:linear-gradient(#6196DB,#9FBFE9);
background-image:-moz-linear-gradient(#6196DB,#9FBFE9);background-image:-webkit-linear-gradient
(#6196DB,#9FBFE9)}.commblogfb-tab-icon {height:14px;width:auto;margin:0 3px}.commblogfb-tab:hover
{background-color:#9FBFE9;background-image:linear-gradient(#9FBFE9,#9FBFE9);background-image:-moz-linear-gradient(#9FBFE9,#9FBFE9);background-image:-webkit-linear-gradient(#9FBFE9,#9FBFE9)}.inactive-select-tab {background:rgba(background-color:#e2e2e2;background-image:linear-gradient(#f4f4f4,#DDD);background-image:-moz-linear-gradient(#f4f4f4,#DDD);background-image:-webkit-linear-gradient(#f4f4f4,#DDD)}.inactive-select-tab,
.commblogfb-tab:hover {background-color:#3b5998;background-image:linear-gradient(#6b89d8,#3b5998);
background-image:-moz-linear-gradient(#6b89d8,#3b5998);background-image:-webkit-linear-gradient
(#6b89d8,#3b5998)}</style> 

4. Pratinjau, dan apabila tidak ada masalah maka Simpan Template.

5. Enjoy.


*Keterangan : Ganti ID FACEBOOK ANDA dengan id facebook milik anda sendiri (http://facebook.com/INI ID ANDA)

Gimana sob??? Berhasil tidak mempraktekkan cara diatas???

Semoga bermanfaat yah dan jangan lupa tinggalkan komentar di kotak komentar dibawah....

March 28, 2013

Menampilkan Jumlah Komentar Di Samping Read More

Selamat pagi sob...



Setelah beberapa hari tidak posting hari ini saya mau menulis sebuah artikel baru nih. Artikel ini sendiri saya buat untuk menjawab pertanyaan mas Andy Suwito yang menanyakan masalah ini.

Sesuai dengan judul, kali ini saya ingin membuat jumlah komentar dari sebuah postingan / artikel tampil di sebelah "read more", "continue reading", "baca selengkapnya", atau lain sebagainya yang biasa akan muncul di halaman homepage blog untuk meringkas isi dari sebuah artikel.

Oiya, sob tutorial ini kurang lebih sama dengan postingan sebelumnya, namun hanya penempatannya saja yang berbeda, bukan disamping judul postingan seperti sebelumnya.

Ok, langsung saja :

1. Login ke blogger.



2. Masuk ke Template - Edit HTML dan centang "Expand Template Widget".



3. Letakkan kode berikut ini tepat diatas </style> :

.comment-ballon{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi88PcflEFhgpREqiqP-steoAQA_YESgKGKnX-EQoWzevSAUWb-0usDfN8GlMsoMC09ZE0U6RNJUhHK7hNUyJQcehiG5dAZYFYX9YwNV-9xtOqu8_iE22gLwnA_jmY2ZXw0zBhUN-fOmMRh/s1600/comment+jadi.gif) no-repeat; width:32px; height:32px; text-align:center; font-size: 16px; float: right; padding-top: 3px; margin-right: 10px; font-color: #ffffff; } .comment-ballon a{ color: #000000; }
4. Selanjutnya letakkan kode berikut di atas <data:post.body/></div> :

<div class='comment-ballon'><b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/> </b:if></a> </b:if></div>
5. Coba klik Pratinjau apabila tidak ada masalah dan sudah sesuai silahkan Simpan Template.

6. Enjoy.


Gimana sob??? semoga bermanfaat yah dan bisa menjawab pertanyaan mas Andy Suwito.

March 18, 2013

Cara Menghapus Link Aktif Pada Komentar Blog




Halo sob...

Siang dan panas begini enaknya ngapain yah??? tidur kali yahh, hehehe ya ga lah, orang lagi kerja juga...

Ok, disela-sela jam istirahat kerja saya akan memberikan sebuah tutorial untuk menghapus atau mengganti link aktif pada komentar blog secara otomatis.

Udah tau maksud dari link aktif kan sob??? hehehe, ya kurang lebih begini, apabila ada seorang atau lebih pengunjung yang berkomentar pada sebuah artikel di blog kita dan kemudian mereka menempatkan sebuah kata atau kalimat yang ditautkan pada link yang mereka sudah siapkan.

Kira-kira begini link yang mereka tautkan :

<a href='http://aiizahh.blogspot.com/'>Contoh Link Aktif</a> --->> Contoh Link Aktif

Nah, untuk kita sebagai pemilik blog tentu ini sebuah cara yang tidak sehat mengingat si penaruh link tersebut mendapatkan backlink dari kita namun tidak sebaliknya. Padahal masih ada cara-cara sehat yang bisa dilakukan, seperti misalnya saling bertukar link sehingga satu sama lain dapat diuntungkan.

Sebenarnya, untuk mencegah pengunjung blog menautkan link aktif pada komentar nya dapat dilakukan dengan cara yang santun, misalnya dengan memberikan informasi di sekitar kotak komentar untuk tidak menampilkan link aktif, seperti halnya di blog ini, menerapkan fitur moderasi komentar, sampai pada menghapus secara manual komentar yang sekiranya menautkan link aktif.

Tapi, tidak sedikit yang mungkin entah tidak membaca tulisan yang kita pasang tersebut atau mungkin sengaja untuk tetap menautkan link aktif pada komentar nya, sehingga dibutuhkan cara-cara yang dapat secara otomatis mencegahnya.

Ok, langsung aja kita praktek sob...

1. Login di blogger.


2. Pilih Template - Edit HTML - Expand Template Widget.


3. Cari kode ]]></b:skin> dan letakkan kode berikut tepat diatasnya :

#comments p a {display:none;}

4. Cari kode </head> dan letakkan salah satu kode berikut tepat diatas nya :

    |> Untuk mengganti link aktif dengan kalimat :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
 jQuery("#comments p").find("a").replaceWith("<span>Peringatan: Dilarang Menampilkan Link Aktif</span>");
});
</script>

    |> Untuk mengganti link aktif dengan link temen-temen :

script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
 jQuery("#comments p a").attr("href", "http://URL-anda.com/");
});
</script> 

5. Simpan Template.

6. Enjoy.

Terima kasih, semoga bermanfaat dan jangan lupa tinggalkan komentar temen-temen.

March 15, 2013

Cara Menampilkan Jumlah Komentar Pada Judul Postingan Blog




Selamat siang sob...

Setelah sebelumnya saya share mengenai widget-widget twitter yang keren, kali ini postingan saya tidak kalah menarik sob...

Yup, sesuai judulnya kali ini kita akan memasang jumlah komentar tepat disamping judul artikel atau postingan blog kita. Untuk contohnya bisa kalian lihat sendiri di judul postingan blog saya ini. Sebelumnya siapkan dulu bahan-bahannya sob, hehehe yaitu kode-kode dibawah ini yang nantinya akan dipasang.

1. Login dulu ke blogger.



2. Pilih Template - Edit HTML dan centang "Expand Template Widget".


3. Cari kode ]]></b:skin> dan letakkan kode berikut ini tepat diatasnya.

 
.comment-ballon{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi88PcflEFhgpREqiqP-steoAQA_YESgKGKnX-EQoWzevSAUWb-0usDfN8GlMsoMC09ZE0U6RNJUhHK7hNUyJQcehiG5dAZYFYX9YwNV-9xtOqu8_iE22gLwnA_jmY2ZXw0zBhUN-fOmMRh/s1600/comment+jadi.gif) no-repeat; width:32px; height:32px; text-align:center; font-size: 16px; float: right; padding-top: 3px; margin-right: 10px; font-color: #ffffff; } .comment-ballon a{ color: #000000; }

4. Lanjut sob kalo udah, kita cari kode <a expr:name='data:post.id'/> dan letakkan kode berikut ini tepat diatasnya.

 
 <div class='comment-ballon'><b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/> </b:if></a> </b:if></div>

5. Kemudian cari lagi kode seperti dibawah ini sob dan kemudian hapus kode tersebut.

 
<span class='post-comment-link'>                 <b:if cond='data:blog.pageType != &quot;item&quot;'>                   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>                     <b:if cond='data:post.allowComments'>                       <b:include data='post' name='comment_count_picker'/>                     </b:if>                   </b:if>                 </b:if>               </span>

6. Langkah terakhir --->> Simpan Template.

7. Enjoy.


Ok...terima kasih sob atas kunjungannya dan silahkan tinggalkan komentar kalian yang ingin dan sudah mencoba. Semoga bermanfaat.

March 2, 2013

Membuat Kotak Komentar Bertingkat Pada Blog

Halo sob...

Kali ini saya mau sharing cara membuat kotak komentar ala Wordpress. Kalau sebelumnya saya sudah share cara membuat kotak komentar dengan menggunakan jasa dari Disqus, maka tidak dengan cara ini, kita hanya perlu memasukkan kode-kode tertentu.

Jadi kotak komentar nya nanti bertingkat apabila ada yg membalas komentar dari kita atau sebaliknya. Dengan menggunakan cara ini, maka temen-temen bisa melihat kotak komentar yang lebih rapi karena baik komentar yang mendapatkan balasan maupun komentar balasannya sendiri akan lebih terstruktur...



Ok gini caranya  :

1. Login dulu ke blogger.



2. Buka Template - Edit HTML.



3. Jangan lupa centang "Expand Template Widget".
4. Cari kode <b:include data='post' name='comments'/> dan ganti semua* dengan kode berikut :

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

5. Simpan template.
6. Enjoy.

*Ket : kode <b:include data='post' name='comments'/> di template ada sekitar 4, maka ganti semua kode tersebut.

Silahkan dilihat sob, udah berhasil apa belum, hehehe kalo ga berhasil berarti ada yang salah dengan temen-temen, wkwkwwkkkkk.....

Terima kasih, semoga bermanfaat...

February 26, 2013

Cara Membuat Emoticon Di Kotak Komentar


Artikel / Postingan Sudah Tidak Valid Lagi, Silahkan Menggunakan Tutorial Baru Pada Artikel di Halaman Ini

Halo sob...



Kali ini saya mau share nih cara membuat emoticon pada kotak komentar blog sehingga tampilannya pun semakin rame sob, hehehehe...

Untuk contoh nya sendiri bisa temen-temen liat di kotak komentar dibawah, dan silahkan berkomentar untuk mencobanya. Untuk cara pemasangannya di blog cukup mudah hanya perlu copy paste kode-kode yang nanti saya berikan kok.

Ok, langsung praktek yuk... :

1. Login dulu ke blogger.


2. Masuk ke Template - Edit HTML.


3. Jangan lupa centang dulu "Expand Template Widget".
4. Selanjutnya cari kode </body> dan letakkan kode berikut tepat diatasnya.

http://aiizahh-smiley.googlecode.com/files/aiizahhsmiley.js

5.  Selanjutnya cari kode <p class='comment-footer'> dan letakkan kode berikut tepat dibawahnya.

<div style='overflow:auto; width:autopx; height:200px; border:1px; padding:5px 5px 5px 5px; background:#FED980;'>       
<b> <img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiURf53sm8g-ExI0GsHl-fTQLjVqFAL1bNGJUonw8y2-Sq0gWwQCPwTlyssAvSmkbtG5XddsVJgqMj3zm9wJWAPg_C4AOgeVwbzEunaV4byPHAWvxH-hw0wtP7cz48Xboj3RPPFkh80UeHJ/s1600/I-Luv-Indonesia.gif' width='50'/>
 :iloveindonesia
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLtg3MbEj5lf_OUhBD2l9LMUPPr7t0TJUJqrGbJn5s8MT9ZK1e0izesTbnnbPQVhEqbja30Prvo3seUC_DSIT6uptiRGIpuFxWZjX-dLFEQuB6KiRvTSeTnvt4q35UGHyHOoBEPzLkeKbS/s1600/cewek.gif' width='50'/>
:kiss
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbfnK1i_LvjK_maco35xtElFqzzyy4X1ipm07M-Xlu-PQqnX1E3OkQluT3d6ghbnA9VoqG644Ed-plHKZbTMIe7daiKrV0WIAYd5ZKfupW9AhEnX5xYYtmIkPtHZRfMO6_HUa_08yKDSU_/s1600/s_sm_maho.gif' width='50'/>
:maho
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwYr0AWk4HCSbSc5Ws-WCjORZ_AawFG6Qa86CvG_4HXXOV5PNFKLqTwo0vjWTGxYSUFr89KJZZfYNCABY7LwMQo0DkN3kODEfgKSCjq7pEAFtOGnqnAU74onJyTxvpMJmZH6BO6NID72Y2/s1600/najis.gif' width='50'/>
 :najis
 <img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB8_K5Bw9D6jigFIgKd-uM41GgAKgHgW3HM60cTwBND8099-feiPKxQ0bfPL8zJNDYPkCi6RTKu0EUu082UzDqN3cEJtehXV920rIZgNEsrpRA1Z3O4oJwqozujHTmagA-Hjh7ZvR8s-k2/s1600/nosara.gif' width='50'/>
:nosara
 <img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqjCLaBcMt5qvJGDnUHqALkh6A0oCnTsjCMPxuwVIqDu39tZT68eZ-XTXb0UAlbXiWmC8detph-cQzdmgw32EmIJnnfjh71F7dy10ffn6Nt0nZyyM7Yc-m13D9x8Eh0SpQ_ai9hyphenhyphenY_d2Jg/s1600/marah.gif' width='50'/>
:marah
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9m0MeBHBf3ltvye8cikAtmY8EDR5AQUp5CHuoQCTSEUIyzYWohyphenhyphenzsSML8wwUfMllADwM59YpHEtZKtVN9FjpCsFJISdm-hoVOGXnOuK_vd9g0HSz-RhhDmB_vY6FEcxQUv1SLFLyElynX/s1600/hotnews.gif' width='50'/>
:hotnews:
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN_w6Ys0oDaeDdUlmb7OOVBDwVqC7F794Cqe-pF1WjtyhXMXZBxOqNzJWad8SMZ-iN8hSUNrG2Tfuhs40tFtOvS32j0ZmhWxZt52UgvpWe1wGm0OVhlD1Vf1OoTXB8TP67JPzC9zECA8bb/s1600/ngakak.gif' width='50'/>
:ngakak
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-xrArDHz2pIsg2U1L8tJ3sNs1db51ldLaMluK6-E7TwbB8Xo9ZWHeJtgxvXVucN9xp5rJRaHTiYDOQjZkADvLF8m6TZ6AlOOAr_U7_E0-K0b8aIIJeDIdSjb4fzb-RnBg-3UDBnqoHAvJ/s1600/sundul.gif' width='50'/>
:sup2:
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_3mub32NukrnliDn0YKwCoY7fIuD_5RGt2_hyTQiydBM8DJTXJX1mHlBXj0xc-Dp4_M4SVDRglXZWZRU9gTvXhG0469lKdGPbcp3CndOX1TZxatDKc9pn7Xdnm3tOGF6p05KBhBjn_85U/s1600/jempol2.gif' width='50'/>
:jempol2
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR5wylWLAtgAgBFA5FyWyLRp5I-aRLyrdnkCAXgni8TbN7BcMlqdGkS0d2eHQYlW3LpM68EcOJqz6joLsJaH8uJGPOnDtHGqKGpTbHNuDwcJhzEFsil1TDPe4-wAoCn_geQkLnHH9E1Dmo/s1600/ngacir3.gif' width='50'/>
:ngacir2:
<img height='50' smiley='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEZGWX-0Q-W9U4oj8Rxs9UrensZuIDzsDKi7dMtuwA2_QJedf4cp6nrb4ObWyrgMp_xst0iEYYV-PToRJPjEoD9NSqKzHJpJvp5pIi6QqFHrf1Aisfc3_4q807J3HtXRyVYFxwuhlT5Le0/s1600/shakehand2.gif' width='50'/>
:shakehand2:
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizpFEbszeKlhrzfKHkwzuQmH0KTFxhbWzJkwhXm1MtWKfn6FzdPvXuvgqO9RstPd15e-F27j-aVgfPY1vlsyi5kUtCxShlhIo9beojSewG3gybWy_TCzLM7kLQGpv2ZRvD9BJXDtogMnll/s1600/sorry.gif' width='50'/>
:sorry:
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvYZCz4dRcOCI-K1TJomsq_cK1xOkacmCI54gYUZ1mlQ9asZGJf18AUZFmsdybLShq11-W7MyYSFbcx7orPfqakgDLMH4DmQ6d-xkel69UUi5-F_ecMPJPkxmr6QM6rDqhjy95zJuIYHN6/s1600/hammer.gif' width='50'/>
:hammer
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMfpV6YtBX-zO6QWa_UIjG8_IMWFMLxuTC7YsQbORNlvp1mN_y3tsKR8BzGnNLa2FD2nxpRY7UuSiapRD2Yr0zmBAOA6vXIkHyP9twRVOSm7QxmcJz56MVInNLDOZo3pL6T27TQq_bUosW/s1600/lebaran03.gif' width='50'/>
:selamat
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihUO6fPWD8vbsAVY52ERtPJQzohDOnXzehZY4dZAO6k_2zV0oLFTOBHUYXWCtv3BnwLmjKhA1FXUCS2LDCor2n7NVTXqmHgQ-C9dUyFdMbSgSaJIXDSYGNTfYzU_uwHrUCu5BCc0-dqFlg/s1600/1+kimpoi.gif' width='50'/>
:kimpoi2
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFzZ1wLfyNRtYFbOxWIw1UIDaBUDqETTITV2cXO48aZNpWG08qmGf_s2VQjAuTb2UaQ4i9vae9gnQ-jB4DkWqREDXIKq36yRfufLmsocNzUhr8RgW-IkksSeXeDUhRBkU_VIMDll_oEvgs/s1600/tired1.gif' width='50'/>
:tired:
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIc4549p6rBD6Hq3sU4TPQrIVNaWUqT7w2NtTHoCIHh2AYAAIKVhZJhVJAjP_zT0r7O7qxu16dbo03-p0Hl2oelPVHAZLdZRCR4R4hcD2nxPj7VPXGLupYoF0KYBO1rPr8Olexu4MXSHc/s1600/bayi+ngakak.gif' width='50'/>
:babyboy2:
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOghinrRnBC3e-8FKYHgoCGoekSuGCsp_pqdfN8EOMhwbZU_DnLALuC65CttkjljvDhGUVBtTgMEBaihDlZAvdnw3nGpTj7g9b3E7WotUMmgx8qqFS2kAPRNHfAvpumGLqjvGuLzXjCKXI/s1600/smoke.gif' width='50'/>
:smoke:
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPsMBZWg_LqGABGU5vANqtzbm2LWy-eTuM-pVZ4LvVcEn3WggGudlzNjEli_lwj7qCpHnqqFvyKhRpsn1ef7PWRDNfeXXLMd8o7jPDd8P7RVhJz3y9FGDMCcqhJTKBNm0ZRLyfz3viP9mT/s1600/spoiled' width='50'/>
:spoiled:
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6PX19jlyE2TiflOWjeyXBE8Gkni94gFNoO0MPA2FmWdPE7h5XlNKagnfhKRaWTFRnaFMzH2hRiAdBDK9epTHTJJDAFHshmxz6-u4wKS7nliCkr8Lv2fefV5kGkjakSwF7ykbmeUSRBL3E/s1600/idontcare.gif' width='50'/>
:idontcare:
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUjY_PYJmMOCsV7_hNEpefHJeu3wQ0cmp03GSvekA1QiBA8NcoXaPuw6Qjh-RoCmdQa6xVlMHrdUeWhXEOYTDBNC_VIbr6-we1t4BvGSaO-oys-oCwt3K40Ho3FpZeD1QD5Sfetn-YENDC/s1600/greedy.gif' width='50'/>
:greedy:
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK19ncWdWk9STMYq_8_5GMfZmTi6Y063d-Sn2FNJF0MYNX6owYDM33ios5-qIfORe10K63FGIMFAtv-6biAT0JEDvGLpBf9Dc_JVvyIOFn0tlKJVg9VFEPn5oeqIvmWO7D5CYk25glz5rp/s1600/deff.gif' width='50'/>
:deff:
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGYyfnErp1bfs1ID9CwBu1IHekd79FrnMwGiPetsIofOXXRMoBT-lkE7cE4H2QorhmPbdKFPn0HIu61WzFZCOagY7wBtk5ohX1AsqiRNfAibbOL8jZmrn5C1GgwKU75uSqf0xQlPB74huk/s1600/depressed.gif' width='50'/>
:depresi:
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjsUe7F4wHS72BYJrsGY9CPJtoCJ8vv-x3kMs6QIEoSnc5ikRr5mibjA5ifHnKsMdn3xJtXA3ulcEOXbXNifdQEUAxVEWHgjPWUXovfIkHmngmPiHnCSk7Rc5y4kgnkkDdXG21zwaHZBFK/s1600/dad.gif' width='50'/>
:asap:
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAtKilR688T_r-kdrYTQpUt5NIOv659A1sy3Dkel8wD5uz5l2wzXsqvWEtkq7Le7oFPTutTt5DSg2JApRqHRW1avgU0sQIaiOfvlhzT9Wz7xyK1vKVU4gfpPtxIpDZ5GbSPULN4dMxjYrb/s1600/1+beer.gif' width='50'/>
:beer:
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmsTJtKzdrKRjX6xzJ_o8hlXK-_YRZSqGlLLjjahMDijDYCD0ZQU9e54SETcJut0YFXnJRj0rTuNWUNJzwxlAzPj0QUjeLJZGTxp4isWMdx_FDIE51M8KAKj8fYfuA1RdIhzQ_wiYnYI2W/s1600/slap.gif' width='50'/>
:slap:
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAVA56bvcvfeQ4N4aAafK9iJdRAyaLkYdXW7sMhdWMDNoAMUx6ZUdG9ECuqHWmmgOYeo0CKGkgQiCoBfawiWxUWqMe51E8rlp-7YZ7DvDod-Z8807ADWDuxzbAIWG45RFRDIGkfEeAvkE4/s1600/shake.gif' width='50'/>
:shake:
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB5Xbs5MmJwwk5Q_mhHU1Z7ApvvOp-lqitFfegs-xDlxGzYDoT8DrkF5jPdC8oNlbduXxTUZoNAFiS516mXcv0J-AoiilzXXrv1yWo2ZdcRCHuzl80-_34g8a1GmLoyIkYyhUwOZ7VxpQ5/s1600/order.gif' width='50'/>
:no:
<img class='smiley' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ4USqsEZGfWFbiMzMFMx4JPvTBEkDImZW5vmN-qN2Ms20Li1vdBqYeEhDpCDsxzQuh1w62gnBWlg4t4MzDL9lJ4gIzjE-Z5EnEz45FFkfGP0jnn_D31LNvBl8J_9iPML7U47ENOvFgthb/s1600/support.gif' width='50'/>
:yahoo:
</b>
</div>

6. Simpan template.
7. Enjoy.

*Keterangan : Apabila terdapat lebih dari satu kode <p class='comment-footer'> maka letakkan dibawah kode yang ketiga.

Ok, gimana sob??? silahkan dicoba, dilihat, dan diamati serta diresapi dulu ya, wkwkwkk...

Sekian dulu sob, terima kasih semoga postingannya bermanfaat yaa...