Kodları yabancı bir siteden aldım.Aslında bu kodların yanında
abonelik formu ve
reader sayacı bulunmaktaydı.Sadeleştirerek sizlere
sosyal medya butonları'nı sunacağım.Dileyen internetten araştırıp orijinal halini bulabilir.
Kodlarımız
CSS3 ile oluşturulmuş ve butonlarımıza
hover efekti verilmiş.Hemen anlatıma geçiyorum.
Tasarım > Sayfa Öğeleri > Gadget Ekle > HTML/JavaScript
yukarıdaki işlemleri yaptıktan sonra aşağıdaki kodlarımızı gadgetımıza ekleyelim.
<style>ul.social { list-style: none; margin: 10px; overflow: hidden;}.social li { float: left; background: none !important; padding: 0 !important; margin: 0 8px;}.social li a { display: block; width: 50px; height: 40px; background: url("http://3.bp.blogspot.com/-QFjuAE2s8uU/T6kEOkYdGMI/AAAAAAAADRc/UrhMFF8_s0E/s1600/social.png") no-repeat transparent; text-indent: -99999em !important;-webkit-transition: ease-in 0.15s all; -moz-transition: ease-in 0.15s all; -o-transition: ease-in 0.15s all; -ms-transition: ease-in 0.15s all; transition: ease-in 0.15s all;}.social li a:hover { padding: 0 !important;}.social li.rssicon a { background-position: 0 0;border-right: 1px solid #e6e6e6;}.social li.twicon a { background-position: -50px 0;border-right: 1px solid #e6e6e6;}.social li.fbicon a { background-position: -100px 0;border-right: 1px solid #e6e6e6;}.social li.gicon a { background-position: -150px 0;}.social li.rssicon a:hover { background-position: 0 -50px;border-right: 1px solid #e6e6e6;}.social li.twicon a:hover { background-position: -50px -50px;border-right: 1px solid #e6e6e6;}.social li.fbicon a:hover { background-position: -100px -50px;border-right: 1px solid #e6e6e6;}.social li.gicon a:hover { background-position: -150px -50px;} </style> <div class="subicons"><ul class="social"> <li class="fbicon"><a href="http://facebook.com/websehri" rel="nofollow" target="_blank">FaceBook</a></li> <li class="twicon"><a href="http://twitter.com/ardaerakman" rel="nofollow" target="_blank">Twitter</a></li> <li class="gicon"><a href="https://plus.google.com/111946372959768014016" rel="nofollow" target="_blank">Google +</a></li> <li class="rssicon"><a href="http://feeds.feedburner.com/aerakmanBlog" rel="nofollow" target="_blank">Rss</a></li></ul> </div>
