Cara Membuat Widget Sosial Media

Cara Membuat Widget Sosial Media

Assalamualaikum teman-teman .. hari ini saya akan membagi ilmu trik dan tips cara membuat widget sosial media yang keren  oke langsung saja tanpa basa basi.. langkah langkahnya Sbb :

  1. Login Blogger
  2. Tata letak
  3. Tambahkan Widget
  4. HTML/Javascript, nah masukin kode berikut

<style type='text/css'>
#saye{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#saye a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#saye p{position:relative; height:38px; cursor:pointer; padding: 0 !important;list-style:none;}
#saye .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:1.5px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/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;}
#saye p:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#saye .icon{overflow:hidden; color:#fafafa;}
#saye .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#saye .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#saye .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#saye .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#saye .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#saye p:hover .icon,
.touch #saye p .icon{width:97%;}
.touch #saye p .facebook, #saye p:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #saye p .twitter, #saye p:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #saye p .googleplus, #saye p:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #saye p .pinterest, #saye p:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #saye p .rss, #saye p:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<div id="saye">
<ul>
<p data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/ID anda" data-alt="Follow us on Facebook">Ikuti Saya di Facebook</a></p>
<p data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/ID_anda">Ikuti Saya di Twitter</a></p>
<p data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/ID anda">Ikuti Saya di Google+</a></p>
<p data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://pinterest.com/jasridm/">Ikuti Saya di Pinterest</a></p>
<p data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/Pri-donlot">Update melalui RSS</a></p>
</ul>
</div>

ganti Link yang berwarna merah sesuai Link2 anda :D makasih dan sekian :D

Demo

Sumber : cyber-jm.blogspot.com
Anda sedang membaca artikel tentang Cara Membuat Widget Sosial Media dan anda bisa menemukan artikel Cara Membuat Widget Sosial Media ini dengan url http://barqahs.blogspot.com/2013/05/cara-membuat-widget-sosial-media.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Widget Sosial Media ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Cara Membuat Widget Sosial Media sebagai sumbernya.

Related Post


Category Article

One Response to “Barqahs Blog”

What's on Your Mind...

Google+ Followers

Follow by Email

Copyright © 2013 Barqahs BlogShare For Tricks Blog | Template Blog | CSS | JQuery | Alur Cerita Naruto | Alur Cerita Bleach | Alur Cerita Fairy Tail | Alur Cerita One Piece. Design by Gudang Blog.