Posted by Aak
Aak-share.com Updated at: 2:52:00 PM

Membuat Show Hide Konversi kode & Emoticon pada Komentar Blog

101 comments:
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.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

101 comments

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

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

jangan nyerah gan, tetap semangat =D

ini saya bantu mengedit emonya gan, silahkan agan coba kode dibawah ini, namun emo yang digunakan bukan yahoo tapi emo onion sesuai dengan didalam Javascript

<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

<img border="0" src="http://4.bp.blogspot.com/-kZdjM8FlnTE/VJwghhEWx6I/AAAAAAAAHzc/pCweMDj8lGQ/s1600/3.gif" />/:d

<img border="0" src="http://3.bp.blogspot.com/-aGrGq0SL4hA/VJwgiIg4WZI/AAAAAAAAHzg/PzsDwnNZPU8/s1600/4.gif" />/:e

<img border="0" src="http://4.bp.blogspot.com/-HbPjEQkchhs/VJwgiY9KCSI/AAAAAAAAHz4/TedM5FNl1sk/s1600/5.gif" />/:f

<img border="0" src="http://3.bp.blogspot.com/-yy05tw8HEkU/VJwgipgxLMI/AAAAAAAAHzk/WxV7KdWAmkE/s1600/6.gif" />/:g

<img border="0" src="http://2.bp.blogspot.com/-E7JV23N0Zv0/VJwgjein7-I/AAAAAAAAHzw/pYWJ5bSV58U/s1600/7.gif" />/:h

<img border="0" src="http://4.bp.blogspot.com/-PLy7gAMZzgI/VJwgkMtJ6mI/AAAAAAAAHz0/QHo_7PpUdRc/s1600/8.gif" />/:i

<img border="0" src="http://3.bp.blogspot.com/-t7Fsv8B2t2Y/VJwglQLmadI/AAAAAAAAH0E/O-tCvs0dR2k/s1600/9.gif" />/:j

<img border="0" src="http://2.bp.blogspot.com/-aOg2ntoqjQs/VJwgW7ZHt-I/AAAAAAAAHyI/Ulg15rY7FSc/s1600/10.gif" />/:k

<img border="0" src="http://4.bp.blogspot.com/-fYFeVNA9L58/VJwgWBaVSLI/AAAAAAAAHx8/zuuFnOD3ujU/s1600/11.gif" />/:l

<img border="0" src="http://2.bp.blogspot.com/-rJkFzjmTvnE/VJwgaCXosBI/AAAAAAAAHyY/Bq6NxKdeWQ4/s1600/12.gif" />/:m

<img border="0" src="http://4.bp.blogspot.com/-NQmbTmM4V4w/VJwgZ6A62FI/AAAAAAAAHyU/VgmJoGT-SYw/s1600/13.gif" />/:n

<img border="0" src="http://1.bp.blogspot.com/--svIFGl5GbU/VJwgaW-IZoI/AAAAAAAAHyc/BWNwVuUsDi4/s1600/14.gif" />/:o

<img border="0" src="http://2.bp.blogspot.com/-lARLakqOw8c/VJwgb-j-w6I/AAAAAAAAHys/Fob_5_Bl6Yo/s1600/15.gif" />/:p

<img border="0" src="http://4.bp.blogspot.com/-4rdtUL0cREg/VJwgcTd5psI/AAAAAAAAHyw/-HAOrOTeNGA/s1600/16.gif" />/:q

<img border="0" src="http://1.bp.blogspot.com/-hM7efGibkZM/VJwgcSZjNqI/AAAAAAAAHy4/8hKOfil_fvM/s1600/17.gif" />/:r

<img border="0" src="http://2.bp.blogspot.com/-5qfqOximDDM/VJwgd-t_eWI/AAAAAAAAHzE/fUWXBTsaM4c/s1600/18.gif" />/:s

<img border="0" src="http://3.bp.blogspot.com/-377nNXRIY_I/VJwgeflev9I/AAAAAAAAHzI/w98cVMvz8-o/s1600/19.gif" />/:t

</div>

</strong>


jika agan ingin merubah emo sesuai keinginan agan, agan bisa kunjungi link diatas untuk mengedit Javascript

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

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

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

Bukan gan dibawah tombol Out Of Topik , jadinya seperti ini gan


<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>

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

</p>

<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();

});

});

//]]>

</script>

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

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

Balas

kok onversi kodenya ngk ada backgroundnya gan??? cuma tulisannya aja..ngk kyk tombol yg lainnnya?? ... tombol konversinya udah work gan tpi ngk ada backgroundnya gan..hanya ada tulisan aja gan.....

Balas

agan lupa ngasih kode ini gan di konversi kode style='background:#38F

Balas

knp ngk ada tombolnya ya gan??? cuma tulisan Konversi Kode doank.... kasi pencerahan gan

Balas

Tambahkan CSS gan ,

#comments .red-button{
color:#fff;
margin-right:10px;
padding:4px 15px;
background-color:#A00F0F;
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 .red-button a{
color:#fff !important;
}
#comments .red-button a:hover{
text-decoration:none;
}
#comments .red-button:hover {
background-color:#6F0A0A;
color:#ffffff;
}
.myframe {
display: none;
background: none repeat scroll 0% 0% transparent;
width: 100%;
height: 315px;
margin: 5px 0;
}

style='background:#38F hilangkan saja gan , karena backgroundnya sudah diatur melalui CSS .

Balas

gan cara biar orang yang nulis OOT di komentar blog kita di coret otomatis gimana ya???

Balas

minta tutor kode dan letaknya donk gan buat coret otomatis

Balas

gan kok malah tampil emoticonnya duluan, cara biar nutupinnya gimana?

Balas

Keren gan, sudah betul penempatan tombolnya dan berfungsi dengan baik juga tombolnya.
Hanya saja pada tombol emoticon belum ada emonya gan, jadi jika di klik tidak ada emonya .

Balas

izin bertanya gan, kok tombol konversi kode yang ane kagak ada warnanya ya ? jadi tulisan biasa gitu... kan kalo tombol yang emoticon mah ada warna nya tuh jadi warna biru si tombol nya..
gimana cara fix nya ? :)

ditunggu jawabannya ya gan..

Balas

Itu pengaturan di properti CSS gan,
Coba agan tambahkan atau ganti kode yang sudah ada dengan kode CSS ini :

#comments .red-button{
color:#fff;
margin-right:10px;
padding:4px 15px;
background-color:#A00F0F;
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 .red-button a{
color:#fff !important;
}
#comments .red-button a:hover{
text-decoration:none;
}
#comments .red-button:hover {
background-color:#6F0A0A;
color:#ffffff;
}

Balas

Wah mantep nih langsung di respon :D oke min ntar ane prakteikin :)

oh ya, ntar kalo ane ngalamin bug lagi terus nanya lagi respon ya min :) |o|

Balas

waduh min.. kok jadi makin ancur ya setelah ganti script CSS yang di kasih mimin ? =(

ini min bisa mimin lihat di blog saya.. mohon bantuannya min :)
http://eljangsa.blogspot.com/2015/04/rahasia-menghasilkan-uang-dari-media.html

Balas

yang script css bagian konversi kodenya itu yang mana om ? :)

-----@ak~konversi&emoticon----
#comments .red-button{
color:#fff;
margin-right:10px;
padding:4px 15px;
background-color:#A00F0F;
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 .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: '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 .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;
}

Balas

nah min sekarang tombol show hide konversi kode udah ada warna nya tapi tombol show hide yang emoticon malah gaada warna nya :(

help min..

http://eljangsa.blogspot.com/2015/04/rahasia-menghasilkan-uang-dari-media.html

Balas

#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: '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 .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;
}

Di atas merupakan kode css untuk tombol emo nya gan.
Untuk kode css konversinya tambahkan diatasnya kode emo, sama kode css konversi yang sudah ane kasih di komentar sebelumnya gan.

Balas

Mantap min.. Admin nya Top banget dah :-d

tinggal masukkin emotnya nih min yang masih bingung.. bingung neletakin scipt emo nya itu dimana :D
tolong dibantu lagi ya min :D

Balas

wah sekarang udah ada emot nya min, gara gara ngoprek sendiri :D
oh ya untuk ganti jenis emoticonnya biar emoticonnya bukan yang orang putih itu gimana min biar beda ? :)

Respon ya min :)

Balas

Selamat ya gan :-d

Mengganti emonya perlu pengeditan kode Javascript gan, karena emo yang sebenarnya ada pada script tersebut.
Untuk mengeditnya agan bisa membacanya disini

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

Balas

iyaa min, thanks sudah membantu :)

wah.. edit javascript ? iya min, kalo post yang edit java script itu ane udah baca tapi masih bingung edit nya min.. :(
kalo buat ganti emo yang buat commentnan gini edit javascript mananya min ? :)

mohon bimbingannya..

Balas

oh iya min satu lagi :D kalo bisa postingan ini di update lagi, updatenya tambahkan tutorial menmbahkan Show/Hide Out Of Topic :) semoga di update :D hehee..

Balas

Javascript ini gan yang di edit

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

Kemudian terapkan kode tersebut diatas /body
Kode didalamnya berisikan emo yang sebenarnya. Emo yang di pasangkan bersamaan kode yang agan pasang itu hanyalah contoh, yang aslinya ada pada script diatas.

Balas

Untuk out of topik pertama-tama tambahkan kode css 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;
}

kemudian tambahkan kode dibawah ini, dibawah kode HTML emo

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

Balas

itu kode yang ditambahkan di bawah kode emot itu tepatnya dimananya om ? :D
saya masih belum paham tuh untuk tambahkan kode dibawah kode emot itu :) tolong di perjelas ya min,,,

oh ya Btw ini blog lagi maintenance ya ? :D

Balas

Pada Kode HTML gan
di bawah kode
span class='buka_emo blue-button' style='background:#38F'>Emoticon

Egak gan, lagi nyiapin strategi gan hehehe....

Balas

okee okee nanti saya coba dulu min.. :)
oh ya min kalo cara ngeganti background show hide emoticon gimana ? kan ini hitam mau saya jadiin putih background nya :D

njirr strategi.. wkwkwkk

Balas

Cari kode ini gan background: #000000 letaknya ada pada kode HTML

Balas