Gambar postingan pada Beranda berputar ketika disorot mouse

Gambar postingan pada Beranda berputar ketika disorot mouse. Adalah gambar yang ada di postingan akan berputar ketika mos di arahkan ke postingan, cara ini telah saya lakukan dan saya terapkan di blog saya. Lihat saja langsung contohnya, masuk ke beranda dan arahkan mos sobat ke salah satu postingan milik saya, maka gambar yang bulat itu akan berputar dan mengecil. Jika sobat penasaran, kita langsung saja ke caranya.

1. Login blogger.
2. Pilih template.
3. Cari kode ]]></b:skin>, pastekan kode di bawah tepat di atas kode ]]></b:skin>.

.thumb-post img{padding:4px; margin:0 0 0 15px; width:50px; height:50px; background:#444; border:3px solid #003; box-shadow:0 1px 7px #ddd; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; -webkit-transition:all 0.9s ease-in-out; -moz-transition:all 0.9s ease-in-out; -o-transition:all 0.9s ease-in-out; transition:all 0.9s ease-in-out}
.post:hover:hover .thumb-post img{border:3px solid #006; background:#222; -webkit-transform:rotate(1080deg); -moz-transform:rotate(1080deg); -ms-transform:rotate(1080deg); -o-transform:rotate(1080deg); transform:rotate(1080deg); box-shadow:0 1px 9px #006}

4. Cari kode </head>, Pasteka kode di bawah tepat di atas kode  </head>.

    <script type='text/javascript'>
      var thumbnail_mode = &quot;float&quot; ;
      summary_noimg = 180;
      summary_img = 200;
      img_thumb_height = 50;
      img_thumb_width = 50;
    </script>
    <script type='text/javascript'>
      //<![CDATA[
      function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
      //]]>
    </script>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <style type='text/css'>
        .thumb-post img {
          padding: 4px;
          margin:0 0 0 15px;
          width: 72px;
          height:72px;
          background:#444;
          border:3px solid darkred;box-shadow:0 1px 7px #ddd;
          -webkit-border-radius: 50px;
          -moz-border-radius: 50px; border-radius: 50px;
          -webkit-transition: all 0.9s ease-in-out;
          -moz-transition: all 0.9s ease-in-out;
          -o-transition: all 0.9s ease-in-out;
          transition: all 0.9s ease-in-out;
        }
      </style>
    </b:if>
    <script type='text/javascript'>
      var thumbnail_mode = &quot;float&quot; ;
      summary_noimg = 170;
      summary_img = 170;
      img_thumb_height = 100;
      img_thumb_width = 100;
    </script>
    <script type='text/javascript'>
      //<![CDATA[
      function removeHtmlTag(strx,chop){
        if(strx.indexOf("<")!=-1)
        {
          var s = strx.split("<");
          for(var i=0;i<s.length;i++){
            if(s[i].indexOf(">")!=-1){
              s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
            }
          }
          strx = s.join("");
        }
        chop = (chop < strx.length-1) ? chop : strx.length-2;
        while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
        strx = strx.substring(0,chop-1);
        return strx+'...';
      }
      function createSummaryAndThumb(pID){
        var div = document.getElementById(pID);
        var imgtag = "";
        var img = div.getElementsByTagName("img");
        var summ = summary_noimg;
        if(img.length<=0) {
          imgtag = '<div class="thumb-post"><span style="float:left;margin-right:5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggaO__A3_4vgHeujBEvEQs0IKEqUe-bnWVuKcQH5rffus_roOeclW_lXBTH0nd3nqNjd61tGEun0_xPzv03cJS2d3RYl96dhLLB_J-cg8UhdY2Avg6ZsEXge_oerB8w6xllPDghkPYvSY/s0/images.jpeg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>';
          var summ = summary_noimg;
        }
        if(img.length>=1) {
          imgtag = '<div class="thumb-post"><span style="float:left;margin-right:15px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>';
          summ = summary_img;
        }
        var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
        div.innerHTML = summary;
      }
      //]]>
    </script>

5. Simpan template sobat.

Baca artikel menarik lainnya : Compress HTML

Related Post: