Membuat Profil Sosial Widget Efek Sliding untuk Blogger

Membuat Profil Sosial Widget Efek Sliding untuk Blogger - Dalam posting ini mas basir akan menjelaskan bagaimana menambahkan Css Sliding daftar ikon sosial bagi blogger. Dalam tutorial ini mas basir Dengan menggunakan widget ini Anda dapat menghubungkan media sosial Anda profil Facebook, Twitter dan Google Plus, Rss dan StumbleUpon.

Demo  All RSS Widget

1. Login ke blogger.com
2. Masuk ke bagian Layout / Design
3. Klik Tambahkan Widget.
4. Pilih HTML/Javascript.
5. Copy Kode dibawah ini dan Pastekan di HTML/Javascript.

<style>
#socialmenu_tblogging {
  margin:0;
  padding:0;
  width: 30em;
  height: 4.5em;
  overflow:hidden;
  }
#socialmenu_tblogging li {
  display:inline;
  list-style-type:none;
  }
#socialmenu_tblogging li a {
  display:block;
  float:left;
  text-decoration:none;
  margin:0;
  }
#socialmenu_tblogging li a img {
  opacity:0.7;
  margin:0.5em;
  border:0;
  float:left;
  }
#socialmenu_tblogging li a span {
  display:none;
  }
#socialmenu_tblogging li a:hover {
  background:transparent;
  }
#socialmenu_tblogging li a:hover span {
  width:7em;
  color:#aaa;
  display:block;
  cursor:pointer;
  float:left;
  }
#socialmenu_tblogging .h2 {
  margin:0 5px;
  padding:0;
  color:#fc0;
  font-variant:small-caps;
  font-size:1em;
  border:0;
  }
 
  </style>
  <ul id="socialmenu_tblogging">
  <li>
    <a href="https://www.facebook.com/TempatBlogging"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_w97eiKdJlLs28_wBv_j7kafFiNz8zLyoXyUVbbiUoTRdgBnOEItDv8g5cf9kFSQPgLmxSxIiqceY68xo2R9pQKQUs48QHM28ET2bIRo0xKYmySqni6iSyWjtb64nMqzv2_bNX7vAa20/s48/Facebook-icon_Tb.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/117086455111922412846"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl7ZxZh6cPuxduO8kfgglwMXFSPGohQ_BZtnFCC6J9pWo_u34oakwnlnUcKdMYIrS57QU0oUmLMasAlf4hDNGfRazmTe8Hw4i-Y7ww-zOxxWFYz94TOJA5YamFsel3_0tRyOEoAexZ8PQ/s48/Google-plus-icon_tb.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/TempatBlogging"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheUGAWPKc8r0RuplW8ifUb6SPQmwSutiLjIB9E19NBZV1WYrkEIcck3Ensn0_4jzD5hXlYufIRFQrH3jsq-s9wAzdwEOfmPNFrYpAlG9jcHUtlDVCRg_HDuAcAttyLayjKBszIxIOmLVs/s48/RSS-icon_tb.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/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWn2t9EVdyGGain_j8HHtaik8qoQSfAzYLSmip1pDLdzJ-jh8PHR3oXgYdmHHxIET9fE_IYCuwnKpoaqcxTNU6ZRARJb4_msHFLVyaXKzcD7ND-ldJVw0KAudy-3ongcD8okiZiZGjxA8/s48/StumbleUpon-icon_tb.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/TempatBlogging">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX1w85LIo1Ux-x-JVTfKteTlE_eCgts1oTC9a0lVDBkp_UYcxTohDQJVlgRzgg2_QvGwXTT724L8AIkRCVrzrn7WlXRCg67vXAIh8RF9Chs0BI_IK6FdJjaGZO3N9EbgYMekU_ryI6xwY/s48/Twitter-icon_tb.png" alt="twitter" width="50" height="50" title="twitter" />
     <span><br />
      <b class="h2">Twitter</b><br />
      add to twitter
     </span>
    </a>
   </li>
  </ul>

     6. Anda harus mengubah counter manual, hanya mengubah nomor warna merah sesuai dengan profil.

• Ganti TempatBlogging dengan Feedburner ID
• Ganti TempatBlogging dengan nama pengguna Facebook Anda
• Ganti TempatBlogging dengan Twitter Nama
• Ganti 117086455111922412846 dengan Google Anda ditambah ID
• Ganti Username dengan StumbleUpon Username 

     7. Save Edit HTML/Javascript

Sekian dulu Postingan Artikel kali ini yang membahas tentang Membuat Profil Sosial Widget Efek Sliding untuk Blogger, semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.

Share this post