Sliding Css Widget Profil Sosial untuk Blogger

Dalam posting ini saya akan menjelaskan bagaimana cara menambahkan daftar ikon sosial Css sliding untuk blogger. Dengan menggunakan widget Profil Sosial Sliding Css Anda dapat menautkan profil media sosial Anda Facebook, Twitter dan Rss Google plus, Rss dan StumbleUpon. Periksa demo dari tautan di bawah ini.

bloggertrix

1. Masuk ke Blogger → Dashborad
2. Klik pada Drop Down Menu dan pilih Layout
3. Tambahkan Gadget HTML / JavaScript
4. Rekatkan kode di bawah ini di dalamnya.

<style> 
#socialmenu_btrix { 
  margin: 0; 
  bantalan: 0; 
  lebar: 30em; 
  tinggi: 4.5em; 
  overflow: disembunyikan; 
  } 
#socialmenu_btrix li { 
  display: inline; 
  daftar-gaya-jenis: tidak ada; 
  } 
#socialmenu_btrix li a { 
  display: block; 
  mengapung: kiri; 
  teks-dekorasi: tidak ada; 
  margin: 0; 
  } 
#socialmenu_btrix li a img { 
  opacity: 0.7; 
  margin: 0,5em; 
  perbatasan: 0; 
  mengapung: kiri; 
  } 
#socialmenu_btrix li span { 
  display: none; 
  } 
#socialmenu_btrix li a: hover { 
  background: transparan;
  } 
#socialmenu_btrix li a: hover span { 
  width: 7em; 
  warna: #aaa; 
  display: blok; 
  kursor: pointer; 
  mengapung: kiri; 
  } 
#socialmenu_btrix .h2 { 
  margin: 0 5px; 
  bantalan: 0; 
  warna: # fc0; 
  varian font: huruf kecil; 
  ukuran font: 1em; 
  perbatasan: 0; 
  } 

  </style> 
  <ul id = "socialmenu_btrix"> 
  <li> 
    <a href="https://www.facebook.com/ https : // www . facebook . com /http : // 1 . bp . blogspot . com / - 4jtnfUcKGTs / UX3zAl1 - YKI /AAAAAAAAAg0 / OKrix7i3Z60 / s1600 / Facebook - ikon _ btrix . png "alt =" facebook "width =" 50 "height =" 50 "title =" Facebook "/> https : // plus .google . com / http : // 3Username "> <img src = "http://1.bp.blogspot.com/-4jtnfUcKGTs/UX3zAl1-YKI/AAAAAAAAAg0/OKrix7i3Z60/s1600/Facebook-icon_btrix.png "alt =" facebook "width =" 50 "title =" Facebook "

      <b class = "h2"> Facebook </b> <br /> 
      Tambahkan ke facebook 
     </span> 
    </a> 
   </li> 
   <li> 
    <a href = "https://plus.google.com/ Nama pengguna "> <img src ="http://3.bp.blogspot.com/-r2ZOj6CKteQ/UX3zAknXOMI/AAAAAAAAAgw/BbvKkmh1XPs/s1600/Google-plus-icon_btrix.png "alt =" Google plus "width =" 50 " height = "50" title = "= Google plus" />      <span>       <br />       <b class = "h2"> Twitter </b> <br />       Tambahkan ke twitter      </span>     </a>    < / li>    <li>     <a href = "http://feeds.feedburner.com/ . bp . blogspot . com / -r2ZOj6CKteQ / UX3zAknXOMI / AAAAAAAAAgw / BbvKkmh1XPs / s1600 /Google - plus - ikon _ btrix . png "alt =" Google plus" width = "50" height = "50" title = "= Google plus"/> http : // feed . feedburner . com / 








http : // 4 . bp . blogspot . com / - rPhGZVoCwWM /Nama Pengguna"> <img src =" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaCSWFIYsE1mQ8utJgHphiE4Z4gE2A6UXZNvyJUXTc3BWAsgi4oFNhxEfjB6mQiuIZ2OqjVfNmaGQqi_5dDvn6G45dOpXQehITa-Gg8AwgCcOy_mFoyWLJB98N3OQt4lUSS0armau5MVE/s1600/RSS-icon_btrix.png "alt =" ketinggian = 50 "lebar =" "=" "50" title = "Rss" />      <span> <br />       <b class = "h2"> Umpan Rss </b> <br />         Berlangganan      </span>     </a>    </li>    <li >     <a href="http://stumbleupon.com/ Nama Pengguna "> <img src = "http://3.bp.blogspot.com/-kw_a3_BIjWM/UX3zBNxOoDI/AAAAAAAAAAhA/iuGY6nncFSw/s1600/StumbleUpon-px "alt =" Stumbleupon "width =" 50 "height =" 50 "title =" Stumbleupon "/>      <span> <br />       <b class = "h2"> Stumbleupon </b> <br />       tambahkan ke stumble      </span>     </a>    </li>     <li>UX3zArv2 - SI /AAAAAAAAAg4 / E0Bc9YcNGGg / s1600 / RSS - ikon _ btrix . png "alt =" Rss" width = "50" height = "50" title = "Rss"/> http : // stumbleupon . com / http: // 3 . bp . blogspot . com / - kw _ a3 _ BIjWM / UX3zBNxOoDI /AAAAAAAAAhA / iuGY6nncFSw / s1600 / StumbleUpon







- ikon _ btrix . png "alt =" Stumbleupon" width = "50" height = "50" title = "Stumbleupon"/> https : // twitter . com / 







    <a href="https://twitter.com/ http : // 1 . bp . blogspot . com / -WeWbdij6AL4 / UX3zBfWhwWI / AAAAAAAAAhE / ooow8EsfxnA / s1600 /Twitter - ikon _ btrix . png "alt =" twitter "width =" 50 "height =" 50 "title =" twitter "/>Nama Pengguna "> 
     <img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT52jJ2OyTWMArSzdWerQeBErHuucCOyfbTN_MOvkPWTPYVV7En5GTdQYbsoVvlXcgnBCwD6X_xjfC7KnWeApm4JqQHVnOKINSjavU9lT2OBjymO7vZLyXBiYkkEip-fqBVbv0X4sEhWg/s1600/Twitter-icon_btrix.png" alt = "twitter" width = "50" height = "50" title = "twitter" />      <span> <br />       <b class = "h2"> Twitter </b> <br />       tambahkan ke twitter      < / span>     </a>    </li>   </ul> 

Anda harus mengubah penghitung secara manual, cukup ubah nomor warna merah sesuai profil.

Ganti  Nama  Pengguna dengan ID Feedburner Anda 

Ganti  Nama  Pengguna dengan nama pengguna Facebook Anda

Ganti  Nama  Pengguna dengan Nama Pengguna Twitter Anda

Ganti Nama  Pengguna  dengan Google plus ID Anda

Ganti Nama  Pengguna  dengan Nama Pengguna StumbleUpon Anda

5. Sekarang simpan HTML / Javascript'Anda selesai.