Mengatasi Render Blocking CSS dan Javascript

Render blocking pada PageSpeed Insights

Mengatasi Render Blocking CSS dan Javascript - Setelah saya mencoba mengecek kecepatan blog saya di PageSpeed Insights. Ternyata terdapat beberapa masalah di blog saya yang membuat loading blog saya agak lamban. Yaitu adanya render blocking pada javascript. Sebelumnya, saya tidak tau apa itu render blocking.

Render Blocking artinya pemuatan. Jadi, jika javascript membuat blocking, itu berarti javacript-nya menahan halaman dari loading. Google sendiri menganjurkan untuk menghapus javascript yang dapat mengganggu dalam pemuatan konten halaman web anda. Secara khusus, jika Google melihat bahwa halaman web anda tidak memuat baik untuk perangkat tertentu, misalnya iPad, mereka tidak akan menyertakan web anda dalam hasil karena Google tidak ingin mengirim si penggguna untuk memperlambat halaman atau halaman menyebabkan pengguna menunggu cukup lama untuk konten tersebut. Dan ini biasanya disebabkan oleh render blocking itu sendiri.

Tapi, seringkali ini diabaikan oleh banyak orang. Padahal, jika kita mengetahui makna masalahnya, pasti masalah tersebut bukan masalah sepele.

Dan penyebab render blocking pada javascript ini biasanya berasal dari jQuery yang merupakan file javacript yang digunakan oeh sebagian besar halaman web. File javascript ini memang lumayan besar, bakan ini mungkin menjadi file terbesar dalam halaman web anda saat sedang loading memuat halaman anda, di mana harus didownload dulu oleh browser.

Baik, untuk cara mengatasinya, silahkan tambahkan atribut async='async' pada jQuery-nya. Misal, pada mulanya jQuery-nya seperti ini.

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

Setelah ditambahkan atribut async, akan menjadi seperti ini.

<script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Atribut tersebut lumayan untuk memperingan beban blog anda dan render blocking dari jQuery ini juga bisa teratasi. Tapi, perlu diingat. Mungkin setelah menambahkan atribut async pada jQuey-nya, ada beberapa javascript yang berada di atas </head> tidak bekerja dengan baik. Maka dari itu, pindahkan javascript tersebut di atas </body>.

Sekarang, kita beranjak ke masalah render blocking pada CSS. Ini biasanya terdapat CSS yang tidak terbuka atau berbentuk eksternal. Seperti misalnya,

<link href='https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

CSS tersebut belum terbuka. Masih tersimpan di dalam link. Ini bisa saja menyebabkan render blocking pada CSS-nya. Solusinya, silahkan masukkan CSS yang ada di dalam link CSS tersebut. Copy linknya yang berawalan http tersebut dan taruh di address bar. Anda akan menemukan CSS yang tersimpan dalam link tersebut. Dan letakkan CSS di atas ]]></b:skin>.

Contoh kedua, yaitu pada link Google Font. Misal seperti ini.

<link href='http://fonts.googleapis.com/css?family=Tahoma' rel='stylesheet' type='text/css'/>

Link di atas bisa menyebabkan render blocking. Maka dari itu, silahkan inline-kan CSS di dalamnya dan taruh pada CSS yang ada di Edit HTML. Sama dengan yang sebelumnya, silahkan copy linknya dan taruh di address bar, lalu enter. Silahkan copy CSS nya dan taruh di bagian atas sendiri dari CSS yang lain. Ditaruh di atas karena ini merupakan link Google Font, agar browser bisa cepat dan langsung mengetahui font yang digunakan dalam blog kita. Misalnya seperti ini.

Blogger Template Style
Name        : ..........
Author      : ..........
Url         : ..........
----------------------------------------------- */

@font-face {
  font-family: 'Tahoma';
  font-style: normal;
  font-weight: 400;
  src: local('Tahoma'), url(http://themes.googleusercontent.com/licensed/font?kit=SR1FNt_uUWzf7Ux9q0xdEg) format('woff');
}

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

CSS-CSS yang lain

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

]]></b:skin>

Sebenarnya, tidak hanya itu saja yang menjadi masalah render blocking pada CSS. Tapi, minimal itu sedikit contoh dari saya. Jika anda ingin mengetahuinya lebih jauh, silahkan cek kecepatan loading blog anda di PageSpeed Insights. Anda akan tau apa saja masalah yang terdapat dalam blog anda, yang menyebabkan kecepatan blog anda tidak maksimal. Perlu kita ketahui, CSS atau javascript yang disimpan di Google Drive pun juga memungkinkan adanya render blocking. Untuk itu, silahkan cek sendiri di sana. Dan untuk blog ini pun, juga masih ada beberapa masalah di sana.

Sekian. Semoga bermanfa'at.

Referensi : http://www.kompiajaib.com/2014/02/mengatasi-render-blocking-javascript.html

Misteri Hantu sang Letnan Jenderal

Jenderal Sir George Tryon
Misteri Hantu sang Letnan Jenderal - Karamnya kapal perang Vicotria pada 22 Juni 1893 menjadi tragedi terburuk sepanjang sejarah pelayaran Inggris sebagai negara yang pernah menyandang gelar "Raja Lautan". Peristiwa yang mengerikan tersebut melibatkan dua kapal perang Kerajaan Inggris sekaligus, yaitu Victoria dan Camperdown. Padahal, kedua kapal tersebut merupakan armada tempur gugus tugas Mediterania yang terdiri atas sepuluh kapal penjelajah bersenjata berat dengan bobot 10.000 ton.

Awalnya, kedua kapal tersebut dibagi menjadi dua armada yang dijadwalkan untuk melakukan latihan manuver tempur di lepas pantai Syria dekat Tripoli. Hanya karena salah komunikasi dan perhitungan, tabrakan pun tidak terhindarkan. Haluan depan Camperdown menghantam lambung Kapal Victoria sehingga kedua kapal penjelajah berat tersebut terguncang hebat. 

Dalam situasi kritis, tidak ada waktu lagi untuk melakukan evakuasi penyelamatan. Akhirnya, Kapal Victoria pun dinyatakan tenggelam tepat pada pukul 15.34 waktu setempat, bersama 357 awak kapal dan komandannya (Sir George Tryon).

Kapal HMS Victoria
Sementara itu, pada waktu yang sama, di kediaman sang Jenderal Tryon di kawasan Eaton Square London (pada pukul 15.30), sejumlah tamu kehormatan tampak hadir dalam jamuan resmi yang digelar sang istri. Para tamu undangan mengaku dengan jelas telah melihat sang jenderal mengenakan pakaian kebesaran AL (Angkatan Laut) Kerajaan Inggris tengah melintas dalam suatu ruangan tersebut. Hal ini membuat sang istri terkejut karena suaminya saat itu sedang bertugas di perairan Mediterania. Jadi, tidak mungkin sekali suaminya dapat terlihat di rumah, apalagi sedang sliweran.

Peristiwa yang sempat menggemparkan Inggris tersebut menjadi satu misteri tentang penampakan arwah sehingga menarik perhatian sejumlah pemburu hantu (Ghost Hunters) dan para ilmuwan. Benarkah hantu itu ada atau hanya halusinasi semata? Tetapi, puluhan saksi mata memberikan laporan yang sama tentang kehadiran sang Jenderal Sir George Tryon pada sore itu.

Blogger Threaded Comment Hack Valid HTML5

Threaded Comment

Blogger Threaded Comment Hack Valid HTML5 - Alhamdulillah, sekarang saya masih diberi kesempatan lagi untuk berbagi postingan seperti biasanya. Sudah sekian lama saya istirahat sementara dari dunia blogging karena harus melaksanakan UN, dan sekarang saya mencoba ingin berbagi sedikit, meskipun sebenarnya sudah banyak yang tau. Ya, kali ini saya akan berbagi tentang threaded comment hack yang valid HTML5. 

Tentu, semuanya sudah tau, bahwa style dari threaded comment ini adalah karya dari Kang +Adhy Suryadi seperti yang sedang saya pakai saat ini. Tetapi, di sini saya juga tidak hanya berbagi itu saja, saya juga ingin menjadikan threaded comment itu valid HTML5. Tentunya ada hal-hal yang harus diperbaiki. Untuk itu, silahkan ikuti langkah-langkah berikut.

CSS

#comments{margin:0;padding:5px 20px 0; line-height:1em;border-top:1px solid #ddd;background:#fff;}
#comments h3 {margin-bottom:25px;font:16px Oswald;padding:0;text-transform:uppercase}
.comment_name { color: #444;font-size: 20px; font-weight: normal; line-height: 20px; max-width: 100%; text-decoration: none; margin-left: 10px;margin-top: 5px;text-transform:uppercase }
.comment_avatar { height: 48px; width: 48px;max-height:48px;max-width:48px; background:url(http://3.bp.blogspot.com/-2-vBwDba-Lk/UyulwDe3HFI/AAAAAAAAbgk/p7rpFzkJDjQ/s1600/anon40.gif) no-repeat center center;float:left;margin-top: 5px; margin-right: 10px; margin-left:10px;padding:0;overflow: hidden;transition:all 400ms ease-in-out }
.comment_name a { text-transform: uppercase; font: 20px Oswald; color:#444;text-decoration:none; transition:all 400ms ease-in-out}
.comment_name a:hover { color:#ef7f67;text-decoration:none; }
.comment_body p {font:16px &#39;PT Sans Narrow&#39;; line-height: 1.3em;color: #666;background-color:#fff;border:1px solid #ccc;padding:10px;}
.comment_body{margin-top:5px;margin-bottom:10px;padding:5px 0 15px 10px}
.comment_date { color: #999; font-size: 11px; line-height: 11px; cursor: pointer; font-weight: normal;float:left;margin-left:0;margin-top:5px}
.comment_area {border:1px solid #ccc;margin-bottom:25px; padding-right:10px; transition:all 400ms ease-in-out;background:#ddd;position:relative}
.comment_child .comment_area { margin-top:-20px;background:#edebeb}
.comment_child .comment_wrap {padding-left: 40px}
.comment_reply {display:inline-block;cursor:pointer;color:#ffffff;font-family:arial;font-size:11px;font-weight:bold;padding:4px 10px;text-decoration:none;float:right; position:absolute; right:10px; bottom:10px; transition:all 400ms ease-in-out;background-color: #666}
.comment_reply:hover { text-decoration: none;background-color:#333}
.comment_reply:active {margin-top: 1px}
a.comment_reply {color:#fff}
.unneeded-paging-control {display: none;}
.comment_reply_form{padding:0 0 0 48px}
.comment_reply_form .comment-form {width: 100%}
.comment_form a { color: #2f6986; text-decoration: none; }
.comment_form a:hover {color: #2f6986; text-decoration: none;}
.comment_author_flag {display:none}
.comment_admin .comment_author_flag {display:inline-block;color:#ffffff;font:12px Oswald;font-weight:normal;padding:1px 8px;text-decoration:none;position:absolute;margin:3px 0 0 10px;background-color: #666}
a.comment-delete{position:absolute;top:5px;right:5px; font-size: 16px;color: #999}
a.comment-delete:hover{color: #ef7f67}
#comment-editor {width:102.3% !important;background:transparent url(&#39;data:image/gif;base64,R0lGODlhKwALAPAAAKrD2AAAACH5BAEKAAEAIf4VTWFkZSBieSBBamF4TG9hZC5pbmZvACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACsACwAAAjIMjhjLltnYg/PFChveVvPLheA2hlhZoWYnfd6avqcMZy1J14fKLvrEs/k+uCAgMkwVAAAh+QQBCgACACwAAAAAKwALAIFPg6+qw9gAAAAAAAACPRSOKMsSD2FjsZqEwax885hh3veMZJiYn8qhSkNKcBy4B2vNsa3pJA6yAWUUGm9Y8n2Oyk7T4posYlLHrwAAIfkEAQoAAgAsAAAAACsACwCBT4OvqsPYAAAAAAAAAj1UjijLAg9hY6maalvcb+IPBhO3eeF5jKTUoKi6AqYLwutMYzaJ58nO6flSmpisNcwwjEfK6fKZLGJSqK4AACH5BAEKAAIALAAAAAArAAsAgU+Dr6rD2AAAAAAAAAJAVI4oy5bZGJiUugcbfrH6uWVMqDSfRx5RGnQnxa6p+wKxNpu1nY/9suORZENd7eYrSnbIRVMQvGAizhAV+hIUAAA7&#39;) no-repeat 50% 30%;margin-left:-8px}
.comment-form {max-width: 100%!important;margin-top:25px!important}
.comment_emo_list {display:none;clear:both;width:100%;}
.comment_emo_list .item {float: left;width: 40px;text-align: center;height: 40px;margin: 10px 10px 0 0;}
.comment_emo_list span {display: block;font-weight: bold;font-size: 11px;letter-spacing: 1px;}
.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img {max-width:100%!important}
.comment-form p {background: #edebeb;border: 1px solid #ddd;padding: 10px;margin: 5px 0 5px 0;color: #333;font:12px Arial, sans-serif;line-height:20px;width:97.3%;position:relative;}
.comment_child .comment-form p {width:95.5%;}
iframe{border:none;overflow:hidden}
.deleted-comment{display:block;color:#333;font:italic 13px Arial;word-wrap:break-word;margin-top:10px;}

Setelah itu, silahkan masukkan HTML-nya. Cari terlebih dahulu kode seperti berikut ini.

<b:includable id='comments' var='post'>

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


</b:includable>

Jika sebelumnya sudah terdapat HTML komentarnya, lebih baik diganti dengan berikut ini. Letakkan kode berikut ini di antara dua kode di atas.

<div class='comments' id='comments'>
 <b:if cond='data:post.allowComments'>
  <b:if cond='data:post.numComments != 0'>
   <h3>
    <b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
     <b:else/>
     <data:post.numComments/> <data:commentLabelPlural/>
    </b:if>
   </h3>
  </b:if>
               
  <b:if cond='data:post.commentPagingRequired'>
          <span class='paging-control-container'>
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
           &#160;
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
           &#160;
           <data:post.commentRangeText/>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
   </span>
   </b:if>
                       
  <div class='clear'/>
  <div id='comment_block'>
   <b:loop values='data:post.comments' var='comment'>
                                                                             
   <div data-level='1' expr:class='data:comment.adminClass' expr:id='data:comment.anchorName'>                                                                                      
       <b:if cond='data:post.adminClass == data:comment.adminClass'>
             &lt;div class=&#39;comment_inner comment_admin&#39;&gt;
            <b:else/>
             &lt;div class=&#39;comment_inner&#39;&gt;
            </b:if>
             <div class='comment_area'>
             <div class='comment_header'>
           <div class='comment_avatar'>
          <img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author'/>
              </div>
              <div class='comment_name'>
               <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a>
               <b:else/>
                <data:comment.author/>
               </b:if>
               <b:if cond='data:comment.author == data:post.author'>
                  <span class='comment_author_flag'>Admin</span>
               </b:if> 
              </div>            
              <div class='comment_service'>
               <a expr:href='data:comment.url' rel='nofollow' title='comment permalink'><span class='comment_date'><data:comment.timestamp/></span></a>             
               <a class='comment-delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>&#10006;</a>
              </div>
              <div class='clear'/>
             </div>
             <div class='comment_body'>
              <b:if cond='data:comment.isDeleted'>
               <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
               <p><data:comment.body/></p>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Balas'>Balas</a>                                                            <div class='clear'/>                                         
              </b:if>                                       
             </div>
              <div class='clear'/>
            &lt;/div&gt;
            <div class='clear'/>
            </div>
            <div class='comment_child'/>
            <div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>              
           </div>
          </b:loop>              
         </div>    
         <div class='clear'/>
         <b:if cond='data:post.commentPagingRequired'>
          <span class='paging-control-container'>
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
           &#160;
           <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
           &#160;
           <data:post.commentRangeText/>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
           &#160;
           <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </span>
         </b:if>
         <div class='clear'/>
         <div class='comment_form' id='comment-form'>      
         
          <b:if cond='data:post.embedCommentForm'>
           <b:if cond='data:post.allowNewComments'>
                                                          
            <b:include data='post' name='threaded-comment-form'/>
           <b:else/>
            <data:post.noNewCommentsText/>
           </b:if>
          <b:else/>
           <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
           </b:if>
          </b:if>
         </div>
        </b:if>
       </div>
      
             
       <script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {
 //output the script (load it from google api)
 document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
       //]]>
       </script>
     
       <script async='async' src='//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js' type='text/javascript'/>
       <script type='text/javascript'>
      
         
         <b:if cond='data:post.numComments != 0'>
         var Items = <data:post.commentJso/>;
         var Msgs = <data:post.commentMsgs/>;
         var Config = <data:post.commentConfig/>;
        <b:else/>
         var Items = {};
         var Msgs = {};
         var Config = {&#39;maxThreadDepth&#39;:&#39;0&#39;};
        </b:if>
       //<![CDATA[
       //Global setting
        Config.maxThreadDepth = 6;//How threaded level that you want
        Display_Emo = true;//Display emoticon or not? set "false" to no display
        Replace_Youtube_Link = true;//Auto replace youtube link to iframe embedded, choose "false" to disable
        Replace_Image_Link = true;//Auto replace an image link  choose "false" to disable.
                                Replace_Force_Tag = true;//Auto replace an virtual tag example: [pre] to <pre>, and [/pre] </pre>, If user input wrong , your layout will be gone. Then becare ful when enable this trap
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),only effect when Replace_Image_Link=true
       
        //Config emoticons declare
        Emo_List = [
        ':)'  ,'http://1.bp.blogspot.com/-2Z7Cwe04x-Q/UH9THzWWJII/AAAAAAAACtA/ChwawyzYsDI/s1600/smile1.gif',
        ':('  ,'http://4.bp.blogspot.com/-yXc7xHs5mXc/UKhVJLBfdaI/AAAAAAAADPY/LJKRsefyeao/s1600/sad.gif',
        '=('  ,'http://1.bp.blogspot.com/-7I8DdEs58z0/UKhVKHT1yUI/AAAAAAAADPg/Lyzv-E74EdM/s1600/sadanimated.gif',
        '^_^'  ,'http://1.bp.blogspot.com/-IoZJlpB0-dE/UKhVKnR0BDI/AAAAAAAADPo/Kz87N1Aj4X8/s1600/smile.gif',
        ':D'  ,'http://3.bp.blogspot.com/-WeTjMT8JDhg/UKhVHlZ88II/AAAAAAAADPI/b1gpiAvIkCc/s1600/icon_smile.gif',
        '=D'  ,'http://1.bp.blogspot.com/-ljeobbA3sn0/UKhVGtJsGRI/AAAAAAAADPA/8lyzE4JwrwQ/s1600/hihi.gif',
        '|o|'  ,'http://4.bp.blogspot.com/-ip66eq3uRI8/UKhVF-QK8lI/AAAAAAAADO4/P0G-1PcWpQs/s1600/applause.gif',
        '@@,'  ,'http://4.bp.blogspot.com/-w1VfvgO2-e8/UKhVIT7XLhI/AAAAAAAADPQ/cJ0KDjEsoj4/s1600/rolleyes.gif',
        ';)'  ,'http://3.bp.blogspot.com/-5zPfqshivtY/UKhVONWZnkI/AAAAAAAADQI/iCDxagcaj5s/s1600/wink.gif',
        ':-bd'  ,'http://4.bp.blogspot.com/-hPd-oj2Bzo4/UKhVLkmQjOI/AAAAAAAADPw/3O1iuAukZXg/s1600/thumb.gif',
        ':-d'  ,'http://2.bp.blogspot.com/-yElQmFAIiII/UKhVMcObcQI/AAAAAAAADP4/-qdEpW8zCmY/s1600/thumbsup.gif',
        ':p'  ,'http://2.bp.blogspot.com/-bs2e9gRj748/UKhVNKLs2YI/AAAAAAAADQA/mF7lDNOChac/s1600/wee.gif', 
        ':ng'  ,'http://2.bp.blogspot.com/-2aWDnxBYYY8/Usv09ssnSEI/AAAAAAAAayA/JCaQT9ZPnC8/s1600/rolling-yahoo-emoticon.gif',    
        ];
      
                             
                                 //Config Force tag list, define all in lower case
                                Force_Tag = [
                                    '[pre]','<pre>',
                                    '[/pre]','</pre>',
                                    '<pre class="brush: plain; title: ; notranslate" title="">','&lt;code&gt;',
                                    '</pre>','</code>'
                                ];
     
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,{}))              
       //]]>
</script>

Silahkan lihat lagi kode yang saya beri warna merah tersebut. Kode tersebut-lah yang sudah diperbaiki. Untuk kode merah yang pertama, itu berfungsi untuk membatasi jumlah komentar berbalas yang akan muncul. Dikarenakan kode  Config.maxThreadDepth=6 itu tidak berfungsi dengan baik. Jika tidak berfungsi dengan baik, nanti akan menimbulkan permasalahan error pada validasi HTML5-nya. Untuk itu perlu menambahkan kode ini di HTML komentarnya. Dan silahkan ubah kode data-level='1' sesuai keinginan.

Untuk kode merah yang kedua, itu berfungsi agar tidak terjadi error validasi HTML5 pada threaded comment ketika postingan belum atau tidak ada komentar. Tapi, silahkan lihat dulu dengan "view page source" pada halaman postingan blog anda yang sudah ada komentarnya, untuk memastikan benar atau tidaknya kode yang yang saya beri warna tersebut.

Caranya, setelah berada di "page source" dan cari kode <script async='async' yang nanti akan muncul kode seperti kode merah kedua tersebut.

Untuk emoticon-nya, anda bisa ganti sesuai selera. Atau, jika sebelumnya anda sudah memasang emoticon komentarnya maka tidak usah diganti ya tidak apa-apa.

Selesai. semoga bermanfaat....

Referensi : http://blog.kangismet.net/2013/11/perbaikan-threaded-comments-hack-v3.html
                  http://www.kompiajaib.com/2013/10/memperbaiki-error-pada-threaded-comment.html

Penampakan Raut Wajah di Lantai

Penampakan Raut Wajah di Lantai - Penampakan ini memang terdengar aneh bagi kebanyakan orang, dan menganggap itu tidak akan terjadi. Tapi, hal ini memang pernah benar-benar terjadi dulu. Ada seseorang yang melihat penampakan beberapa raut wajah di lantai rumahnya. Ini unik dan pertama kali terjadi.

Penampakan Raut Wajah di Lantai

Penampakan wajah misterius tersebut berawal pada tanggal 23 Agustus 1971 di rumah seorang wanita Spanyol, Maria Gomez Pereira. Ia melihat ada beberapa gambar kepala seorang laki-laki yan tiba-tiba muncul di lantai keramik dapurnya. Sontak, ini mengagetkan si pemilik rumah. Dan anehnya, raut wajah tersebut selalu mengikuti suasana hati si pemilik rumah. Misalnya, jika sedang gembira maka raut wajah di lantai pun ikut tersenyum. Jika sedang marah ataupun sedih, maka raut wajah di lantai ikut cemberut.

Berita tentang peristiwa misterius di rumah Nyonya Maria Gomez langsung tersebar luas. Bahkan, menjadi topik utama beberapa media cetak dan elektronik di beberapa belahan dunia. Namun, setelah ditelusuri oleh beberapa pengkaji dan ahli supranatural, ternyata rumah yang ditempati Nyonya Maria Gomez merupakan bekas tanah pemakaman. Si pemilik rumah pun mengaku bahwa ia tidak tau sebelumnya tentang hal itu.

Dan benar saja. Ketika dilakukan penggalian ditemukan beberapa tulang-belulang manusia yang terkubur tepat di bawah lantai keramik dapur rumahnya. Akan tetapi, setelah lantai keramik dapur diganti dengan yang baru serta beberapa tulang-belulang manusia telah diangkat dan dikuburkan di tempat lain, fenomena tersebut tetap saja muncul.

Dua minggu setelah pembongkaran, dua raut wajah manusia kembali muncul di lantai baru. Bahkan, kali ini lengkap dengan gambaran anggota tubuh mereka. Kemudian, secara berturut-turut raut wajah lainnya muncul silih berganti setiap harinya. Hal ini menjadikan si pemili rumah merasa tidak nyaman di rumahnya. Akhirnya, Nyonya Maria Gomez memutuskan untuk menjual rumahnya yang menyeramkan tersebut karena ketakutan.

Saat ini, status rumah tersebut menjadi milik pemerintah setempat dan dijadikan sebagai salah sautu objek pariwisata yang cukup unik. Beberapa pengunjung yang datang juga kerap melihat penampakan mereka lengkap dengan berbagai ekspresi wajah.

Kemudian, ada suatu penelitian unik yang dilakukan oleh beberapa ahli. Mereka menempatkan sebuah kamera video yang sengaja ditinggalkan di tempat tersebut selama satu hari penuh. Hasilnya, mereka cukup terkejut. Sebab, beberapa raut wajah tersebut saling berkomunikasi satu sama lain. Hal ini dibuktikan ketika pita rekaman diputar, terdengar suara percakapan yang keluar dari arah mereka. Ini benar-benar nyata. Tidak direkayasa. Namun demikian, hingga saat ini belum ada yang dapat menjelaskan bagaimana fenomena tersebut dapat terjadi.

Jika kita ambil kesimpulan yang relevan dengan kehidupan sekarang, hal itu mungkin tidak akan terjadi. Apalagi, untuk kedua kalinya. Penampakan tersebut memang pernah ada di Spanyol tahun 1971. Tapi, tidak semua rumah ataupun tempat yang itu adalah bekas tanah pemakaman akan terjadi seperti itu. Jangan sampai, kita dibuat ketakutan setelah membaca cerita di atas. Yang penting tetap santai....

Memasukkan Kode dan Blockquote pada Komentar

Memasukkan Kode dan Blockquote pada Komentar
Memasukkan Kode dan Blockquote pada Komentar - Mengingat bahwa kode dan blockquote sangat penting dan dibutuhkan oleh blogger terutama blog-blog tutorial, saya akan membahas mengenai cara memasukkan kode dan blockquote pada komentar. Dan untuk gambar ataupun video youtube pada komentar, saya rasa tidak terlalu dibutuhkan di sini. Maka dari itu, saya hanya akan membahas pemasangan kode dan blockquote pada komentar saja.

Sebenarnya, di Google sendiri sudah pernah ada yang posting. Tapi, saya lihat masih ada beberapa tutorial di luar sana yang masih kurang jelas, sehingga tidak sedikit pula banyak blogger yang kesulitan dan tidak berhasil dalam penggunaannya. Maka dari itu, saya akan memberikan tips yang paling mudah dan tidak ribet. 

Yang pertama, tentunya kita harus sudah memasang syntax highlighter di blog kita. Bagi yang sudah memasang, silahkan lewati langkah yang pertama ini.

Memasang Syntax Highlighter 

Dalam hal ini, saya ambil JavaScript yang diberikan oleh +Kang Ismet

<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>

Simpan JavaScriptnya di atas </body>.

Untuk CSS-nya, silahkan masukkan di atas ]]></b:skin> atau </style>

pre,i[rel="pre"] {padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:13px;color:#839496;
font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;line-height:1.4em;position:relative;white-space: pre;word-wrap: normal;white-space:pre;overflow:auto}
code {font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color: #d14;}
#comments code {color:#bbbb6d;}
pre code {padding:0 !important;color: #a3a49a;background: none !important;border:none !important;display:block;}
pre mark {background-color:#1a5752;color:#a3a483}
pre .line-number {float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px;}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc {color: #586e75;font-style: italic;}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title {color: #859900;}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor {color: #7195a3;}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function {color: #569dcf;}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type {color: #aa985a;}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo {color: #509a55;}
pre .deletion {color: #dc322f;}
pre .tex .formula {background: #073642;}

Memasukkan Kode dan Blockquote pada Komentar

Setelah CSS syntax highlighter terpasang, kita akan menambahkan CSS sedikit untuk blockquote-nya.

blockquote{margin:20px;background:#293E6A;color:#fff;padding:10px;border-left:20px solid #04043C;display:block;font:17px &quot;PT Sans Narrow&quot;;}

Silahkan taruh CSS di atas di bawah-nya CSS tag pre (syntax highlighter)

Jika sudah, silahkan tambahkan JavaScript berikut dan letakkan di atas </body>. JavaScript ini saya dapat dari Mas +Saeful Rahman.

<script type='text/javascript'>
//<![CDATA[
$("#comment_block").each(function () {
    $('i[rel="pre"]', this).replaceWith(function () {
        return $("<pre></pre>").append($("<code></code>").append($(this).contents()))
    });
    $('b[rel="quote"]', this).replaceWith(function () {
        return $("<blockquote></blockquote>").append($(this).contents())
    });
    $('i[rel="code"]', this).contents().unwrap().wrap("<code/>")
});
//]]>
</script>

Sesuaikan id komentar-nya dengan template blog anda. Silahkan ganti #comment_block  jika tidak sesuai.

Pengaturan Penulisan

Menulis tag pre (kode panjang)

<i rel="pre"> Tulis kode yang sudah diparse di sini <i>

Menulis tag code (kode pendek)

<i rel="code"> Tulis kode yang sudah diparse di sini </i>

Menulis catatan blockquote

<b rel="quote"> Tulis catatan blockquote di sini </i>

Selesai.... cukup mudah bukan. Semoga bermanfa'at

UPDATE

Silahkan perhatikan lagi css blockquote-nya. Ubah blockquote menjadi blockquote,b[rel="quote"]. Jadi, nanti akan seperti di bawah ini. 

blockquote,b[rel="quote"] {margin:20px;background:#293E6A;color:#fff;padding:10px;border-left:20px solid #04043C;display:block;font:17px &quot;PT Sans Narrow&quot;;}

Perubahan ini dimaksudkan agar penggunaan blockquote pada komentar masih bisa berfungsi apabila JavaScript-nya mati.

Terima kasih atas masukannya +Kang Mousir

Memasang Widget Contact Form di Halaman Statis

Memasang Widget Contact Form di Halaman Statis - Setelah sudah lama tidak nge-blog, akhirnya saya ngeblog lagi dengan pikiran yang sedang buntu untuk buat postingan apa. Tidak ada tema bagus yang masuk ke dalam pikiran saya. Akhirnya, saya share aja apa adanya kali ini. Di lihat dari judulnya, anda pasti sudah tau bukan yang akan saya share kali ini. Ya, memasang contact form di halaman statis blogger. Cara ini saya dapatkan dari +Kang Ismet. Selain tampilannya elegant, contact form ini juga simple dan ringan.

Screenshots Widget Contact Form

Sebenarnya setelah saya googling, memang banyak yang sudah posting cara memasang widget contact form di halaman statis. Tapi, nggak tau kenapa hati saya lebih terpanggil untuk mengunjungi Blog Kang Ismet. Dan tidak ada salahnya juga kalo saya mencoba share artikel ini.

Sebelumnya, Formulir Kontak merupakan hal yang baru yang merupakan fasilitas baru juga yang disediakan oleh Blogger. Kalo saya lihat, Blogger dari tahun ke tahun semakin meningkatkan dan memperbaiki fasilitasnya.

Oke, langsung saja, bagi anda ingin memasangnya, silahkan ikuti langkah berikut.

Cara Pemasangan

1.  Masuk ke Tata Letak. Pilih Add Gadget, terserah yang sebelah mana. Lalu pilih Gadget Lainnya dan klik Formulir Kontak.
2.  Nah, sampai di sini widget contact form sudah terpasang di blog anda. Tapi, sesuai judulnya, kalo widget ini akan disimpan di halaman statis. 

Menyimpan Widget Contact Form di Halaman Statis

1.  Yang pertama, silahkan sembunyikan widget contact form yang terpasang di tata letak tadi, agar tidak terjadi double contact form. Masukkan kode CSS berikut di Edit HTML untuk menyembunyikannya.

#ContactForm1{display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width: 300px;height:auto;margin: 5px auto;padding: 10px;background: #f2f2f2;border: 1px solid #ccc;color:#777;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #fffff7;}
#ContactForm1_contact-form-email-message{width: 450px;height: 175px;margin: 5px auto;padding: 10px;background: #f2f2f2;border: 1px solid #ccc;color:#777;font-family:Arial, sans-serif;}
#ContactForm1_contact-form-submit {width: 101px;height: 35px;float: left;color: #FFF;padding: 0;margin: 10px 0 3px 0;cursor: pointer;background: #5E768D;border: 1px solid #556f8c;border-radius:3px;}
#ContactForm1_contact-form-submit:hover {background:#435c74;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 450px;margin-top:35px;}

Kode CSS di atas juga sebagai modifikasi untuk widget yang akan disimpan di halaman statis. Jadi, tampilannya akan sedikit berbeda dari contact form blogger di tata letak tadi.

2.  Masukkan kode pemanggil HTML-nya di postingan statis.

<form name="contact-form">
Nama
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
Alamat Email <span style="color: red; font-weight: bolder;">*</span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Isi Pesan <span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

Jangan lupa juga untuk mengatur sistem baris barunya dengan "Tekan Enter  untuk baris baru". Caranya, silahkan klik Pilihan pada menu sebelah samping kanan postingan. Dan jika anda ingin halaman statis nya full page, silahkan sembunyikan sidebar dan element-element lainnya dengan tag kondisional. Misalnya, tag kondisional nya seperti ini.

<b:if cond='data:blog.url == &quot;URL HALAMAN STATIS CONTACT FORM&quot;'>
<style type='text/css'>
.sidebar-wrapper,.breadcrumbs,.post-footer,#comments {display:none}
.main-wrapper{width:100%}
</style>
</b:if>

Sesuaikan id dan class-nya untuk setiap elemen-element yang ingin disembunyikan. Karena id dan class pada setiap template umumnya berbeda-beda. Jika sudah, letakkan tag kondisional-nya di atas </body>

Silahkan ubah URL HALAMAN STATIS CONTACT FORM dengan URL halaman statis yang telah anda buat.

Dan bagi anda yang menggunakan trik menyembunyikan javascript widget blogger dari Kompi Ajaib, widget contact form ini tidak akan berfungsi. Solusinya, ubah kode &lt;!--</body>--&gt;&lt;/body&gt;  pada Edit HTML dengan kode </body>, agar bisa berfungsi kembali. 

Selesai....

Referensi : http://blog.kangismet.net/2013/05/memasang-widget-contact-form-blogger-pada-halaman-statis.html