Cara Membuat Widget Social Media di Blog

Hai sahabat blogger !!! Sekarang, aq akan posting tentang Cara memasang widget sosial media di blog, dengan memasang widget sosial media pada blog, sobat dapat mengundang pembaca/pengunjung blog untuk terlibat dalam jejaring sosial sobat, dan tentunya dapat meningkatkan reputasi blog sobat. Namun hal itu tak akan terjadi jika pengunjung tidak mengklik tombol follow pada widget jaring sosial sobat, dan mereka hanya akan mengklik atau mengikuti update blog sobat kecuali mereka merasa atau menemukan hal yang berguna dan bermanfaat pada blog sobat. Widget ini tidak otomatis dapat meningkatkan follower blog sobat diberbagai jaring sosial tapi setidaknya kita dapat memancing mereka untuk setidaknya mengklik sekali pada tombol dengan membuat/menampilkan tombol widget ini lebih menarik dan memiliki efek hover yang meluas, mulus dan rapih . Efek hover ini kita buat dengan bantuan CSS3 transisi.

Fitur Dari Widget Ini :
  • Meliputi empat tombol jejaring sosial yang paling sering digunakan dan ditambah ikon RSS
  • Efek memperluas ke samping
  • Penggunaan CSS sprite
  • Sangat rapi dan bersih


Tidak ada JavaScript. JQuery No. Ini murni CSS
sudah jelas yaa.. oke deh, langsung ke caranya.. :)

  1. Login ke BLOGGER.
  2. Masuk ke Dashboard.
  3. Masuk ke tata letak
  4. Tambah Gadget
  5. pilih HTML / JavaScript
  6. Lalu Masukan Kode Di Bawah Ini..
  7. 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/AVvXsEhtcBehIgf-KzpaFHzyDZs_VciBibok8uGd9uJC7_91tSsqgFp-aHws8SLCMPpT5DAGHqpHhlKrX5SPtyDW4irepRQc8X_Oe_PacecoCTa60IK8Vg2oOUTTi86lM7ck65JVM4dLlUkvSnE/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><small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="

http://fahrurrozi18.blogspot.com/2013/09/cara-membuat-widget-social-media-di-blog.html" target="_blank" title="Widget Follow Us">+ Get Widget </a></div></small>
Keterangan :
  • Kode yang berwarna Merah, ganti dengan masing-masing alamat social media sobat..
Dan hasilnya akan seperti di bawah ini... :)


Ditulis Oleh : Unknown ~ Tips and Trick, Download, Widget and Gadget, and Other Article

Fahrur Rozi18 Sobat sedang membaca artikel tentang Cara Membuat Widget Social Media di Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terima kasih.

:: Get this widget ! ::

9komentar:

  1. makasih ya gan infonya (Y)
    ijin dipake dan share ye
    hehehe :D
    http://marahman18.blogspot.com/

    BalasHapus
    Balasan
    1. Oke gan :)
      Silahkan... :) Semoga bermanfaat ya :)

      Terima kasih sdh berkunjung :)

      Hapus
  2. tks sob untuk informasinya...menjadikan lebih banyak belajar dan moga bermanfaat
    http://cooverbox.blogspot.com/

    BalasHapus
    Balasan
    1. Sama-sama sob, salam knal ya :) Semoga bermanfaat.. amin.. :)

      Terima kasih sdh berkunjung disini :)

      Hapus
  3. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  4. SUKSES, cssnya trpasang sob..!

    BalasHapus
    Balasan
    1. selamat deh kalo sukses :)
      thx udah mampir ya :)

      Hapus
  5. Terima kasih banyak infonya sangat bermanfaat..

    BalasHapus
Silahkan Menjalin Silaturahmi dengan Berkomentar
Harus diingat ! :
1. Dilarang berkomentar dengan Kata-kata Kasar/Kotor.
2. Dilarang berkomentar SPAM dan Memasang Link Aktif.
3. Komentar dengan Link Aktif akan dihapus sesegera mungkin.
4. Berkomentarlah sesuai Topik/Artikel.
5. Berkomentarlah dengan Sopan.
6. Sobat diperbolehkan Copy-Paste artikel namun jangan lupa untuk menyertakan link sumbernya.

Tulislah Setiap kata dengan penuh makna Kesopanan.
Salam dari saya FahrurRozi18.