Pages

Jumat, 10 Januari 2014

Mengatasi Tata Letak Yang Bejejer ke Bawah Pada Dashboard

page elements
Mengatasi Layout Blog Yang Bejejer ke Bawah - Mungkin sobat pernah mengalami tata letak / page element / widget editor tidak seperti sebelumnya, akan tetapi berjejer kebawah, tidak jelas mana sidebar dan mana footer. Hal ini juga saya alami beberapa hari kebelakang setelah melakukan validasi CSS3.

Sebagian sobat banyak yang mengatakan dashboard error, padahal bukan error itu terjadi karena ada CSS yang hilang. CSS yang hilang diakibatkan karena menyembunyikan / menonaktifkan CSS Stylesheet Blogger, yang biasanya dilakukan untuk validasi CSS3 atau HTML5. Tidak jadi masalah ketika sobat sudah terbiasa dengan tampilan berjejer, saya pribadi lebih enak tampilan seperti biasa, lebih mudah memisahkan mana sidebar dan mana footer.

Intinya, tampilan widget editor / tata letak yang berjejer kebawah karena Menonaktifkan CSS Reset Stylesheet Blogger. Dan saat ini saya akan berbagi tutorial bagaimana mengembalikan tataletak widget editor seperti semula.

tata letak

Cara Mengembalikan Tata Letak Yang Berjejer ke Bawah


LANGKAH 1 : Fahami ukuran komponen utama blog sobat

Biasanya, ukuran komponen utama sudah ada pada CSS blog, seperti #outer-wrapper #header-wrapper #main-wrapper dst. Untuk lebih memahami komponen utama blog sobat, saya contoh kan sepeti gambar di bawah ini :

layout

LANGKAH 2 : Tulis kembali ukuran dan posisi komponen utama blog sobat.

Copy dari CSS yang ada, ukuran komponen utama blog. Sobat bisa menulisnya di notepad terlebih dahulu. Dari contoh gambar diatas, untuk penulisannya seperti ini :

#header-wrapper, #outer-wrapper, #footer-wrapper {width:970px}
#header-left {width:200px;float:left}
#header-right {width:728px;float:right}
#main-wrapper {width:650px;float:left}
#sidebar-wrapper {width:300px;float:right}
.footer {width:315px;float:left}

LANGKAH 3 : Simpan kode diatas, diantara kode menon-aktifkan CSS Reset. Perhatikan posisi penyimpanannya!

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[ simpan kode CSS tadi di sini */]]></b:skin>

hasil akhirnya seperti ini :

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[
#header-wrapper, #outer-wrapper, #footer-wrapper {width:970px}
#header-left {width:200px;float:left}
#header-right {width:729px;float:right}
#main-wrapper {width:650px;float:left}
#sidebar-wrapper {width:300px;float:right}
.footer {width:315px;float:left}
*/]]></b:skin>

Simpan template.

Selamat mencoba.. silahkan laporan di sini apabila masih ada kendala    :)

Tu

Membuat Ucapan Selamat Kepada Komentator Pertamaxx

selamat
Ucapan Selamat Kepada Komentator Pertama - Istilah PERTAMAX muncul perama kali di Kaskus, bagi agan2 kaskuser tentunya sudah tidak asing lagi dengan istilah ini. Pertamax diambil dari dua kata, Pertama dan X (artinya: pertama kali), yaitu orang yang pertama membuat balasan pada sebuah thread. Kemudian, istilah ini dipakai untuk blog atau jejaring sosial.

Menjadi komentator pertama, ada kebanggan tersendiri ketika sebuah blog ramai pengunjung karena akan muncul paling atas dari semua komentar yang ada. Tidak sedikit komentator berburu komentar pertamax untuk mendapatkan posisi ini. Bagi pemilik blog, tentunya harus bisa memberikan apresiasi kepada komentator,walau pun sebenarnya tidak harus ditanggapi seperti kata2 pertamax.

Ucapan selamat ini hanya akan muncul ketika postingan baru mempunyai 1 komentar. Ketika komentar bertambah, maka ucapan ini akan disembunyikan.

Thread Comment Hack


Bagi sobat yang menggunakan thread comment hack, simpan kode ini dibawah <data:comment.body/> yang ke 2 :

<b:if cond='data:post.numComments == 1'>
  <div expr:class='&quot;item-control &quot; + data:comment.adminClass' style='margin-top:10px;margin-bottom:15px;border:1px solid #c94a36;background:#e55e48;padding:5px 10px;color:#FFF;border-radius:3px'>Selamat <b><data:comment.author/></b> dapat PERTAMAX...! Tunggu kunjungan saya di blog Agan.</div>
</b:if>

Thread Comment Default Blogger


Bagi sobat yang menggunakan komendar default dari blogger, langkahnya hampir sama dengan membuat ucapan terima kasih kepada komentator. Lumaya ribet dibanding thread comment hack smile

Langkah 1 : Simpan kode ini di atas ]]></b:skin> atau </style>

.comments .pertamax{position:relative;margin:10px 0;padding5px 10px;margin-top:10px;border:1px solid #e4c445;background:#ffe785;padding:5px;color:#fff !important'}

Langkah 2 : Cari kode ini

(function() {
  var items = <data:post.commentJso/>;
ganti dengan kode ini :
var items_copy=[];
(function() {
var items = <data:post.commentJso/>;
items_copy=items;
Langkah 3 :simpan kode ini di bawah <data:post.commentHtml/>
<b:if cond='data:post.numComments == 1'>
<script type='text/javascript'>
//<![CDATA[
  for(i=0;i<items_copy.length;i++){if(i==items_copy.length-1){d=document.getElementById('c'+items_copy[i].id).getElementsByTagName('p').item(0);e=d.innerHTML+'<div class="pertamax '+items_copy[i].deleteclass.replace(/ blog-admin/,'')+'">Selamat '<b>+items_copy[i].author.name+</b>' Anda dapat PERTAMAXXX !!! Tunggu kunjungan saya ke Blog Anda.</div>';d.innerHTML=e}}
//]]>
</script>
</b:if>

Selamat mencoba

Mengganti Bahasa Komentar Google Plus di Blog

Mengganti Bahasa Komentar Google Plus di Blog

Change Google Plus Language Comments - Pada tutorial sebelumnya yaitu Menggabungkan Komentar Blogger dan Google Plus secara Bersamaan, saya setting untuk komentar Google Plus menggunakan Bahasa Indonesia. Pada tutorial tersebut ada sahabat yang bertanya, cara mengganti komentar ke Bahasa Inggris. Inilah ide saya membuat tutorial ini.

Komentar Google Plus biasanya akan otomatis mendeteksi bahasa yang digunakan pada blog. Akan tetapi apabila pemasangan komentar secara manual, maka akan otomatis menjadi Bahasa Inggris.

Apabila sobat ingin mengganti tampilan Bahasa pada komentar, simpan kode ini di atas </body>
<script type='text/javascript'>
window.___gcfg = {lang: 'id'};
</script>
id adalah kode Bahasa Indonesia, ganti id dengan bahasa yang dikehendaki, seperti en-US untuk Bahasa Inggris, ar untuk Bahasa Arab, ja untuk Bahasa Jepang. Untuk List Kode Bahasa, sobat bisa kunjungi DISINI.

Sebetulnya, script di atas bukan hanya untuk komentar, tapi akan berpengaruh kepada semua Gadget dari Google Plus, seperti Follower dan Button apabila mengaktifkan otomatis pada setelan Blog.

Di bawah ini screenshoot blog saya dengan pengaturan Bahasa Arab :

googleplus

Mungkin sobat berminat menggunakan bahasa Urdusmile
Suka artikel ini? Bagikan :

Menambahkan tombol "Cancel" pada komentar -

Menambahkan tombol "Cancel" pada komentar - Tombol "Cancel Reply" atau "Batalkan Komentar" berfungsi untuk menutup kotak kometar ketika tidak jadi membalas komentar, setelah kita mengklik tombol "Reply" atau "Balas". Tutorial ini saya dapatkan setelah nyasar ke blog Vietnam yaitu http://blog.duypham.info

Sebenarnya hal ini tidak terlalu essensial, akan tetapi akan sangat berguna ketika kita akan membuat komentar baru dan tidak membalas komentar yang ada. Tombol "Cancel" ini akan muncul di kiri atas pada kolom komentar. Untuk lebih jelasnya silahkan lihat screenshoot di bawah ini :

cancel reply

Langkah-langkahnya :

1. Login ke Blogger
2. Klik Template -> Edit HTML dan centang Expand Template Widget
3. Cari kode (replybox && (commentId !== replyParent)) { dan tambahkan kode ini setelahnya

cancelRep=document.getElementById('bc_0_'+items.length+'I');
document.getElementById(domId).insertBefore(cancelRep,null);
cancelRep.innerHTML=cancelRep.innerHTML.replace(msgs.addComment,'Cancel reply');
if((commentId!=replyParent)&&(replybox.src.indexOf('&parentID=')==-1)){cancelRep.style.display='inline-block'}

4. Simpan Template.

Apabila ingin memodifikasi tampilan tombol, sobat bisa tambahkan kode ini di atas ]]></b:skin>

.comments .continue{display:none;border-top:0}
.comments .continue a{border:1px solid #fa0320;border-radius:3px;box-shadow:0 1px rgba(255,255,255,.3) inset;background:#e8233a;padding:5px 10px;font-size:13px;color:#fff!important;text-decoration:none!important}
.comments .continue a:hover{background:#d70d25}

Maka tampilannya akan berubah seperti gambar ini :

cancel reply

Untuk merubah tulisan "Cancel reply", misalkan dengan "Batalkan Komentar", ganti tulisan "Cancel reply" pada kode di atas.

Semoga bermanfaat.

Memasukan Gambar, Youtube, Blockquote dan Kode pada Komentar

Memasukan Gambar, Youtube, Blockquote dan Kode pada Komentar

Adding Images, Youtube Videos, Quotes and Codes to Blogger Comments - Sebetulnya tutorial ini sudah banyak yang membuatnya. Akan tetapi karena banyak pertanyaan tentang bagaimana cara memasukan gambar, video youtube, kode, catatan ke komentar Blogger, maka saya buat tutorial ini untuk memudahkan pengunjung blog ini.

Tutorial ini berkaitan dengan tutorial Cara Membuat Pesan di atas Form Komentar Blogger. Biasanya, hal ini digunakan oleh sahabat yang sering berbagi tutorial, untuk memmudahkan berbagi kode atau screenshoot.

Kode yang saya bagikan berasal dari DTE, karena ada sebagian kode yang tidak jalan, maka saya tambahkan yang lainnya. Silahkan sobat ikuti langkah mudahnya :

Simpan kode ini di atas ]]></b:skin>

#comment-holder .cm-youtube {
  display:block;
  border:none !important;
  background-color:#333;
  width:450px;
  height:240px;
  margin:0 auto 30px;
}
#comment-holder .cm-image {
  display:block;
  margin:0 auto 15px;
  outline:none;
  border:1px solid #ccc;
  background-color:white;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  padding:5px;
  max-width:96%;
  height:auto;
  width:auto;
}
code, #comment-holder code,
#comment-holder i[rel="code"] {
  font:normal 12px Monaco,"Courier New",Monospace;
  color:blue;
}
pre, #comment-holder pre,
#comment-holder i[rel="pre"] {
  display:block;
  font:normal 12px Monaco,"Courier New",Monospace;
  background-color:#333;
  color:white;
  padding:0.5em 1em;
  word-wrap:normal;
  white-space:pre;
  overflow:auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
blockquote, #comment-holder blockquote,
#comment-holder b[rel="quote"] {
  margin:0 2%;
  background-color:#eee;
  padding:1em 1.2em;
  border-left:4px solid #7498AD;
  display:block;
  font-weight:normal;
  font-style:italic;
}
#comment-holder i[rel="image"],
#comment-holder i[rel="youtube"] {
  display:block;
  overflow:hidden;
  border:2px solid black;
  position:relative;
  width:170px;
  height:100px;
  margin:0 auto 30px;
}
#comment-holder i[rel="image"]:before,
#comment-holder i[rel="youtube"]:before {
  content:"Please enable your JavaScript to see this image!";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:red;
  color:white;
  font-weight:bold;
  text-align:center;
  padding:15px 0;
}
#comment-holder i[rel="youtube"]:before {
  content:"Please enable your JavaScript to watch this video!";
}

Kemudian, simpan kode ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
function repText(id) {
var a = document.getElementById(id),
 b = a.innerHTML,
 b = b.replace(/<i rel="image">(.[^\>]*)<\/i>/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
 b = b.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
 b = b.replace(/<i rel="youtube">http:\/\/www.youtube.com\/embed\/(.[^>]*)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
 b = b.replace(/<i rel="youtube">(http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^>]*)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
 b = b.replace(/\[youtube\]http:\/\/www.youtube.com\/embed\/(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
 b = b.replace(/\[youtube\](http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
 document.getElementById(id).innerHTML = b;
 b = b.replace(/<i rel="code">(.*?)<\/i>/ig, "<code>$1<\/code>");
 b = b.replace(/<i rel="pre">(.*?)<\/i>/ig, "<pre>$1<\/pre>");
 b = b.replace(/<b rel="quote">(.*?)<\/b>/ig, "<blockquote>$1<\/blockquote>");
 b = b.replace(/&amp;feature=[0-9a-zA-Z-_]*/ig, "");
 b = b.replace(/\/s(640|1600)/g, "/s400");
 } repText('comment-holder');   
c = document.getElementById('comment-holder');
if (c) {
 b = c.getElementsByTagName("p");
 for (i = 0; i < b.length; i++) {
  if (b.item(i).getAttribute('CLASS') == 'comment-content') {
   ki_comm = b.item(i).innerHTML.replace(/\[code\](.[^\]]*)\[\/code\]/ig, "<code>$1<\/code>");
   ki_comm = ki_comm.replace(/\[pre\](.[^\]]*)\[\/pre\]/ig, "<pre>$1<\/pre>");
   ki_comm = ki_comm.replace(/\[blockquote\](.[^\]]*)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>");
   ki_comm = ki_comm.replace(/\[quote\](.[^\]]*)\[\/quote\]/ig, "<blockquote>$1<\/blockquote>");          
   b.item(i).innerHTML = ki_comm;
  }
 }
}
//]]>
</script> 

Simpan Template

Format Penulisan


Menulis Tag <code>
<i rel="code">Tulis kode yang sudah diparse di sini</i>, atau
[code]Tulis kode yang sudah diparse di sini[/code]

Menulis Tag <pre>
<i rel="pre">Tulis kode yang sudah diparse di sini</i>, atau
[pre]Tulis kode yang sudah diparse di sini[/pre]

Menulis Catatan (Blockquote)
<b rel="quote">Tulis catatan di sini</b>, atau
[quote]Tulis catatan di sini[/quote], atau
[blockquote]Tulis catatan di sini[/blockquote]

Memasukan Gambar
<i rel="image">Tulis URL gambar di sini</i>, atau
[img]Tulis URL gambar di sini[/img]

Memasukan Video Youtube
<i rel="youtube">Tulis URL Video Youtube di sini</i>, atau
[youtube]Tulis URL Video Youtube di sini[/youtube]

Semoga bermanfaat.

Perbaikan : Threaded Comments Hack V.3

Small update on Blogger Threaded Comments Hack V.3 - Perbaikan ini saya tujukan untuk sahabat yang menggunakan Blogger Threaded Comments Hack V.3. Untuk V.2 saya rasa tidak ada masalah, tetapi setelah Validasi HTML5 ada kode yang terbuang.

Permasalahan yang muncul yaitu Level tidak berjalan dengan baik, sehingga tidak ada pembatasan level, komentar terus semakin mengecil. Untuk membatasi kedalaman tingkatan komentar yaitu pada kode :

Config.maxThreadDepth = 6;//Kedalaman tingkat threaded comment

Namun kode kode tersebut tidak akan berfungsi dengan baik. Untuk mengaktifkan pembatasan level, temukan kode :

<div class='data:comment.adminClass' expr:id='data:comment.anchorName'>  

ganti dengan kode ini :

<div expr:class='data:comment.adminClass' expr:id='data:comment.anchorName' data-level='0'> 

Kemudian, pada akhir script threaded comments, temukan kode :

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 o=\'.1c\';3 1b=$(\'#O-19\').G(\'A\');u 1l(F){3 1j=\' \\n\\r\\t\\f\\1D\\1G\\1F\\1E\\2l\\2k\\2i\\2f\\2c\\26\\25\\23\\1Y\\1S\\1N\\1L\\1H\\2v\\1M\\2p\\24\\22\\1R\';E(3 i=0;i<F.5;i++){9(1j.d(F.1Q(i))!=-1){F=F.b(0,i);11}}z F}$(\'#1P .1i p\').j(u(y,7){9(1J){3 l=\'1v://13.V.W/1y?v=\';3 8=7.d(l);D(8!=-1){1d=7.b(8);J=1l(1d);3 X=J.d(\'&\');3 N=\'\';9(X==-1){N=J.b(l.5)}Y{N=J.b(l.5,X)}3 1r=\'<1u B="1T" A="1v://13.V.W/1U/\'+N+\'?1V=1" 1W="0" 2w></1u>\';7=7.b(0,8)+1r+7.b(8+J.5);8=7.d(l);9(8==-1){l=\'1Z://13.V.W/1y?v=\';8=7.d(l)}}}9(21){3 Z=\'\';3 s=7;E(3 i=0;i<1w.5;i++){3 l=\'.\'+1w[i];3 m=s.C();3 8=m.d(l);D(8!=-1){k=s.b(0,8+l.5);m=k.C();3 q=\'2h://\';3 w=m.d(q);3 I=\'\';D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}q=\'2n://\';m=k.C();w=m.d(q);D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}9(I==\'\'||k.5<6){11}k=I+k;Z+=s.b(0,8+l.5-k.5)+\'<10 A="\'+k+\'" B="2r"/>\';s=s.b(8+l.5);m=s.C();8=m.d(l)}}7=Z+s}9(1A){3 5=x.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';8=7.d(x[i]);D(8!=-1){7=7.b(0,8)+S+7.b(8+x[i].5);8=7.d(x[i])}}}9(1I){3 5=R.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){D(1){3 s=7.M();8=s.d(R[i]);9(8!=-1){7=7.b(0,8)+R[i+1]+7.b(8+R[i].5)}Y{11}}}}z 7});$(\'.1K\').j(u(y,7){9(1A){3 5=x.5;9(5%2==1){5--}3 12=\'\';E(3 i=0;i<5;i+=2){3 1e=\'<1f>\'+x[i]+\'</1f>\';3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';12+=\'<Q B="1O">\'+S+1e+\'</Q>\'}z 12}});$(\'.1g .1i p\').j(u(i,h){T=h.M();y=T.d(\'@<a U="#c\');9(y!=-1){14=T.d(\'</a>\',y);9(14!=-1){h=h.b(0,y)+h.b(14+4)}}z h});u 1k(g){r=g.d(\'c\');9(r!=-1)g=g.b(r+1);z g}u 1m(g){g=\'&1X=\'+g+\'#%1n\';1o=1b.20(/#%1n/,g);z 1o}u 1p(){j=$(o).j();$(o).j(\'\');o=\'.1c\';$(o).j(j);$(\'#O-19\').G(\'A\',1b)}u 1q(e){g=$(e).G(\'15\');g=1k(g);j=$(o).j();9(o==\'.1c\'){1s=\'<a U="#1t" 27="1p()">\'+28.29+\'</a><a 2a="1t"/>\';$(o).j(1s)}Y{$(o).j(\'\')}o=\'#2b\'+g;$(o).j(j);$(\'#O-19\').G(\'A\',1m(g))}16=2d.2e.U;17=\'#O-2g\';18=16.d(17);9(18!=-1){1x=16.b(18+17.5);1q(\'#2j\'+1x)}E(3 i=0;i<P.5;i++){9(\'1z\'2m P[i]){3 g=P[i].1z;3 1a=2o($(\'#c\'+g+\':L\').G(\'1C\'));$(\'#c\'+g+\' .2q:L\').j(u(y,7){3 H=P[i].15;9(1a>=2s.2t){$(\'#c\'+H+\':L .2u\').1h()}3 K=$(\'#c\'+H+\':L\').j();K=\'<Q B="1g" 15="c\'+H+\'" 1C="\'+(1a+1)+\'">\'+K+\'</Q>\';$(\'#c\'+H).1h();z(7+K)})}}',62,157,'|||var||length||oldhtml|check_index|if||substring||indexOf|||par_id|||html|img_src|search_key|upper_html||Cur_Cform_Hdr||http_search||temp_html||function||find_http|Emo_List|index|return|src|class|toUpperCase|while|for|str|attr|child_id|save_http|yt_link|child_html|first|toLowerCase|yt_code|comment|Items|div|Force_Tag|img_html|temp|href|youtube|com|yt_code_index|else|save_html|img|break|newhtml|www|index_tail|id|cur_url|search_formid|search_index|editor|par_level|Cur_Cform_Url|comment_form|ht|img_code|span|comment_wrap|remove|comment_body|whitespace|Valid_Par_Id|trim|Cform_Ins_ParID|7B|n_cform_url|Reset_Comment_Form|Display_Reply_Form|yt_video|reset_html|origin_cform|iframe|http|Replace_Image_Ext|ret_id|watch|parentId|Display_Emo|comment_emo|level|x5b|x7d|x7c|x5d|u2008|Replace_Force_Tag|Replace_Youtube_Link|comment_emo_list|u2007|u200a|u2006|item|comment_block|charAt|u3000|u2005|comment_youtube|embed|autohide|frameborder|parentID|u2004|https|replace|Replace_Image_Link|u2029|u2003|u2028|u2002|u2001|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|xa0|form_|HTTP|x0b|rc|x3e|x3c|in|HTTPS|parseInt|u200b|comment_child|comment_img|Config|maxThreadDepth|comment_reply|u2009|allowfullscreen'.split('|'),0,{}))   
var avatar=$("#comments");
avatar.find('.comment_avatar img').each(function() {
        var ava = $(this).attr('src');
        $(this).show().attr('src', ava.replace(/\/s[0-9]+(\-c)?\//,"/s45-c/"));
});

ganti dengan kode :

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 q=\'.W\';3 1a=$(\'#N-Y\').B(\'y\');u 1w(H){3 1h=\' \\n\\r\\t\\f\\2p\\1S\\1T\\1U\\24\\25\\26\\27\\2e\\2h\\2k\\2m\\2n\\2u\\2y\\2z\\2A\\2F\\1L\\1N\\1O\\1P\\1Q\';G(3 i=0;i<H.5;i++){b(1h.g(H.1V(i))!=-1){H=H.d(0,i);11}}C H}$(\'#28 .1B p\').k(u(D,7){b(2r){3 m=\'1g://13.Z.X/1t?v=\';3 8=7.g(m);F(8!=-1){1H=7.d(8);K=1w(1H);3 1c=K.g(\'&\');3 T=\'\';b(1c==-1){T=K.d(m.5)}1e{T=K.d(m.5,1c)}3 1j=\'<1k I="1W" y="1g://13.Z.X/1X/\'+T+\'?1Y=1" 20="0" 21></1k>\';7=7.d(0,8)+1j+7.d(8+K.5);8=7.g(m);b(8==-1){m=\'22://13.Z.X/1t?v=\';8=7.g(m)}}}b(23){3 1d=\'\';3 x=7;G(3 i=0;i<1z.5;i++){3 m=\'.\'+1z[i];3 o=x.E();3 8=o.g(m);F(8!=-1){l=x.d(0,8+m.5);o=l.E();3 w=\'2j://\';3 z=o.g(w);3 L=\'\';F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}w=\'1K://\';o=l.E();z=o.g(w);F(z!=-1){L=w.R();l=l.d(z+w.5);o=l.E();z=o.g(w)}b(L==\'\'||l.5<6){11}l=L+l;1d+=x.d(0,8+m.5-l.5)+\'<S y="\'+l+\'" I="2s"/>\';x=x.d(8+m.5);o=x.E();8=o.g(m)}}7=1d+x}b(1m){3 5=A.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';8=7.g(A[i]);F(8!=-1){7=7.d(0,8)+V+7.d(8+A[i].5);8=7.g(A[i])}}}b(2G){3 5=U.5;b(5%2==1){5--}G(3 i=0;i<5;i+=2){F(1){3 x=7.R();8=x.g(U[i]);b(8!=-1){7=7.d(0,8)+U[i+1]+7.d(8+U[i].5)}1e{11}}}}C 7});$(\'.1M\').k(u(D,7){b(1m){3 5=A.5;b(5%2==1){5--}3 15=\'\';G(3 i=0;i<5;i+=2){3 1C=\'<1F>\'+A[i]+\'</1F>\';3 V=\'<S y="\'+A[i+1]+\'" I="1x"/>\';15+=\'<M I="1R">\'+V+1C+\'</M>\'}C 15}});$(\'.1f .1B p\').k(u(i,h){10=h.R();D=10.g(\'@<a 12="#c\');b(D!=-1){14=10.g(\'</a>\',D);b(14!=-1){h=h.d(0,D)+h.d(14+4)}}C h});u 1l(j){r=j.g(\'c\');b(r!=-1)j=j.d(r+1);C j}u 1n(j){j=\'&1Z=\'+j+\'#%1o\';1p=1a.1q(/#%1o/,j);C 1p}u 1r(){k=$(q).k();$(q).k(\'\');q=\'.W\';$(q).k(k);$(\'#N-Y\').B(\'y\',1a)}u 1s(e){j=$(e).B(\'16\');j=1l(j);k=$(q).k();b(q==\'.W\'){1u=\'<a 12="#1v" 29="1r()">\'+2a.2b+\'</a><a 2c="1v"/>\';$(q).k(1u)}1e{$(q).k(\'\')}q=\'#2d\'+j;$(q).k(k);$(\'#N-Y\').B(\'y\',1n(j))}17=2f.2g.12;18=\'#N-2i\';19=17.g(18);b(19!=-1){1y=17.d(19+18.5);1s(\'#2l\'+1y)}G(3 i=0;i<O.5;i++){b(\'1A\'2o O[i]){3 j=O[i].1A;3 1b=2q($(\'#c\'+j+\':P\').B(\'1D-1E\'));$(\'#c\'+j+\' .2t:P\').k(u(D,7){3 J=O[i].16;b(1b>=2v.2w){$(\'#c\'+J+\':P .2x\').1G()}3 Q=$(\'#c\'+J+\':P\').k();Q=\'<M I="1f" 16="c\'+J+\'" 1D-1E="\'+(1b+1)+\'">\'+Q+\'</M>\';$(\'#c\'+J).1G();C(7+Q)})}}3 1I=$("#2B");1I.2C(\'.2D S\').2E(u(){3 1J=$(1i).B(\'y\');$(1i).2H().B(\'y\',1J.1q(/\\/s[0-9]+(\\-c)?\\//,"/2I-c/"))});',62,169,'|||var||length||oldhtml|check_index|||if||substring|||indexOf|||par_id|html|img_src|search_key||upper_html||Cur_Cform_Hdr||||function||http_search|temp_html|src|find_http|Emo_List|attr|return|index|toUpperCase|while|for|str|class|child_id|yt_link|save_http|div|comment|Items|first|child_html|toLowerCase|img|yt_code|Force_Tag|img_html|comment_form|com|editor|youtube|temp|break|href|www|index_tail|newhtml|id|cur_url|search_formid|search_index|Cur_Cform_Url|par_level|yt_code_index|save_html|else|comment_wrap|http|whitespace|this|yt_video|iframe|Valid_Par_Id|Display_Emo|Cform_Ins_ParID|7B|n_cform_url|replace|Reset_Comment_Form|Display_Reply_Form|watch|reset_html|origin_cform|trim|comment_emo|ret_id|Replace_Image_Ext|parentId|comment_body|img_code|data|level|span|remove|ht|avatar|ava|HTTPS|u200a|comment_emo_list|u200b|u2028|u2029|u3000|item|x5d|x7c|x7d|charAt|comment_youtube|embed|autohide|parentID|frameborder|allowfullscreen|https|Replace_Image_Link|x3c|x3e|x0b|xa0|comment_block|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|u2001|form_|HTTP|u2002|rc|u2003|u2004|in|x5b|parseInt|Replace_Youtube_Link|comment_img|comment_child|u2005|Config|maxThreadDepth|comment_reply|u2006|u2007|u2008|comments|find|comment_avatar|each|u2009|Replace_Force_Tag|show|s45'.split('|'),0,{}))

Untuk melihat hasilnya perikasa dengan inspect elemen pada komentar juga balasannya.

kaskus Emoticon untuk Blogger Threaded Comment


kaskus logo
Kalau sebelumnya saya membuat tutorial tentang cara menambahkan Yahoo Smileys untuk komentar, kali ini saya akan menjelaskan cara menambahkan Kaskus emoticon pada komentar baru Blogger atau threaded comments.

Sebetulnya konsepnya JavaScriptnya sama saja dengan Yahoo smiley, namun untuk JavaScript Kaskus emoticon ini bukan buatan saya, tapi buatan Joe. Script ini telah diuji coba di blognya sendiri, dan berhasil. Namun tidak semua emoticon Kaskus ini semua masuk, hanya sebagian saja.

Tampilan emoticonnya kurang lebih seperti screen shoot di bawah ini :

kaskus emoticons

Cara Pasang Emoticon pada Komentar

1. Masuk ke Dasbor
2. Edit HTML
3. Cari kode </body> (biasanya paling bawah)
4. Simpan kode dibawah ini sebelum </body>
<script src="http://4blogspottutorial.googlecode.com/files/kaskus_emoticon.js" type="text/javascript"></script>
5. Simpan / Save

Dengan 5 langkah diatas, emoticon Kaskus sudah bisa berfungsi di Blog anda. Namun kita perlu menambahkan gambar dan kode, supaya pengunjung mengetahui 'Kode Emoticon Kaskus' ini.

Cara Menambahkan Kode di atas Kolom Komentar

1. Kembali ke Edit HTML
2. Cari kode
<div class='post-footer-line post-footer-line-3'/>
    </div>
  </div>
3. Simpan kode ini dibawah </div> yang ke-dua
<!-- Kaskus Emoticon by JOE http://4blogspottutorial.blogspot.com/ Star-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align:center;font-weight:bold;font-size:16px;color:#FF3000;margin-top:15px; margin-bottom:10px;'>
Kalau mau komentar pake emote KASKUS... Silahkan pilih gan..
</div>
<div style='background-color:#F5F8FA; border:2px solid #D7E8F0; width:550px; padding:10px; height:100px; overflow:auto;'>
<div class='kaskusemoticon'>
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/sumbangan/15.gif'/>smile
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/sumbangan/14.gif'/>
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/jempol1.gif'/> :thumbup
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/jempol2.gif'/> :2thumbup
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/I-Luv-Indonesia.gif'/> :iloveindonesia
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/s_sm_ilovekaskus.gif'/> :ilovekaskus
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/cewek.gif'/> :kiss
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/s_sm_maho.gif'/> :genit
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/marah.gif'/> :marah
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/berduka.gif'/> :berduka
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/najis.gif'/> :najis
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/malu.gif'/> :malu
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/ngakak.gif'/> :ngakak
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/s_sm_repost1.gif'/> :repost
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/sundul.gif'/> :sup2:
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/s_big_batamerah.gif'/> :batabig
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/takut.gif'/> :takut
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/ngacir2.gif'/>  :ngacir
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/shakehand2.gif'/>  :shakehand
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/bingung.gif'/> :bingung
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/cekpm.gif'/> :cekpm
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/capede.gif'/> :capedeh
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/hammer.gif'/> :hammer
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/peluk.gif'/>smileeluk
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/toastcendol.gif'/> :cendol
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/hoax.gif'/> :hoax
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/selamat.gif'/>  :selamat
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/matabelo1.gif'/> :matabelo
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/mewek.gif'/> :mewek
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/request.gif'/> :request
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/sorry.gif'/> :sorry
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/salah_kamar.gif'/> :salahkamar
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/rate5.gif'/> :rate5
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/cool2.gif'/> :cool
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/fd_5.gif'/> :sup:
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/fd_4.gif'/> :kbgt
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/nohope.gif'/> :nohope
</div></div>
</b:if>
<!-- Kaskus Emoticon End-->
4. Simpan dan Selesai.

Untuk melihat demo cara memasang / menambahkan emoticon Kaskus pada blogger threaded comment ini, silahkan kunjungi pemilik tutorial.