Closeboy Blog: Panduan Blogger

Panduan Blogger

Tampilkan postingan dengan label Panduan Blogger. Tampilkan semua postingan

Custom Style Komentar Blogspot

Syaifuddin 3/21/2014 1 Comment

Sebenarnya lebih dikenal sebagai Wordpress theme style comment pada Blogspot. Ada betulnya juga sih, kalau saya tidak salah ingat tampilannya memang sangat mirip seperti pada blog Wordpress tapi versi dulu. Jadi artinya adalah ini suatu konfigurasi yang bisa mengubah tampilan kolom komentar blog punya kita menjadi berbeda dari tampilan dasarnya. Menurut saya ini sangat bagus dan terlihat cantik dan saya juga menggunakannya pada blog ini. Silahkan lihat screenshot dibawah ini.

DEMO

Gimana sob ? Bagus bukan. Kalau kalian tertarik ingin menjadikan kolom komentar kalian seperti gambar di atas. Silahkan ikuti langkah-langkah membuatnya di bawah ini.

Karena kita sedang ingin bermain dengan html blog kita. Alangkah sebaiknya backup terlebih dahulu html blog kita. Agar bisa kita restore kembali html nya seandainya nanti terjadi kesalahan dalam pengeditan.

Pergi ke menu Template, kemudian klik Edit HTML
Ganti semua kode <b:include data='post' name='threaded_comments'/> dengan

<b:include data='post' name='comments'/>

Kode di atas biasanya tidak cuman satu, ada sekitar 5 kode. Ganti semuanya
Ganti semua kode diantara <b:includable id='comments' var='post'> dan </b:includable>, gambarannya seperti ini :

<b:includable id='comments' var='post'>
KODE PANJANG YANG HARUS DIGANTI
</b:includable>

Ganti dengan kode berikut :

<style type='text/css'>
#comments {}
#comments h3 {margin-bottom:15px;font-size:18px;}
.comment_avatar_wrap{
width:42px;
height:42px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
background:#fcfcfc;
padding:4px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-align:center;
margin-bottom:20px;
}
#comments .avatar-image-container {
float: left;
margin: 0 10px 0 0;
width: 42px;
height: 42px;
max-width:42px;
max-height:42px;
padding: 0;
margin-bottom:10px;
}
#comments .avatar-image-container img {
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFNNyiW4K-jC9v-a1zmcz_X6wTiK7HUhUfXFZJ252ucwKc9rBPilnKxiKN9oTO1cZwEzN4iCzS7nUTcINr0hPJ2vaBK1NT-TVX3LJAgSk48-SXJNuoo8uJIENE6HbmTfuIu5aGXKPo4Q1w/s1600/anon.jpg) no-repeat;
}
.comment_name a {
font-weight: bold;
padding: 5px 0 0 0;
font-size: 13px;
text-decoration: none;
}
.comment_admin .comment_name  {
font-weight: bold;
padding: 10px;
font-size: 13px;
text-decoration: none;
background:#ECF3F7;
}
.comment_admin .comment_date  {
font-weight: normal;
font-size:11px;
}
.comment_name {
background:#f0f0f0;
padding:10px;
font-size:13px;
font-weight:bold;
}
.comment_service{
margin-top:5px
}
.comment_date {
color: #a9a9a9;
float:right;
font-size:11px;
font-weight:normal;
margin-top:2px;
}
.comment_body{
margin-top:-72px;
margin-left:66px;
background:#fcfcfc;
border:1px solid #ddd;
padding:10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.comment_body p {
line-height: 1.5em;
margin: 5px 0 0 0;
color: #666;
border:1px solid #f1f1f1;
font-size: 13px;
word-wrap:break-word;
background:#fff;
padding:10px;
}
.comment_inner {
padding-bottom: 5px;
margin: 5px 0 5px 0;
}
.comment_child .comment_wrap {padding-left: 7%;}
.comment_reply {
display: inline-block;
margin-left:-5px;
padding: 1px 11px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}
.comment_reply:hover {
text-decoration: none !important;;
background: #ccc;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
}
.unneeded-paging-control {display: none;}
.comment-form {max-width: 100%;!important;}
#comment-editor {width:101%!important}
.comment_form a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-family: Arial, Helvetica, Garuda, sans-serif;
font-size: 15px;
}
.comment_form a:hover {text-decoration: underline;}
.comment-form p {
background: white;
padding: 7px 10px 7px 10px;
margin: 5px 0 5px 0;
border: 1px solid #C3D7E2;
color: #888;
font-size: 13px;
line-height: 20px;
width:94%;
}
.comment_reply_form {
padding: 0 0 0 70px;
}
.comment_reply_form .comment-form {width: 99%;}
.comment_emo_list .item {
float: left;
text-align: center;
margin: 10px 10px 0 0;
height: 40px;
width:41px;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.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;}
.deleted-comment {
padding: 10px 10px 10px 10px;
display: block;
color: #CCC;
}
.comment_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbgZ8WmDU3olW_lUDSlhAp4DwykkUD9436JYyiRbEwTgUNrceZtWGofgeIk49B2tHZcnamh7yuLNV5xknxq_BH50Kt93wHYNWBmj8lrBkk-FiSPRFDfmzdGJTQ0vt3hRd0jDyloASFxc8/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -19px;
}
.comment_header{width:50px}
#respond {
overflow: hidden;
padding-left: 10px;
clear: both;
}
.comment-delete img{float:right;margin-left:10px;}
</style>

<div class='comments' id='comments'>
    <a name='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 class='comment_wrap' expr:auclass='data:comment.adminClass' expr:id='data:comment.anchorName' level='0'>                                                                                      
     <a expr:name='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_header'>
                               <div class='comment_avatar_wrap'>
     <div class='comment_avatar'>
      <data:comment.authorAvatarImage/>
                                 </div>
<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)'>Balas</a>
     </div>
                          
     <div class='clear'/>
    </div> 
          
    <div class='comment_body'>
                                      <span class='comment_arrow'/>
     <div class='comment_name'>
      <b:if cond='data:comment.authorUrl'>
       <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
       <b:else/>
       <data:comment.author/>
      </b:if>        
                  <span class='comment_service'>
                      <b:include data='comment' name='commentDeleteIcon'/>
      <span class='comment_date'><abbr class='published' expr:title='data:post.timestampISO8601'>                   <data:comment.timestamp/></abbr></span>
  </span></div> 
     <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
      <p><data:comment.body/></p>
                        <div class='clear'/>
                       
     </b:if>
                                                       
    </div>                          
     <div class='clear'/>
     &lt;/div&gt;
     <div class='clear'/>
            
    <div class='comment_child'/>
    <a expr:name='&quot;r_&quot;+data:comment.anchorName'/>
    <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'>          
          
   <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
     <h3 id='comment-post-message'><data:postCommentMsg/></h3>
      <div class='comment_emo_list'/>                                                                                               
       <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' expr:src='data:post.commentSrc' 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;//Kedalaman tingkat threaded comment
        Display_Emo = true;//Tampilkan emoticon? ketik "false" untuk menyembunyikan
        Replace_Youtube_Link = true;//Embed video YouTube, ketik "false" untuk mendisable
        Replace_Image_Link = true;//Auto replace link image,  ketik "false" untuk mendisable.
                                Replace_Force_Tag = true;//Auto replace virtual tag contoh: [pre] menjadi <pre>, dan [/pre] menjadi </pre>, apabila salah menulis, tidak akan berfungsi
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya berfungsi apabila Replace_Image_Link=true
       
        //Pengaturan Emoticon
        Emo_List = [
        ':)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEichxZ_xxLzdFNduYWknvlwB-2tD8UF-Q-AmNxbMI6LOoebcfpFfFvehG8OIdBxapmVPDMhF6AdAcEUSnm02NBHFPvNUyHtKPPdgB2moipMzEkp3dzjjC-V-k_2EnFTC_7QaOQ0jzCUd-I/s1600/smile1.gif',
        ':('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIU9s2B52bD2jznu-Zwh1BX0EJo-2oGSZTAmfPXScaOXFnwIbAJOiiL_ZtJ9s8GQ1SWRtxgTMqc-Bq9GW5Rd5ExYBjBa8cysU3pFz7VH6nnH9diGmReojfVvsU5wlUdvjraY353iw1yYM/s1600/sad.gif',
        '=('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNC48umdGumFr1ToGz6Re2ONYNtxhgbIIlHbn0ev9FnHEt63LViYsf-zD-Yg9ZtGsANTgMK5AYILuQB89OUsBNXNbQ5T04ZCP3efd9aFCeDSX4fdScnPo7RLqicNcUmkXapM0UwSaG3m8/s1600/sadanimated.gif',
        '^_^'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ucf4eA9MkRbDGde-vrzixQ8R0C__PwnDhFHNmWvB9HFxsX5YcySTYuhhRngEwuHD2XttuEjnT_i5-VmnX_SuDlk8KdoQgSRimEPrdGrDmNWQxXbEaw6a2fY-lycfaJamSZBFU8hyUxk/s1600/smile.gif',
        ':D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibFy4ZpO5C_9WLP7kSe__I1lq1skQa9BPh-vRbxjbRcFp2ouk8Udp2qBDv0YAGoyIB0ejDcga_2paJXdQsyCP2En5Ot091KxTzd3qbUHAB2Umo-5MOteUennEQqZCqBV2IOUDKI4Ino68/s1600/icon_smile.gif',
        '=D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDyUG8pZ54waWqvnV8FPH-qRxkZAmT4ykVQmg7CW0hE2h5N8_VjVQ1BrMJQ_iI0zFo7yM_OcVXj3YQH06hOT4vNNXKgjrfgqm9e0jGLNSAzO9zi4oP6pfdp7oimSm7UNwTpS_QXUsLGjw/s1600/hihi.gif',
        '|o|'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhns-SxCjdRPr7YiWLmcQs4eg3J8RcOQ9znTxUjiHzfmNcRVEBaVDD7avYlqCVoAtBm84071XQIxfkUzEvt2_Q5eecL7qV0TUrjhnSRsIhcNgCiIPQfD8DOmtJXWi6W72Auko4SbzfHzho/s1600/applause.gif',
        '@@,'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIH7NCkhAuHMT-es5kt4S7bKH0Wh7pyaLWt4pIXljjOfZ9m2kVXZTDEfZ2qRA3XA2vT-zO85r_eW6yrkxUfBl6NvDQc9ZNRZoSI0VKjlSRf8rZBHylFEwW8s8ZOko4NZ_c42M_pz0tdu8/s1600/rolleyes.gif',
        ';)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibgPO0nkGaPLceVAK4dGgklPaBhIPoarbomB0SCCPk34wFIK1_dD_RH8rv6NvNiUyMj_T_ij4QNcsirCnxEwVvfWVkFIxyuzA7jeFjfOHr51aBd1VgoOoRFjBthQoNgyVe8x5yF5v7yhs/s1600/wink.gif',
        ':-bd'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjm1QVsIMXN2U1f0nQaV5owbgRB2u72o-fie-5WlHahO2FdvYWeZdUn_WQ37CL39uBoru3up1pJvWnwb8MPFaHstpsDkIU_nyuul6_WcCR3w3u8xrBF4kVAm2kOPxpXhYEP5-zKbIrNBM/s1600/thumb.gif',
        ':-d'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKy_svNzJMzwNo1ZYe5IjzWOAvnpEzRaf4dgDd9A0UPAP-8K3y28fchtI6RJ_bQk2qm8k4fGaXf9jW4a-oFO4__ps8S2xgM-l2yaM7ZDR8rcHTmLwmMEuVU_1wlh2sFskkz80HbM6xRpQ/s1600/thumbsup.gif', 
                                                                 ':p'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWKQ04qFQaHjI7NqITmiqz2dqsezqkAQjoAa0xb3vFqu3DOI3IEyvFA_l9E7R3m2_Dw6UZnujMzIgC8trtcFaRRCRKnjmrEqtz710w-UWq05VHu6Zf4yln0hMiwJ6zsed0DGhQ7YMCx6o/s1600/wee.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 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,{}))       
               
       //]]>
         </script>

Simpan Template

Cukup sekian dulu panduan Blogger saya kali ini. Semoga bermanfaat.

Tanggal Template Blog Undefined

Syaifuddin 2/21/2014 Add Comment

Syaifuddin

Bagi yang sering bermain dengan template blog, barangkali pernah mengalami masalah seperti ini. Yaitu tanggal post entri yang seharusnya menampilkan format tanggal yang benar (hari/bulan/tahun) tapi yang keluar malah Undefined.

Masalah ini kemungkinan dikarenakan kita masih memakai format timestamp default dari blogger. Yang harus kita lakukan untuk mengatasi masalah ini, yaitu dengan mengganti format timestamp blog kita ke format yang sesuai dengan blog yang kita pakai.

Undefined

Silahkan masuk ke Dasbor Blogger kalian. Kemudian masuk ke Setelan blog yang ingin diperbaiki. Kemudian masuk lagi ke menu Bahasa dan pemformatan. Pada bagian Format ada pilihan Format Timestamp. Ubah menjadi format (hari,bulan & tanggal,tahun). Atau ikuti seperti gambar dibawah ini.

Kalau sudah silahkan Simpan setelan dan lihat blog kamu. Insya Allah masalah sudah teratasi.

Masalah teratasi

Sekian dulu, terima kasih atas waktu luangnya mau membaca tulisan saya ini. Mudah-mudahan bermanfaat.

Cara Menghilangkan Judul blog

Panduan Blogger

Syaifuddin 2/06/2012 Add Comment

Syaifuddin

Judul blog merupakan bagian terpenting dalam sebuah blog, karena biasanya merupakan gambaran keseluruhan isi blog. Judul blog terletak dibagian paling atas blog. Biasanya blogger lebih suka membuat logo sendiri untuk judul blognya dengan menggunakan aplikasi grafis. Judul blog pada blogspot ini terkadang juga mengganggu penampilan blog, seperti logo blog yang telah kita bikin sendiri.

Nah, untuk mengatasi hal itu, maka kita perlu menyingkirkan dulu judul blog bawaan blogspot tersebut. Caranya sebagai berikut:

Sign in ke blogger.com
Pergi ke bagian Edit HTML
Cari kode "#header h1 {" gunakan fungsi Ctrl+F untuk memudahkan dalam pencarian kata
Setelah dapat, isikan kode ini "visibility:hidden;" dibagian paling bawah sebelum simbol "}" Contoh

#header h1 {
font: $blogTitleFont;
margin: 0px 0px 0px 0px;
padding: 30px 30px 0px 30px;
color: $blogTitleColor;
text-transform: lowercase;
font-weight: 100;
}

Menjadi

#header h1 {
font: $blogTitleFont;
margin: 0px 0px 0px 0px;
padding: 30px 30px 0px 30px;
color: $blogTitleColor;
text-transform: lowercase;
font-weight: 100;
visibility:hidden;
}

Setelah selesai klik tombol Simpan template. Kemudian lihat hasil

Sebelum

Sesudah

Mudah bukan

Selamat mencoba

Mengganti Favicon dengan Fitur Baru Blogger

Panduan Blogger

Syaifuddin 8/06/2011 Add Comment

Syaifuddin

Sudah lama nggak ngeblog lantaran sibuk magang. Eh pas lagi iseng buka blogger, ternyata blogger mengeluarkan fitur baru yaitu Favicon pada tab "Rancangan" -> "Elemen Laman". Dimana fitur ini memudahkan bagi kita khususnya blogger yang baru belajar ngeblog atau awan dengan bahasa HTML untuk mengganti Favicon/Icon blog mereka.

Cara mengoperasikannya sangat mudah, silahkan ikuti langkah-langkah dibawah ini:

Setelah Sign In ke Blogger.com, langsung saja ke bagian "Rancangan" -> "Elemen Laman"

Lihat pada bagian elemen laman, tepatnya diatas Navbar. (Lihat gambar dibawah)

Klik "edit" nanti akan muncul Window baru seperti dibawah ini. Lalu pilih gambar Favicon yang kamu inginkan.

Setelah selesai, klik "Simpan"

Semoga Bermanfaat

Membuat Tombol Sharing is Sexy

Panduan Blogger

Syaifuddin 5/27/2011 Add Comment

Syaifuddin

Tombol berbagi atau share button adalah salah satu cara untuk memudahkan pengunjung yang menyukai artikel anda untuk membagikannya ke situs-situs lain, biasanya Jejaring Sosial seperti Facebook atau Twitter atau yang lainnya.

Nah, yang akan saya share melalui artikel ini adalah tombol Sharing is Sexy. Untuk melihat demonya, silahkan lihat dibagian bawah artikel ini. Hehe..

Ingin mengetahui cara membuatnya, silahkan ikuti langkah-langkah dibawah ini

1. Setelah Login ke Blogger.com pergi ke bagian "Rancangan" -> "Edit HTML"

2. Centang "Expand Template Widget" lalu cari kode ]]></b:skin>

3. Apabila sudah ketemu copy paste kode html dibawah ini tepat dibawah kode ]]></b:skin>

<style type='text/css'>
div.sexy-bookmarks { height:54px; background:url(http://lh4.ggpht.com/_oFC5GnJKBwI/TMLpibxc_QI/AAAAAAAAAvQ/mSJvu0bU2u8/sharing.png) no-repeat left bottom;position:relative; width:540px }
div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarM4d7_uI/AAAAAAAAE4c/1SvA_kEmBDQ/sharing_thumb%5B3%5D.png) no-repeat right bottom; position:absolute; right:-17px }
div.sexy-bookmarks ul.socials { margin:0 !important;padding:0 !important; position:absolute; bottom:0;left:10px }
div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important }
div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important;f ont-size:0 !important; color:transparent !important}
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarI2MridI/AAAAAAAAE4U/Qspdg7GUj5g/sexy_thumb%5B3%5D.png) no-repeat !important }
.sexy-furl { background-position:-300px top !important }
.sexy-furl:hover { background-position:-300px bottom !important }
.sexy-digg { background-position:-500px top !important }
.sexy-digg:hover { background-position:-500px bottom !important }
.sexy-reddit { background-position:-100px top !important }
.sexy-reddit:hover { background-position:-100px bottom !important }
.sexy-stumble { background-position:-50px top !important }
.sexy-stumble:hover { background-position:-50px bottom !important }
.sexy-delicious { background-position:left top !important }
.sexy-delicious:hover { background-position:left bottom !important }
.sexy-yahoo { background-position:-650px top !important }
.sexy-yahoo:hover { background-position:-650px bottom !important }
.sexy-blinklist { background-position:-600px top !important }
.sexy-blinklist:hover { background-position:-600px bottom !important }
.sexy-technorati { background-position:-700px top !important }
.sexy-technorati:hover { background-position:-700px bottom !important }
.sexy-myspace { background-position:-200px top !important }
.sexy-myspace:hover { background-position:-200px bottom !important }
.sexy-twitter { background-position:-350px top !important }
.sexy-twitter:hover { background-position:-350px bottom !important }
.sexy-facebook { background-position:-450px top !important }
.sexy-facebook:hover { background-position:-450px bottom !important }
.sexy-mixx { background-position:-250px top !important }
.sexy-mixx:hover { background-position:-250px bottom !important }
.sexy-script-style { background-position:-400px top !important }
.sexy-script-style:hover { background-position:-400px bottom !important }
.sexy-designfloat { background-position:-550px top !important }
.sexy-designfloat:hover { background-position:-550px bottom !important }
.sexy-syndicate { background-position:-150px top !important }
.sexy-syndicate:hover { background-position:-150px bottom !important }
.sexy-email { background-position:-753px top !important }
.sexy-email:hover { background-position:-753px bottom !important }
</style>

4. Setelah selesai, cari lagi kode <data:post.body/> kemudian copy paste kode html dibawah ini dibawahnya

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-syndicate'><a href='http://feeds.feedburner.com/closeboy' title='Subscribe to RSS'/></li>
<li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='sexy-rightside'/></div>

5. Setelah semua lengkap, silahkan "SIMPAN TEMPLATE"

Ket: - Kata berwarna merah, ganti dengan alamat Feedburner blog anda

Tips: - Untuk memudahkan mencari kata silahkan gunakan "Ctrl+F" sebelum mengedit HTML lebih baik download template anda terlebih dahulu