JS Page Peel Effect JS Page Peel Effect

taruh kode dibawah diatas kode </head> :

<script type="text/javascript">
var tujuan ='http://blogger.com/'</script><script src="https://sites.google.com/site/cuerosbhelatos/pagefell.js" type="text/javascript">
</script>

demo nya di sudut kanan ya....

Widget Recent Post Black With Thumbnail Image Widget Recent Post Black With Thumbnail Image

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
div.spy-outer {
  border:2px solid #333;
  -webkit-box-shadow:0px 1px 3px black;
  -moz-box-shadow:0px 1px 3px black;
  box-shadow:0px 1px 3px black;
  margin:0px auto;
}
div.spy-outer h2 {
  margin:0px 0px;
  padding:5px 10px;
  background:#aaa; border-top:1px solid #444;
  border-bottom:1px solid #000;
  background:-webkit-linear-gradient(top, #222, #222);
  background:-moz-linear-gradient(top, #222, #222);
  background:-ms-linear-gradient(top, #222, #222);
  background:-o-linear-gradient(top, #222, #222);
  background:linear-gradient(top, #222, #222);
  color:#1F88A7;
  font:bold 13px dungeon;
  text-transform:none;
  text-shadow:0px 1px 2px black;
}

ul.spy {
  margin:0px 0px;
  padding:0px 0px;
  font:normal 12px/12px "Consolas","Courier New",Courier,mono,serif;
  color:#808080;
  overflow:hidden;
}
ul.spy li {
  list-style:none;
  text-align:left;
  margin:0px 0px;
  padding:5px 7px;
  background:#323232;
  background:-webkit-linear-gradient(top, #222, #222);
  background:-moz-linear-gradient(top, #222, #222);
  background:-ms-linear-gradient(top, #222, #222);
  background:-o-linear-gradient(top, #222, #222);
  background:linear-gradient(top, #222, #222);
  border-top:1px solid #666;
  border-bottom:1px solid #000;
  word-wrap:break-word;
  overflow:hidden;
}
ul.spy a {text-decoration:none;}
ul.spy li em {
  font-weight:bold;
  color:#808000;
}
ul.spy a.header {
  font:bold 12px/14px 'century gothic',Arial,Sans-Serif;
  display:block;
  color:#bbb;
  text-shadow:0px -1px 1px black;
}
ul.spy a.header:hover {
  color:#777;
  text-decoration:underline;
}
ul.spy li .summ {
  margin-top:5px;
  overflow:hidden;
}
ul.spy li .imgwrap, ul.spy li img {
  float:right;
  margin:0px 0px 2px 7px;
  width:72px;
  height:72px;
  -webkit-border-radius:38px;
  -moz-border-radius:38px;
  border-radius:38px;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;
  -ms-transition:all 1s ease-out;
  -o-transition:all 1s ease-out;
  transition:all 1s ease-out;
  background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
  padding:0px;
}
ul.spy li .imgwrap, ul.spy li img {
  -webkit-box-shadow:0px 0px 0px 4px #222, 0px 0px 3px 4px #555;
  -moz-box-shadow:0px 0px 0px 4px #222, 0px 0px 3px 4px #555;
  box-shadow:0px 0px 0px 4px #222, 0px 0px 3px 4px #555;
}
ul.spy li img {
  border:none !important;
  float:none;
  margin:0px 0px;
  padding:0px 0px;
  display:none;
}
ul.spy li img:hover {
  -webkit-box-shadow:0px 0px 0px 4px #444, 0px 0px 3px 4px #fff;
  -moz-box-shadow:0px 0px 0px 4px #444, 0px 0px 3px 4px #fff;
  box-shadow:0px 0px 0px 4px #444, 0px 0px 3px 4px #fff;
  -webkit-transform:rotate(-720deg);
  -moz-transform:rotate(-720deg);
  -ms-transform:rotate(-720deg);
  -o-transform:rotate(-720deg);
  transform:rotate(-720deg);
}
</style>
<script type='text/javascript'>
var spyTitle       = "Artikel Terbaru",
    numposts       = 7,
    numchars       = 127,
    komentar       = "Komentar",
    pBlank         = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg";
    modeID             = true;
    showSummaries      = true;
    openNewTab         = false;
    showPostDate       = true;
    showComment        = true;
    showThumbnails     = true;
    animatedRecentPost = true;
    limitspy           = 4;
    intervalspy        = 4000;
    tickspeed          = 1000;
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/rp-spy-whatever-v1.js"></script>
<script src="http://logcyber.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

ganti http://logcyber.blogspot.com/ dengan url blog agn...

demo

emoticon otomatis with jquery emoticon otomatis with jquery

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

letakkan code diatas sebelum code </head>
kalo di template anda sudah ada jangan di dipasang lagi...

lalu masukkan code yang dibawah ini sebelum code </body>
 

<script type='text/javascript'>

    window.setTimeout(function() {

        document.body.className = document.body.className.replace('loading', '');

      }, 10);

  </script>

  <b:include data='blog' name='google-analytics'/>

<script type='text/javascript'>

//<![CDATA[

var emoRange = "#comments p, div.emoWrap",

    putEmoAbove = "iframe#comment-editor",

    emoMessage = "To insert emoticon you must added at least one space before the code.";



// Emoticon bar before comment-form

$(function() {

    $(putEmoAbove)

        .before('<div style="text-align:center" class="emoWrap"> 
:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :&gt;) (o) [-( :-? (p) 
:-s (m) 8-) :-t :-b  b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer 
<br/><b>Click to see the code!</b><br/>To insert
 emoticon you must added at least one space before the 
code.</div>');

    var emo = function(emo, imgRep, emoKey) {

        $(emoRange)

            .each(function() {

            $(this)

                .html($(this)

                .html()

                .replace(/<br>:/g, "<br> :")

                .replace(/<br>;/g, "<br> ;")

                .replace(/<br>=/g, "<br> =")

                .replace(/<br>\^/g, "<br> ^")

                .replace(emo, " <img style='max-height:24px' src='" +
 imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />"));

        });

    };

    emo(/\s:\)\)+/g, "http://devilzc0de.org/forum/images/smilies/wawa.gif", ":))");

    emo(/\s;\(\(+/g, "http://devilzc0de.org/forum/images/smilies/ngambek.gif", ";((");

 emo(/\s:\)+/g, "http://devilzc0de.org/forum/images/smilies/top.gif", ":)");

 emo(/\s:-\)+/g, "http://devilzc0de.org/forum/images/smilies/ngakak.gif", ":-)");

    emo(/\s=\)\)+/g, "http://devilzc0de.org/forum/images/smilies/muntah.gif", "=))");

    emo(/\s;\(+/g, "http://devilzc0de.org/forum/images/smilies/mewek.gif", ";(");

    emo(/\s;-\(+/g, "http://devilzc0de.org/forum/images/smilies/nangis.gif", ";-(");

    emo(/\s:d/ig, "http://devilzc0de.org/forum/images/smilies/curiga.gif", ":d");

    emo(/\s:-d/ig, "http://devilzc0de.org/forum/images/smilies/cuteboy.gif", ":-d");

    emo(/\s@-\)+/g, "http://devilzc0de.org/forum/images/smilies/pusing.gif", "@-)");

    emo(/\s:p/ig, "http://devilzc0de.org/forum/images/smilies/camb.gif", ":p");

    emo(/\s:o/ig, "http://devilzc0de.org/forum/images/smilies/hah.gif", ":o");

    emo(/\s:&gt;\)+/g, "http://devilzc0de.org/forum/images/smilies/bodo.gif", ":&gt;)");

    emo(/\s\(o\)+/ig, "http://devilzc0de.org/forum/images/smilies/angel1.gif", "(o)");

    emo(/\s\[-\(+/g, "http://devilzc0de.org/forum/images/smilies/siapinpisau.gif", "[-(");

    emo(/\s:-\?/g, "http://devilzc0de.org/forum/images/smilies/bingung.gif", ":-?");

    emo(/\s\(p\)+/ig, "http://devilzc0de.org/forum/images/smilies/mohon.gif", "(p)");

    emo(/\s:-s/ig, "http://devilzc0de.org/forum/images/smilies/bangga.gif", ":-s");

    emo(/\s\(m\)+/ig, "http://devilzc0de.org/forum/images/smilies/capedeh.gif", "(m)");

    emo(/\s8-\)+/ig, "http://devilzc0de.org/forum/images/smilies/ngasep.gif", "8-)");

    emo(/\s:-t/ig, "http://devilzc0de.org/forum/images/smilies/siul.gif", ":-t");

    emo(/\s:-b/ig, "http://devilzc0de.org/forum/images/smilies/gengster.gif", ":-b");

    emo(/\sb-\(+/ig, "http://devilzc0de.org/forum/images/smilies/cium.gif", "b-(");

    emo(/\s:-#/ig, "http://devilzc0de.org/forum/images/smilies/dingin.gif", ":-#");

    emo(/\s=p~/ig, "http://devilzc0de.org/forum/images/smilies/cheer.gif", "=p~");

    emo(/\s\$-\)+/ig, "http://devilzc0de.org/forum/images/smilies/relax.gif", "$-)");

    emo(/\s\(b\)+/ig, "http://devilzc0de.org/forum/images/smilies/bacit.gif", "(b)");

    emo(/\s\(f\)+/ig, "http://devilzc0de.org/forum/images/smilies/rocker.gif'", "(f)");

    emo(/\sx-\)+/ig, "http://devilzc0de.org/forum/images/smilies/wow.gif", "x-)");

    emo(/\s\(k\)+/ig, "http://devilzc0de.org/forum/images/smilies/tolong.gif", "(k)");

    emo(/\s\(h\)+/ig, "http://devilzc0de.org/forum/images/smilies/tagih.gif", "(h)");

    emo(/\s\(c\)+/ig, "http://devilzc0de.org/forum/images/smilies/batuk.gif", "(c)");

    emo(/\scheer/ig, "http://devilzc0de.org/forum/images/smilies/chaer.gif", "cheer");

   

// Show alert one times!

    $('div.emoWrap')

        .one("click", function() {

        if (emoMessage) {

            alert(emoMessage);

        }

    });

    // Click to show the code!

    $('.emo')

        .css('cursor', 'pointer')

        .live("click", function(e) {

        $('.emoKey')

            .remove();

        $(this)

            .after('<input class="emoKey" type="text" size="' + this.alt.length + '" value=" ' + this.alt + '" />');

$('.emoKey')

            .trigger("select");

e.stopPropagation();

    });

    $('.emoKey')

        .live("click", function() {

        $(this)

            .focus()

            .select();

    });



});

//]]>

</script>

pesan emoticon nya tidak tampil diatas kotak komentar..
masukkan code di bawah ini di:
setting -->>post and comment -->>Comment Form Message -->taruh kode nya di kotak yg tersedia....

:)   :))  ;((  :-)  =))   ;(   ;-(  :d   :-d   
@-)  :p  :o  :>)  (o)  [-(  :-?  (p)  :-s  (m)  8-)  :-t  :-b  b-(  :-#  =p~  $-)  (b)  (f)  x-)  (k)  (h)  (c)  cheer.....

Click to see the code!

To insert emoticon you must added at least one space before the code.

demo nya seperti punya saya.....

coculator with java coculator with java

     <style>
    /*----- Calculator By www.widgetgenerators.blogspot.com ------ */

    .btnLogin
    {
        -moz-border-radius:2px;
        -webkit-border-radius:2px;
        border-radius:15px;
        background:#a1d8f0;
        background:-moz-linear-gradient(top, #badff3, #7acbed);
        background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
        border:1px solid #7db0cc !important;
        cursor: pointer;
        padding:11px 16px;
        font:bold 11px/14px Verdana, Tahomma, Geneva;
        text-shadow:rgba(0,0,0,0.2) 0 1px 0px;
        color:#fff;
        -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
        -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
        box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
        margin-center:12px;
        float:center;
        padding:7px 21px;
    }

    .btnLogin:hover,
    .btnLogin:focus,
    .btnLogin:active{
        background:#a1d8f0;
        background:-moz-linear-gradient(top, #7acbed, #badff3);
        background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3));
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";
    }
    .btnLogin:active
    {
        text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;
    }
    /*----- Calculator By www.widgetgenerators.blogspot.com ------ */
    </style>



      <script language='JavaScript'>
      <!--------------------------------------------------------------------
        Memory  = "0";      // initialise memory variable
        Current = "0";      //   and value of Display ("current" value)
        Operation = 0;      // Records code for eg * / etc.
        MAXLENGTH = 30;     // maximum number of digits before decimal!

    function AddDigit(dig)          //ADD A DIGIT TO DISPLAY (keep as 'Current')
     { if (Current.indexOf("!") == -1)  //if not already an error
        { if (    (eval(Current) == 0)
                  && (Current.indexOf(".") == -1)
             ) { Current = dig;
               } else
               { Current = Current + dig;
               };
          Current = Current.toLowerCase(); //FORCE LOWER CASE
        } else
        { Current = "Hint! Press 'AC'";  //Help out, if error present.
        };
       if (Current.indexOf("e0") != -1)
         { var epos = Current.indexOf("e");
           Current = Current.substring(0,epos+1) + Current.substring(epos+2);
         };
      if (Current.length > MAXLENGTH)
         { Current = "Aargh! Too long"; //don't allow over MAXLENGTH digits before "." ???
         };
       document.Calculator.Display.value = Current;
     }

    function Dot()                  //PUT IN "." if appropriate.
     {
      if ( Current.length == 0)     //no leading ".", use "0."
        { Current = "0.";
        } else
        {  if (   ( Current.indexOf(".") == -1)
                &&( Current.indexOf("e") == -1)
              )
             { Current = Current + ".";
        };   };
      document.Calculator.Display.value = Current;
     }

    function DoExponent()
     {
      if ( Current.indexOf("e") == -1 )
           { Current = Current + "e0";
             document.Calculator.Display.value = Current;
           };
     }

    function PlusMinus()
     {
      if  (Current.indexOf("e") != -1)
        { var epos = Current.indexOf("e-");
          if (epos != -1)
             { Current = Current.substring(0,1+epos) + Current.substring(2+epos); //clip out -ve exponent
             } else
             { epos = Current.indexOf("e");
               Current = Current.substring(0,1+epos) + "-" + Current.substring(1+epos); //insert -ve exponent
             };
        } else
        {  if ( Current.indexOf("-") == 0 )
             { Current = Current.substring(1);
             } else
             { Current = "-" + Current;
             };
           if (    (eval(Current) == 0)
                && (Current.indexOf(".") == -1 )
              ) { Current = "0"; };
        };
      document.Calculator.Display.value = Current;
     }

    function Clear()                //CLEAR ENTRY
     { Current = "0";
       document.Calculator.Display.value = Current;
     }

    function AllClear()             //Clear ALL entries!
     { Current = "0";
       Operation = 0;                //clear operation
       Memory = "0";                  //clear memory
       document.Calculator.Display.value = Current;
     }

    function Operate(op)            //STORE OPERATION e.g. + * / etc.
     {
     if (Operation != 0) { Calculate(); }; //'Press "=" if pending operation!
     // note that design is not good for showing *intermediate* results.

      if (op.indexOf("*") > -1) { Operation = 1; };       //codes for *
      if (op.indexOf("/") > -1) { Operation = 2; };       // slash (divide)
      if (op.indexOf("+") > -1) { Operation = 3; };       // sum
      if (op.indexOf("-") > -1) { Operation = 4; };       // difference

      Memory = Current;                 //store value
      // note how e.g. Current.value gives neither error nor value! ***
      Current = "";
      document.Calculator.Display.value = Current;
     }

    function Calculate()            //PERFORM CALCULATION (= button)
     {
      if (Operation == 1) { Current = eval(Memory) * eval(Current); };
      if (Operation == 2)
        { if (eval(Current) != 0)
          { Current = eval(Memory) / eval(Current)
          } else
          { Current = "Aargh! Divide by zero"; //don't allow over MAXLENGTH digits before "." ???
          }
        };
      if (Operation == 3) { Current = eval(Memory) + eval(Current); };
      if (Operation == 4) { Current = eval(Memory) - eval(Current); };
      Operation = 0;                //clear operation
      Memory = "0";                  //clear memory
      Current = Current + "";       //FORCE A STRING!
      if (Current.indexOf("Infinity") != -1)        //eg "1e320" * 1
        { Current = "Aargh! Value too big";
        };
      if (Current.indexOf("NaN") != -1)        //eg "1e320" / "1e320"
        { Current = "Aargh! I don't understand";
        };
      document.Calculator.Display.value = Current;
      // NOTE: if no operation, nothing changes, Current is left the same!
     }

    function FixCurrent()
     {
      Current = document.Calculator.Display.value;
      Current = "" + parseFloat(Current);
      if (Current.indexOf("NaN") != -1)
        { Current = "Aargh! I don't understand";
        };
      document.Calculator.Display.value = Current;
     }

      //--------------------------------------------------------------->
      </script>

    </head>
    <body>

    <div align="center"><table width="95%"><tr><td> <!-- OUTER MARGIN -->
    <font face="Verdana, Arial, Helvetica">

    <div align="center"><table border="0"><tr><td width="15%" align="center"><p>&nbsp;</p>
    <div align="center">
    <FORM name="Calculator">
    <table width="30%" border="4" bgcolor="#809FFE"><tr>      <!--OUTER MARGIN OF CALCULATOR-->
    <td colspan="2" align="center">

      <p><b><font face="Verdana, Arial, Helvetica" color="#00000" size="3">Calculator</font></b><b><font face="Verdana, Arial, Helvetica" color="#00000" size="3"><br>
        </font>
              <font face="Courier" size="5">
              <input type="text" maxlength="40" size="25" name="Display" onChange="FixCurrent()">
                      </font></b>    </p>
      </td></tr>
    <tr><td width="65%" align="center">                   <!--left panel------>

    <br><table><tr>
      <td><input type="button" class="btnLogin" name="seven" value="   7    " OnClick="AddDigit('7') "></td>
      <td><input type="button" class="btnLogin" name="eight" value="   8    " OnClick="AddDigit('8')"></td>
      <td><input type="button" name="nine"  class="btnLogin" value="   9    " OnClick="AddDigit('9')"></td>
    </tr><tr>
      <td><input type="button" name="four"  class="btnLogin" value="   4    " OnClick="AddDigit('4')"></td>
      <td><input type="button" name="five"  class="btnLogin" value="   5    " OnClick="AddDigit('5')"></td>
      <td><input type="button" name="six"  class="btnLogin"  value="   6    " OnClick="AddDigit('6')"></td>
    </tr><tr>
      <td><input type="button" name="one"  class="btnLogin" value="   1    " OnClick="AddDigit('1')"></td>
      <td><input type="button" name="two"  class="btnLogin" value="   2    " OnClick="AddDigit('2')"></td>
      <td><input type="button" name="three"  class="btnLogin"  value="   3    " OnClick="AddDigit('3')"></td>
    </tr><tr>
      <td><input type="button" name="plusmin"  class="btnLogin" value="  +/-  " OnClick="PlusMinus()"></td>
      <td><input type="button" name="one"  class="btnLogin" value="   0    " OnClick="AddDigit('0')"></td>
      <td><input type="button" name="two"  class="btnLogin" value="    .    " OnClick="Dot()"></td>
    </tr>
    </table><br/>


    </td>                                   <!--end left panel-->
    <td width="35%" align="center">                     <!--right panel----->

    <br><table><tr>
      <td><input type="button" name="clear"  class="btnLogin" value="    C     " OnClick="Clear()"></td>
      <td><input type="button" name="AC"  class="btnLogin" value="   AC    " OnClick="AllClear()"></td>
    </tr><tr>
      <td><input type="button" name="mul"  class="btnLogin" value="     *     " OnClick="Operate('*')"></td>
      <td><input type="button" name="div"  class="btnLogin" value="     /      " OnClick="Operate('/')"></td>
    </tr><tr>
      <td><input type="button" name="add"  class="btnLogin" value="    +     " OnClick="Operate('+')"></td>
      <td><input type="button" name="sub"  class="btnLogin" value="     -      " OnClick="Operate('-')"></td>
    </tr><tr>
      <td><input type="button" name="result"  class="btnLogin" value="     =    " OnClick="Calculate()"></td>
      <td align="right"><input type="button" name="exp"  class="btnLogin" value="  E X P  " OnClick="DoExponent()"></td>
    </tr></table><br/>


    </td>                                   <!--end right panel-->
    </tr></table>                          <!--END OUTER MARGIN CALC------->
    </FORM></div>

  DEMO

<!-- OUTER MARGIN

Calculator

-->

Mengizinkan elemen terlarang masuk ke dalam komentar Mengizinkan elemen terlarang masuk ke dalam komentar

Cara Memasang Fitur Ini

Pertama-tama masuklah ke halaman editor HTML blog Anda. Klik Edit HTML dan klik Lanjutkan:

Mengedit HTML

Temukan kode ini:
</head>
Salin kode CSS ini dan letakkan di atasnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Add More Features to the Blogger Comments by Taufik Nurrohman */
img.emo {
  display:inline-block;
  vertical-align:middle;
}

#comment-holder .cm-youtube {
  display:block;
  border:none !important;
  background-color:#333;
  width:370px;
  height:218px;
  margin:0 auto 30px;
}

#comment-holder .cm-image {
  display:block;
  margin:0 auto 15px;
  outline:none;
  border:1px solid #ccc;
  background-color:white;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  box-shadow:0px 1px 3px rgba(0,0,0,0.2);
  padding:5px;
  max-width:96%;
  height:auto;
  width:auto\9;
}

#comment-holder code,
#comment-holder i[rel="code"] {
  font:normal 12px Monaco,"Courier New",Monospace;
  color:blue;
}

#comment-holder pre,
#comment-holder i[rel="pre"] {
  display:block;
  font:normal 12px Monaco,"Courier New",Monospace;
  background-color:#333;
  color:white;
  padding:0.5em 1em;
  word-wrap:normal;
  white-space:pre;
  overflow:auto;
}

#comment-holder blockquote,
#comment-holder b[rel="quote"] {
  margin:0 2%;
  background-color:#eee;
  padding:1em 1.2em;
  border-left:4px solid #7498AD;
  display:block;
  font-weight:bold;
  font-style:italic;
}

#comment-holder i[rel="image"],
#comment-holder i[rel="youtube"] {
  display:block;
  overflow:hidden;
  border:2px solid black;
  position:relative;
  width:170px;
  height:100px;
  margin:0 auto 30px;
}

#comment-holder i[rel="image"]:before,
#comment-holder i[rel="youtube"]:before {
  content:"Please enable your JavaScript to see this image!";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:red;
  color:white;
  font-weight:bold;
  text-align:center;
  padding:15px 0;
}

#comment-holder i[rel="youtube"]:before {
  content:"Please enable your JavaScript to watch this video!";
}
</style>
</b:if>

setelah itu temukan kode ini:
</body>
Salin kode ini dan letakkan di atasnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript">
//<![CDATA[
// Add More Features to the Blogger Comments
// Fix some bugs that I got from some similar code out here :)
// Date: 21 May 2012
// Time: 22:50 WIB
// Author: Taufik Nurrohman
// URL: https://plus.google.com/108949996304093815163/about
function repText(id) {
    var a = (document.getElementById(id)) ? document.getElementById(id) : "",
        b = (a !== "") ? a.innerHTML : a,
        c = "http://reader-download.googlecode.com/svn/trunk/images/emo/";
        // Images
        b = b.replace(/<i rel="image">(.*?)<\/i>/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
        b = b.replace(/\[img\](.*?)\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
        // YouTube video
        b = b.replace(/<i rel="youtube">http:\/\/www\.youtube\.com\/embed\/(.*?)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
        b = b.replace(/<i rel="youtube">(http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
        b = b.replace(/\[youtube\]http:\/\/www\.youtube\.com\/embed\/(.*?)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
        b = b.replace(/\[youtube\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
        // Code & text block
        b = b.replace(/<i rel="code">(.*?)<\/i>/ig, "<code>$1<\/code>");
        b = b.replace(/<i rel="pre">(.*?)<\/i>/ig, "<pre>$1<\/pre>");
        b = b.replace(/<b rel="quote">(.*?)<\/b>/ig, "<blockquote>$1<\/blockquote>");
        b = b.replace(/\[code\](.*?)\[\/code\]/ig, "<code>$1<\/code>");
        b = b.replace(/\[pre\](.*?)\[\/pre\]/ig, "<pre>$1<\/pre>");
        b = b.replace(/\[blockquote\](.*?)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>");
        // Finishing YouTube and Reduce filesize from images that uploaded by Blogger
        b = b.replace(/&amp;feature=[0-9a-zA-Z-_]*/ig, "");
        b = b.replace(/\/s(640|1600)/g, "/s400");
        // Emoticons
        b = b.replace(/\s:\)+/g, " <img class='emo' alt='emo' src='" + c + "smile.gif'\/>");
        b = b.replace(/\s;\)+/g, " <img class='emo' alt='emo' src='" + c + "wink.gif'\/>");
        b = b.replace(/\s:\(/g, " <img class='emo' alt='emo' src='" + c + "sad.gif'\/>");
        b = b.replace(/\s=\(/g, " <img class='emo' alt='emo' src='" + c + "sadanimated.gif'\/>");
        b = b.replace(/\s@@,/g, " <img class='emo' alt='emo' src='" + c + "rolleyes.gif'\/>");
        b = b.replace(/\s:s/ig, " <img class='emo' alt='emo' src='" + c + "sullen.gif'\/>");
        b = b.replace(/\s:(\\|\/)/g, " <img class='emo' alt='emo' src='" + c + "memble.gif'\/>");
        b = b.replace(/\s:D/g, " <img class='emo' alt='emo' src='" + c + "haha.gif'\/>");
        b = b.replace(/\s=D/g, " <img class='emo' alt='emo' src='" + c + "hihi.gif'\/>");
        b = b.replace(/\s\^:D/g, " <img class='emo' alt='emo' src='" + c + "abovemehaha.gif'\/>");
        b = b.replace(/\s\^(\_|)\^/g, " <img class='emo' alt='emo' src='" + c + "senyum-tulus.gif'\/>");
        b = b.replace(/\s:'\(/g, " <img class='emo' alt='emo' src='" + c + "cry.gif'\/>");
        b = b.replace(/\sT_T/ig, " <img class='emo' alt='emo' src='" + c + "tears.gif'\/>");
        b = b.replace(/\sB\)/g, " <img class='emo' alt='emo' src='" + c + "cool.gif'\/>");
        b = b.replace(/\s:Q/ig, " <img class='emo' alt='emo' src='" + c + "smoking.gif'\/>");
        b = b.replace(/\s7:\(/g, " <img class='emo' alt='emo' src='" + c + "conf.gif'\/>");
        b = b.replace(/\s:p/ig, " <img class='emo' alt='emo' src='" + c + "wee.gif'\/>");
        b = b.replace(/\s:Oz+/ig, " <img class='emo' alt='emo' src='" + c + "sleep.gif'\/>");
        b = b.replace(/\s7:O/ig, " <img class='emo' alt='emo' src='" + c + "angry.gif'\/>");
        b = b.replace(/\s\\o\//ig, " <img class='emo' alt='emo' src='" + c + "applause.gif'\/>");
        b = b.replace(/\s\\m\//ig, " <img class='emo' alt='emo' src='" + c + "metal.gif'\/>");
        b = b.replace(/\s(&lt;3|:\*)/ig, " <img class='emo' alt='emo' src='" + c + "love.gif'\/>");
        b = b.replace(/\s0:\)+/ig, " <img class='emo' alt='emo' src='" + c + "angelgreen.gif'\/>");
        b = b.replace(/\s\^o\^/ig, " <img class='emo' alt='emo' src='" + c + "angelwhite.gif'\/>");
        b = b.replace(/\s:-a/ig, " <img class='emo' alt='emo' src='" + c + "vomit.gif'\/>");
        b = b.replace(/\s\*fck\*/ig, " <img class='emo' alt='emo' src='" + c + "fuck.gif'\/>");
        b = b.replace(/\sxV/ig, " <img class='emo' alt='emo' src='" + c + "demo.gif'\/>");
        b = b.replace(/\sx\@/g, " <img class='emo' alt='emo' src='" + c + "marahbesar.gif'\/>");
        b = b.replace(/\s\X\@/g, " <img class='emo' alt='emo' src='" + c + "arrgh.gif'\/>");
        b = b.replace(/\s:-d/ig, " <img class='emo' alt='emo' src='" + c + "top.gif'\/>");
        b = b.replace(/\s:-bd/ig, " <img class='emo' alt='emo' src='" + c + "topmarkotop.gif'\/>");
        b = b.replace(/\s\~x\(+/ig, " <img class='emo' alt='emo' src='" + c + "ugh.gif'\/>");
        b = b.replace(/\s:W/g, " <img class='emo' alt='emo' src='" + c + "explain.gif'\/>");
        b = b.replace(/\s\'\'J/ig, " <img class='emo' alt='emo' src='" + c + "call.gif'\/>");
    if (document.getElementById(id)) {
        document.getElementById(id).innerHTML = b;
    }
} repText('comment-holder');
//]]>
</script>
</b:if>

Klik Simpan Template.

Pembaharuan: Mengganti pola /(.[^>]*)<\/tag>/ig dan /\[bracket\](.[^\]]*)\[\/bracket\]/ig menjadi /(.*?)<\/tag>/ig dan /\[bracket\](.*?)\[\/bracket\]/ig untuk meloloskan tag
di dalam tag manipulasi.

Penerapan Kode-Kode Manipulasi

Saya memberikan dua pilihan, yaitu menggunakan tag HTML dengan target manipulasi yang diambil berdasarkan atribut rel dan menggunakan kata-kata kunci yang dimasukkan ke dalam braket kotak sebagai penggambaran tag HTML. Saya merekomendasikan Anda untuk menggunakan tag HTML karena mereka masih bisa bekerja tanpa JavaScript (ini juga merupakan standar manipulasi komponen komentar di blog Saya):

Perintah	Format
Memasukkan gambar	<i rel="image">URL Gambar</i>
	[img]URL Gambar[/img]
Memasukkan video YouTube	<i rel="youtube">URL YouTube</i>
	[youtube]URL YouTube[/youtube]
Memasukkan tag <code>	<i rel="code">Kode Anda</i>
	[code]Kode Anda[/code]
Memasukkan tag <pre>	<i rel="pre">Kode Anda</i>
	[pre]Kode Anda[/pre]
Memasukkan kuota	<b rel="quote">Kata-kata Anda</b>
	[blockquote]Kata-kata Anda[/blockquote]
Memasukkan emotikon	Beberapa kode yang bisa digunakan: :) :( =( :s ^_^ :D =D ^:D @@, ;) :-bd :-d :'( :'( T_T :\ :p B) :Q :Ozz 7:( \o/ \m/ &lt;3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( ''J :W

Cara Membuat Efek Salju di Blog Cara Membuat Efek Salju di Blog

Untuk membuat efek salju, pertama-tama masuklah ke tab Rancangan kemudian tambahkan sebuah elemen halaman HTML/JavaScript.
Salin script ini, kemudian letakkan di dalam formulirnya:

<script src="http://hompimpa.googlecode.com/files/efeksalju.js" type="text/javascript"></script>

Klik Simpan.

JavaScript Recent Comment/Komentar Terbaru dengan CSS JavaScript Recent Comment/Komentar Terbaru dengan CSS

Untuk membuat widget recent comment dengan tampilan yang luar biasa ganteng seperti gambar di atas, cukup salin kode ini kemudian letakkan di dalam sebuah elemen halaman HTML/JavaScript:

<style type="text/css">
#komentar {
  font:normal 11px Tahoma,Verdana,Arial,Sans-Serif;
  background-color:#597624;
  margin:0px 0px;
  padding:10px 10px;
  color:#000;
  border:4px solid #597624;
  -webkit-box-shadow:inset 0px 0px 2px #000;
  -moz-box-shadow:inset 0px 0px 2px #000;
  box-shadow:inset 0px 0px 2px #000;
}

#komentar ul {
  margin:0px 0px;
  padding:0px 0px;
  border-top:1px solid #455F20;
  border-bottom:1px solid #799D1A;
}

#komentar ul li {
  border-top:1px solid #799D1A;
  border-bottom:1px solid #455F20;
  padding:3px 0px;
  list-style:none;
}

#komentar ul li b a,
#komentar ul li b a:link,
#komentar ul li b a:visited,
#komentar ul li b {
  color:#D7E5FD;
  text-shadow:0 1px 1px rgba(0,0,0,0.4);
}

#komentar ul li b:before {
  content:url(http://3.bp.blogspot.com/-abTiDALn6h0/TpJYHn1AmoI/AAAAAAAAA8I/hRAhFSBZhlY/s1600/feed-icon-green.png);
  margin:0px 4px 0px 0px;
  display:inline-block;
  *display:inline;
  vertical-align:middle;
}
</style>
<script type="text/javascript">
var jmlkomentar = 14,
    jmlkarakter = 200,
    home_page   = "http://logcyber.blogspot.com";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/blogger-rc-comments.js" type="text/javascript"></script>

Tentukan jumlah komentar yang akan ditampilkan pada var jmlkomentar dan jumlah karakter pada var jmlkarakter. Ganti kode yang Saya beri warna merah dengan alamat blogmu sendiri.
Klik Simpan dan lihat hasilnya:

demo

Widget JavaScript Kupu-Kupu Widget JavaScript Kupu-Kupu

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin kode ini dan letakkan di dalam formulirnya:

<script type="text/javascript">
     var Ymax=8; 
     var Xmax=8; 
     var Tmax=10000; //durasi langkah dalam milidetik
     var floatimages=new Array();
     floatimages[0]='http://hompimpa.googlecode.com/files/butterfly.gif';
     floatimages[1]='http://hompimpa.googlecode.com/files/butterfly.gif';
</script>
<script src="http://hompimpa.googlecode.com/files/scriptkupu.js" type="text/javascript"></script>

Klik Simpan, maka kamu akan mendapatkan hasil akhir seperti ini:


URL yang Saya beri warna biru adalah gambar kupu-kupu yang nantinya akan ditampilkan. Jika kamu mempunyai gambar kupu-kupu sendiri, kamu bisa mengganti URL tersebut dengan URL gambarmu sendiri.

Menu Navigasi Bertingkat dengan Efek, Versi Scriptiny Menu Navigasi Bertingkat dengan Efek, Versi Scriptiny

Salah satu kelebihan menu navigasi ini dibandingkan dengan menu navigasi yang lain adalah berkas JavaScriptnya yang sangat ringan, bahkan kamu sama sekali tidak membutuhkan JQuery untuk menciptakan efek pemunculan sub-sub menu yang lembut:






Cukup dua langkah perombakan saja yang kamu perlukan untuk menyelesaikan proyek ini:
Pertama-tama, masuklah ke tab Rancangan kemudian pilih Edit HTML.
Salin baris CSS dan script ini, kemudian letakkan tepat di atas kode </head>:

<style type='text/css'>
/*
Tema: LEGO
Oleh: http://logcyber.blogspot.com/
*/
ul.menu               {list-style:none;margin:10px 0;padding:0;height:33px;background-color:#A10000;font:11px Verdana,Arial;}
ul.menu *             {margin:0;padding:0;}
ul.menu a             {display:block;text-decoration:none;color:#7eb7fb;}
ul.menu li            {position:relative;float:left;}
ul.menu ul            {position:absolute;z-index:100;top:32px;left:0;background-color:#7eb7fb;display:none;opacity:0;list-style:none;-webkit-box-shadow:0 3px 5px #aaa;-moz-box-shadow:0 3px 5px #aaa;box-shadow:0 3px 5px #aaa;}
ul.menu ul li         {position:relative;border:0;width:150px;margin:0;}
ul.menu ul li a       {display:block;padding:7px 15px 7px;background-color:#084a9b;color:#7eb7fb;}
ul.menu ul li a:hover {background-color:#ffe30a;color:#fff;}
ul.menu ul ul         {left:150px;top:-1px;}
ul.menu .menulink     {padding:10px 15px 10px;font-weight:bold;text-transform:uppercase;background:#A10000;color:#fb9d9d;}
ul.menu .menulink:hover,
ul.menu .menuhover    {background:#449400;color:#caecac;}
ul.menu .sub          {background:#084a9b url(http://2.bp.blogspot.com/-x-_lO7zXjg4/Tk453ebAeHI/AAAAAAAAAvE/XXjrwOz0MbM/s1600/arrowgambreng.gif) 138px 10px no-repeat;color:#7eb7fb;}
ul.menu .sub:hover    {color:#fff;}
</style>
<script type='text/javascript'>
//<![CDATA[
var menu=function(){var t=15,z=500,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');}}
dd.prototype.st=function(x,f){var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}}
function sl(c,f){var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'}
return{dd:dd}}();
//]]>
</script>

Terakhir tinggal meletakkan kerangka objeknya saja. Salin kode di bawah ini, kemudian letakkan di tempat dimana kamu menginginkan menu navigasi ini ditampilkan:

<ul class='menu' id='menugambreng'>
     <li><a href='#' class='menulink'>BERANDA</a></li>

     <li><a href='#' class='menulink'>PROFIL</a>
          <ul>
               <li><a href='#'>Item Navigasi 1</a></li>
               <li><a href='#' class='sub'>Item Navigasi 2</a>
                    <ul>
                         <li><a href='#'>Item Navigasi 2 1</a></li>
                         <li><a href='#'>Item Navigasi 2 2</a></li>
                         <li><a href='#'>Item Navigasi 2 3</a></li>
                         <li><a href='#'>Item Navigasi 2 4</a></li>
                         <li><a href='#'>Item Navigasi 2 5</a></li>
                    </ul>
               </li>
               <li><a href='#' class='sub'>Item Navigasi 3</a>
                    <ul>
                         <li><a href='#'>Item Navigasi 3 1</a></li>
                         <li><a href='#'>Item Navigasi 3 2</a></li>
                         <li><a href='#' class='sub'>Item Navigasi 3 3</a>
                              <ul>
                                   <li><a href='#'>Item Navigasi 3 3 1</a></li>
                                   <li><a href='#'>Item Navigasi 3 3 2</a></li>
                                   <li><a href='#'>Item Navigasi 3 3 3</a></li>
                                   <li><a href='#'>Item Navigasi 3 3 4</a></li>
                                   <li><a href='#'>Item Navigasi 3 3 5</a></li>
                                   <li><a href='#'>Item Navigasi 3 3 6</a></li>
                              </ul>
                         </li>
                         <li><a href='#'>Item Navigasi 3 4</a></li>
                    </ul>
               </li>
               <li><a href='#'>Item Navigasi 4</a></li>
               <li><a href='#'>Item Navigasi 5</a></li>
          </ul>
     </li>

     <li><a href='#' class='menulink'>SUNTING</a></li>

     <li><a href='#' class='menulink'>PENJAHAT</a>
          <ul>
               <li><a href='#'>Item Navigasi 1</a></li>
               <li><a href='#' class='sub'>Item Navigasi 2</a>
                    <ul>
                         <li><a href='#'>Item Navigasi 2 1</a></li>
                         <li><a href='#'>Item Navigasi 2 2</a></li>
                         <li><a href='#'>Item Navigasi 2 3</a></li>
                    </ul>
               </li>
          </ul>
     </li>

     <li><a href='#' class='menulink'>TAI KUCING</a>
          <ul>
               <li><a href='#'>Item Navigasi 1</a></li>
               <li><a href='#'>Item Navigasi 2</a></li>
               <li><a href='#'>Item Navigasi 3</a></li>
               <li><a href='#'>Item Navigasi 4</a></li>
               <li><a href='#'>Item Navigasi 5</a></li>
               <li><a href='#' class='sub'>Item Navigasi 6</a>
                    <ul>
                         <li><a href='#'>Item Navigasi 6 1</a></li>
                         <li><a href='#'>Item Navigasi 6 2</a></li>
                    </ul>
               </li>
               <li><a href='#'>Item Navigasi 7</a></li>
               <li><a href='#'>Item Navigasi 8</a></li>
               <li><a href='#'>Item Navigasi 9</a></li>
               <li><a href='#'>Item Navigasi 10</a></li>
          </ul>
     </li>
</ul>
<script type='text/javascript'>
var menu=new menu.dd('menu');
menu.init('menugambreng','menuhover');
</script>

Klik Simpan Template. Sekarang kita masuk ke tahap penyesuaian.

Catatan Tambahan:

• Setiap menu utama (warna merah) setidaknya harus memiliki atribut class='menulink' pada masing-masing elemen <a> utama.
• Untuk memunculkan simbol panah berwarna hitam yang menjadikan indikator keberadaan sub-sub menu cukup dengan menambahkan atribut class='sub' pada tiap-tiap elemen <a> yang diinginkan.
• Mengubah kecepatan animasi juga bisa dilakukan dengan mengutak-atik angka-angka yang terdapat pada variabel var t=15,z=500,s=6