Cara Membuat Widget Follow Menarik Di Blog

Langsung saja kita dandani blog kita :)

• Login ke Dashboard
• Masuk ke Layout/Tata Letak
• Add Gadget >> HTML/JavaScript
• Masukkan kode di bawah, lalu Simpan

    <style> #tbisose {
      list-style:none;
      text-decoration:none;
      font-size:0.9em;
      font-family:trebuchet ms,sans-serif;
    }
    #tbisose a {
      text-decoration:none;
      font-family:trebuchet ms,sans-serif;
    }
    #tbisose li {
      position:relative;
      height:38px;
      cursor:pointer;
      padding:0 !important;
    }
    #tbisose .facebook,
    .googleplus,
    .pinterest,
    .rss,
    .twitter {
      position:relative;
      z-index:5;
      display:block;
      float:none;
      margin:10px 0 0;
      width:210px;
      height:38px;
      border-radius:5px;
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHpVwK4gC5ihUpYkvBd2hzEgcHEAmZxvI0Jzms0QvNkdl6yLycXrhn-mrjrEhx_oWFrKc7i0fwWO-ADujkkCta4sc9TODCRUTM1Xq9lUoraUTIbPxy4EIL3B3aXjc9LuzOfmI9Vmp1s4s/s800/sprites.png) no-repeat;
      background-color:rgba(217,30,118,.42);
      -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
      -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
      box-shadow:rgba(0,0,0,.28) 0 2px 3px;
      color:#141414;
      text-align:left;
      text-indent:50px;
      text-shadow:#333 0 1px 0;
      white-space:nowrap;
      line-height:32px;
      -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;
      -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;
      -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;
      -o-transition:width .25s ease-in-out,background-color .25s ease-in-out;
      transition:width .25s ease-in-out,background-color .25s ease-in-out;
      -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
    }
    #tbisose li:after {
      position:absolute;
      top:0;
      left:50px;
      z-index:2;
      display:block;
      height:38px;
      color:#141414;
      content:attr(data-alt);
      line-height:32px;
    }
    #tbisose .icon {
      overflow:hidden;
      color:#fafafa;
    }
    #tbisose .facebook {
      width:32px;
      height:32px;
      background-color:rgba(59,89,152,0.42);
      background-position:0 0;
    }
    #tbisose .twitter {
      width:32px;
      height:32px;
      background-color:rgba(64,153,255,0.42);
      background-position:0 -33px;
    }
    #tbisose .googleplus {
      width:32px;
      height:32px;
      background-color:rgba(228,69,36,0.42);
      background-position:-3px -66px;
    }
    #tbisose .pinterest {
      width:32px;
      height:32px;
      background-color:rgba(174,45,39,0.42);
      background-position:0 -95px;
    }
    #tbisose .rss {
      width:32px;
      height:32px;
      background-color:rgba(255,102,0,0.42);
      background-position:-3px -126px;
    }
    #tbisose li:hover .icon,
    .touch #tbisose li .icon {
      width:210px;
    }
    .touch #tbisose li .facebook,
    #tbisose li:hover .facebook {
      background-color:rgba(59,89,152,1);
    }
    .touch #tbisose li .twitter,
    #tbisose li:hover .twitter {
      background-color:rgba(64,153,255,1);
    }
    .touch #tbisose li .googleplus,
    #tbisose li:hover .googleplus {
      background-color:rgba(228,69,36,1);
    }
    .touch #tbisose li .pinterest,
    #tbisose li:hover .pinterest {
      background-color:rgba(174,45,39,1);
    }
    .touch #tbisose li .rss,
    #tbisose li:hover .rss {
      background-color:rgba(255,102,0,1);
    }
    </style> <ul id="tbisose"> <li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li> <li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li> <li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li> <li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li> <li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li> </ul>

• Ganti yang perlu diganti.