Artisteer Tutorials, Tips & Tricks

How to Host CSS - JavaScript - HTML Files on Google Drive

2013-09-01T13:54:00.000+03:00

Google launched Drive letting people to upload there files and even create one online and share with people like doing online business. So they started Drive providing everyone with 5GB space on which they can upload anything and share with anyone by changing the privacy settings.
Now recently Google just upgraded the space for every user to 15GB that comes in a combination of Drive, Gmail and Google+ Photos. So now you can upload more and share with everyone.
So now you can obviously upload all your files to Drive and even host your CSS, JavaScript and HTML files too for free. It provides you with unlimited bandwidth, unless you are not abusing there service and its fast and responsive.

How to Host CSS - JavaScript - HTML Files on Google Drive?

So now you do not need any skills to host your files, as its very easy the uploading process is normal and you just need to change some links to make I hosted, so lets get started.

Visit Google Drive and Sign-In with your account.
Now just upload your files normally, make sure your files have proper extension .js, .css or .html
Now when your file is uploaded just right click on that file and under Share click on Share and this open up the share dialog.
Just change the settings from Private to Public on the web option.
Now press Save and you will get the file sharing link, now you need to copy the main file code check below image.
Now as you can see the highlighted code is your file link just copy that code and replace that with xxxxxxxxx in below code.

https://googledrive.com/host/xxxxxxxxxxxxxxxxxxxxxxxxxx

Now this is you link for that file, just try to access it and you will your codes and everything come up.
So now just add this link to your script tag for CSS or JavaScript file's and enjoy. Make sure privacy settings are for Public else it won't show you the code.

<link href='https://googledrive.com/host/xxxxxxxxxxxxxxxxxxxxxxxxxx' rel='stylesheet'/> for CSS code
<script src='https://googledrive.com/host/xxxxxxxxxxxxxxxxxxxxxxxxxx' type='text/javascript'></script>  for javascript

Source

Threaded comments for blogger without popup window

2013-04-03T15:41:00.000+03:00

It's been a while from my last tutorial. In some previous tutorials I presented you with threading comment , a system to replace the default Blogger comment system.
Since then many of you wanted that popup comment window to disappear and the comment form to be displayed under the comment in need of a reply.
The next tutorial is just about that implementing the threaded comment with the reply comment form under the comment in need of a reply... and a few other options like display the image links as actual image , showing youtube embed videos and showing emoticons in comments.

How to make threaded comments on blogger?

1. Log in to your dashboard--> Design- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find ]]></b:skin>. Before it paste the code:

#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/AVvXsEj558f0dNxWd8gafT58BclVtbFAifFaL-JjQdHcxR9Dw8v_HjLCy60Ezv82S6A4lErGBPNeUBGF1p_T7pVt9sPHqGMVpP3433HWGskhZ-nKzh9jABdsaywA83XTrdYBXVGh15Y4iHhJoKc8/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/AVvXsEj3mn0AZQZKFUrJQ-HMWxjXfyH3qup4Fg_yIEBhyphenhyphenkIlR5IPdsqSQTagRF4CzwWENdR-WlXyFw8zN7QpWHvzt8L_br8ZyFaytdgZ45xM2VZP3QY19UQtAjNxe3prAmL2ug6StnIf0Y34Ydk/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;}

4. The final step is to search for the following code:

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

lots of code lines that you must replace

</b:includable>

... and replace the code lines between that includable with the next code:

<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)'>Reply</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;
        Display_Emo = true;
        Replace_Youtube_Link = true;
        Replace_Image_Link = true;
                                Replace_Force_Tag = true;
        Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP']; Replace_Image_Link=true
       
        // Emoticon
        Emo_List = [
        ':)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9L2-qE9C9WJx6NRswU3UhOAFgBnCQW_xmfyhTc6EuCZSlOfUA4LsQOcO52Yp7Uq1PSP92SQXIGYoJsp3a1YFPRMmCRvfqumtzgHV0M4hR4xiuyk9d9Fwc33b5GZSQjw5UMRjSwJAXslw/s1600/smile1.gif',
        ':('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhefMJNXEjUXAav91k-KTlqMVyKyO5nA3hLrT8rODnCShU8z0ad6yItc3aN7PYHKRlsX2Z6QcXIdwYN5zvDWnPADUAgHF8Xm3dxjXdR-pL7wU4pAoaE8amsXmuhUon1oxF4EICkqqBAtZA/s1600/sad.gif',
        '=('  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEU-vMk8f4jJCGl6jJ-QHl1zMccZdyUjJ0tU00lefJELYTT0Euw6L8DYv36XFOeAIi9EUOFXC9a6Kq-QonO1VjSufb6a4e-p83AiN0KH0B2_jOwTkWGImc83vQP4Ujs5-KvHbdOFw98BY/s1600/sadanimated.gif',
        '^_^'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJetNkc6pxOPuWjY8YXx2dpLD4hc5OhPh2xUNnlep90VniQk49Ecr0WmtAAt0bb7Qqz0BRFPAVNUTO3FRxBbFnOqpPFAMa6XjtG9sBtN14HVlHjt9DArrLwYC56MkQr_DuB_JPki1kR0/s1600/smile.gif',
        ':D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfiDyNObCp2EgNGUwkbGZZ_FcGoyttiO1OeLYe15Tre1u4PZknop0XmpQmOIk715YBs0PYi86AVTzlVeg5UFdmBejDEudzi00HLn2Or-gPY4s1tPy0Q53gmSyb-66HUVD-RdIGJAGnnt8/s1600/icon_smile.gif',
        '=D'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXA9vxSRvVeJg2Q3YXs5QKiHnsK7OnZCfWU42D02KRnbmX9hBj6wpBInDnGQj6OkgDjO-Ps8ApbCvvCyg87z2a2TNbVY1iRlspneGodx5WbqpkF3SKTaxeONji7_18gIZr5E4I-rZ6tBE/s1600/hihi.gif',
        '|o|'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRzWf1gyORPgqduveYGCc1BCSbO8cQF3dU-yNILKNIp8N8mTTvchrAo8jJv1G2pZGjff22vEewhF8tw21d0fqGI-zJepCTZXUMOqUa7uHDC4cRWliOvYyjBHpilK_wXXNIL6VUNIEWowI/s1600/applause.gif',
        '@@,'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFOu_673fP39fOejUKDZIXlkUpAorbVy5sbNp00xlw0l5WacGnUzMCVm7WDqZvRsedJCapSSWz4YIg_Xb5bhuW1zIf2E7Zfnukyng20QD0paJZQFFbMgy9nRINMO2GP6Z1XZSv4OrELXc/s1600/rolleyes.gif',
        ';)'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFzMKtFDvvitzzLFGKqof4wnylXAJ1JM8JELDjC-ocWlacsiCSLw3xVXqIR9W5vLvVwbAffCz9V5CcU7HuUi4vt21oxvOsFr5T1aPDsZwl_tTnYFArHlPr2QKiM71fhehtDTA0xfTb64E/s1600/wink.gif',
        ':-bd'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeY06QRqLa4o6zPIP-39tGCerHVwUnBs_lYj855rRyozt2KdaJKg56wqxF2OaZ9kXGOZCHbq-YHwREkkwywRQqKAzlOCx5eWh2D0toMBhFcSzBQlKlbVeMzeVXLjl47Ynd54_IVVUhV2Q/s1600/thumb.gif',
        ':-d'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqsCe86tfw5ROT00U_oKQvieQfj4_yWayoUZKGgZ-WR3TnXt-I0FN_vIf8OoFiB6Pxcm_wMh9HQ2XJ-Q09XZMQuDLsnVEiBLrEp7oRSnTsQb8J6itGcb7P5KY0KoEVEH-RvYa46ldWkkE/s1600/thumbsup.gif', 
                                                                 ':p'  ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgndOHvxd87lQe8b4zMgDm7Dz0blFAmu9n6hDmJUTVQXwrx-gUaqv0OGtO0RXTKRqJOkeC-7CShy02FnZjuV9u13TWI5TtvduR6yWSERU_Lx-qE7RbeR5z3OcrFBgO9RR_9gw5KPJ16_gA/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>

Save the template and see the results.

5. IMPORTANT UPDATE: If after this 5 steps the comments doesn't appear like in the demo , it's because Blogger implemented they're own threaded comment system. To replace it and have the comments like in the tutorial you must find the next code ( you can find the code in multiple places, replace all the codes you can find):

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

...and replace the red code lines with the next line:

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

Save again and see the results.

Add excelent HTML5 404 error page to your blog

2012-11-18T15:02:00.000+02:00

It's been forever since I wrote a new tutorial but lack of time it's the main problem for me.
So here is a new tutorial who I'm sure you will find it helpful.
Now that Blogger introduced the custom error page I will present you with a beautiful HTML5 404 error page with a nice sliding effect made by a little javascript code.
Because it uses HTML 5 and CSS3 patterns for the background it will have a little display problem in IE (the background pattern and the javascript effect will not be displayed), but for the others browsers it will be displayed just fine.

So without other boring explanations let's start with the implementation of 404 HTML 5 error page.

How to add the 404 page to your blog?

1. Log in to your Dashboard--> Template- -> Edit HTML --> Proceed
2. Search for the <body> tag and right after it paste the next code:

<!-- Start-->   
 <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
.error-page-404 {
   background: -webkit-radial-gradient(black 10%, transparent 11%) 0 0,
-webkit-radial-gradient(black 10%, transparent 11%) 8px 8px,
-webkit-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-webkit-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;

background: -moz-radial-gradient(black 10%, transparent 11%) 0 0,
-moz-radial-gradient(black 10%, transparent 11%) 8px 8px,
-moz-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-moz-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;

background: -o-radial-gradient(black 10%, transparent 11%) 0 0,
-o-radial-gradient(black 10%, transparent 11%) 8px 8px,
-o-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-o-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;

background: -ms-radial-gradient(black 10%, transparent 11%) 0 0,
-ms-radial-gradient(black 10%, transparent 11%) 8px 8px,
-ms-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
-ms-radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;

background:
radial-gradient(black 10%, transparent 11%) 0 0,
radial-gradient(black 10%, transparent 11%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 10%, transparent 15%) 8px 9px;

background-color:#282828;
-webkit-background-size:16px 16px;
-moz-background-size:16px 16px;
background-size:16px 16px;
        text-align:center;
        position:fixed;
        top:0px;
        right:0px;
        bottom:0px;
        left:0px;
        padding-top:50px;
        z-index:999;
}
header, section, footer { text-align: center; margin: 20px 0 0 0; }
section { margin-top: 25px; }

.ribbon { margin-top: 20px; }
.error-logo {margin-top: 0px;}
/* transitions */
#n1, #n2, #n3 { -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; -ms-transition-duration: 2s; transition-duration: 2s; }

/* errors */
.error { background-position: center 185px; background-repeat: no-repeat; }
.error .number { width: 348px; height: 225px; margin: 0 auto; }
#n1, #n2, #n3 { float: left; width: 100px; height: 150px; margin: 0 8px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0FyjQCP6YYwBNk0lM8XXEBw2fcYOKMY56EesDrFP2iRlcWeHIsPQ1h88XNPZszsNUKcwxWh-1lY5YVllXiJ6ztI77epi7WdQm8umGe6MTr51lRqB2yV6N1a2sGLCER8qCxK1LltNip6g/s1600/numbers.png) 0 -1500px repeat-y; }

.error-404 #n1 { background-position: 0 -600px; }
.error-404 #n2 { background-position: 0 0; }
.error-404 #n3 { background-position: 0 -600px; }

#error-not-found h1{
        font-family:arial ,sans serif!important;
        text-transform:uppercase;
        font-size:50px;
        line-height:50px!important;
        border:none;
        font-weight: bold;
        color:#131313!important;
        text-shadow: 0px 1px 1px #4d4d4d;
        margin:0!important;
        padding:5px!important;
        text-decoration:none!important;
}
#error-not-found  h2 {
        font-family:arial black,sans serif!important;
        text-transform:uppercase;
        font-size:55px;
        line-height:50px!important;
        border:none;
        font-weight: bold;
        color:#191B1C!important;
        text-shadow: 0px 1px 1px #4d4d4d;
        margin:0!important;
        padding:5px!important;
        text-decoration:none!important;
}
#error-not-found  p a{
        font-family:arial black ,sans serif!important;
        text-transform:uppercase;
        font-size:20px;
        border:none;
        font-weight: bold;
        color:#111111!important;
        text-shadow: 0px 1px 1px #4d4d4d;
        margin:0!important;
        padding:5px!important;
        text-decoration:none!important;
}

/* footer */
footer {
 height: 92px; 
background: url(http://img28.imageshack.us/img28/4821/footerbackground.png) 0 0 repeat-x; 
margin: 80px auto 0 auto; 
 }
footer .container { 
width: 552px; 
height: 32px; 
margin: 0 auto; 
padding: 20px 0; 
}
footer .engine{
z-index: 99999;
display:block;
position:absolute;
top:-47px;
margin-left:770px;
width:175px;
height:40px;
background:url(http://img651.imageshack.us/img651/6979/searchfield.png) no-repeat left top;
padding:0
}
footer .search .field{
float:left;
display:inline;
height:40px;
width:135px
}
footer .search .field input{
color:#ccc;
border:0;
background:transparent;
font-size:11px;
margin:3px 0 0 10px;
padding:4px;
width:110px
}
footer .search .button{
float:left;
display:inline;
height:40px;
width:37px;
cursor:pointer;
border:0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPAtcZPkveGAuuJA0CVUW19dfKEIDQyPn6U8K_liBLTSXRoX3RMWir_dHNsVUu8NR7-4LXaJXbYaKkBuDe2oDDJm4E5sGHNDbrVwk-2GxURWsYg1hJNm5zYo45zPkj8rXbF5TdQnG2QSs/s320/search_button.png) no-repeat 0 0

}
footer .search { display: block; width:173px; height: 32px; margin: 0 auto; background:url(http://img651.imageshack.us/img651/6979/searchfield.png) no-repeat left top; }
</style>
             
    <div class='error-page-404'>
                       <div class='error-logo'><img alt='' src='http://img546.imageshack.us/img546/2760/4044u.png'/></div>
             <header>     
               <div class='ribbon'><img alt='' src='http://img39.imageshack.us/img39/3108/ribbont.png'/></div>
             </header>
       <section class='error' data-error='404'>
         <div class='number'>
                <div id='n1'/>
                <div id='n2'/>
                <div id='n3'/>
            </div>
       </section>
                          <div id='error-not-found'>         
                   <h1>  Page not found</h1>
                         </div>
        <footer>
         <div class='container'>
         <div class='search'>
<form action='/search' id='searchthis' method='get'>
<div class='field'><input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search...'/></div>
<input class='button' type='submit' value=''/>
</form>
</div>
</div>
<div id='error-not-found'>
               <p><a href='/'>go to homepage</a></p>
             </div>
        </footer>
         </div>        
</b:if>

3. Search "Ctrl+F" and find </head>. Before it paste the code:

<script type='text/javascript'>
        //<![CDATA[
  $(document).ready(function() {
 // Set error
    var error = $('section[data-error]');
    error.attr('class', 'error error-' + error.attr('data-error'));
});
   //]]>
    </script>

4. Find <b:includable id='main' var='top'> and after paste the next code:

<b:if cond='data:numPosts == 0'> 
 <data:navMessage/> 
</ b: if>

That's it . Enjoy the new error page for your blog

IMPORTANT Some of the features from the error page implemented on this blog will not be available for you (search box style, some other different changes.)

Demo Page

Numbered comments on your threaded comments change blog

2012-01-13T13:03:00.002+02:00

Recently I receive a request about how to have numbered comments on the threaded comments trick., so today i will present to you the tutorial about this matter.
Having numbered comments is necessary when you need to keep track of the comments made on your blog.It is useful when you have lottery giveaways and need to extract a random commentary who will win different stuff.
So without other comments......

How to create numbered comments on my blog?

1. Log in to your Dashboard--> Template- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find the following code:

<b:loop values='data:post.comments' var='comment'>

4. Right before it add the next code:

<script type='text/javascript'>var CommentsCounter=0;</script>

5. Now find:

 <a expr:name='data:comment.anchorName'/>

... and after it paste the following one:

<span class='comm-num'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

6. Find ]]></b:skin> and before it paste the next code:

.comm-num a:link, .comm-num a:visited {
color: #000 !important;
text-decoration: none !important;
background: #F7F7F7;
border: 1px solid #ddd;
width: 35px;
height: 20px;
float: right;
display: block;
padding:2px;
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}

.comm-num a:hover, .comm-num a:active {
color: gray !important;
text-decoration: none !important;
}

The red line represent the color of the comment number and the blue one the color of comment number when hovered.
You can change the values in the code to accommodate with your blog necessities.

Save the template and see the results.

IMPORTANT: This tutorial works only with the Threaded Comment Tutorial, so if you didn't change the comments according to that tutorial this will not work for you.
Instead check this tutorial: Numbered comments on Blogger templates

Threaded comments with different author color comments (updated)

2012-01-08T16:05:00.000+02:00

Because I received many request from my blog visitors I decided to finally post the code for the highlighted admin/author comments.
Why this change is necessary? Well because the your comments will be different from the other comments making them easier to spot.
The code is almost the same like in the previous tutorial but with some changes for the author comments.

How to make highlighted author threaded comments on blogger?

1. Log in to your dashboard--> Template- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find ]]></b:skin>. Before it paste the code:

/*----------------------------------------------------
          {--------}  Comment {--------}
----------------------------------------------------*/
#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}

.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}

.cm_head {
margin: 0;
width:60px;
float: left;
}

.cm_avatar {
margin: 0;
vertical-align: middle;
outline: 1px solid #fff;
border: 1px solid #ddd;
padding: 3px;
background-image:  url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #ddd;
padding: 3px;
background:#c6e5f7;
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}

.cm_reply {
padding-top: 5px;
}

.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
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;
}

.cm_reply a: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%);;
}

.cm_entry {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}
.cm_entry_a {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3mn0AZQZKFUrJQ-HMWxjXfyH3qup4Fg_yIEBhyphenhyphenkIlR5IPdsqSQTagRF4CzwWENdR-WlXyFw8zN7QpWHvzt8L_br8ZyFaytdgZ45xM2VZP3QY19UQtAjNxe3prAmL2ug6StnIf0Y34Ydk/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}

.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}


.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;

}
.cm_name_a {
font-family:"Francois One";
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: 250;
float: left;

}

.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;

}
.cm_date_a {
font-family:"Francois One";
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;

}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color:  #dff0fa;
font-size: 13px;
color: #333;
word-wrap:break-word;
}

.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}

.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}

.cm_pagenavi a:hover {
text-decoration: underline
}

.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}

IMPORTANT: If you have problems with the avatar search the next code
(in your template might be different):

.avatar-image-container {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUxHCCGRl9koUENB_cmKzykNX-tQBDhihWeSgJOPKa8Ieid4c72QEi6SQXbz3usN6DNA_1iTVMdyf1w6EF8bzQJlbZulaWVJ_KtC53dyiY3vwmtyrojiYIKyi5HfNqqYra4PkPQfDBoA/s400/default.gif); 
width:35px;
height:35px; 
}
.avatar-image-container  img {
 border:none;
 }

The blue lines of code are the code for the different admin color, so you can play with them to change the admin/author comment appearance.

4. Then find </body> and right before it paste the next code:

&lt;script type="text/javascript"&gt;&lt;!--
var _0x7bf4=["\x32\x20\x78\x3D\x31\x72\x2E\x31\x6E\x2E\x4A\x3B\x32\x20\x46\x3D\x77\x2E\x79\x28\x27\x31\x6D\x27\x29\x3B\x32\x20\x6D\x3D\x46\x2E\x75\x3B\x32\x20\x70\x3D\x5B\x5D\x3B\x32\x20\x37\x3D\x5B\x5D\x3B\x32\x20\x64\x3D\x5B\x5D\x3B\x32\x20\x6E\x3D\x30\x3B\x32\x20\x49\x3D\x27\x27\x3B\x32\x20\x4B\x3D\x27\x27\x3B\x32\x20\x45\x3D\x27\x27\x3B\x32\x20\x69\x3D\x30\x3B\x32\x20\x6A\x3D\x30\x3B\x32\x20\x6B\x3D\x30\x3B\x32\x20\x68\x3D\x30\x3B\x32\x20\x62\x3D\x27\x27\x3B\x32\x20\x42\x3D\x22\x22\x3B\x32\x20\x71\x3D\x22\x22\x3B\x31\x73\x20\x31\x31\x28\x29\x7B\x32\x20\x56\x3D\x2D\x31\x3B\x38\x28\x5A\x2E\x31\x79\x3D\x3D\x27\x31\x7A\x20\x31\x76\x20\x31\x75\x27\x29\x7B\x32\x20\x31\x65\x3D\x5A\x2E\x31\x77\x3B\x32\x20\x31\x30\x3D\x31\x78\x20\x31\x32\x28\x22\x31\x74\x20\x28\x5B\x30\x2D\x39\x5D\x7B\x31\x2C\x7D\x5B\x5C\x2E\x30\x2D\x39\x5D\x7B\x30\x2C\x7D\x29\x22\x29\x3B\x38\x28\x31\x30\x2E\x31\x41\x28\x31\x65\x29\x21\x3D\x31\x70\x29\x56\x3D\x31\x71\x28\x31\x32\x2E\x24\x31\x29\x7D\x31\x6F\x20\x56\x7D\x32\x20\x57\x3D\x31\x31\x28\x29\x3B\x38\x28\x57\x3D\x3D\x2D\x31\x7C\x7C\x57\x3E\x3D\x39\x29\x7B\x31\x34\x28\x6D\x2E\x66\x28\x27\x4C\x3D\x22\x63\x27\x29\x21\x3D\x2D\x31\x29\x7B\x69\x3D\x6D\x2E\x66\x28\x27\x4C\x3D\x22\x63\x27\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x2B\x34\x29\x3B\x69\x3D\x6D\x2E\x66\x28\x27\x22\x27\x29\x3B\x70\x5B\x6E\x5D\x3D\x6D\x2E\x65\x28\x30\x2C\x69\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x29\x3B\x37\x5B\x6E\x5D\x3D\x77\x2E\x79\x28\x70\x5B\x6E\x5D\x29\x2E\x75\x3B\x64\x5B\x6E\x5D\x3D\x30\x3B\x6E\x2B\x2B\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x2D\x31\x3B\x69\x2B\x2B\x29\x7B\x76\x28\x6A\x3D\x69\x2B\x31\x3B\x6A\x3C\x6E\x3B\x6A\x2B\x2B\x29\x7B\x38\x28\x37\x5B\x6A\x5D\x2E\x66\x28\x70\x5B\x69\x5D\x29\x21\x3D\x2D\x31\x29\x7B\x49\x3D\x70\x5B\x6A\x5D\x3B\x4B\x3D\x37\x5B\x6A\x5D\x3B\x64\x5B\x6A\x5D\x3D\x64\x5B\x69\x5D\x2B\x31\x3B\x45\x3D\x64\x5B\x6A\x5D\x3B\x76\x28\x68\x3D\x69\x2B\x31\x3B\x68\x3C\x6A\x3B\x68\x2B\x2B\x29\x7B\x38\x28\x64\x5B\x68\x5D\x3C\x45\x29\x7B\x31\x37\x7D\x7D\x76\x28\x6B\x3D\x6A\x3B\x6B\x3E\x68\x3B\x6B\x3D\x6B\x2D\x31\x29\x7B\x70\x5B\x6B\x5D\x3D\x70\x5B\x6B\x2D\x31\x5D\x3B\x37\x5B\x6B\x5D\x3D\x37\x5B\x6B\x2D\x31\x5D\x3B\x64\x5B\x6B\x5D\x3D\x64\x5B\x6B\x2D\x31\x5D\x7D\x70\x5B\x68\x5D\x3D\x49\x3B\x37\x5B\x68\x5D\x3D\x4B\x3B\x64\x5B\x68\x5D\x3D\x45\x7D\x7D\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x3B\x69\x2B\x2B\x29\x7B\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x40\x3C\x61\x20\x4A\x3D\x22\x23\x63\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x2B\x31\x29\x3B\x6A\x3D\x71\x2E\x66\x28\x27\x3C\x2F\x61\x3E\x27\x29\x3B\x71\x3D\x71\x2E\x65\x28\x6A\x2B\x34\x29\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x71\x7D\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x50\x3D\x22\x59\x22\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x29\x3B\x38\x28\x64\x5B\x69\x5D\x3E\x36\x29\x64\x5B\x69\x5D\x3D\x36\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x27\x74\x3D\x22\x31\x35\x3A\x27\x2B\x28\x31\x39\x2D\x64\x5B\x69\x5D\x2A\x35\x29\x2B\x27\x25\x22\x20\x27\x2B\x71\x7D\x62\x2B\x3D\x37\x5B\x69\x5D\x7D\x62\x2B\x3D\x27\x3C\x67\x20\x50\x3D\x22\x31\x66\x22\x3E\x3C\x2F\x67\x3E\x27\x3B\x46\x2E\x75\x3D\x62\x3B\x46\x2E\x74\x2E\x51\x3D\x27\x31\x62\x27\x3B\x32\x20\x4D\x3D\x77\x2E\x79\x28\x27\x31\x61\x27\x29\x2E\x75\x3B\x32\x20\x6F\x3D\x4F\x28\x4D\x29\x3B\x38\x28\x6F\x3E\x72\x29\x7B\x62\x3D\x27\x3C\x67\x20\x74\x3D\x22\x47\x3A\x31\x63\x22\x3E\x31\x64\x20\x27\x3B\x32\x20\x48\x3D\x28\x6F\x2D\x6F\x25\x72\x29\x2F\x72\x2B\x31\x3B\x32\x20\x73\x3D\x27\x27\x3B\x32\x20\x6C\x3D\x31\x3B\x69\x3D\x78\x2E\x66\x28\x27\x2E\x31\x6C\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x78\x2E\x65\x28\x30\x2C\x69\x2B\x35\x29\x7D\x7A\x7B\x73\x3D\x78\x7D\x69\x3D\x73\x2E\x66\x28\x27\x23\x44\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x73\x2E\x65\x28\x30\x2C\x69\x29\x7D\x69\x3D\x78\x2E\x66\x28\x27\x3F\x53\x3D\x27\x29\x3B\x38\x28\x69\x3D\x3D\x2D\x31\x29\x7B\x6C\x3D\x31\x7D\x7A\x7B\x6C\x3D\x4F\x28\x78\x2E\x65\x28\x69\x2B\x31\x33\x29\x29\x7D\x76\x28\x69\x3D\x31\x3B\x69\x3C\x3D\x48\x3B\x69\x2B\x2B\x29\x7B\x38\x28\x69\x3D\x3D\x6C\x29\x7B\x62\x2B\x3D\x27\x3C\x55\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x55\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x61\x20\x4A\x3D\x22\x27\x2B\x73\x2B\x27\x3F\x53\x3D\x27\x2B\x69\x2B\x27\x23\x44\x22\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x61\x3E\x27\x7D\x7D\x38\x28\x6C\x2A\x72\x3C\x3D\x6F\x29\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x28\x6C\x2A\x72\x29\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x6F\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x32\x20\x43\x3D\x77\x2E\x79\x28\x27\x31\x69\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x43\x3D\x77\x2E\x79\x28\x27\x31\x68\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x38\x28\x6C\x3C\x48\x29\x7B\x62\x3D\x27\x3C\x74\x20\x31\x67\x3D\x22\x31\x6B\x2F\x31\x6A\x22\x3E\x2E\x58\x20\x7B\x51\x3A\x20\x31\x38\x7D\x3C\x2F\x74\x3E\x27\x3B\x32\x20\x4E\x3D\x77\x2E\x79\x28\x27\x31\x36\x27\x29\x3B\x4E\x2E\x75\x3D\x62\x7D\x7D\x7D\x7A\x7B\x31\x34\x28\x6D\x2E\x66\x28\x27\x4C\x3D\x63\x27\x29\x21\x3D\x2D\x31\x29\x7B\x69\x3D\x6D\x2E\x66\x28\x27\x4C\x3D\x63\x27\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x2B\x33\x29\x3B\x69\x3D\x6D\x2E\x66\x28\x27\x3E\x27\x29\x3B\x70\x5B\x6E\x5D\x3D\x6D\x2E\x65\x28\x30\x2C\x69\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x29\x3B\x37\x5B\x6E\x5D\x3D\x77\x2E\x79\x28\x70\x5B\x6E\x5D\x29\x2E\x75\x3B\x64\x5B\x6E\x5D\x3D\x30\x3B\x6E\x2B\x2B\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x2D\x31\x3B\x69\x2B\x2B\x29\x7B\x76\x28\x6A\x3D\x69\x2B\x31\x3B\x6A\x3C\x6E\x3B\x6A\x2B\x2B\x29\x7B\x38\x28\x37\x5B\x6A\x5D\x2E\x66\x28\x70\x5B\x69\x5D\x29\x21\x3D\x2D\x31\x29\x7B\x49\x3D\x70\x5B\x6A\x5D\x3B\x4B\x3D\x37\x5B\x6A\x5D\x3B\x64\x5B\x6A\x5D\x3D\x64\x5B\x69\x5D\x2B\x31\x3B\x45\x3D\x64\x5B\x6A\x5D\x3B\x76\x28\x68\x3D\x69\x2B\x31\x3B\x68\x3C\x6A\x3B\x68\x2B\x2B\x29\x7B\x38\x28\x64\x5B\x68\x5D\x3C\x45\x29\x7B\x31\x37\x7D\x7D\x76\x28\x6B\x3D\x6A\x3B\x6B\x3E\x68\x3B\x6B\x3D\x6B\x2D\x31\x29\x7B\x70\x5B\x6B\x5D\x3D\x70\x5B\x6B\x2D\x31\x5D\x3B\x37\x5B\x6B\x5D\x3D\x37\x5B\x6B\x2D\x31\x5D\x3B\x64\x5B\x6B\x5D\x3D\x64\x5B\x6B\x2D\x31\x5D\x7D\x70\x5B\x68\x5D\x3D\x49\x3B\x37\x5B\x68\x5D\x3D\x4B\x3B\x64\x5B\x68\x5D\x3D\x45\x7D\x7D\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x3B\x69\x2B\x2B\x29\x7B\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x40\x3C\x41\x20\x4A\x3D\x22\x23\x63\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x2B\x31\x29\x3B\x6A\x3D\x71\x2E\x66\x28\x27\x3C\x2F\x41\x3E\x27\x29\x3B\x71\x3D\x71\x2E\x65\x28\x6A\x2B\x34\x29\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x71\x7D\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x50\x3D\x59\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x29\x3B\x38\x28\x64\x5B\x69\x5D\x3E\x36\x29\x64\x5B\x69\x5D\x3D\x36\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x27\x74\x3D\x22\x31\x35\x3A\x27\x2B\x28\x31\x39\x2D\x64\x5B\x69\x5D\x2A\x35\x29\x2B\x27\x25\x22\x20\x27\x2B\x71\x7D\x62\x2B\x3D\x37\x5B\x69\x5D\x7D\x62\x2B\x3D\x27\x3C\x67\x20\x50\x3D\x22\x31\x66\x22\x3E\x3C\x2F\x67\x3E\x27\x3B\x46\x2E\x75\x3D\x62\x3B\x46\x2E\x74\x2E\x51\x3D\x27\x31\x62\x27\x3B\x32\x20\x4D\x3D\x77\x2E\x79\x28\x27\x31\x61\x27\x29\x2E\x75\x3B\x32\x20\x6F\x3D\x4F\x28\x4D\x29\x3B\x38\x28\x6F\x3E\x72\x29\x7B\x62\x3D\x27\x3C\x67\x20\x74\x3D\x22\x47\x3A\x31\x63\x22\x3E\x31\x64\x20\x27\x3B\x32\x20\x48\x3D\x28\x6F\x2D\x6F\x25\x72\x29\x2F\x72\x2B\x31\x3B\x32\x20\x73\x3D\x27\x27\x3B\x32\x20\x6C\x3D\x31\x3B\x69\x3D\x78\x2E\x66\x28\x27\x2E\x31\x6C\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x78\x2E\x65\x28\x30\x2C\x69\x2B\x35\x29\x7D\x7A\x7B\x73\x3D\x78\x7D\x69\x3D\x73\x2E\x66\x28\x27\x23\x44\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x73\x2E\x65\x28\x30\x2C\x69\x29\x7D\x69\x3D\x78\x2E\x66\x28\x27\x3F\x53\x3D\x27\x29\x3B\x38\x28\x69\x3D\x3D\x2D\x31\x29\x7B\x6C\x3D\x31\x7D\x7A\x7B\x6C\x3D\x4F\x28\x78\x2E\x65\x28\x69\x2B\x31\x33\x29\x29\x7D\x76\x28\x69\x3D\x31\x3B\x69\x3C\x3D\x48\x3B\x69\x2B\x2B\x29\x7B\x38\x28\x69\x3D\x3D\x6C\x29\x7B\x62\x2B\x3D\x27\x3C\x55\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x55\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x61\x20\x4A\x3D\x22\x27\x2B\x73\x2B\x27\x3F\x53\x3D\x27\x2B\x69\x2B\x27\x23\x44\x22\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x61\x3E\x27\x7D\x7D\x38\x28\x6C\x2A\x72\x3C\x3D\x6F\x29\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x28\x6C\x2A\x72\x29\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x6F\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x32\x20\x43\x3D\x77\x2E\x79\x28\x27\x31\x69\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x43\x3D\x77\x2E\x79\x28\x27\x31\x68\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x38\x28\x6C\x3C\x48\x29\x7B\x62\x3D\x27\x3C\x74\x20\x31\x67\x3D\x22\x31\x6B\x2F\x31\x6A\x22\x3E\x2E\x58\x20\x7B\x51\x3A\x20\x31\x38\x7D\x3C\x2F\x74\x3E\x27\x3B\x32\x20\x4E\x3D\x77\x2E\x79\x28\x27\x31\x36\x27\x29\x3B\x4E\x2E\x75\x3D\x62\x7D\x7D\x7D","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x76\x61\x72\x7C\x7C\x7C\x7C\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x43\x6F\x6E\x74\x65\x6E\x74\x7C\x69\x66\x7C\x7C\x7C\x73\x74\x72\x6F\x75\x74\x7C\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x4C\x65\x76\x65\x6C\x7C\x73\x75\x62\x73\x74\x72\x69\x6E\x67\x7C\x69\x6E\x64\x65\x78\x4F\x66\x7C\x64\x69\x76\x7C\x7C\x7C\x7C\x7C\x43\x6D\x5F\x43\x75\x72\x5F\x50\x61\x67\x65\x7C\x43\x6D\x5F\x42\x6C\x6F\x63\x6B\x5F\x43\x6F\x6E\x74\x65\x6E\x74\x7C\x43\x6D\x5F\x4E\x75\x6D\x7C\x43\x6D\x5F\x54\x6F\x74\x61\x6C\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x49\x64\x7C\x73\x74\x72\x5F\x74\x32\x7C\x32\x30\x30\x7C\x4F\x72\x67\x5F\x55\x72\x6C\x5F\x54\x68\x72\x65\x61\x64\x43\x4D\x7C\x73\x74\x79\x6C\x65\x7C\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C\x7C\x66\x6F\x72\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x43\x75\x72\x5F\x55\x72\x6C\x5F\x54\x68\x72\x65\x61\x64\x43\x4D\x7C\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64\x7C\x65\x6C\x73\x65\x7C\x7C\x73\x74\x72\x5F\x74\x31\x7C\x43\x6D\x5F\x50\x61\x67\x65\x5F\x4F\x62\x6A\x7C\x63\x6F\x6D\x6D\x65\x6E\x74\x73\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x4C\x65\x76\x65\x6C\x5F\x54\x7C\x43\x6D\x5F\x42\x6C\x6F\x63\x6B\x7C\x66\x6C\x6F\x61\x74\x7C\x43\x6D\x5F\x50\x61\x67\x65\x5F\x4E\x75\x6D\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x49\x64\x5F\x54\x7C\x68\x72\x65\x66\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x43\x6F\x6E\x74\x65\x6E\x74\x5F\x54\x7C\x69\x64\x7C\x43\x6D\x5F\x54\x6F\x74\x61\x6C\x5F\x4F\x62\x6A\x7C\x43\x6D\x5F\x52\x65\x70\x6C\x79\x43\x53\x53\x5F\x4F\x62\x6A\x7C\x70\x61\x72\x73\x65\x49\x6E\x74\x7C\x63\x6C\x61\x73\x73\x7C\x64\x69\x73\x70\x6C\x61\x79\x7C\x6F\x66\x7C\x63\x6F\x6D\x6D\x65\x6E\x74\x50\x61\x67\x65\x7C\x72\x69\x67\x68\x74\x7C\x73\x70\x61\x6E\x7C\x72\x76\x7C\x49\x45\x5F\x76\x65\x72\x7C\x63\x6D\x5F\x61\x75\x74\x68\x6F\x72\x5F\x72\x65\x70\x6C\x79\x7C\x63\x6D\x5F\x77\x72\x61\x70\x7C\x6E\x61\x76\x69\x67\x61\x74\x6F\x72\x7C\x72\x65\x7C\x67\x65\x74\x49\x6E\x74\x65\x72\x6E\x65\x74\x45\x78\x70\x6C\x6F\x72\x65\x72\x56\x65\x72\x73\x69\x6F\x6E\x7C\x52\x65\x67\x45\x78\x70\x7C\x7C\x77\x68\x69\x6C\x65\x7C\x77\x69\x64\x74\x68\x7C\x63\x6D\x5F\x72\x65\x70\x6C\x79\x5F\x63\x73\x73\x7C\x62\x72\x65\x61\x6B\x7C\x6E\x6F\x6E\x65\x7C\x31\x30\x30\x7C\x63\x6D\x5F\x74\x6F\x74\x61\x6C\x7C\x62\x6C\x6F\x63\x6B\x7C\x6C\x65\x66\x74\x7C\x50\x61\x67\x65\x7C\x75\x61\x7C\x63\x6C\x65\x61\x72\x7C\x74\x79\x70\x65\x7C\x63\x6D\x5F\x70\x61\x67\x65\x5F\x63\x6F\x70\x79\x7C\x63\x6D\x5F\x70\x61\x67\x65\x7C\x63\x73\x73\x7C\x74\x65\x78\x74\x7C\x68\x74\x6D\x6C\x7C\x63\x6D\x5F\x62\x6C\x6F\x63\x6B\x7C\x6C\x6F\x63\x61\x74\x69\x6F\x6E\x7C\x72\x65\x74\x75\x72\x6E\x7C\x6E\x75\x6C\x6C\x7C\x70\x61\x72\x73\x65\x46\x6C\x6F\x61\x74\x7C\x77\x69\x6E\x64\x6F\x77\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x4D\x53\x49\x45\x7C\x45\x78\x70\x6C\x6F\x72\x65\x72\x7C\x49\x6E\x74\x65\x72\x6E\x65\x74\x7C\x75\x73\x65\x72\x41\x67\x65\x6E\x74\x7C\x6E\x65\x77\x7C\x61\x70\x70\x4E\x61\x6D\x65\x7C\x4D\x69\x63\x72\x6F\x73\x6F\x66\x74\x7C\x65\x78\x65\x63","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function (_0x4f09x1,_0x4f09x2,_0x4f09x3,_0x4f09x4,_0x4f09x5,_0x4f09x6){_0x4f09x5=function (_0x4f09x3){return (_0x4f09x3&lt;_0x4f09x2?_0x7bf4[4]:_0x4f09x5(parseInt(_0x4f09x3/_0x4f09x2)))+((_0x4f09x3=_0x4f09x3%_0x4f09x2)&gt;35?String[_0x7bf4[5]](_0x4f09x3+29):_0x4f09x3.toString(36));} ;if(!_0x7bf4[4][_0x7bf4[6]](/^/,String)){while(_0x4f09x3--){_0x4f09x6[_0x4f09x5(_0x4f09x3)]=_0x4f09x4[_0x4f09x3]||_0x4f09x5(_0x4f09x3);} ;_0x4f09x4=[function (_0x4f09x5){return _0x4f09x6[_0x4f09x5];} ];_0x4f09x5=function (){return _0x7bf4[7];} ;_0x4f09x3=1;} ;while(_0x4f09x3--){if(_0x4f09x4[_0x4f09x3]){_0x4f09x1=_0x4f09x1[_0x7bf4[6]]( new RegExp(_0x7bf4[8]+_0x4f09x5(_0x4f09x3)+_0x7bf4[8],_0x7bf4[9]),_0x4f09x4[_0x4f09x3]);} ;} ;return _0x4f09x1;} (_0x7bf4[0],62,99,_0x7bf4[3][_0x7bf4[2]](_0x7bf4[1]),0,{}));
--&gt;&lt;/script&gt;

5. The final step is to search for the following code:

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

lots of code lines that you must replace

</b:includable>

... and replace the code lines between that includable with the next code:

  <div class='comments' id='comments'>
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
        <h4>
             <b:if cond='data:post.numComments &gt; 0'>
          <b:if cond='data:post.numComments == 1'>
            <span id='cm_total'>1</span> comment
          <b:else/>
            <span id='cm_total'><data:post.numComments/></span> comments
          </b:if>
        </b:if>
        </h4>
        
        <div id='cm_reply_css'/>
        
        <div class='cm_pagenavi' id='cm_page'/>
        
        <div id='cm_block'>
            <b:loop values='data:post.comments' var='comment'>
                <b:if cond='data:comment.isDeleted'>
                <b:else/>
                
                    <div expr:id='data:comment.anchorName'>
                        <div class='cm_wrap'>
                            <a expr:name='data:comment.anchorName'/> 

<b:if cond='data:comment.author == data:post.author'>
                               <div class='cm_head'>
                                <div class='cm_avatar_a'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>                        
                                </div>
                                <div class='cm_reply'>
                                    <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=__BlogID__&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
                                </div>
                            </div>
<b:else/>

                            <div class='cm_head'>
                                <div class='cm_avatar'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>                        
                                </div>
                                <div class='cm_reply'>
                                    <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=__BlogID__&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
                                </div>
                            </div>
</b:if>

<b:if cond='data:comment.author == data:post.author'>
                                <div class='cm_entry_a'>
                                <span class='cm_arrow'/>
                                <div class='cm_info_a'>
                                    <div class='cm_name_a'>

                                      <b:if cond='data:comment.author == data:post.author'>
                                                                                       <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                                           <b:else/>

                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                        <b:else/>
                                            <b><data:comment.author/></b>
                                       </b:if>
                                        </b:if>
                                    </div>

                                            <b:if cond='data:comment.author == data:post.author'>
                                     <div class='cm_date_a'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>

                                            <b:else/>

                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/> 
                                            </b:if>                                   
                                </div>  
                                  <b:if cond='data:comment.author == data:post.author'>
                                     <div class='comment-body-author'>
                                <p><data:comment.body/></p>
                                     </div>
                                            <b:else/>
                                <p><data:comment.body/></p>
                                 </b:if> 
                            </div>
                        

<b:else/>

                            <div class='cm_entry'>
                                <span class='cm_arrow'/>
                                <div class='cm_info'>
                                    <div class='cm_name'>

                                      <b:if cond='data:comment.author == data:post.author'>
                                                                                      <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                                           <b:else/>

                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                        <b:else/>
                                            <b><data:comment.author/></b>
                                       </b:if>
                                        </b:if>
                                    </div>

                                            <b:if cond='data:comment.author == data:post.author'>
                                     <div class='cm_date_a'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>

                                            <b:else/>

                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/> 
                                            </b:if>                                   
                                </div>  
                                  <b:if cond='data:comment.author == data:post.author'>
                                     <div class='comment-body-author'>
                                <p><data:comment.body/></p>
                                     </div>
                                            <b:else/>
                                <p><data:comment.body/></p>
                                 </b:if> 
                            </div>
</b:if>
                        </div>
                    </div>
                </b:if>              
     </b:loop>
        </div>

        <div class='cm_pagenavi' id='cm_page_copy'/>

    <b:if cond='data:post.embedCommentForm'>
            <b:if cond='data:post.allowNewComments'>
                <b:include data='post' name='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>

  </b:if>
  </div>

IMPORTANT: Replace the __BlogID__ with the your own BlogID number.

Where you can find the BlogID? See the pictures bellow.

For new Blogger interface:

For old Blogger interface:

The blog ID is the number highlighted. Yours will be different than the one in the pictures.

Save the template and see the results.

6. IMPORTANT UPDATE: If after this 5 steps the comments doesn't appear like in the demo , it's because Blogger implemented they're own threaded comment system. To replace it and have the comments like in the tutorial you must find the next code (you will find it in 4 places):

          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>

...and replace the red code lines with the next line:

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

Save again and see the results.

DEMO: See the comments below

Add a beautiful CSS-jQuery mega menu on your blog (REQ)

2011-11-29T10:26:00.001+02:00

This tutorial is about another navigation menu. Using jQuery and CSS you will be able to add to your template a nice mega menu.

The request for this tutorial come from the user Angga Lisdiyanto who posted on the forum about this menu.

The next menu is perfect if you have many links or pages to add to your menu. You can add them into categories for the visitors to find what they are interested faster and easier.

How to create a nice mega menu to your blog?

1. Log in to your dashboard--> Template- -> Edit HTML

2. Search "Ctrl+F" and find the following code: ]]></b:skin> and before it paste the next one:

/*----------------------------------------------------
{--------}  Menu {--------}
----------------------------------------------------*/
ul.ldd_menu{
        z-index:999;
 margin:0px;
 padding:0;
 display:block;
 height:50px;
 background-color:#D04528;
 list-style:none;
 font-family:"Trebuchet MS", sans-serif;
 border-top:1px solid #EF593B;
 border-bottom:1px solid #EF593B;
 border-left:10px solid #D04528;
 -moz-box-shadow:0px 3px 4px #591E12;
 -webkit-box-shadow:0px 3px 4px #591E12;
 -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
 text-decoration:none;
}
ul.ldd_menu > li{

 float:left;
 position:relative;
}
ul.ldd_menu > li > span{
        z-index:999;
 float:left;
 color:#fff;
 background-color:#D04528;
 height:50px;
 line-height:50px;
 cursor:default;
 padding:0px 20px;
 text-shadow:0px 0px 1px #fff;
 border-right:1px solid #DF7B61;
 border-left:1px solid #C44D37;
}
ul.ldd_menu .ldd_submenu{
        z-index:999;
 position:absolute;
 top:50px;
 width:550px;
 display:none;
 opacity:0.95;
 left:0px;
 font-size:10px;
 background: #C34328;
 border-top:1px solid #EF593B;
 -moz-box-shadow:0px 3px 4px #591E12 inset;
 -webkit-box-shadow:0px 3px 4px #591E12 inset;
 -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
        z-index:999;
 background-color:#f0f0f0;
 color:#444;
 display:block;
 clear:both;
 padding:15px 20px;
 text-transform:uppercase;
 font-family: Arial, serif;
 font-size:12px;
 text-shadow:0px 0px 1px #fff;
 -moz-box-shadow:0px 0px 2px #777 inset;
 -webkit-box-shadow:0px 0px 2px #777 inset;
 -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{

 list-style:none;
 float:left;
 border-left:1px solid #DF7B61;
 margin:20px 0px 10px 30px;
 padding:10px;
}
li.ldd_heading{

 font-family: Georgia, serif;
 font-size: 13px;
 font-style: italic;
 color:#FFB39F;
 text-shadow:0px 0px 1px #B03E23;
 padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{

 font-family: Arial, serif;
 font-size:10px;
 line-height:20px;
 color:#fff;
 padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
 -moz-box-shadow:0px 0px 2px #333;
 -webkit-box-shadow:0px 0px 2px #333;
 box-shadow:0px 0px 2px #333;
 background:#AF412B;
}

3. Now find the </head> tag and before it paste the code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
        <script type='text/javascript'>
            $(function() {
    /**
     * the menu
     */
    var $menu = $(&#39;#ldd_menu&#39;);
    
    /**
     * for each list element,
     * we show the submenu when hovering and
     * expand the span element (title) to 510px
     */
    $menu.children(&#39;li&#39;).each(function(){
     var $this = $(this);
     var $span = $this.children(&#39;span&#39;);
     $span.data(&#39;width&#39;,$span.width());
     
     $this.bind(&#39;mouseenter&#39;,function(){
      $menu.find(&#39;.ldd_submenu&#39;).stop(true,true).hide();
      $span.stop().animate({&#39;width&#39;:&#39;510px&#39;},300,function(){
       $this.find(&#39;.ldd_submenu&#39;).slideDown(300);
      });
     }).bind(&#39;mouseleave&#39;,function(){
      $this.find(&#39;.ldd_submenu&#39;).stop(true,true).hide();
      $span.stop().animate({&#39;width&#39;:$span.data(&#39;width&#39;)+&#39;px&#39;},300);
     });
    });
            });
        </script>

If you have Jquery instaled on your template delete the red line.

4. The next step is to find <div id='footer-wrapper'> or similar (in your template it might be different noted) and before it paste the next code:

<ul class='ldd_menu' id='ldd_menu'>
    <li>
     <span>Vacations</span><!-- Increases to 510px in width-->
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun &amp; Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science &amp; Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises &amp; Boat Trips</a></li>
       <li><a href='#'>Wild Animals &amp; Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others &amp; For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
     </div>
    </li>
    <li>
     <span>Equipment</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun &amp; Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science &amp; Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises &amp; Boat Trips</a></li>
       <li><a href='#'>Wild Animals &amp; Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others &amp; For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
     </div>
    </li>
    <li>
     <span>Locations</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun &amp; Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science &amp; Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises &amp; Boat Trips</a></li>
       <li><a href='#'>Wild Animals &amp; Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others &amp; For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>

   </div>
    </li>
    <li>
     <span>Tourists</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Download</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun &amp; Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science &amp; Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises &amp; Boat Trips</a></li>
       <li><a href='#'>Wild Animals &amp; Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others &amp; For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
     </div>
    </li>
   </ul>

Save the template and see the result.

Demo Page

Nice photo gallery using jQuery and zoom effect

2011-11-02T17:45:00.001+02:00

Today I will present you with a tutorial for creating a photo gallery with jQuery and zoom effect. It's a pretty nice gallery and you can add it both in your posts and in a HTML/Javascript widget. Also if you want you can add it to a blog page.
It's very easy to add , the tutorial having just 3 small steps. So....

How to create nice photo galley with zoom effect?

1. Log in to your Dashboard--> Template- -> Edit HTML

2. Search "Ctrl+F" and find ]]></b:skin>. Before it paste the code:

/* Blogger Zoom Gallery  */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPSZwGPHfEMAkhU9XEKPmWk8s4CHCUY14rFQjudm5i7pOdKFNpOGUoaJugt9szFJf8oZb3fzx_GW89nuaXf_14XcJ5T7rwKG91-J_V6kdpI50sovvKH_FmxByKqu_dXJQwnM6ap4foPYns/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

Change the value of the red line to change the width of the gallery.

3. Then go and find the </head> tag and before it paste the next code:

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false; 
});

});
</script>

If you have jQuery already installed on your template delete the rel line.

4. Save your template.

5. Now in the place you want your gallery to appear just paste the next code:

<ul class="thumb">
<li><a href="#"><img src="picture 1 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 2 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 3 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 4 Link" alt="" /></a></li>
</ul>

Replace the blue line with the URL of your images,and if you want to make the image link to another page or url instead of # add the target url.

Each time you want to add a new image just add a new line of code like the upper ones.

Add nice Table of Content (TOC) to your blog (REQ)

2011-09-27T10:56:00.000+03:00

I received many emails on how to create a Table of Content like the one I have on this blog. Many of you already know what a TOC is but for those of you who doesn't know a TOC (Table of Content) is a page where all your posts are displayed and organized according your post labels.It's a little bit like a Sitemap. So if you want to have a TOC like mine's just follow the steps.

1. Log in to your dashboard--> Pages- -> New page

Then make sure you have switched to HTML mode and paste in the content of your new page this lines:

<link href="http://artistutorials.googlecode.com/files/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://artistutorials.googlecode.com/files/toc.js">
</script>
<script src="http://artistutorial.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>

Replace the red link with the link of your blog and then save/publish the page, and see the result.

If you want to host the files needed for the TOC to work you can download them from HERE.

Demo Page

Nice vertical fixed navigation menu using jQuery and CSS

2011-09-20T20:28:00.000+03:00

This tutorial is about another navigation menu. Using jQuery and CSS you will be able to add to your template a nice fixed vertical menu.

The menu will be partial hidden and will be visible only whet the user hover it.

This is a nice effect and because the menu is semi-transparent the contend under it will not be completely hidden.

Using jQuery, we will make the icons appear whenever we hover over one of the list items.

How to add this nice menu to your blog?

1. Log in to your dashboard--> Template- -> Edit HTML

2. Search "Ctrl+F" and find the following code: ]]></b:skin> and before it paste the next one:

/*----------------------------------------------------
{--------}  Menu {--------}
----------------------------------------------------*/
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;    
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.8;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#navigation .home a{
    background-image: url(http://img163.imageshack.us/img163/1473/homehc.png);
}
ul#navigation .about a      {
    background-image: url(http://img156.imageshack.us/img156/4176/idcardqx.png);
}
ul#navigation .search a      {
    background-image: url(http://img21.imageshack.us/img21/7365/searchl.png);
}
ul#navigation .podcasts a      {
    background-image: url(http://img834.imageshack.us/img834/8079/camerae.png);
}
ul#navigation .rssfeed a   {
    background-image: url(http://img263.imageshack.us/img263/5871/rssd.png);
}
ul#navigation .photos a     {
    background-image: url(http://img508.imageshack.us/img508/2226/ipodl.png);
}
ul#navigation .contact a    {
    background-image: url(http://img808.imageshack.us/img808/5498/mailos.png);
}

You can see in the upper code that exist a couple lines with some images (blue lines). Those images are for the image that will appear in the menu. When you will create another menu item you have to add your image like in those lines.

Exemple: For an Download menu item you must add this line:

ul#navigation .download a    {
    background-image: url(link to the image);
}

3. Now find the </head> tag and before it paste the code:

<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
        </script>

4. The next step is to find </body> and before it paste the next code:

<ul id="navigation">

            <li class="home"><a href="" title="Home"></a></li>

            <li class="about"><a href="" title="About"></a></li>

            <li class="search"><a href="" title="Search"></a></li>

            <li class="photos"><a href="" title="Photos"></a></li>

            <li class="rssfeed"><a href="" title="Rss Feed"></a></li>

            <li class="podcasts"><a href="" title="Podcasts"></a></li>

            <li class="contact"><a href="" title="Contact"></a></li>

        </ul>

You can see that each menu item has a class. This class is for display the image for the menu item (exemple how to add image is on the step 3).
When you add a new menu item make sure that you add the class to display the image

So for a new menu item the code will be:

<li class='download'><a href="your link" title="Download"></a></li>

Save the template and see the result.

Demo Page

Adding images and more text formats to the body of the comments

2011-09-16T12:08:00.000+03:00

In a couples tutorials on the comments subject you have learned how to make the comments area better.
Now you can change the default style of the comment form, you can have threaded comments on your blog; but when posting a comment you are limited only to 3 ways to format your comment: bold,italic and anchor tags. In the next tutorial you will learn how to format your comments better.
After this tutorial you and your visitors will be able to add image in the body of the comment, to add marquee text, or text with different color, with different size.
Also you will be able to center the text, to create a box around it and a couples other formats.

How to add images and format text in comments body?

1. Log in to your dashboard--> Template- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find </body>. Before it paste the code:

<script type='text/javascript'>
        //<![CDATA[
/*developed by neechalkaran@gmail.com*/
a=document.getElementById('comments');
if(a){b=a.getElementsByTagName("DD");for(i=0;i<b.length;i++){_str=b.item(i).innerHTML.replace(/\[im\]/gi,"<img src=' ");
_str=_str.replace(/\[im\#\]/gi,"<img width='100%' src='");_str=_str.replace(/\[\/im\]/gi,"' class='image'/>");
_str=_str.replace(/\[ma\]/gi,"<marquee>");_str=_str.replace(/\[\/ma\]/gi,"</marquee>");_str=_str.replace(/\[si\=\"/gi,"<font size='");
_str=_str.replace(/\[\/si\]/gi,"</font>");_str=_str.replace(/\[co=\"/gi,"<font color='");_str=_str.replace(/\[\/co\]/gi,"</font>");
_str=_str.replace(/\"\]/gi,"'>");_str=_str.replace(/\[ce\]/gi,"<center>");_str=_str.replace(/\[\/ce\]/gi,"</center>");
_str=_str.replace(/\[ma\+\]/gi,"<marquee direction='right'>");_str=_str.replace(/\[\/ma\+\]/gi,"</marquee>");_str=_str.replace(/\[box\]/gi,"<table frame='box'><tr><td>");
_str=_str.replace(/\[\/box\]/gi,"</td></tr></table>");_str=_str.replace(/\[mark\]/gi,"<table align='center' frame='vsides' width='70%'><tr align='center'><td>");
_str=_str.replace(/\[\/mark\]/gi,"</td></tr></table>");_str=_str.replace(/\[line\]/gi,"<hr/>");
_str=_str.replace(/\[card\=\"/gi,"<table align='center' border='1' width='75%'><tr><td align='center' bgcolor='");_str=_str.replace(/\[\/card\]/gi,"</td></tr></table>");
_str=_str.replace(/\[hi\=\"/gi,"<span style='background-color:");_str=_str.replace(/\[\/hi\]/gi,"</span>");b.item(i).innerHTML=_str}}
 //]]>
    </script>

/*For adding video in comments body*/
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("multimedia");
theText = bodyText.innerHTML;
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>

4. Find <b:loop values='data:post.comments' var='comment'> and before it paste the next code: <div id='multimedia'>. Then find </b:loop> and after it paste the closing tag </div>

5. How to add your images and the rest of the text formats? Just use the next tags to make it appear on your comments.

To get Images [im].....[/im]
To get scrolling effect [ma]....[/ma]
To decide font size you can change numbers} [si="2"]...[/si]
To decide font color [co="red"]...[/co]
To centralize the text [ce]...[/ce]
To get scrolling effect in right side [ma+]...[/ma+]
To box the comment [box]...[/box]
To mark the comment [mark]...[/mark]
To get background effect [card="blue"]...[/card]
To get image to fit the column(width=100%) [im#]...[/im]
To Highlight the words [hi="yellow"]...[/hi]
To add video only from Youtube.com [youtube] link of the video [/youtube]

IMPORTANT: Replace the " ... " with the text or link to the image.

VERY IMPORTANT:

It's possible that in some blogs this trick won't work. Seems like those blogs don't have tagname 'DD'. You have to change your template or add those tag names for the comment div. How to do it? It's simple, just find the next code:

<p><data:comment.body/></p>

... and replace it with the next one:

<p><dd class='comment-body collapseable'><data:comment.body/></dd></p>

How to make a horizontal scrolling twitter feed

2011-09-06T13:36:00.001+03:00

There are many widgets using twitter feed to display the tweets on blog or site.Most of them are displayed in a vertical widget in the sidebar. But maybe you want the tweets to be displayed horizontal on top or bottom of the post. In the next tutorial I will show you how to create a horizontal scrolling box where it will be displayed your tweets in a nice scrolling effect.

How to create scrolling twitter feed?

1. Log in to your dashboard--> Design- -> Edit HTML

2. Search "Ctrl+F" and find ]]></b:skin>. Before it paste the code:

/* The container for the module */
   #twitter {
    background: #f1f2f8;
 
    width: 553px; /* Up to you but remember to change the div width below as well if you change it */
    padding: 0 10px;
 
    overflow: hidden; /* clearfix */
 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
   }
 
    #twitter h5 {
     float: left; /* We'll make the heading sit on its own line next to the tweets */
     width: 120px; /* Might wanna change this depending on the text in the heading */
     margin: 0;
     padding: 6px 0; /* I'll set the top and bottom padding here rather than in the container so as not to cut off any text */
 
     font-size: 12px;
     color: #4b9fff;
     line-height: 1;
    }
 
    /* The marquee plug-in turns a marquee element into a div */
    #twitter p,
    #twitter marquee, 
    #twitter div {
     float: right;
     width: 430px; /* Container width - heading width - 10px (for some right padding) */
     margin: 0;
     padding: 6px 0; /* Again we set the padding in here so as not to cut text */
     line-height: 1;
    }
 
     /* All the tweets will be links pointing to your page on twitter */
     #twitter marquee a, 
     #twitter div a {
      margin: 0 10px 0 0;
      color: #333;
      text-decoration: none;
     }
 
      /* The i is used to display the date of the tweet */
      #twitter marquee a i, 
      #twitter div a i {
       font-style: normal;
       color: #999;
      }

You can play with the colors , borders, background to style the box as you want.

3. Then go to </head> and before it paste the next javascript code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/> 
  <script src='http://artistutorials.googlecode.com/files/jquery.marquee.js'/> 
  <script type='text/javascript'>
      //<![CDATA[ 
   var Twitter = {
    init: function () {
     // Pass in the username you want to display feeds for
   this.insertLatestTweets('ArtisTutorials');
    }, 
 
    // This replaces the <p>Loading...</p> with the tweets
    insertLatestTweets: function (username) {
     var limit = 5; // How many feeds do you want?
     var url = 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + username + '&count=' + limit + '&callback=?'; 
     // Now ajax in the feeds from twitter.com
     $.getJSON(url, function (data) {
      // We'll start by creating a normal marquee-element for the tweets
      var html = '<marquee behavior="scroll" scrollamount="1" direction="left">';
 
      // Loop through all the tweets and create a link for each
      for (var i in data) {
       html += '<a href="http://twitter.com/' + username + '#status_' + data[i].id_str + '">' + data[i].text + ' <i>' + Twitter.daysAgo(data[i].created_at) + '</i></a>';
      }
 
      html += '</marquee>';
 
      // Now replace the <p> with our <marquee>-element
      $('#twitter p').replaceWith(html);
 
      // The marquee element looks quite shite so we'll use Remy Sharp's plug-in to replace it with a smooth one
      Twitter.fancyMarquee();
     });
    }, 
 
    // Replaces the marquee-element with a fancy one
    fancyMarquee: function () {
     // Replace the marquee and do some fancy stuff (taken from remy sharp's website)
     $('#twitter marquee').marquee('pointer')
      .mouseover(function () {
       $(this).trigger('stop');
      })
      .mouseout(function () {
       $(this).trigger('start');
      })
      .mousemove(function (event) {
       if ($(this).data('drag') == true) {
        this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
       }
      })
      .mousedown(function (event) {
       $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
      })
      .mouseup(function () {
       $(this).data('drag', false);
      });
    }, 
 
    // Takes a date and return the number of days it's been since said date
    daysAgo: function (date) {
     // TODO: Fix date for IE...
     if ($.browser.msie) {
      return '1 day ago';
     }
 
     var d = new Date(date).getTime();
     var n = new Date().getTime();
 
     var numDays = Math.round(Math.abs(n - d) / (1000 * 60 * 60 * 24));
     var daysAgo = numDays + ' days ago';
 
     if (numDays == 0) {
      daysAgo = 'today';
     }
     else if (numDays == 1) {
      daysAgo = numDays + ' day ago';
     }
 
     return daysAgo;
    }
   };
 
   Twitter.init();
   //]]>
    </script>

Replace the red line with your own twitter user.

Here is the jQuery marquee scrips used in the tutorial. If you want to host yourself download it from here.

4. Save the template and go to page elements. Go to Layout and add a New Gadget. Select HTML/JAVASCRIPT and in the content of the widget paste the next code:

<div id="twitter"> 
                        <h5>Latest tweets</h5>
    <p>Loading...</p> 
 
   <noscript>This feature requires JavaScript</noscript> 
 
  </div>

Then drag and drop the new widget above the Blog Post section.

Save the arrangement and see the results.

Threaded comments for blogger comment system (updated)

2011-09-02T16:22:00.000+03:00

It's been a while from my last tutorial. The next tutorial is about a feature that lots of people have been searching and trying to add it to their blogs. The threaded comments for blogger is one of the option that all blogger users want for their blog but it is unavailable by default.
But now with a little effort and a few tweeks of the template code you will be able to add this option on your comments form. You can check the original tutorial HERE.
The idea behind this came from the simple observation that most of us use @AuthorName to reply to comments posted by other users in 'single' threaded comments. So the javascript just parses the comment bodies for this author name (or comment ids) and then searches for appropriate comments to find parents of the reply comments.

How to make threaded comments on blogger?

1. Log in to your dashboard--> Design- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find ]]></b:skin>. Before it paste the code:

#comments h4 {
font-size: 24px;
font-weight: normal;
margin: 20px 0;
}

.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}

.cm_head {
margin: 0;
width: 70px;
float: left;
}

.cm_avatar {
margin: 0;
vertical-align: middle;
border: 1px solid #DDD;
padding: 3px;
background-image:  url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}

.cm_reply {
padding-top: 5px;
}

.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
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;
}

.cm_reply a: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%);;
}

.cm_entry {
padding: 16px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3mn0AZQZKFUrJQ-HMWxjXfyH3qup4Fg_yIEBhyphenhyphenkIlR5IPdsqSQTagRF4CzwWENdR-WlXyFw8zN7QpWHvzt8L_br8ZyFaytdgZ45xM2VZP3QY19UQtAjNxe3prAmL2ug6StnIf0Y34Ydk/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}

.cm_info {
margin-bottom: 5px;
}

.cm_name {
font-weight: bold;
font-size: 12px;
float: left;
}

.cm_date {
font-size: 10px;
float: right;
font-style: italic;
color: #CCC;
}

.cm_entry p {
margin: 0;
font-size: 13px;
color: #666;
}

.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}

.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}

.cm_pagenavi a:hover {
text-decoration: underline
}

.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}

IMPORTANT: If you have problems with the avatar search the next code
(in your template might be different):

.avatar-image-container {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUxHCCGRl9koUENB_cmKzykNX-tQBDhihWeSgJOPKa8Ieid4c72QEi6SQXbz3usN6DNA_1iTVMdyf1w6EF8bzQJlbZulaWVJ_KtC53dyiY3vwmtyrojiYIKyi5HfNqqYra4PkPQfDBoA/s400/default.gif); 
width:35px;
height:35px; 
}
.avatar-image-container  img {
 border:none;
 }

4. Then find </body> and right before it paste the next code:

&lt;script type="text/javascript"&gt;&lt;!--
var _0x7bf4=["\x32\x20\x78\x3D\x31\x72\x2E\x31\x6E\x2E\x4A\x3B\x32\x20\x46\x3D\x77\x2E\x79\x28\x27\x31\x6D\x27\x29\x3B\x32\x20\x6D\x3D\x46\x2E\x75\x3B\x32\x20\x70\x3D\x5B\x5D\x3B\x32\x20\x37\x3D\x5B\x5D\x3B\x32\x20\x64\x3D\x5B\x5D\x3B\x32\x20\x6E\x3D\x30\x3B\x32\x20\x49\x3D\x27\x27\x3B\x32\x20\x4B\x3D\x27\x27\x3B\x32\x20\x45\x3D\x27\x27\x3B\x32\x20\x69\x3D\x30\x3B\x32\x20\x6A\x3D\x30\x3B\x32\x20\x6B\x3D\x30\x3B\x32\x20\x68\x3D\x30\x3B\x32\x20\x62\x3D\x27\x27\x3B\x32\x20\x42\x3D\x22\x22\x3B\x32\x20\x71\x3D\x22\x22\x3B\x31\x73\x20\x31\x31\x28\x29\x7B\x32\x20\x56\x3D\x2D\x31\x3B\x38\x28\x5A\x2E\x31\x79\x3D\x3D\x27\x31\x7A\x20\x31\x76\x20\x31\x75\x27\x29\x7B\x32\x20\x31\x65\x3D\x5A\x2E\x31\x77\x3B\x32\x20\x31\x30\x3D\x31\x78\x20\x31\x32\x28\x22\x31\x74\x20\x28\x5B\x30\x2D\x39\x5D\x7B\x31\x2C\x7D\x5B\x5C\x2E\x30\x2D\x39\x5D\x7B\x30\x2C\x7D\x29\x22\x29\x3B\x38\x28\x31\x30\x2E\x31\x41\x28\x31\x65\x29\x21\x3D\x31\x70\x29\x56\x3D\x31\x71\x28\x31\x32\x2E\x24\x31\x29\x7D\x31\x6F\x20\x56\x7D\x32\x20\x57\x3D\x31\x31\x28\x29\x3B\x38\x28\x57\x3D\x3D\x2D\x31\x7C\x7C\x57\x3E\x3D\x39\x29\x7B\x31\x34\x28\x6D\x2E\x66\x28\x27\x4C\x3D\x22\x63\x27\x29\x21\x3D\x2D\x31\x29\x7B\x69\x3D\x6D\x2E\x66\x28\x27\x4C\x3D\x22\x63\x27\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x2B\x34\x29\x3B\x69\x3D\x6D\x2E\x66\x28\x27\x22\x27\x29\x3B\x70\x5B\x6E\x5D\x3D\x6D\x2E\x65\x28\x30\x2C\x69\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x29\x3B\x37\x5B\x6E\x5D\x3D\x77\x2E\x79\x28\x70\x5B\x6E\x5D\x29\x2E\x75\x3B\x64\x5B\x6E\x5D\x3D\x30\x3B\x6E\x2B\x2B\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x2D\x31\x3B\x69\x2B\x2B\x29\x7B\x76\x28\x6A\x3D\x69\x2B\x31\x3B\x6A\x3C\x6E\x3B\x6A\x2B\x2B\x29\x7B\x38\x28\x37\x5B\x6A\x5D\x2E\x66\x28\x70\x5B\x69\x5D\x29\x21\x3D\x2D\x31\x29\x7B\x49\x3D\x70\x5B\x6A\x5D\x3B\x4B\x3D\x37\x5B\x6A\x5D\x3B\x64\x5B\x6A\x5D\x3D\x64\x5B\x69\x5D\x2B\x31\x3B\x45\x3D\x64\x5B\x6A\x5D\x3B\x76\x28\x68\x3D\x69\x2B\x31\x3B\x68\x3C\x6A\x3B\x68\x2B\x2B\x29\x7B\x38\x28\x64\x5B\x68\x5D\x3C\x45\x29\x7B\x31\x37\x7D\x7D\x76\x28\x6B\x3D\x6A\x3B\x6B\x3E\x68\x3B\x6B\x3D\x6B\x2D\x31\x29\x7B\x70\x5B\x6B\x5D\x3D\x70\x5B\x6B\x2D\x31\x5D\x3B\x37\x5B\x6B\x5D\x3D\x37\x5B\x6B\x2D\x31\x5D\x3B\x64\x5B\x6B\x5D\x3D\x64\x5B\x6B\x2D\x31\x5D\x7D\x70\x5B\x68\x5D\x3D\x49\x3B\x37\x5B\x68\x5D\x3D\x4B\x3B\x64\x5B\x68\x5D\x3D\x45\x7D\x7D\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x3B\x69\x2B\x2B\x29\x7B\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x40\x3C\x61\x20\x4A\x3D\x22\x23\x63\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x2B\x31\x29\x3B\x6A\x3D\x71\x2E\x66\x28\x27\x3C\x2F\x61\x3E\x27\x29\x3B\x71\x3D\x71\x2E\x65\x28\x6A\x2B\x34\x29\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x71\x7D\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x50\x3D\x22\x59\x22\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x29\x3B\x38\x28\x64\x5B\x69\x5D\x3E\x36\x29\x64\x5B\x69\x5D\x3D\x36\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x27\x74\x3D\x22\x31\x35\x3A\x27\x2B\x28\x31\x39\x2D\x64\x5B\x69\x5D\x2A\x35\x29\x2B\x27\x25\x22\x20\x27\x2B\x71\x7D\x62\x2B\x3D\x37\x5B\x69\x5D\x7D\x62\x2B\x3D\x27\x3C\x67\x20\x50\x3D\x22\x31\x66\x22\x3E\x3C\x2F\x67\x3E\x27\x3B\x46\x2E\x75\x3D\x62\x3B\x46\x2E\x74\x2E\x51\x3D\x27\x31\x62\x27\x3B\x32\x20\x4D\x3D\x77\x2E\x79\x28\x27\x31\x61\x27\x29\x2E\x75\x3B\x32\x20\x6F\x3D\x4F\x28\x4D\x29\x3B\x38\x28\x6F\x3E\x72\x29\x7B\x62\x3D\x27\x3C\x67\x20\x74\x3D\x22\x47\x3A\x31\x63\x22\x3E\x31\x64\x20\x27\x3B\x32\x20\x48\x3D\x28\x6F\x2D\x6F\x25\x72\x29\x2F\x72\x2B\x31\x3B\x32\x20\x73\x3D\x27\x27\x3B\x32\x20\x6C\x3D\x31\x3B\x69\x3D\x78\x2E\x66\x28\x27\x2E\x31\x6C\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x78\x2E\x65\x28\x30\x2C\x69\x2B\x35\x29\x7D\x7A\x7B\x73\x3D\x78\x7D\x69\x3D\x73\x2E\x66\x28\x27\x23\x44\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x73\x2E\x65\x28\x30\x2C\x69\x29\x7D\x69\x3D\x78\x2E\x66\x28\x27\x3F\x53\x3D\x27\x29\x3B\x38\x28\x69\x3D\x3D\x2D\x31\x29\x7B\x6C\x3D\x31\x7D\x7A\x7B\x6C\x3D\x4F\x28\x78\x2E\x65\x28\x69\x2B\x31\x33\x29\x29\x7D\x76\x28\x69\x3D\x31\x3B\x69\x3C\x3D\x48\x3B\x69\x2B\x2B\x29\x7B\x38\x28\x69\x3D\x3D\x6C\x29\x7B\x62\x2B\x3D\x27\x3C\x55\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x55\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x61\x20\x4A\x3D\x22\x27\x2B\x73\x2B\x27\x3F\x53\x3D\x27\x2B\x69\x2B\x27\x23\x44\x22\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x61\x3E\x27\x7D\x7D\x38\x28\x6C\x2A\x72\x3C\x3D\x6F\x29\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x28\x6C\x2A\x72\x29\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x6F\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x32\x20\x43\x3D\x77\x2E\x79\x28\x27\x31\x69\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x43\x3D\x77\x2E\x79\x28\x27\x31\x68\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x38\x28\x6C\x3C\x48\x29\x7B\x62\x3D\x27\x3C\x74\x20\x31\x67\x3D\x22\x31\x6B\x2F\x31\x6A\x22\x3E\x2E\x58\x20\x7B\x51\x3A\x20\x31\x38\x7D\x3C\x2F\x74\x3E\x27\x3B\x32\x20\x4E\x3D\x77\x2E\x79\x28\x27\x31\x36\x27\x29\x3B\x4E\x2E\x75\x3D\x62\x7D\x7D\x7D\x7A\x7B\x31\x34\x28\x6D\x2E\x66\x28\x27\x4C\x3D\x63\x27\x29\x21\x3D\x2D\x31\x29\x7B\x69\x3D\x6D\x2E\x66\x28\x27\x4C\x3D\x63\x27\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x2B\x33\x29\x3B\x69\x3D\x6D\x2E\x66\x28\x27\x3E\x27\x29\x3B\x70\x5B\x6E\x5D\x3D\x6D\x2E\x65\x28\x30\x2C\x69\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x29\x3B\x37\x5B\x6E\x5D\x3D\x77\x2E\x79\x28\x70\x5B\x6E\x5D\x29\x2E\x75\x3B\x64\x5B\x6E\x5D\x3D\x30\x3B\x6E\x2B\x2B\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x2D\x31\x3B\x69\x2B\x2B\x29\x7B\x76\x28\x6A\x3D\x69\x2B\x31\x3B\x6A\x3C\x6E\x3B\x6A\x2B\x2B\x29\x7B\x38\x28\x37\x5B\x6A\x5D\x2E\x66\x28\x70\x5B\x69\x5D\x29\x21\x3D\x2D\x31\x29\x7B\x49\x3D\x70\x5B\x6A\x5D\x3B\x4B\x3D\x37\x5B\x6A\x5D\x3B\x64\x5B\x6A\x5D\x3D\x64\x5B\x69\x5D\x2B\x31\x3B\x45\x3D\x64\x5B\x6A\x5D\x3B\x76\x28\x68\x3D\x69\x2B\x31\x3B\x68\x3C\x6A\x3B\x68\x2B\x2B\x29\x7B\x38\x28\x64\x5B\x68\x5D\x3C\x45\x29\x7B\x31\x37\x7D\x7D\x76\x28\x6B\x3D\x6A\x3B\x6B\x3E\x68\x3B\x6B\x3D\x6B\x2D\x31\x29\x7B\x70\x5B\x6B\x5D\x3D\x70\x5B\x6B\x2D\x31\x5D\x3B\x37\x5B\x6B\x5D\x3D\x37\x5B\x6B\x2D\x31\x5D\x3B\x64\x5B\x6B\x5D\x3D\x64\x5B\x6B\x2D\x31\x5D\x7D\x70\x5B\x68\x5D\x3D\x49\x3B\x37\x5B\x68\x5D\x3D\x4B\x3B\x64\x5B\x68\x5D\x3D\x45\x7D\x7D\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x3B\x69\x2B\x2B\x29\x7B\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x40\x3C\x41\x20\x4A\x3D\x22\x23\x63\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x2B\x31\x29\x3B\x6A\x3D\x71\x2E\x66\x28\x27\x3C\x2F\x41\x3E\x27\x29\x3B\x71\x3D\x71\x2E\x65\x28\x6A\x2B\x34\x29\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x71\x7D\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x50\x3D\x59\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x29\x3B\x38\x28\x64\x5B\x69\x5D\x3E\x36\x29\x64\x5B\x69\x5D\x3D\x36\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x27\x74\x3D\x22\x31\x35\x3A\x27\x2B\x28\x31\x39\x2D\x64\x5B\x69\x5D\x2A\x35\x29\x2B\x27\x25\x22\x20\x27\x2B\x71\x7D\x62\x2B\x3D\x37\x5B\x69\x5D\x7D\x62\x2B\x3D\x27\x3C\x67\x20\x50\x3D\x22\x31\x66\x22\x3E\x3C\x2F\x67\x3E\x27\x3B\x46\x2E\x75\x3D\x62\x3B\x46\x2E\x74\x2E\x51\x3D\x27\x31\x62\x27\x3B\x32\x20\x4D\x3D\x77\x2E\x79\x28\x27\x31\x61\x27\x29\x2E\x75\x3B\x32\x20\x6F\x3D\x4F\x28\x4D\x29\x3B\x38\x28\x6F\x3E\x72\x29\x7B\x62\x3D\x27\x3C\x67\x20\x74\x3D\x22\x47\x3A\x31\x63\x22\x3E\x31\x64\x20\x27\x3B\x32\x20\x48\x3D\x28\x6F\x2D\x6F\x25\x72\x29\x2F\x72\x2B\x31\x3B\x32\x20\x73\x3D\x27\x27\x3B\x32\x20\x6C\x3D\x31\x3B\x69\x3D\x78\x2E\x66\x28\x27\x2E\x31\x6C\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x78\x2E\x65\x28\x30\x2C\x69\x2B\x35\x29\x7D\x7A\x7B\x73\x3D\x78\x7D\x69\x3D\x73\x2E\x66\x28\x27\x23\x44\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x73\x2E\x65\x28\x30\x2C\x69\x29\x7D\x69\x3D\x78\x2E\x66\x28\x27\x3F\x53\x3D\x27\x29\x3B\x38\x28\x69\x3D\x3D\x2D\x31\x29\x7B\x6C\x3D\x31\x7D\x7A\x7B\x6C\x3D\x4F\x28\x78\x2E\x65\x28\x69\x2B\x31\x33\x29\x29\x7D\x76\x28\x69\x3D\x31\x3B\x69\x3C\x3D\x48\x3B\x69\x2B\x2B\x29\x7B\x38\x28\x69\x3D\x3D\x6C\x29\x7B\x62\x2B\x3D\x27\x3C\x55\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x55\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x61\x20\x4A\x3D\x22\x27\x2B\x73\x2B\x27\x3F\x53\x3D\x27\x2B\x69\x2B\x27\x23\x44\x22\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x61\x3E\x27\x7D\x7D\x38\x28\x6C\x2A\x72\x3C\x3D\x6F\x29\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x28\x6C\x2A\x72\x29\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x6F\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x32\x20\x43\x3D\x77\x2E\x79\x28\x27\x31\x69\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x43\x3D\x77\x2E\x79\x28\x27\x31\x68\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x38\x28\x6C\x3C\x48\x29\x7B\x62\x3D\x27\x3C\x74\x20\x31\x67\x3D\x22\x31\x6B\x2F\x31\x6A\x22\x3E\x2E\x58\x20\x7B\x51\x3A\x20\x31\x38\x7D\x3C\x2F\x74\x3E\x27\x3B\x32\x20\x4E\x3D\x77\x2E\x79\x28\x27\x31\x36\x27\x29\x3B\x4E\x2E\x75\x3D\x62\x7D\x7D\x7D","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x76\x61\x72\x7C\x7C\x7C\x7C\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x43\x6F\x6E\x74\x65\x6E\x74\x7C\x69\x66\x7C\x7C\x7C\x73\x74\x72\x6F\x75\x74\x7C\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x4C\x65\x76\x65\x6C\x7C\x73\x75\x62\x73\x74\x72\x69\x6E\x67\x7C\x69\x6E\x64\x65\x78\x4F\x66\x7C\x64\x69\x76\x7C\x7C\x7C\x7C\x7C\x43\x6D\x5F\x43\x75\x72\x5F\x50\x61\x67\x65\x7C\x43\x6D\x5F\x42\x6C\x6F\x63\x6B\x5F\x43\x6F\x6E\x74\x65\x6E\x74\x7C\x43\x6D\x5F\x4E\x75\x6D\x7C\x43\x6D\x5F\x54\x6F\x74\x61\x6C\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x49\x64\x7C\x73\x74\x72\x5F\x74\x32\x7C\x32\x30\x30\x7C\x4F\x72\x67\x5F\x55\x72\x6C\x5F\x54\x68\x72\x65\x61\x64\x43\x4D\x7C\x73\x74\x79\x6C\x65\x7C\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C\x7C\x66\x6F\x72\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x43\x75\x72\x5F\x55\x72\x6C\x5F\x54\x68\x72\x65\x61\x64\x43\x4D\x7C\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64\x7C\x65\x6C\x73\x65\x7C\x7C\x73\x74\x72\x5F\x74\x31\x7C\x43\x6D\x5F\x50\x61\x67\x65\x5F\x4F\x62\x6A\x7C\x63\x6F\x6D\x6D\x65\x6E\x74\x73\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x4C\x65\x76\x65\x6C\x5F\x54\x7C\x43\x6D\x5F\x42\x6C\x6F\x63\x6B\x7C\x66\x6C\x6F\x61\x74\x7C\x43\x6D\x5F\x50\x61\x67\x65\x5F\x4E\x75\x6D\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x49\x64\x5F\x54\x7C\x68\x72\x65\x66\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x43\x6F\x6E\x74\x65\x6E\x74\x5F\x54\x7C\x69\x64\x7C\x43\x6D\x5F\x54\x6F\x74\x61\x6C\x5F\x4F\x62\x6A\x7C\x43\x6D\x5F\x52\x65\x70\x6C\x79\x43\x53\x53\x5F\x4F\x62\x6A\x7C\x70\x61\x72\x73\x65\x49\x6E\x74\x7C\x63\x6C\x61\x73\x73\x7C\x64\x69\x73\x70\x6C\x61\x79\x7C\x6F\x66\x7C\x63\x6F\x6D\x6D\x65\x6E\x74\x50\x61\x67\x65\x7C\x72\x69\x67\x68\x74\x7C\x73\x70\x61\x6E\x7C\x72\x76\x7C\x49\x45\x5F\x76\x65\x72\x7C\x63\x6D\x5F\x61\x75\x74\x68\x6F\x72\x5F\x72\x65\x70\x6C\x79\x7C\x63\x6D\x5F\x77\x72\x61\x70\x7C\x6E\x61\x76\x69\x67\x61\x74\x6F\x72\x7C\x72\x65\x7C\x67\x65\x74\x49\x6E\x74\x65\x72\x6E\x65\x74\x45\x78\x70\x6C\x6F\x72\x65\x72\x56\x65\x72\x73\x69\x6F\x6E\x7C\x52\x65\x67\x45\x78\x70\x7C\x7C\x77\x68\x69\x6C\x65\x7C\x77\x69\x64\x74\x68\x7C\x63\x6D\x5F\x72\x65\x70\x6C\x79\x5F\x63\x73\x73\x7C\x62\x72\x65\x61\x6B\x7C\x6E\x6F\x6E\x65\x7C\x31\x30\x30\x7C\x63\x6D\x5F\x74\x6F\x74\x61\x6C\x7C\x62\x6C\x6F\x63\x6B\x7C\x6C\x65\x66\x74\x7C\x50\x61\x67\x65\x7C\x75\x61\x7C\x63\x6C\x65\x61\x72\x7C\x74\x79\x70\x65\x7C\x63\x6D\x5F\x70\x61\x67\x65\x5F\x63\x6F\x70\x79\x7C\x63\x6D\x5F\x70\x61\x67\x65\x7C\x63\x73\x73\x7C\x74\x65\x78\x74\x7C\x68\x74\x6D\x6C\x7C\x63\x6D\x5F\x62\x6C\x6F\x63\x6B\x7C\x6C\x6F\x63\x61\x74\x69\x6F\x6E\x7C\x72\x65\x74\x75\x72\x6E\x7C\x6E\x75\x6C\x6C\x7C\x70\x61\x72\x73\x65\x46\x6C\x6F\x61\x74\x7C\x77\x69\x6E\x64\x6F\x77\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x4D\x53\x49\x45\x7C\x45\x78\x70\x6C\x6F\x72\x65\x72\x7C\x49\x6E\x74\x65\x72\x6E\x65\x74\x7C\x75\x73\x65\x72\x41\x67\x65\x6E\x74\x7C\x6E\x65\x77\x7C\x61\x70\x70\x4E\x61\x6D\x65\x7C\x4D\x69\x63\x72\x6F\x73\x6F\x66\x74\x7C\x65\x78\x65\x63","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function (_0x4f09x1,_0x4f09x2,_0x4f09x3,_0x4f09x4,_0x4f09x5,_0x4f09x6){_0x4f09x5=function (_0x4f09x3){return (_0x4f09x3&lt;_0x4f09x2?_0x7bf4[4]:_0x4f09x5(parseInt(_0x4f09x3/_0x4f09x2)))+((_0x4f09x3=_0x4f09x3%_0x4f09x2)&gt;35?String[_0x7bf4[5]](_0x4f09x3+29):_0x4f09x3.toString(36));} ;if(!_0x7bf4[4][_0x7bf4[6]](/^/,String)){while(_0x4f09x3--){_0x4f09x6[_0x4f09x5(_0x4f09x3)]=_0x4f09x4[_0x4f09x3]||_0x4f09x5(_0x4f09x3);} ;_0x4f09x4=[function (_0x4f09x5){return _0x4f09x6[_0x4f09x5];} ];_0x4f09x5=function (){return _0x7bf4[7];} ;_0x4f09x3=1;} ;while(_0x4f09x3--){if(_0x4f09x4[_0x4f09x3]){_0x4f09x1=_0x4f09x1[_0x7bf4[6]]( new RegExp(_0x7bf4[8]+_0x4f09x5(_0x4f09x3)+_0x7bf4[8],_0x7bf4[9]),_0x4f09x4[_0x4f09x3]);} ;} ;return _0x4f09x1;} (_0x7bf4[0],62,99,_0x7bf4[3][_0x7bf4[2]](_0x7bf4[1]),0,{}));
--&gt;&lt;/script&gt;

5. The final step is to search for the following code:

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

lots of code lines that you must replace

</b:includable>

... and replace the code lines between that includable with the next code:

<div class='comments' id='comments'>
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
        <h4>
             <b:if cond='data:post.numComments &gt; 0'>
          <b:if cond='data:post.numComments == 1'>
            <span id='cm_total'>1</span> comment
          <b:else/>
            <span id='cm_total'><data:post.numComments/></span> comments
          </b:if>
        </b:if>
        </h4>
        
        <div id='cm_reply_css'></div>
        
        <div class='cm_pagenavi' id='cm_page'></div>
        
        <div id='cm_block'>
            <b:loop values='data:post.comments' var='comment'>
                <b:if cond='data:comment.isDeleted'>
                <b:else/>
                
                    <div expr:id='data:comment.anchorName'>
                        <div class='cm_wrap'>
                            <a expr:name='data:comment.anchorName'/> 
                            <div class='cm_head'>
                                <div class='cm_avatar'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>                        
                                </div>
                                <div class='cm_reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=154513103004606848&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
                                </div>
                            </div>

                            <div class='cm_entry'>
                                <span class='cm_arrow'></span>
                                <div class='cm_info'>
                                    <div class='cm_name'>
                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                        <b:else/>
                                            <b><data:comment.author/></b>
                                        </b:if>
                                    </div>
                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>                                    
                                </div>
                                
                                <p><data:comment.body/></p>
                            </div>
                        </div>
                    </div>
                </b:if>              
     </b:loop>
        </div>

        <div class='cm_pagenavi' id='cm_page_copy'></div>
        
    <b:if cond='data:post.embedCommentForm'>
            <b:if cond='data:post.allowNewComments'>
                <b:include data='post' name='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>

  </b:if>
  </div>

IMPORTANT: Replace the red line with the your own BlogID number.

Where you can find the BlogID? See the pictures bellow.

For new Blogger interface:

For old Blogger interface:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

...and replace the red code lines with the next line:

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

Save again and see the results.

DEMO: See the comments below

UPDATED VERSION WITH HIGHLIGHTED AUTHOR COMMENTS HERE

Create nice social share box using CSS and jQuery

2011-08-01T14:46:00.001+03:00

In this tutorial i will show you how to add a nice fancy share box created with the help of CSS and jQuery. The box will be positioned under the article, giving the visitors of your blog the possibility to share your content on Facebook,Ttwitter, Digg and other share network.
The share box will have all the buttons shown inline and partially hidden. When user hovers over a button it slides to the right and become visible. It's a nice effect adding a little bit of style to your posts.

How to create nice share box using CSS and jQuery?

1. Log in to your dashboard--> Design- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find ]]></b:skin>. Before it paste the code:

ul.sharebox { 
margin:0px;
 padding:0px; 
list-style:none; 
position:relative;
 display:block;
}
 ul.sharebox li {
 float:left; 
margin:0 0 0 0px;
padding:0px; 
position:absolute; 
}
 ul.sharebox li a {
 margin:0 0 0 -24px;
 display:block;
 }
 ul.sharebox li a:hover {
 margin:0 0 0 -8px;
 }
 ul.sharebox li img { 
border:none;
}

4. Then go to: </head> and before it paste:

<script type='text/javascript'>
 (function($){
            $.fn.sharebox = function(){
                var element = this;

                var i = 10;
                var j = 0;
                $(element).find(&quot;li&quot;).each(function(){
                    $(this).css(&quot;z-index&quot;, i)
                    if (j&gt;0)
                        $(this).css(&quot;left&quot;, j * 24 + 100 + &quot;px&quot;);
                    i = i - 1;
                    j = j + 1;
                });
            }
        })(jQuery);
        $(document).ready(function(){
            $(&quot;#sharebox&quot;).sharebox();          
        });
    </script>

5. Finally find <data:post.body/> and right after it paste the next code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border:1px solid #dfdfdf; padding:0px;width:330px; height:125px'>
<ul class='sharebox' id='sharebox'>
        <li><img alt='Share this' src='http://img846.imageshack.us/img846/9038/sharethis.png'/></li>
        <li>
<!-- Facebook -->

<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share On Facebook' border='0' height='' src='http://img834.imageshack.us/img834/7703/fbook48.jpg' width=''/></a>
</li>
<li>
<!-- Digg -->

<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Digg This Post' border='0' height='' src='http://img14.imageshack.us/img14/5488/digg48.png' width=''/></a>
</li>
<li>

<!-- Stumbleupon -->

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Stumble This Post' border='0' height='' src='http://img190.imageshack.us/img190/9008/sumbleupon48.png' width=''/></a>
</li>

<li>
<!-- Twitthis -->

<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Tweet This Post' border='0' height='' src='http://img717.imageshack.us/img717/4218/twitter48.jpg' width=''/></a>
</li>

<li>
<!-- Delicious -->

<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Save Tis Post To Delicious' border='0' height='' src='http://img833.imageshack.us/img833/1797/delicious48.png' width=''/></a>
</li><li>
<!-- Reddit -->

<a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share On Reddit' border='0' height='' src='http://img339.imageshack.us/img339/7020/reddit48.png' width=''/></a>
</li><li>
<!-- Technorati -->

<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Bookmark On Technorati' border='0' height='' src='http://img51.imageshack.us/img51/9729/technorati48.png' width=''/></a>
</li>
</ul>
    <p style='margin-top:45px;'><img alt='help' src='http://img847.imageshack.us/img847/3645/helptext.jpg'/></p></div>
</b:if>

6. Save the template and see the result.

Demo Page

Cool image gallery using jQuery CSS and z-index

2011-07-29T19:03:00.006+03:00

In a previous post i presented you a tutorial about a css - jQuery image gallery.Today i will teach how to make another cool gallery. This gallery is based on the CSS property z-index .The gallery will be formed by the wrapping container gallery, a container pictures for the pictures and two controls prev and next for swapping the pictures.
We can add as many pictures as we want because our script will pick them up dynamically.
As you know the z-index is used for positioning images. An image with the value of z-index bigger will be displayed in front of a picture with a smaller value.So picture with z-index 1 will be displayed under a picture with z-index 2,3,4 etc.

How to create unique z-index gallery?

1. Log in to your dashboard--> Design- -> Edit HTML

2. Search "Ctrl+F" and find the following code: ]]></b:skin> Right before it paste the next code:

#gallery {
  position: relative; 
  
}
    #pictures {
 position: relative; 
 height: 320px;
 margin-left:-20px; 
 
}
    #pictures img {
 position: absolute;
 top: 0;
 left: 0; 
}
    
    #prev {
text-align: center;
text-decoration: none !important;
font-size: 1.3em; 
font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 3px;
  text-decoration: none;
  -webkit-border-radius: 11px;
  -moz-border-radius: 11px;
  -webkit-box-shadow: 1px 1px 3px #666666;
  -moz-box-shadow: 1px 1px 3px #666666;
  text-shadow: 0px 0px 0px #f5f0f5;
  border: solid #ffb700 2px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fabc3f), to(#e09936));
  background: -moz-linear-gradient(top, #fabc3f, #e09936);
margin-left:45px;
margin-top:-10px; }
     #next {
text-align: center;
text-decoration: none !important;
font-size: 1.3em; 
font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 3px;
  text-decoration: none;
  -webkit-border-radius: 11px;
  -moz-border-radius: 11px;
  -webkit-box-shadow: 1px 1px 3px #666666;
  -moz-box-shadow: 1px 1px 3px #666666;
  text-shadow: 0px 0px 0px #f5f0f5;
  border: solid #ffb700 2px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fabc3f), to(#e09936));
  background: -moz-linear-gradient(top, #fabc3f, #e09936);
margin-right:75px;
margin-top:-10px;
}
#loader { 
position: absolute; 
top: 0; left:0;
 height: 350px;
 width: 100%;
 background: url(http://img14.imageshack.us/img14/2083/ajaxloaderlz.gif) white no-repeat center center;
 z-index: 9999;
 }

This is the CSS for the gallery. You will have to use images with the same dimension because the images will not be resized.
Change the red line value with the height of your images.
Change the blue values line for aligning the text around the gallery.

2. Now find </head> and bfefore it add the next script code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<link href='http://demos.usejquery.com/03_z-index_gallery/css/960.css' media='screen' rel='stylesheet' type='text/css'/>

 <script type='text/javascript'>
        //<![CDATA[

$(document).ready(function() { //perform actions when DOM is ready
  var z = 0; //for setting the initial z-index's
  var inAnimation = false; //flag for testing if we are in a animation
  var imgLoaded = 0; //for checking if all images are loaded
  
  $('#pictures').append('<div id="loader"></div>'); //append the loader div, it overlaps all pictures
  
  $('#pictures img').each(function() { //set the initial z-index's
    z++; //at the end we have the highest z-index value stored in the z variable
    $(this).css('z-index', z); //apply increased z-index to <img>
    
    $(new Image()).attr('src', $(this).attr('src')).load(function() { //create new image object and have a callback when it's loaded
      imgLoaded++; //one more image is loaded
      
      if(imgLoaded == z) { //do we have all pictures loaded?
        $('#loader').fadeOut('slow'); //if so fade out the loader div
      }
    });
  });

  function swapFirstLast(isFirst) {
    if(inAnimation) return false; //if already swapping pictures just return
    else inAnimation = true; //set the flag that we process a image
    
    var processZindex, direction, newZindex, inDeCrease; //change for previous or next image
    
    if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; } //set variables for "next" action
    else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; } //set variables for "previous" action
    
    $('#pictures img').each(function() { //process each image
      if($(this).css('z-index') == processZindex) { //if its the image we need to process
        $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() { //animate the img above/under the gallery (assuming all pictures are equal height)
          $(this).css('z-index', newZindex) //set new z-index
            .animate({ 'top' : '0' }, 'slow', function() { //animate the image back to its original position
              inAnimation = false; //reset the flag
            });
        });
      } else { //not the image we need to process, only in/de-crease z-index
        $(this).animate({ 'top' : '0' }, 'slow', function() { //make sure to wait swapping the z-index when image is above/under the gallery
          $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //in/de-crease the z-index by one
        });
      }
    });
    
    return false; //don't follow the clicked link
  }
  
  $('#next a').click(function() {
    return swapFirstLast(true); //swap first image to last position
  });
  
  $('#prev a').click(function() {
    return swapFirstLast(false); //swap last image to first position
  });
});
//]]>
    </script>

If you have jQuery on your blog delete the red line.

3. Save the template. Create a new post and make sure you are in HTML mode. Paste the next code in the post window. This code is the markup for the gallery.

<div class="grid_6 prefix_1 suffix_1" id="gallery">
<div id="pictures">
<img alt="" src="http://img5.imageshack.us/img5/1074/picture1fown.png" />
<img alt="" src="http://img847.imageshack.us/img847/5516/picture2jb.png" />
<img alt="" src="http://img684.imageshack.us/img684/6374/picture3qw.png" />
<img alt="" src="http://img6.imageshack.us/img6/1308/picture4hyk.png" />
<img alt="" src="http://img841.imageshack.us/img841/1152/picture5jv.png" />
</div>

<div class="grid_3 alpha" id="prev">
            <a href="#previous">&laquo; Prev Picture</a>
          </div>
          <div class="grid_3 omega" id="next">
            <a href="#next">Next Picture &raquo;</a>
</div>

Replace the red links with your own picture link
Write the rest of the article , publish it and see the result.

6 small tricks to add a little bit of style to your blog

2011-07-17T16:42:00.003+03:00

Today I will show you 6 tricks for you to try on your blog. For some of you this tricks will give a little more style to your template. I will show you how to use Font Face for adding a custom font in your template, also how to remove the feed links bottom of the template , changing the text selection color, and removing the date from the posts.
Another trick will show you how to display the date for all the posts made in the same day.

1. Use Font Face for adding custom font to your blog?

Many of you want to use a custom font on the blog, but maybe the font you use cannot be view b\y all your visitors. This happens because they don't have the custom font you use installed on they'r computers. Font Face resolve this problem because it allow you to embed the font so all the visitors can see it.
So, how to use it? just follow the next steps.

1. Log in to your dashboard--> Design- -> Edit HTML 2. Search "Ctrl+F" and find ]]></b:skin> Right before it paste the code:

@font-face {
 font-family: 'MyWebFont';
 src: url('webfont.eot'); /* IE9 Compat Modes */
 src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('webfont.woff') format('woff'), /* Modern Browsers */
      url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
 }

Replace :

'MyWebFont' with the name of your font

You will notice that for the font are 4 url. There are 4 because you will need 4 different type of the font to work on all browsers:

.eot - EOTs are only supported by Internet Explorer.
.ttf - Raw TrueType file, designed to look good on-screen.
.woff - Cross-browser, web-only font format that uses gzip compression. IE9+, FF3.6+, Chrome 5+
.svg - for iOS

The .ttf fonts are easy to find. Then you can convert the ttf font to eot and woff using online converters. ( Font Converter)

After you have all 4 types of the font you need to host them , I recommend google code for the hosting. Then you can replace the url of the font in the code with your own url.

2. Removing Feed Link from the bottom of the template?

The feed link placed bottom of the article area can be very ugly for a blog. So if you want to remove him just find in your template the next code and delete it.

<!-- feed links -->
 <b:include name='feedLinks'/>

3. How To Change Default Text Selection Colour?

You are tired with the default old text selection color? Well not a problem now because you can change it to a new color. See it with your own eyes.
All you have to do is to add this code:

::selection {
background:#f094b7;
color:#555;
}
::-moz-selection {
background:#f094b7;
color:#555;
}
::-webkit-selection {
background:#f094b7;
color:#555;
}

Change:

background color with the color of the selection
the value of color with the color of the text displayed when selected

4. Add push button effect to the links in your blog

Click on a link in my site. Can you see the effect? For obtaining this effect all you have to do is to add before ]]></b:skin> the next code:

a:active {
  position: relative;
  top: 1px;
}

5. Remove default date from posts

How to remove the default post date from your blog? just find and delete the next code (or similar):

<b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>

6. Changing the template code to accommodate the date for all posts

When you post multiples articles on a day the date is displayed only for the first one. Do you want to change that and tha date to appear on all articles? Make the next change.

Find:

<b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>

and replace it with:

<h2 class='date-header'><data:post.timestamp/></h2>

In some templates you will find the code to be replaced, with div tags and not with h2 tags, like this:

<b:if cond='data:post.dateHeader'>
    <div class='date-header'><data:post.dateHeader/></div>
    </b:if>

in this case you will replace the above code with the next one:

<div class='date-header'><data:post.timestamp/></div>

That's all for this tutorial. Hope you enjoy it.

New Style - Blogger has updated the new interface

2011-07-08T15:40:00.006+03:00

Yesterday Blogger has updated to the new interface, a more stylish one. The new interface was available for about 1 month ago, but only for a small number of users (probably for the users with great importance or with very good blogs ).
But now all the users of Blogger can see the new changes in the dashboard .
Personally I enjoy this new change because i was bored with the old interface. I think most of the user will agree that this change is welcome.

Remember that for the moment the new aspect of the interface is available only in Blogger Draft, so don't worry if you can see it applied to your blog.
Just go to Blogger Drafts.

See some screenshots with the new interface

Superb jQuery MagicLine Navigation menu

2011-07-05T21:41:00.013+03:00

I recently came across with this two superb menus, so I wanted to share with you all.
Very simple to add to your blog the menus are based on jQuery and for the "magic" to take place comes in scene a little javascript.
The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it's animation abilities. As such, the "magic line" will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match.

How to add superb jQuery Magicline navigation menu?

1. Log in to your dashboard--> Design- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find the following code: ]]></b:skin> and before it paste the next one:

/*----------------------------------------------------
{--------}  Menu {--------}
----------------------------------------------------*/
.nav-wrap { 
 margin: 5px auto; 
 background-color: rgba(0,0,0,0.6); 
 border-top:    2px solid white; 
 border-bottom: 2px solid white; 
}

/* Clearfix */
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */

/* Example One */
#example-one { 
 margin: 0 auto; 
 list-style: none; 
 position: relative; 
 width: 960px; 
}
#example-one li { 
 display: inline-block; 
}
#example-one a { 
 color: #bbb; 
 font-size: 14px; 
 float: left;
 padding: 6px 10px 4px 10px;
 text-decoration: none;
 text-transform: uppercase;
}
#example-one a:hover { 
 color: white; 
}
#magic-line { 
 position: absolute;
 bottom: -2px; 
 left: 0; 
 width: 100px; 
 height: 2px; 
 background: #fe4902;
}
.current_page_item a { 
 color: white !important; 
}
.ie6 #example-one li, .ie7 #example-one li { 
 display: inline; 
}
.ie6 #magic-line {
 bottom: -3px;
}


/* Example Two */
#example-two { 
 margin: 0 auto; 
 list-style: none; 
 position: relative; 
 width: 960px; 
}
#example-two li { 
 display: inline-block; 
}
#example-two li a { 
 position: relative; 
 z-index: 200; 
 color: #bbb; 
 font-size: 14px; 
 display: block; 
 float: left; 
 padding: 6px 10px 4px 10px;
 text-decoration: none;
 text-transform: uppercase; 
}
#example-two li a:hover { 
 color: white; 
}
#example-two #magic-line-two { 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 100px; 
 background: #900; 
 z-index: 100; 
 -moz-border-radius: 5px; 
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
.current_page_item_two a { 
 color: white !important; 
}
.ie6 #example-two li, .ie7 #example-two li {
 display: inline;
}

You notice that in the code are two examples of menu. You can chose only one to use or both . You decide.

4. Now find the </head> tag and before it paste the code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js' type='text/javascript'/>
<script src='http://artistutorials.googlecode.com/files/jquery.color-RGBa-patch.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// DOM Ready
$(function() {

    var $el, leftPos, newWidth;
        $mainNav2 = $("#example-two");
    
    /*
        EXAMPLE ONE
    */
    
    /* Add Magic Line markup via JavaScript, because it ain't gonna work without */
    $("#example-one").append("<li id='magic-line'></li>");
    
    /* Cache it */
    var $magicLine = $("#magic-line");
    
    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
        
    $("#example-one li").find("a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });
    
    
    
    
    /*
        EXAMPLE TWO
    */
    
    $mainNav2.append("<li id='magic-line-two'></li>");
    
    var $magicLineTwo = $("#magic-line-two");
    
    $magicLineTwo
        .width($(".current_page_item_two").width())
        .height($mainNav2.height())
        .css("left", $(".current_page_item_two a").position().left)
        .data("origLeft", $(".current_page_item_two a").position().left)
        .data("origWidth", $magicLineTwo.width())
        .data("origColor", $(".current_page_item_two a").attr("rel"));
                
    $("#example-two a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLineTwo.stop().animate({
            left: leftPos,
            width: newWidth,
            backgroundColor: $el.attr("rel")
        })
    }, function() {
        $magicLineTwo.stop().animate({
            left: $magicLineTwo.data("origLeft"),
            width: $magicLineTwo.data("origWidth"),
            backgroundColor: $magicLineTwo.data("origColor")
        });    
    });
    
    /* Kick IE into gear */
    $(".current_page_item_two a").mouseenter();
    
});
//]]>
</script>

If you have Jquery instaled on your template delete the red line.
Also here you have the script for both menu examples. Chose to use only one or both. Your choise.

5. The next step is to find:

<div id='art-main'>    <b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test 3 (Header)' type='Header'>
<b:includable id='title'>

... in your template the title of the header will be different.

6. Now paste the next code after <div id='art-main'>:

6.1 For the Example 1 menu:

<div class="nav-wrap">

  <ul class="group" id="example-one">
            <li class="current_page_item">
             <a href="#">Home</a>
            </li>
            <li><a href="#">Buy Tickets</a></li>
            <li><a href="#">Group Sales</a></li>
            <li><a href="#">Reviews</a></li>
            <li><a href="#">The Show</a></li>
            <li><a href="#">Videos</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Magic Shop</a></li>
        </ul>
        
    </div>

6.2 And for the Example 2 menu:

<div class="nav-wrap">   
        
        <ul class="group" id="example-two">
            <li class="current_page_item_two"><a rel="#fe4902" href="#">Home</a></li>
            <li><a rel="#A41322" href="#">Buy Tickets</a></li>
            <li><a rel="#C6AA01" href="#">Group Sales</a></li>
            <li><a rel="#900" href="#">Reviews</a></li>
            <li><a rel="#D40229" href="#">The Show</a></li>
            <li><a rel="#98CEAA" href="#">Videos</a></li>
            <li><a rel="#1B9B93" href="#">Photos</a></li>
            <li><a rel="#8DC91E" href="#">Magic Shop</a></li>
        </ul>
        
    </div>

The red lines represent the color of each menu item

7. Save the template and see the result.

Create a Nice, Lightweight JavaScript Tooltip

2011-06-26T17:02:00.005+03:00

In this tutorial you will learn how to add to your posts , to specific words or phrases some javascript tooltips. What is a tooltip?

A tooltip is a small pop-up window that appears when a user pauses the mouse pointer over an element, such as over a Button. This tutorial introduces the tooltip and discusses how to create and customize tooltip content.When a user moves the mouse pointer over an element that has a tooltip, a window that contains tooltip content (for example, text content that describes the function of a control) appears for a specified amount of time. If the user moves the mouse pointer away from the control, the window disappears because the tooltip content cannot receive focus.

The content of a tooltip can contain one or more lines of text, images, shapes, or other visual content.

How to Create a Nice, Lightweight JavaScript Tooltip?

1. Log in to your dashboard--> Design- -> Edit HTML

2. Search "Ctrl+F" and find ]]></b:skin> . Then above it paste the next code:

#tt {
 position:absolute;
 display:block;
  }
 #tttop {
 display:block;
 height:5px;
 margin-left:5px;
 overflow:hidden;
 }
#ttbot {
display:block;
height:5px;
margin-left:5px;
overflow:hidden;
}
 #ttcont {
 display:block;
 padding:2px 12px 3px 7px;
 margin-left:5px;
 background:#666;
 color:#fff;
 border: 2px solid #666 ;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 8px 8px 8px 0px;
border-radius: 8px 8px 8px 0px;
 }

.hotspot {
color:#900; 
padding-bottom:1px; 
border-bottom:1px dotted #900; 
cursor:pointer
}

3. Find </head> and above him paste the next code:

<script type='text/javascript'>
      //<![CDATA[
var tooltip=function(){
 var id = 'tt';
 var top = 3;
 var left = 3;
 var maxw = 300; /*Tooltip width. Change according you needs*/
 var speed = 10;
 var timer = 20;
 var endalpha = 95;
 var alpha = 0;
 var tt,t,c,b,h;
 var ie = document.all ? true : false;
 return{
  show:function(v,w){
   if(tt == null){
    tt = document.createElement('div');
    tt.setAttribute('id',id);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id + 'cont');
    b = document.createElement('div');
    b.setAttribute('id',id + 'bot');
    tt.appendChild(t);
    tt.appendChild(c);
    tt.appendChild(b);
    document.body.appendChild(tt);
    tt.style.opacity = 0;
    tt.style.filter = 'alpha(opacity=0)';
    document.onmousemove = this.pos;
   }
   tt.style.display = 'block';
   c.innerHTML = v;
   tt.style.width = w ? w + 'px' : 'auto';
   if(!w && ie){
    t.style.display = 'none';
    b.style.display = 'none';
    tt.style.width = tt.offsetWidth;
    t.style.display = 'block';
    b.style.display = 'block';
   }
   if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
   h = parseInt(tt.offsetHeight) + top;
   clearInterval(tt.timer);
   tt.timer = setInterval(function(){tooltip.fade(1)},timer);
  },
  pos:function(e){
   var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
   tt.style.top = (u - h) + 'px';
   tt.style.left = (l + left) + 'px';
  },
  fade:function(d){
   var a = alpha;
   if((a != endalpha && d == 1) || (a != 0 && d == -1)){
    var i = speed;
    if(endalpha - a < speed && d == 1){
     i = endalpha - a;
    }else if(alpha < speed && d == -1){
     i = a;
    }
    alpha = a + (i * d);
    tt.style.opacity = alpha * .01;
    tt.style.filter = 'alpha(opacity=' + alpha + ')';
   }else{
    clearInterval(tt.timer);
    if(d == -1){tt.style.display = 'none'}
   }
  },
  hide:function(){
   clearInterval(tt.timer);
   tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
  }
 };
}();
//]]>
    </script>

4. Save the template.

5. Create a new post and write a couple lines of text.To build and hide a tooltip call the script as below. The second parameter in the show function is optional, if not passed the width will automatically adjust to the content within the maxh limit.

onmouseover="tooltip.show('Testing  123 ', 200);"
onmouseout="tooltip.hide();"

Exemple:

We have the phrase:

Proin eget elit justo, vitae molestie ligula. Sed molestie ligula quis elit facilisis id tempor magna malesuada. In eu eros nisl.

... and we want to have a tooltip over the " tempor" word. We will use the code on step 5 like this:

Proin eget elit justo, vitae molestie ligula. Sed molestie ligula quis elit facilisis id <span class="hotspot" onmouseout="tooltip.hide();"onmouseover="tooltip.show('This is the description of the tooltip');">tempor</span>magna malesuada. In eu eros nisl.

The class hotspot is used for customizing the appearance of the word linked to the tooltip, so don't remove it.

Making a Google Site for hosting flash files, archive and other files

2011-06-17T11:09:00.002+03:00

In a previous tutorial I talked about creating a Google code account and how to host javascript. Today I will show you how to create a Google Site for hosting different files. You can host pictures, archive mp3 files and lots more.
Why is useful a google site ? Well I use google sites for hosting the flash files ( .swf ). as you all know blogger doesn't support uploading flash files, and if you want to add a flash widget or a flash header you can't do it without hosting the flash to another place.
Also the files hosted can be downloaded so you can offer your visitors the option to download the files.
For creating a Google Site you must have a google email address ( xxxx@gmail.com).

How to make a Google Site for hosting flash files, archive and other files

1. Go to: Google Sites and log in with you gmail account

2. Click on Create New Site

In the new page you will have to choste a couples of things.
First:
1. A template for your site
2. The name for the site
3. A theme color
4. Description of the site

After creating the new site you will have to create a new page where you will upload the files. So click on Create page

Then you will have to chose a couple settings for the new page:

After creating the page you're ready to upload your files. Click on attachments and choose from you hard drive the file to be uploaded. The file will be uploaded automatically without you pushing another button.

For viewing you file click on View. To copy the link to your file just right click on view and then choose Copy Link Address ( google chrome) or Copy Link Location ( mozilla firefox ), then paste the link where you need it.

The link will be something like this:

https://sites.google.com/site/test1234567890xcvb/test/navi01.swf?attredirects=0

Just delete the red line and then use it . That's it. If you have any questions just add your comment bellow.

New Blogger Feature: Add favicon to your blog without editing the HTML

2011-06-12T12:44:00.002+03:00

Finally Blogger has implemented adding favicons to blogs. This was possible before but you have to edit your template HTML and insert a couple lines of code , uploading your favicon to a image hosting service. Just a little to complicated.
Now you will be able to add the favicon with just a couples of clicks. For now adding favicon is available only in Blogger Draft so if you want to make this happen follow the next steps.

How to Add favicon to your blog without editing the HTML

1. Login to your Blogger in Draft account and go to the Design --> Page Elements. Now click "Edit" on the new "Favicon" setting above the navbar element.

2. A new window will open and you will be able to select the favicon from your hard drive. For the moment are supported only the .ico favicons. You can convert your png or jpeg image online. There are lots online converters ( ConvertICO )

3. After uploading the .ico click on save. You will see you favicon displayed instead the blogger one.

4. Refresh you blog a couple times and you will see the favicon you just add it.

For more info visit:

http://bloggerindraft.blogspot.com/2011/06/customize-your-favicon.html

Add the new Twitter Follow button to your Artisteer blog

2011-06-05T11:47:00.026+03:00

In one of my previous post I show you how to add a nice twitter follow button. Now we have a new button that Twitter has released recently. In the new button we don't have any more the pop-up window to view the profile of the user in order to click follow. Now the follow button works exactly like the Facebook "like" button. (as long users are logged into there Twitter accounts).
Also the new twitter button has a couple options, like: choosing a light or dark color scheme, different language and chose to display the number of followers.
For adding the button first click on THIS LINK to go and select your options for the button and then copy the button's code and follow the next steps.

1. Log in to your dashboard--> Design- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find the following code:

<b:if cond='data:post.title'>
<h2 class='art-postheader'>

4. Now paste the next code after the upper code:

<div style='float:right; margin-right:10px;'>
<a href="http://twitter.com/ArtisTutorials" class="twitter-follow-button">Follow @ArtisTutorials</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>

5. Replace the upper code with your own code or just change the red lines with your twitter username and save the template.

With this trick the buttons will appear in the right side of the title , if you want to make the buttons appear in the article you have to paste the code on step 4 before (for the buttons to appear top of the article) or after (for the buttons to appear bottom of the article) this code:

<data:post.body/>

You can also insert the button in the sidebar widget or in your post. just paste the twitter follow button code in the place you want to appear.
When add the button in posts make sure the editor is in HTML mode.

DEMO

Follow @ArtisTutorials

Add google +1 (plusone) button to your Artisteer made templates

2011-06-03T13:03:00.007+03:00

Recently Google has release a button similar with the twitter tweet and facebook like buttons. This button is very useful, if you find something interesting on a page you can hit the +1 button and your +1's will help friends, contacts, and others on the web find the best stuff when they search.
If you are already using the official Blogger Sharing buttons, you should already be seeing the +1 buttons on your blog.
If you don't want those buttons an want something like the tweet button just follow the next steps:

1. Log in to your dashboard--> Design- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find the following cod:

<b:if cond='data:post.title'>
<h2 class='art-postheader'>

4. Now paste the next code after the upper code:

<!-- Google +1 button Start -->
<div>
<g:plusone size="standard" expr:href="data:post.url"/>
</div>
<!-- Google +1  button End -->

To change the style of the button change the red line with:

small for:

medium for:

tall for:

5. Then search for </head> and above it paste the next code:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'en-US'}
</script>

You can change the language of the button by replacing the red line with your country language code.
Exp:
French -- fr
Greek --el
German -- de
Romanian -- ro
Indonesian -id
Italian -- it
Spanish -- es etc.

6. Save the template.

With this trick the buttons will appear in the right side of the title , if you want to make the buttons appear in the article you have to paste the code on step 4 before (for the buttons to appear top of the article) or after (for the buttons to appear bottom of the article) this code:

<data:post.body/>

Did you like the tutorial? Give a +1 on the button bellow.

Add excelent image gallery with Jquery & CSS to posts & pages

2011-05-26T14:51:00.005+03:00

1. Log in to your dashboard--> Design- -> Edit HTML

2. Search "Ctrl+F" and find ]]></b:skin> , just above it paste the next one:

.column { 
float: left; margin-right: 10px; padding: 0; 
}

.span-1  { width: 25px;}
.span-2  { width: 65px;}
.span-3  { width: 105px;}
.span-4  { width: 145px;}
.span-5  { width: 185px;}
.span-6  { width: 225px;}
.span-7  { width: 265px;}
.span-8  { width: 305px;}
.span-9  { width: 345px;}
.span-10 { width: 385px;}
.span-11 { width: 425px;}
.span-12 { width: 465px;}
.span-13 { width: 505px;}
.span-14 { width: 545px;}
.span-15 { width: 585px;}
.span-16 { width: 625px;}
.span-17 { width: 665px;}
.span-18 { width: 705px;}
.span-19 { width: 745px;}
.span-20 { width: 785px;}
.span-21 { width: 825px;}
.span-22 { width: 865px;}
.span-23 { width: 905px;}
.span-24 { width: 945px; margin: 0; 
}

.last {
margin-right: 0; 
}

a.polaroid { 
-moz-transition: all 0.2s ease-in-out; 
-webkit-transition: all 0.2s ease-in-out;
display: block; 
background: #fff; 
padding: 5px; 
margin:5px; 
-moz-box-shadow: #ccc 3px 3px 7px; 
-webkit-box-shadow: #ccc 3px 3px 7px; 
margin-bottom:1em;
}
a.polaroid img {
width: 195px;
 height: 130px; 
}
a.polaroid:hover { 
-moz-box-shadow: #666 3px 3px 10px; 
-webkit-box-shadow: #666 3px 3px 10px;
}

IMPORTANT: To align better the image thumbnails on your page modify each value of .span-xx. It's important to modify each value with the same number of pixels (if you change the width of the .span-1 with 10 px then all the rest of the .span must be modified with 10 px.)

To change the dimensions of the thumbnails change the red values to your own.

3. Then find </head> and before it paste the next code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src='http://artistutorials.googlecode.com/files/fancyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function() {

$("a.polaroid").each(function() {
$(this)
.css({
"-webkit-transform": 'rotate(' + (Math.floor(Math.random()*10)-5) + 'deg)',
"-moz-transform": 'rotate(' + (Math.floor(Math.random()*10)-5) + 'deg)'
})
.hover(function() {
$(this).css({
"-webkit-transform": 'rotate(' + (Math.floor(Math.random()*10)-5) + 'deg) scale(1.05)',
"-moz-transform": 'rotate(' + (Math.floor(Math.random()*10)-5) + 'deg) scale(1.05)'
})
}, function() {
$(this).css({
"-webkit-transform": 'rotate(' + (Math.floor(Math.random()*10)-5) + 'deg) scale(1)',
"-moz-transform": 'rotate(' + (Math.floor(Math.random()*10)-5) + 'deg) scale(1)'
})
});
});


$('a[rel=lightbox]').fancyZoom();

});
//]]>
</script>

Of you have Jquery already on your template delete the red link

4. Save your template.

5. Now create a new post. In the place were you want to show the gallery paste the next code:

<div class="span-18 column rounded">
<div class="span-6 column rotated">
<a id="image1" class="cms-editable polaroid" href="#pic-1" rel="lightbox" title="first image"> <img src="http://img600.imageshack.us/img600/6107/78689592.jpg" alt="image" /> </a>
</div>
<div class="span-6 column rotated">
<a id="image2" class="cms-editable polaroid" href="#pic-2" rel="lightbox" title="second image"> <img src="http://img600.imageshack.us/img600/6107/78689592.jpg" alt="image" /> </a>
</div>
<div class="span-6 column rotated last">
<a id="image3" class="cms-editable polaroid" href="#pic-3" rel="lightbox" title="third image"> <img src="http://img600.imageshack.us/img600/6107/78689592.jpg" alt="image" /> </a>
</div>
<div class="span-6 column rotated">
<a id="image4" class="cms-editable polaroid" href="#pic-4" rel="lightbox" title="first image"> <img src="http://img600.imageshack.us/img600/6107/78689592.jpg" alt="image" /> </a>
</div>
<div class="span-6 column rotated">
<a id="image5" class="cms-editable polaroid" href="#pic-5" rel="lightbox" title="first image"> <img src="http://img600.imageshack.us/img600/6107/78689592.jpg" alt="image" /> </a>
</div>
<div class="span-6 column rotated last">
<a id="image6" class="cms-editable polaroid" href="#pic-6" rel="lightbox" title="first image"> <img src="http://img600.imageshack.us/img600/6107/78689592.jpg" alt="image" /> </a>
</div>

<div id="pic-1">
<img src="http://img600.imageshack.us/img600/6107/78689592.jpg" alt="image" />
</div>
<div id="pic-2">
<img src="http://img600.imageshack.us/img600/6107/78689592.jpg" alt="image" />
</div>
<div id="pic-3">
<img src="http://img600.imageshack.us/img600/6107/78689592.jpg" alt="image" />
</div>
<div id="pic-4">
<img src="http://img600.imageshack.us/img600/6107/78689592.jpg" alt="image" />
</div>
<div id="pic-5">
<img src="http://img600.imageshack.us/img600/6107/78689592.jpg" alt="image" />
</div>
<div id="pic-6">
<img src="http://img600.imageshack.us/img600/6107/78689592.jpg" alt="image" />
</div>
</div>

6. You can see thet you have to add the link to your image in two places. One for the thumbnail and second for the zoomed image.
For each image you add to the gallery , you must add the next codes in the right position. For the thumbnail add :

<div class="span-6 column rotated">
<a id="image6" class="cms-editable polaroid" href="#pic-6" rel="lightbox" title="first image"> <img src="http://img600.imageshack.us/img600/6107/78689592.jpg" alt="image" /> </a>
</div>

Change the image 6 with next number of the image (image 7; image 8; image 9......) and pic-6 with the value you will give to the image in the next code.
The next code is for the zoomed image so add it after similar code :

<div id="pic-7">
<img src="http://img600.imageshack.us/img600/6107/78689592.jpg" alt="image" />
</div>

7. Publish the post and see the results.

NOTE: You can also add the gallery to a static page not only in posts.

Add unique zoom effect to your images using jquery & EasyZoom

2011-05-16T15:42:00.005+03:00

1. Log in to your dashboard--> Design- -> Edit HTML

2. Search "Ctrl+F" and find the following code: ]]></b:skin> and before it paste the next one:

#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:50%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

3. Now find the </head> tag and before it paste the code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*
*  Easy Zoom 1.0 - jQuery plugin
* written by Alen Grakalic 
* http://cssglobe.com/post/9711/jquery-plugin-easy-image-zoom
*
* Copyright (c) 2011 Alen Grakalic (http://cssglobe.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
*/

/*

Required markup sample

<a href="large.jpg"><img src="small.jpg" alt=""></a>

*/

(function($) {

$.fn.easyZoom = function(options){

var defaults = { 
id: 'easy_zoom',
parent: 'body',
append: true,
preload: 'Loading...',
error: 'There has been a problem with loading the image.'
}; 

var obj;
var img = new Image();
var loaded = false;
var found = true;
var timeout;
var w1,w2,h1,h2,rw,rh;
var over = false;

var options = $.extend(defaults, options);  

this.each(function(){ 

obj = this; 
// works only for anchors
var tagName = this.tagName.toLowerCase();
if(tagName == 'a'){      

var href = $(this).attr('href');   
img.src = href + '?' + (new Date()).getTime() + ' =' + (new Date()).getTime();
$(img).error(function(){ found = false; })            
img.onload = function(){          
loaded = true; 
img.onload=function(){};
}; 

$(this)
.css('cursor','crosshair')
.click(function(e){ e.preventDefault(); })
.mouseover(function(e){ start(e); })
.mouseout(function(){ hide(); })  
.mousemove(function(e){ move(e); })   
};

});

function start(e){
hide();   
var zoom = $('<div id="'+ options.id +'">'+ options.preload +'</div>');
if(options.append) { zoom.appendTo(options.parent) } else { zoom.prependTo(options.parent) };
if(!found){
error();
} else {
if(loaded){
show(e);
} else {
loop(e);
};    
};   
};

function loop(e){
if(loaded){
show(e);
clearTimeout(timeout);
} else {
timeout = setTimeout(function(){loop(e)},200);
};
};

function show(e){
over = true;
$(img).css({'position':'absolute','top':'0','left':'0'});
$('#'+ options.id).html('').append(img);   
w1 = $('img', obj).width();
h1 = $('img', obj).height();
w2 = $('#'+ options.id).width();
h2 = $('#'+ options.id).height();
w3 = $(img).width();
h3 = $(img).height(); 
w4 = $(img).width() - w2;
h4 = $(img).height() - h2; 
rw = w4/w1;
rh = h4/h1;
move(e);
};

function hide(){
over = false;
$('#'+ options.id).remove();
};

function error(){
$('#'+ options.id).html(options.error);
};

function move(e){
if(over){
// target image movement
var p = $('img',obj).offset();
var pl = e.pageX - p.left;
var pt = e.pageY - p.top; 
var xl = pl*rw;
var xt = pt*rh;
xl = (xl>w4) ? w4 : xl;
xt = (xt>h4) ? h4 : xt; 
$('#'+ options.id + ' img').css({'left':xl*(-1),'top':xt*(-1)});
};
};

};

})(jQuery);
//]]>
</script>
<script type='text/javascript'>

jQuery(function($){

$(&#39;a.zoom&#39;).easyZoom();

});

</script>

If you have Jquery instaled on your template delete the red line.

4. Save the template.

5. The next step is to add the image to your post. When upload a large image it is resized automatic to a smaller dimension.This is perfect because the script wiil use the larger image and the resized one will be displayed on your post.
The image code you upload will look as below and you simply add class="zoom" as highlighted :

<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCXaUbweOP35mYQfZU4_Dtvvnv6NGcCUIdfXO47ArO9d-nWF_Fq6ejWWzBs_AkNTZN4Yofl5JMktWoqm9gbfJE2XP-DlW1MI6Wjig-hk8EXvpGrJDl183EhYAw2Wx6gKGlhuq2FU_IVM5F/s1600/Capture2.PNG" imageanchor="1" 
style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="210" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCXaUbweOP35mYQfZU4_Dtvvnv6NGcCUIdfXO47ArO9d-nWF_Fq6ejWWzBs_AkNTZN4Yofl5JMktWoqm9gbfJE2XP-DlW1MI6Wjig-hk8EXvpGrJDl183EhYAw2Wx6gKGlhuq2FU_IVM5F/s320/Capture2.PNG" width="320" /></a></div>

Artisteer Tutorials, Tips & Tricks

How to Host CSS - JavaScript - HTML Files on Google Drive

How to Host CSS - JavaScript - HTML Files on Google Drive?

Threaded comments for blogger without popup window

How to make threaded comments on blogger?

Add excelent HTML5 404 error page to your blog

How to add the 404 page to your blog?

Numbered comments on your threaded comments change blog

How to create numbered comments on my blog?

Threaded comments with different author color comments (updated)

How to make highlighted author threaded comments on blogger?

Related posts widget with title and comments number hovering effect

How to create nice related post widget?

Add a beautiful CSS-jQuery mega menu on your blog (REQ)

How to create a nice mega menu to your blog?

Nice photo gallery using jQuery and zoom effect

How to create nice photo galley with zoom effect?

Add nice Table of Content (TOC) to your blog (REQ)

Nice vertical fixed navigation menu using jQuery and CSS

How to add this nice menu to your blog?

Adding images and more text formats to the body of the comments

How to add images and format text in comments body?

How to make a horizontal scrolling twitter feed

How to create scrolling twitter feed?

Threaded comments for blogger comment system (updated)

How to make threaded comments on blogger?

Create nice social share box using CSS and jQuery

How to create nice share box using CSS and jQuery?

Cool image gallery using jQuery CSS and z-index

How to create unique z-index gallery?

6 small tricks to add a little bit of style to your blog

1. Use Font Face for adding custom font to your blog?

2. Removing Feed Link from the bottom of the template?

3. How To Change Default Text Selection Colour?

4. Add push button effect to the links in your blog

5. Remove default date from posts

6. Changing the template code to accommodate the date for all posts

New Style - Blogger has updated the new interface

See some screenshots with the new interface

Superb jQuery MagicLine Navigation menu

How to add superb jQuery Magicline navigation menu?

Create a Nice, Lightweight JavaScript Tooltip

How to Create a Nice, Lightweight JavaScript Tooltip?

Making a Google Site for hosting flash files, archive and other files

How to make a Google Site for hosting flash files, archive and other files

New Blogger Feature: Add favicon to your blog without editing the HTML

How to Add favicon to your blog without editing the HTML

Add the new Twitter Follow button to your Artisteer blog

Add google +1 (plusone) button to your Artisteer made templates

Add excelent image gallery with Jquery & CSS to posts & pages

Add unique zoom effect to your images using jquery & EasyZoom