Social Media Widget Bergulir untuk Blogger

Tweet

Social Media Widget Bergulir untuk Blogger - Social Media memanglah seperti sebuah keseharusan untuk sebauh situs. Banyak yang sangat berterima kasih dengan adanya social media sebagai pendukung untuk memperbanyak pengunjung dan memberitahukan update informasi dari sebuah situs. Jadi tunggu apalagi?

Cara Buat Social Media Widget Bergulir untuk Blogger

1. Buka akun blogger Anda
2. Masuk ke menu tata letak > add gadget > HTML/Javascript
3. Copas kode berikut ini :

<style>
#socialmenu_btrix {
  margin:0;
  padding:0;
  width: 30em;
  height: 4.5em;
  overflow:hidden;
  }
#socialmenu_btrix li {
  display:inline;
  list-style-type:none;
  }
#socialmenu_btrix li a {
  display:block;
  float:left;
  text-decoration:none;
  margin:0;
  }
#socialmenu_btrix li a img {
  opacity:0.7;
  margin:0.5em;
  border:0;
  float:left;
  }
#socialmenu_btrix li a span {
  display:none;
  }
#socialmenu_btrix li a:hover {
  background:transparent;
  }
#socialmenu_btrix li a:hover span {
  width:7em;
  color:#aaa;
  display:block;
  cursor:pointer;
  float:left;
  }
#socialmenu_btrix .h2 {
  margin:0 5px;
  padding:0;
  color:#fc0;
  font-variant:small-caps;
  font-size:1em;
  border:0;
  }
 
  </style>
  <ul id="socialmenu_btrix">
  <li>
    <a href="https://www.facebook.com/ID ANda Disini"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzOrMfGD9nKNkfA9tGekQyFeHwq8INhV7nOHy6smC0vik9Hcm_bpAXwlGXh2-1-CyWhqo7Xuu60Tz_d9mhLbTOvMPqZ16D0XBrurE0DTq3fOV6PH0iw-2sjwWnZyE_RvmMu-kIozW_AmQ/s1600/Facebook-icon_btrix.png" alt="facebook" width="50" height="50" title="Facebook" />
     <span><br />
      <b class="h2">Facebook</b><br />
      Add to facebook
     </span>
    </a>
   </li>
   <li>
    <a href="https://plus.google.com/ID ANda Disini"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvkv-V8ZzNC_cgXc47P8V_soh2Xw4-6HAK9NUun-37xLyw2xYzquY-yrq2Lh1pg3bOKLM5CImWuRYhUO84BLd8ak5V6zBoaHZnl7aWyCb8wmd-FpBqAlfDjtwLB18PHIF1G9bUXWnh-vs/s1600/Google-plus-icon_btrix.png" alt="Google plus" width="50" height="50" title="=Google plus" />
     <span>
      <br />
      <b class="h2">Twitter</b><br />
      Add to twitter
     </span>
    </a>
   </li>
   <li>
    <a href="http://feeds.feedburner.com/ID ANda Disini"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJJewC5ao5aITax1H33jmEBtsZuczq06sRQ75crKY_aiUf89xcsbphXsjCYpXzg3QekI8yKqm5iiKYG2jGekERlkx8C1gfCMMpzcedgnSdeJrXsqexjJGHHJHZi2Q6mhMkTVioV_uBPWg/s1600/RSS-icon_btrix.png" alt="Rss" width="50" height="50" title="Rss" />
     <span><br />
      <b class="h2">Rss Feed</b><br />
        Subscribe
     </span>
    </a>
   </li>
   <li>
    <a href="http://stumbleupon.com/ID ANda Disini"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgES30aZ6D99sa6VbjUHkQ099JKH9stYaWG_0QOLKo3T-uKVcrooV_rSft2jl9AMiDYxP-Cy9V3x0Bc266VnDGJRbw3yvnc8uQHl5yjIyXfN_yr_G4J2sJtp_98WTz-kCpYA2kvo7Ro6TA/s1600/StumbleUpon-icon_btrix.png" alt="Stumbleupon" width="50" height="50" title="Stumbleupon" />
     <span><br />
      <b class="h2">Stumbleupon </b><br />
      add to stumble
     </span>
    </a>
   </li>
    <li>
    <a href="https://twitter.com/ID ANda Disini">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0mGbsCuHDHibdHUPGRuQ0yA6g_uwFcx8r9J3_wzU8ayRwGFi7P2EmGmiCj6lIN77mN621OCwtnskRikqFIXq5blPuqSsTpZhTXTmYTn-fez4FOz9oKlnhj86IRHOAJKtmPFPnlcrvVTA/s1600/Twitter-icon_btrix.png" alt="twitter" width="50" height="50" title="twitter" />
     <span><br />
      <b class="h2">Twitter</b><br />
      add to twitter
     </span>
    </a>
   </li>
  </ul> 

Keterangan :

• Ganti kode yang diwarnai sesuai dengan kebutuhan Anda.

Maka, demikianlah artikel Social Media Widget Bergulir untuk Blogger semoga dapat membantu Anda untuk lebih paham. Terima kasih telah membaca artikel diatas.