۩ Tuesday, 2017/June/27, 6:37:08 AM
Offical Site - PalmaHutabarat
۩ Welcome Guest | ۩ RSS
۩ Home Pge | Blog | ۩ Sign Up | ۩ Login
Site menu
¶ Vote My Site
Rate my site
Total of answers: 82
¶ Statistics

Total online: 1
Guests: 1
Users: 0
¶ Statistics
¶ FlagCounter
Flag Counter
Main » 2012 » December » 5 » 8 Macam Menghias Tombol Share Blogspot
9:48:20 AM
8 Macam Menghias Tombol Share Blogspot

Ini adalah trik CSS3 untuk menghias tombol share blogspot anda.


  1. Template >> Edit HTML >> Proceed

    Gambar Masuk Edit Template
  2. Penempatan kode berada di :

    <b:skin><![CDATA[

    Kode disini

    ]]></b:skin>


    Lebih gampangnya ketik keyboard Ctrl+f dan masukkan kode :

    <b:skin><![CDATA[

    Nanti kodenya letakkan dibawahnya

  3. Pilih satu gaya yang anda mau :


    • Gaya pergantian gambar lambat :

      .goog-inline-block {
      transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      transition-property:background;
      -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -moz-transition-property:background;
      -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -webkit-transition-property:background;
      -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -o-transition-property:background;
      }
      
    • Hover Transparan

      Transparan ke tidak transparan

      .goog-inline-block {
      opacity:0.5;
      -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -moz-transition-property:opacity;
      -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -webkit-transition-property:opacity;
      -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -o-transition-property:opacity;
      transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      transition-property:opacity;
      }
      .goog-inline-block:hover {
      opacity:1;
      }
      

      Tidak transparan ke transparan

      .goog-inline-block {
      opacity:1;
      -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -moz-transition-property:opacity;
      -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -webkit-transition-property:opacity;
      -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -o-transition-property:opacity;
      transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      transition-property:opacity;
      }
      .goog-inline-block:hover {
      opacity:0.5;
      }
      
    • Gambar menjadi besar

      .goog-inline-block {
      transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      transition-property:transform;
      -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -moz-transition-property:transform;
      -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -webkit-transition-property:transform;
      -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -o-transition-property:transform;
      }
      .goog-inline-block:hover {
      transform:scale(3.3);
      -moz-transform:scale(3.3);
      -ms-transform:scale(3.3);
      -o-transform:scale(3.3);
      -webkit-transform:scale(3.3);
      }
      
    • Gambar menjadi besar efek 3D

      .goog-inline-block {
      transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      transition-property:background, transform;
      -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -moz-transition-property:background, transform;
      -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -webkit-transition-property:background, transform;
      -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -o-transition-property:background, transform;
      }
      .goog-inline-block:hover {
      transform:scale(3.3);
      -moz-transform:scale(3.3);
      -ms-transform:scale(3.3);
      -o-transform:scale(3.3);
      -webkit-transform:scale(3.3);
      }
      
    • MDev Style Template

      .goog-inline-block {
      transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      transform:rotate(-20deg);
      -moz-transform:rotate(-20deg);
      -ms-transform:rotate(-20deg);
      -o-transform:rotate(-20deg);
      -webkit-transform:rotate(-20deg);
      transition-property:background, transform;
      -moz-transition-property:background, transform;
      -ms-transition-property:background, transform;
      -o-transition-property:background, transform;
      -webkit-transition-property:background, transform;
      }
      .goog-inline-block:hover {
      transform:rotate(0deg);
      -moz-transform:rotate(0deg);
      -ms-transform:rotate(0deg);
      -o-transform:rotate(0deg);
      -webkit-transform:rotate(0deg);
      }
      

      Bergaya miring seperti tema Template MDev (Template yang jadi trend pengenalan CSS3)

    • Terbalik

      .goog-inline-block {
      transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      transition-property:background, transform;
      -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -moz-transition-property:background, transform;
      -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -webkit-transition-property:background, transform;
      -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -o-transition-property:background, transform;
      transform:rotate(-180deg);
      -moz-transform:rotate(-180deg);
      -ms-transform:rotate(-180deg);
      -o-transform:rotate(-180deg);
      -webkit-transform:rotate(-180deg);
      }
      .goog-inline-block:hover {
      transform:rotate(0deg);
      -moz-transform:rotate(0deg);
      -ms-transform:rotate(0deg);
      -o-transform:rotate(0deg);
      -webkit-transform:rotate(0deg);
      }
      
    • Berputar

      .goog-inline-block {
      transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      transition-property:background, transform;
      -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -moz-transition-property:background, transform;
      -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -webkit-transition-property:background, transform;
      -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -o-transition-property:background, transform;
      }
      .goog-inline-block:hover {
      transform:rotate(-360deg);
      -moz-transform:rotate(-360deg);
      -ms-transform:rotate(-360deg);
      -o-transform:rotate(-360deg);
      -webkit-transform:rotate(-360deg);
      }
      
    • Berputar Ekstrim

      .goog-inline-block {
      transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      transition-property:background, transform;
      -moz-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -moz-transition-property:background, transform;
      -webkit-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -webkit-transition-property:background, transform;
      -o-transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
      -o-transition-property:background, transform;
      }
      .goog-inline-block:hover {
      transform:rotate(-1440deg);
      -moz-transform:rotate(-1440deg);
      -ms-transform:rotate(-1440deg);
      -o-transform:rotate(-1440deg);
      -webkit-transform:rotate(-1440deg);
      }
      
  4. Preview

  5. Save Template


copy@nanoyulianto

Views: 337 | Added by: palmahutabarat | Rating: 5.0/1
Total comments: 0
Only registered users can add comments.
[ Sign Up | Login ]
¶ Search My Site
¶ My Calendar
«  December 2012  »
SuMoTuWeThFrSa
      1
2345678
9101112131415
16171819202122
23242526272829
3031
¶ Entries archive
¶ Facebook Page

Copyright MyCorp © 2017