Membuat Show Hide Konversi kode & Emoticon pada Komentar Blog

Membuat Show Hide Konversi kode & Emoticon pada Komentar Blog

Sudah banyak tutorial tentang membuat show hiden konversi & emoticon pada komentar Blogger, saat ini saya akan mencoba menuliskan tentang cara tentang membuat show hiden konversi & emoticon pada komentar Blogger. sedikit cerita ketika pemasangan ada sedikit problem yang saya temukan yaitu show hide Konversi kode dan emoticon ketika saat saya klik tidaklah berfungsi, dan kolom komentar tidaklah terbentuk sempurna menjadi ganda.


 Saya mencoba memperbaikinya. Jika sobat ingin menerapkannya, berikut ini penerapannya ;

1. langkah pertama Kita akan membuat tombol untuk membunculkan dan menyembunyikan konversi kode dan emoticon, latakkan kode CSS dibawah ini sebelum ]]></b:skin>

 -----@ak~konversi&emoticon----
#comments .red-button{
color:#fff;
margin-right:10px;
padding:4px 15px;
background-color:#A00F0F;
font-size:12px;
font-family: &#39;Open Sans&#39;, sans-serif, &#39;Segoe UI&#39;,Arial,Tahoma;
font-weight:400;
text-transform:none;
border-radius:4px;
text-decoration:none;
outline:none;
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #333;
text-shadow:0px -1px 0px rgba(0,0,0,0.3);
transition: background-color 1s ease-out 0s;
cursor:pointer;
}
#comments .red-button a{
color:#fff !important;
}
#comments .red-button a:hover{
text-decoration:none;
}
#comments .red-button:hover {
background-color:#6F0A0A;
color:#ffffff;
}
#comments .blue-button{
color:#fff;
margin-right:10px;
padding:4px 15px;
background-color:#38f;
font-size:12px;
font-family: &#39;Open Sans&#39;, sans-serif, &#39;Segoe UI&#39;,Arial,Tahoma;
font-weight:400;
text-transform:none;
border-radius:4px;
text-decoration:none;
outline:none;
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #333;
text-shadow:0px -1px 0px rgba(0,0,0,0.3);
transition: background-color 1s ease-out 0s;
cursor:pointer;
}
#comments .blue-button a{
color:#ffffff !important;
}
#comments .blue-button a:hover{
text-decoration:none;
}
#comments .blue-button:hover {
background-color:#000264;
color:#ffffff;
}
.myframe {
    display: none;
    background: none repeat scroll 0% 0% transparent;
    width: 100%;
    height: 315px;
    margin: 5px 0;
}
.emotki {
margin:10px 0;
width:100%;
font-size: 80%;
color:red;
text-align:center;
display: inline-block;
}


2. Langkah ke 2 Sobat cari kode <p><data:blogcommentMessage/></p>, terdapat 4 buah kode tersebut letakan kode dibawah ini pada  kode ke 2 dan ke 4 dan terapkan sebelum tag penutup </p>


 <br/>
<span class='konversi red-button'>Konversi Kode</span>
<span class='tutup red-button' style='display: none;'>Tutup Konversi Kode</span>
<span class='buka_emo blue-button' style='background:#38F'>Emoticon</span>

 Gambar :


3. Langkah ke 3 sobat terapkan kode dibawah ini pada  kode ke 2 dan ke 4 dan terapkan sesudah tag penutup </p>

 <script>
$(document).ready(function() {
     $(&#39;.konversi&#39;).click(function() {
$(&#39;.myframe&#39;).show();
        $(&#39;.tutup&#39;).show();
        $(&#39;.konversi&#39;).hide();
     });

     $(&#39;.tutup&#39;).click(function() {
        $(&#39;.myframe&#39;).hide();
        $(&#39;.tutup&#39;).hide();
        $(&#39;.konversi&#39;).show();
     });

     $(&#39;.buka_emo&#39;).click(function() {
        $(&#39;.emotki&#39;).slideToggle(&#39;slow&#39;);
     });
});
</script>
<div class='myframe' style='display:inline-block;display:none;'>
   <iframe allowfullscreen='allowfullscreen' class='myframe' src='https://googledrive.com/host/0B-GXzRKoPbNnRkdncDdGbDNhZkk'/>
</div>
<strong class='emotki' style='display:none'>
<div style='overflow:auto; width:100%px; height:auto; padding:5px 5px 5px 5px; background: #000000;'>
</div>
</strong>


4. Langkah ke 4 simpan Template

Demikian cara Membuat Show Hide Konversi kode & Emoticon pada Komentar Blog, Semoga bermanfaat.

Banyak dibaca:

Loading...
Buka Komentar
Blogger
Disqus
Pilih Sistem Komentar

73 komentar

terus mna emoticonnya gan?? jika blm ada emo bawaan, jika mau ditambah emo dimana naruhnya??
catatansaif.blogspot.com

Balas

Untuk pemasangan emonya dibawah kode <i rel="pre"><div style='overflow:auto; width:100%px; height:auto; padding:5px 5px 5px 5px; background: #000000;'></i>

Misalnya seperti ini gan:

<i rel="pre">
<div style='overflow:auto; width:100%px; height:auto; padding:5px 5px 5px 5px; background: #000000;'>
<center><b>
<img border='0' src='https://s.yimg.com/lq/i/mesg/emoticons7/36.gif'/>:a
<img border='0' src='https://s.yimg.com/lq/i/mesg/emoticons7/8.gif'/>:b
<img border='0' src='https://s.yimg.com/lq/i/mesg/emoticons7/113.gif'/>:c
</div>
</strong></i>

Balas

tutorialnya ga lengkap ne
udah diutak atik isi template hasilnya malah ga bagus :(

Balas

itu belum ada emoticon ya gan, dan belum ada Jquerynya.
Agan bisa menambahkannya.

Balas

caranya gimana saya masih awam gan

Balas

untuk emonya agan letakkan dibawah kode

<div style='overflow:auto; width:100%px; height:auto; padding:5px 5px 5px 5px; background: #000000;'>

<center><b>
<img border='0' src='https://s.yimg.com/lq/i/mesg/emoticons7/36.gif'/>:a

<img border='0' src='https://s.yimg.com/lq/i/mesg/emoticons7/8.gif'/>:b

<img border='0' src='https://s.yimg.com/lq/i/mesg/emoticons7/113.gif'/>:c

</div>

</strong>

dan untuk scriptnya agan letakkan diatas kode </body>

<script src="https://aakyos.googlecode.com/svn/smiley_komentar.js" type="text/javascript"/></script>



jika masih bingung agan bisa tanyakan kembali

Balas

ini baru admin ganteng IoI

Balas

kalau bisa tutorialnya biar sama kaya diblog ini min soalnya keren banget ada oot sama infonya

Balas

Mohon maaf gan karena pertanyaannya diluar topik jadi secara otomatis akan muncul kotak informasi ^_^

Balas

hehehe... :D
iya, gak apa-apa gan :-bd

Balas

waduh kok ga berubah menjadi emoticon cuma jadi huruf biasa aja
@@, cek aja di http://belajarseonih.blogspot*com/2014/12/cara-mendaftar-menjadi-fighter-cyber.html?showComment=1419514688373#c9152879828893938562
ganti * jadi .

Balas

Sudah saya lihat gan, keren gan.

maaf gan kode emo itu bukan kode yang sebenarnya itu hanya buat contoh,
agan perlu mengedit Javascript, karena emo dan kode yang sebenarnya ada didalam Javascript.
untuk mengedit Javascript agan bisa membacanya disini

http://www.aak-share.com/2014/09/cara-mengedit-file-javascript.html

Balas

aduh nyerah dah saya itu aja dapet hasil kaya gitu udah bongkar bongkar terus templatenya
mendingan saya pakai template bawaan mas sugeng aja dah

Balas

Gan script yang harus dipasang ke kode body yg mana?? dan cara nambahin tombol OOT di sebelah tombol emoticonnya gmn gan??? mohon jwbannya..

Balas

Agan bisa menambahkan script ini diatas /body , kode ini berisikan emoticon


<script type="text/javascript" src="http://yourjavascript.com/42661283130/seo-aak-smileyonion-komentar-blogger.js"></script>


Untuk menciptakan seperti yang agan maksud diatas , perlu menambhkan kode css

#comments .gren-button{

color:#fff;

margin-right:10px;

padding:4px 15px;

background-color:#38f;

font-size:12px;

font-family: &#39;Open Sans&#39;, sans-serif, &#39;Segoe UI&#39;,Arial,Tahoma;

font-weight:400;

text-transform:none;

border-radius:4px;

text-decoration:none;

outline:none;

box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #333;

text-shadow:0px -1px 0px rgba(0,0,0,0.3);

transition: background-color 1s ease-out 0s;

cursor:pointer;

}

#comments .gren-button a{

color:#ffffff !important;

}

#comments .gren-button a:hover{

text-decoration:none;

}

#comments .gren-button:hover {

background-color:#000264;

color:#ffffff;

}


.oot {

margin:10px 0;

width:100%;

font-size: 80%;

color:gren;

text-align:center;

display: inline-block;

}


Kemudian tambahkan HTML dan Javascript

HTML

<span class='oot gren-button' style='background:#00b71c'>Oot</span>


Javascript

$(&#39;.oot&#39;).click(function() {

HTML

<a class='oot' href='URL Tujuan' target='_blank'></a>






selanjutnya penambhakan HTML dan Javascript


HTML


Javascript


HTML

Balas

Gan kok ngk muncul ya tombolnya?? padahal ane udh ikuti tutornya tpi ngk muncul tombolnya diatas komentar ane

Balas

pada kode <p><data:blogcommentMessage/></p>
biasanya di template ada empat , agan tambahkan kode tersebut di no mor dua dan empat.
karena jika di tambahkan di satu tempat tidak mau muncul.

Balas

udah ane tambahin kedua tempat gan tpi kok malah ngk bisa diklik???udh ane klik tpi ngk keluar emo nya...

Balas

satu lagi gan....cara memperbaiki kode /body gmn ya gan?? soalnya kode /body di template saya warnanya merah tpi setiap saya save template ngk ada eror gan...tpi kok warnanya merah gan?? cara memperbaikinya gmn gan??

Balas

karena gak ada emonya gan , perlu ditambahkan emonya.
pada kode diatas body itu emo didalam script itu emo yang sebenarnya, dan emo yang dimunculkan itu hanya contoh.
Untuk contoh coba agan masukan kode emo ini pada template nomor dua dan empat

<div style="background: #000000; height: auto; overflow: auto; padding: 5px 5px 5px 5px; width: 100%px;">

<center><b>

<img border="0" src="http://3.bp.blogspot.com/-IMZRWcicLy0/VJwlNxSBZTI/AAAAAAAAH0c/sjZFFVhcjV0/s1600/20.gif" />/:a

<img border="0" src="http://3.bp.blogspot.com/-fsoA2BMN4iI/VJwgWT0NTsI/AAAAAAAAHyA/YLPR9-Yk7I8/s1600/1.gif" />/:b

<img border="0" src="http://1.bp.blogspot.com/-XVwYGjE6ETE/VJwgf6K1mNI/AAAAAAAAHzU/c63-ee5iLhc/s1600/2.gif" />:c

</div>

</strong>

Balas

sudah saya taruh gan....tpi tetep ngk muncul emonya.....nah pas saya masukan script di atas /body tpi yang kode /script terakhir ngk valid jadi hanya sampai blogger.js'> itu gan...soalnya kode /body template ane warnanya merah dan ane ngk tau apa masalahnya... pas ane masukin kode center><b pun tidak valid gan..agan tau ngk cara memperbaikinya..??

Balas

tetep ngk muncul emo nya gan...

Balas

kode script untuk bodynya ngk valid gan... mohon balasannya gan....

Balas

Agan coba hilangkan kode center b nya , coba agan masukan kode emonya saja.


<div style="background: #000000; height: auto; overflow: auto; padding: 5px 5px 5px 5px; width: 100%px;">

<img border="0" src="http://3.bp.blogspot.com/-IMZRWcicLy0/VJwlNxSBZTI/AAAAAAAAH0c/sjZFFVhcjV0/s1600/20.gif" />/:a

<img border="0" src="http://3.bp.blogspot.com/-fsoA2BMN4iI/VJwgWT0NTsI/AAAAAAAAHyA/YLPR9-Yk7I8/s1600/1.gif" />/:b

<img border="0" src="http://1.bp.blogspot.com/-XVwYGjE6ETE/VJwgf6K1mNI/AAAAAAAAHzU/c63-ee5iLhc/s1600/2.gif" />:c

</div>

</strong>


Agan coba masukan script ini diatas / body

<script src="https://aakyos.googlecode.com/svn/smiley_komentar.js" type="text/javascript"/></script>

Balas

kode yg agan suruh pasang diatas kode /body itu ngk valid gan....pas kode /script> nya itu eror gan...

Balas

agan pake script apa buat tombol smileynya yg ini??? kasih saya yg tutor ini aja gan yang lagi agan pakai sekarang buat konversi kode..Out Of Topic dan Smileynya... coba kasih ane script dan tutornya..soalnya yg di postingan agan ini ngk work...

Balas

kenapa di simpan diatas /body karena agar cepat terbaca oleh Template ,
tapi kalo gak suport diatas /body , coba agan masukan di atas kode /head

Balas

oke bentar gan ane coba ya...

Balas

tetep ngk bisa gan,,kode nya ngk valid...

Balas

iya gan , :-d

Balas

biasanya script supprt baiik itu si atas /head sama diatas /body ,
coba agan hilangkan /script yang akhir.
jadinya seperti ini gan

<script src="https://aakyos.googlecode.com/svn/smiley_komentar.js" type="text/javascript"/>

pasangkan di atas /body

Balas

nah klo itunya diilangin malah ngk muncul emoticonnya gan....pas ane klik ngk keluar emonya

Balas

gna kode center></b dan /script nya ngk bekerja gan.... tidak valid...coba ane minta yg dari kode di template blog agan aja...kan agan juga udh pasang tuh kode smiley oot dan konversi kodenya dan saya minta yg di punya agan aja,,soalnya klo agan ngasi tutor ini ngk bakal valid di template mana pun gan.....

Balas

Gan ane mau tanya nih,,kan ane ketemu cara bikin tombol konversi dan smiley seperti yang agan punya nah katanya ane ada disuruh ganti class tombol ane.... nah yang dimaksud tombol class button itu apa gan?? dan cara mencarinya gmn???

Balas

kode diatas dulu pernah saya pasang di template yang dulu gan , emo sma scriptnya berjalan dengan baik .
untuk emo hanya penambahan saja gan , solusi lain agan bisa cari di embah Google cara membuat emoticon di komentar Blog . Setelah itu agan tambahkan pada emonya seperti cara diatas dan scriptnya biasanya di pasangkan di atas /body.

class='buka_emo blue-button' ,

blue-button itu ada pada css untuk mempercantik tampilan dan, buka_emo ada pada fungsi buka tutup ini ada pada javascript gan. kode ini yang membuat bekerja bisa buka tutup jika di klik.

$('.buka_emo').click(function() {
$('.emotki').slideToggle('slow');

emotki di ambil dari css , dan setelah itu sesuaikan dengan <span class='buka_emo blue-button' style='background:#38F'>Emoticon</span> agar bekerja bila diklik .

Balas

tpi di blog ane ngk bekerja gan..... pas di klik itu ngk bisa....

Balas

gini aja gan..agan bisa ngk ane jadiin admin blog ane buat sementara..trus agan terapkan ke blog ane....ntr klo udh bisa nanti ane kick lagi...dan nanti ane juga bisa belajar cara agan nerapinnya gan..apa sama dgn yg saya terapkan....gimana gan??? add FB saya gan.... ivoshackiller@yahoo.co.id atau gmail saya ivosyahputra7@gmail.com sebelumnya terima kasih atas partisipasi agan yg mau mengajarkan org awam seperti saya...

Balas

Saya bantu dari sini dulu ya gan , agan tambahkan Javascript di atas /head

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Selanjutnya agan ganti Jquerynya


<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

$('.konversi').click(function() {

$('.myframe').show();

$('.tutup').show();

$('.konversi').hide();

});

$('.tutup').click(function() {

$('.myframe').hide();

$('.tutup').hide();

$('.konversi').show();

});

$('.buka_emo').click(function() {

$('.emotki').slideToggle('slow');

});

});

//]]>

</script>


Agan ganti Jquerynya keduanya .

Balas

yang kode script di atas tetep dipasang semua kan gan???

Balas

gan yg jquery sudah saya hapus dan saya ganti sesuai yg agan suruh tpi kok tombolnya masih belum bisa di klik gan?? tombolnya muncul tpi ngk bisa di klik knp tuh gan?? saya juga sudah menambahkan kode emo dan script diatas kode /body

Balas

skrng yg jadi masalahnya cuma itu gan...tombolnya sih udh muncul tpi emonya ini yg ngk muncul saat tombol di klik gan....

Balas

maaf gan , agan sudah menambahkan Javascriptnya di atas /head belum .
Agan coba tambahkan Javascriptnya di atas /head

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Balas

lalu script yang diatas gimana gan?? yg agan juga suruh tambahin di atas /head??

Balas

script ini bertujuan untuk memfungsikan Jquerynya gan , script yang wkt itu di tambahkan pada/head itu script emo.
Jika agan script emony ada dua di /head dan di body, hilangkan saja salah satunya tidak apa-apa agar tidak bentrok.

Balas

saya udh melakukan semuanya gan tpi tetep ngk bisa..... hmm coba agan tambahin tutornya di postingan agan ini,,biar nanti ane coba dan juga bisa jadi pelajaran untuk para blogger awam seperti saya....

Balas

soalnya agan terlalu banyak ngasi tutor tambahan jadi ane jadi bingung mau naruh script apa jadi ada baiknya agan beri tutronya di postingan agan yg judulnya Cara membuat tombol show hide emoticon itu gan.... biar saya mengerti dan para blogger awam lainnya...

Balas

Sudah di tambahkan gan di

http://www.aak-share.com/2014/07/membuat-show-hide-emoticon-pada_26.html

Balas

gan mungkin saya rasa emo agan yg tidak bekerja gan..klo URL emo nya sih bekerja...soalnya URL emo agan itu ane pake untuk pengganti dari script lain...tpi pas pake yg script agan ngk work gan....

Balas

Maaf gan saya coba work gan , saya menggunkan Javascript ini

<script src="https://aakyos.googlecode.com/svn/smiley_komentar.js" type="text/javascript"/>

Untuk contoh agan bisa mencobanya di

http://aakyos.blogspot.com/2015/01/puisi-cinta-romantis.html

Balas

oke saya coba dulu gan...

Balas

oke gan :-d

Balas

gan itu di bawah body apa /body

Balas

di atas kode /body gan

Balas

gan cara pasang tombol oot gimana ya gan?? kode apa saja yg perlu ditambahkan gan??? kasih kodenya donk gan dan tempat naruhnya...

Balas

untuk buat out of topik tambahkan ccs gan

#comments .gren-button{
color:#fff;
margin-right:10px;
padding:4px 15px;
background-color:#38f;
font-size:12px;
font-family: 'Open Sans', sans-serif, 'Segoe UI',Arial,Tahoma;
font-weight:400;
text-transform:none;
border-radius:4px;
text-decoration:none;
outline:none;
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #333;
text-shadow:0px -1px 0px rgba(0,0,0,0.3);
transition: background-color 1s ease-out 0s;
cursor:pointer;
}
#comments .gren-button a{
color:#ffffff !important;
}
#comments .gren-button a:hover{
text-decoration:none;
}
#comments .gren-button:hover {
background-color:#000264;
color:#ffffff;
}

.oot {
margin:10px 0;
width:100%;
font-size: 80%;
color:red;
text-align:center;
display: inline-block;
}


Selanjutnya tambhkan HTML


<a class='click_target gren-button' style='background:#EA4444' href='URL Tujuan' target='_blank'>Oot</a>


kemudian tambahkan Jquery

});
$('.oot').click(function() {
$('.clik').show();
$('.target').hide();

Balas

gan itu nambahin kode HTML dan jquery nya di taruh dimaana??

Balas

Untuk penambahan HTML di bawah tombol emoticon gan

<span class='buka_emo blue-button' style='background:#38F'>Emoticon</span>

<a class='click_target gren-button' style='background:#EA4444' href='URL Tujuan' target='_blank'>Oot</a>



dan penabahan Jquery

//

Balas

Di sini gan penambahan Jquerynya

$('.buka_emo').click(function() {
$('.emotki').slideToggle('slow');
});
$('.oot').click(function() {
$('.clik').show();
$('.target').hide();
});
});

Balas

penambahan jquery di atas kode /head kan gan??

Balas

dibawah kode itu kan gan?? oke ane coba dulu

Balas

:-d gan ,
Penerapan URL Tujuannya di kode HTML gan .

Balas

gan ada masalah nih gan..pas saya pasang tombol emo saya ngk pake jquery buat emonya gan tpi bisa kok gan tanpa itu..... lalu gmn tuh gan?? mau ditaruh dimana kode jquery nya itu???

Balas

oke gan sudah bisa tanpa pake jquery

Balas

Kalo tanpa di pasang Jquery tapi berfungsi , tidak di pasang juga tidak apa-apa gan .
oke gan :-bd

Balas

Gan request satu lagi donk..cara bikin konversi kodenya gimna?? minta kode dan tempat naruhnya donk gan.....

Balas

Langsung pasangkan saja HTML nya di atas tombol emoticon gan

<span class='konversi red-button'>Konversi Kode</span>

<span class='tutup red-button' style='display: none;'>Tutup Konversi Kode</span>


langkah selanjutnya pasangkan Jquerynya di atas Jquery emo

$(document).ready(function() {
$('.konversi').click(function() {
$('.myframe').show();
$('.tutup').show();
$('.konversi').hide();
});
$('.tutup').click(function() {
$('.myframe').hide();
$('.tutup').hide();
$('.konversi').show();
});
$('.buka_emo').click(function() {
$('.emotki').slideToggle('slow');
});
});

Selanjutnya tambahkan kembali kode berikut di bawah Jquery emo

<div class='myframe' style='display:inline-block;display:none;'>

<iframe allowfullscreen='allowfullscreen' class='myframe' src='https://googledrive.com/host/0B-GXzRKoPbNnRkdncDdGbDNhZkk'/>

Balas

tpi saya ngk ada masang jquery emo nya gan... gmn donk?? mau taruh dimana lagi??

Balas

Jquery untuk kode konversinya pasang saja gan berdiri sendiri, taruh di bawah tombol Out Of Topik.
dan tombol konversinya diatas tombol emoticon.

Balas

tpi saya juga ngk masang jquery out of topic nya gan....

Balas

Untuk out of Topik tidak di pasang Jquerynya work gan , tapi untuk konversi perlu di pasang.
Baiknya agan coba dulu pasangkan HTML nya saja untuk tombol konversi dan scripnya, jika work agan tidak perlu memasang Jquerynya . Tapi jika tidak work agan coba pasang Jquerynya.

Balas

pasang jquerynya diatas /head kan???

Balas