Pages

Jumat, 10 Januari 2014

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.

Mengalihkan Ctrl+U (Ctrl+U Redirect) ( no insfect element

Mengalihkan Ctrl+U (Redirect) - Ada beberapa cara untuk melihat "Source Code" sebuah web/blog, diataranya dengan klik kanan kemudian klik view source code, atau menggunakan shortcut Ctrl+U. Hal yang paling banyak digunakan adalah dengan memijit tombol Ctrl dan U berbarengan.

Yang melakukan hal ini biasanya sudah memiliki pemahaman CSS dan HTML. Biasanya sih untuk mengintip kode, baik jiplak ataupun sekedar menambah pengetahuan.

Bagi sobat yang ingin memproteksi blog/web dengan Ctrl+U, untuk meminimalisir para jiplaker silahkan simpan kode ini di atas </body>
<script type='text/javascript'>
//<![CDATA[
shortcut={all_shortcuts:{},add:function(a,b,c){var d={type:"keydown",propagate:!1,disable_in_input:!1,target:document,keycode:!1};if(c)for(var e in d)"undefined"==typeof c[e]&&(c[e]=d[e]);else c=d;d=c.target,"string"==typeof c.target&&(d=document.getElementById(c.target)),a=a.toLowerCase(),e=function(d){d=d||window.event;if(c.disable_in_input){var e;d.target?e=d.target:d.srcElement&&(e=d.srcElement),3==e.nodeType&&(e=e.parentNode);if("INPUT"==e.tagName||"TEXTAREA"==e.tagName)return}d.keyCode?code=d.keyCode:d.which&&(code=d.which),e=String.fromCharCode(code).toLowerCase(),188==code&&(e=","),190==code&&(e=".");var f=a.split("+"),g=0,h={"`":"~",1:"!",2:"@",3:"#",4:"$",5:"%",6:"^",7:"&",8:"*",9:"(",0:")","-":"_","=":"+",";":":","'":'"',",":"<",".":">","/":"?","\\":"|"},i={esc:27,escape:27,tab:9,space:32,"return":13,enter:13,backspace:8,scrolllock:145,scroll_lock:145,scroll:145,capslock:20,caps_lock:20,caps:20,numlock:144,num_lock:144,num:144,pause:19,"break":19,insert:45,home:36,"delete":46,end:35,pageup:33,page_up:33,pu:33,pagedown:34,page_down:34,pd:34,left:37,up:38,right:39,down:40,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123},j=!1,l=!1,m=!1,n=!1,o=!1,p=!1,q=!1,r=!1;d.ctrlKey&&(n=!0),d.shiftKey&&(l=!0),d.altKey&&(p=!0),d.metaKey&&(r=!0);for(var s=0;k=f[s],s<f.length;s++)"ctrl"==k||"control"==k?(g++,m=!0):"shift"==k?(g++,j=!0):"alt"==k?(g++,o=!0):"meta"==k?(g++,q=!0):1<k.length?i[k]==code&&g++:c.keycode?c.keycode==code&&g++:e==k?g++:h[e]&&d.shiftKey&&(e=h[e],e==k&&g++);if(g==f.length&&n==m&&l==j&&p==o&&r==q&&(b(d),!c.propagate))return d.cancelBubble=!0,d.returnValue=!1,d.stopPropagation&&(d.stopPropagation(),d.preventDefault()),!1},this.all_shortcuts[a]={callback:e,target:d,event:c.type},d.addEventListener?d.addEventListener(c.type,e,!1):d.attachEvent?d.attachEvent("on"+c.type,e):d["on"+c.type]=e},remove:function(a){var a=a.toLowerCase(),b=this.all_shortcuts[a];delete this.all_shortcuts[a];if(b){var a=b.event,c=b.target,b=b.callback;c.detachEvent?c.detachEvent("on"+a,b):c.removeEventListener?c.removeEventListener(a,b,!1):c["on"+a]=!1}}},shortcut.add("Ctrl+U",function(){top.location.href="http://hohoketauan.blogspot.com/p/ketauan.html"});
//]]>
</script>
Ganti http://hohoketauan.blogspot.com/p/ketauan.html (baris paling bawah), dengan URL tujuan. Untuk DEMO, silahkan klik DISINI kemudian tekan Ctrl+U.

Semoga bermanfaat...

Membuat Spoiler di Blog (show)

Bagi sebagian Anda tentunya familiar dengan kata-kata spoiler, apalagi pengguna forum-forum seperti Kaskus. Spoiler berguna untuk menyembunyikan sebagian atau seluruh postingan, untuk menghemat space halaman posting. Spoiler bisa digunakan untuk menyembunyikan teks, gambar, kode html atau apa pun.

Bagi pengguna kaskus, tentunya berbeda kode antara kaskus dan web/blog. Langsung caranya aja gan... Pastikan ketika anda menulis postingan, dalam mode HTML, copy kode dibawah ini :
<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler teks</b></i>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Isi Spoiler
</div></div></div>
Ini contoh hasilnya
Contoh spoiler:

Apabila ingin menggunakan gambar, maka ganti teks dengan kode gambar.
Contoh kode gambar :

<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWHNYAzuVEKerUrh7qYU_DbodGnQ0O7jZe3bcEkmNAHSkJ834ULa2Gihxd-KnfUyu5kixxCr6lapVGnqestCTvqJiS5ML-B_g8GxMFSCayGOghIouCRvW5yvgbsNwVh0_ES2LENLXTYP8/s1600/aspire3.jpg" />
</div>

Maka kode spoiler di atas menjadi
<div style="margin-top: 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><b>Contoh spoiler gambar</b></i>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div style="text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWHNYAzuVEKerUrh7qYU_DbodGnQ0O7jZe3bcEkmNAHSkJ834ULa2Gihxd-KnfUyu5kixxCr6lapVGnqestCTvqJiS5ML-B_g8GxMFSCayGOghIouCRvW5yvgbsNwVh0_ES2LENLXTYP8/s1600/aspire3.jpg" />
</div>
</div></div></div>
Maka hasilnya seperti ini:
Contoh spoiler gambar:

Ditunggu komennya gan....smile


Membuat Related Posts dengan Thumbnails (berita lain nya)

Pada postingan sebelumnya, saya pernah menjelaskan bagaimana membuat artikel terkait (related post), dengan point berjejer ke bawah sesuai kategori (contoh di blog ini). Sekarang saya akan menjelaskan langkah-langkah membuat Artikel Terkait, dengan thumbnails, contoh seperti gambar ini :

1. Masuk ke Dasbor > Tata Letak > Edit HTML, beri centang pada "Expand Template Widget"
2. Cari kode
</head>
Ganti dengan kode ini :
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvN9NnxbNJyKoktP8dKtIzAkJ0SIfGdYzOxNcobaEyj28vAgZUieSAFvhJx3xtmakK_y7qIuy6i83dF6i69Y-DC-eHS6coQ578r-P1_U3aMb97Q1pt6skCC0mvZYUP0gMv-9_sWT5Q1Fo/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
4. Setelah itu cari kode ini :
<div class='post-footer-line post-footer-line-1'>
kalau tidak ketemu, coba cari ini :
<p class='post-footer-line post-footer-line-1'> 
5. Masukan kode di bawah ini, tepat setelah kode yang kamu temukan.
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End--> 
6. Save, dan lihat hasilnya.

Catatan:

1. Untuk menampilkan berapa jumlah related post cari kode ini, ganti angka sesuai yang diinginkan.
var maxresults=5; 
2. Untuk mengganti judul cari kode ini, dan rubah yang berwarna merah :
var relatedpoststitle="Related Posts"; 
3. Tampilan thumbnail postingan, yang tidak mempunyai gambar (image) seperti ini:


Untuk merubahnya, cari kode dibawah ini, dan ganti dengan url gambar rekan.
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvN9NnxbNJyKoktP8dKtIzAkJ0SIfGdYzOxNcobaEyj28vAgZUieSAFvhJx3xtmakK_y7qIuy6i83dF6i69Y-DC-eHS6coQ578r-P1_U3aMb97Q1pt6skCC0mvZYUP0gMv-9_sWT5Q1Fo/s400/noimage.png";
4. untuk merubah warna splitter (garis pembatas) ganti kode ini :
var splittercolor="#d4eaf2";
5. Untuk merubah warna background, temukan kode ini :
background-color:#d4eaf2;
Selamat mencoba.......
Enjoy blogging!

Membuat Navigasi Halaman / Page Navigation Blogger

Page Navigation atau navigasi halaman berfungsi untuk mempermudah pengunjung menjelajahi blog kita dan melihat halaman perhalaman.

Bagi pengguna Wordpress tentunya sudah tidak asing dengan page navigation. Bagi pengguna Blogger / Blogspot, harus menyisipkan kode javascript.

Langkah -langkah membuat navigasi menu :
1. Login ke Blogger
2. Masuk ke Dasbor > Rancangan > Edit HTML
3. Cari kode
]]></b:skin>
untuk memudahkan gunakan (Ctrl+F)
4. Paste kode di bawah ini diatas kode ]]></b:skin>
/* Page Navigation styles */
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd;
  }

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666;
  text-decoration: none;
  }
5. Selanjutnya paste kode dibawah ini di atas kode </body>
 <!--Page Navigation Starts-->
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://btreaders.googlecode.com/files/pagenav.js' type='text/javascript'/>
<!--Page Navigation Ends -->
6. Simpan dan lihat hasilnya.

Untuk melihat

auto read more d More dengan Thumbnail


Auto Read More dengan thumbnail, adalah solusi atau bisa dikatakan Blogger hacks untuk menampilkan fungsi read more di blog. Bahkan script ini menampilkan thumbnail gambar, baik itu disimpan di awal, tengah atau akhir. Cotohnya kaya di blog ini :


Langsung aja langkahnya :

1. Login ke Blogger. Dasbor > Rancangan > Edit HTML, centang "Expand template widget"
2. Simpan kode dibawah ini, tepat sebelum </head>
 <script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>
Kode yang dapat di rubah :

summary_noimg = 430; (karakter yang ditampilkan tanpa gambar)
summary_img = 340; (karakter yang ditampilkan dengan gambar)
img_thumb_height = 100; (ukuran tinggi thumbnail gambar)
img_thumb_width = 120; (ukuran lebar thumbnail gambar)

3. Cari kode <data:post.body/>, dan ganti dengan kode ini :
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
Kode yang betanda merah, bisa diganti sesuka anda, misalkan Read More, Baca Selengkapnya, dll

4. Save.

Gampang bukan? gimana hasilnya?