Cara Membuat Social Media di Blog

 Cara Membuat Social Media di Blog

Selamat malam sobat,. gimana kabarnya baik kan alhamdulilah sekarang saya akan memposting cara membuat Social Media di dalam blog anda dimana di Social Media ini terdapat fitur" kerenya
antara lain Facebook, Twitter, Google+,  Pinterest, dan yg terahkir RSS,. langsung saja saya jelaskan kelebihanya Social Media ini dari CSS dan saya akan membagikanya ke pda anda yg belum punya atau masih newbie,.

Fitur dari Widget ini :

• Meliputi empat tombol jejaring sosial yang sering digunakan dan di tambahkan di dalam ikon RSS
• Efek memperluas ke samping
• Penggunaan CSS seprite
• Sangat rapih dan indah di pandang
• kode asli dari CSS

Sekarang saya akan jelaskan cara memasang kode di bawah ini

1. Buka blog kalian biar cepat Klik Disini
2. Masuk ke tata letak
3. Tambahkan Gadget
4. Pilih HTML/Javascript
5. Lalu masukkan kode di bawah ini
6. 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/AVvXsEi9WAeKQ1F6CMAUndDfAO216hpNxcyfvrRNwdYsEk0AhnREhJj6DkOvXE9qd2WjhsJcjcIraQitz_VBK_iA2Ag4yPYZOspMOC2a_sGiPQocPLXgBfYhEcdwNR8VNS6tR41rtJAgTsUfuio/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://abrihandany.blogspot.com/2013/04/kali-ini-saya-akan-memberi-tutor-kepada.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Perhatian: kode yg berwarna merah/ # itu adalah alamat Social anda,. selamat menikmati keindahan blog anda salam sukse