Sekmeli Sosyal Medya Widget

Sekmeli Sosyal Medya Eklentisi

Arkadaşlar bugüne kadar birçok eklenti paylaştım.Fakat bence içlerinde en kullanışlı olanı bence bu eklenti.Neden diye soracak olursanız birçok sosyal medya eklentisi hem bir arada hemde sekmeli olduğu için fazla yer kaplamamış oluyor.Yani birçok sosyal medya hesabınızı bir arada kullanma fırsatı bulmuş oluyorsunuz.Vakit kaybetmeden hemen önizlemesini ve kodlarını sizinle paylaşmak istiyorum.

<style> /* Tabbed Social Widget By Helper Blogger - helperblogger.com */ /* CSS Code Start */ ul.tabs { padding: 7px 0; font-size: 0; margin: 0; list-style-type: none; text-align: left; } ul.tabs li { display: inline; margin: 0; margin-right: 3px; /*distance between tabs*/ } ul.tabs li a { font: normal 12px Verdana; text-decoration: none; position: relative; padding: 25px 10px 0px 10px; border: 1px solid #CCC; border-bottom-color: #B7B7B7; color: #000; background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x; border-radius: 3px 3px 0 0; outline: none; } ul.tabs li a:visited { color: #000; } ul.tabs li a:hover { border: 1px solid #B7B7B7; background: #F0F0F0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK9ojTdGS0abG0steH2xcleIDWoDZrRTK7Lu1TdofushYjwNG3NtrsoxXuuIVWKZiMU6mTn2Er9s4fMYDlyxjXNJFrVAiBzz0CT5tnZl3uhDSikdGe60_FQChY8_l6PlwnOBoEkd255-4/s1600/hb-tabbg.gif) 0 -50px repeat-x; } ul.tabs li.selected a, ul.tabs li.selected a:hover { position: relative; top: 0px; font-weight: bold; background: white; border: 1px solid #B7B7B7; border-bottom-color: white; } ul.tabs li.selected a:hover { text-decoration: none; } div.tabcontents { border: 1px solid #B7B7B7; padding: 10px; background-color: #FFF; border-radius: 0 3px 3px 3px; margin-top: -7px; } /* Tabbed Social Widget By Helper Blogger - helperblogger.com */ /* End Code Start */ </style> <script src="http://helperblogger.ucoz.com/code/hb-tabbed-social-widget.js" type="text/javascript"></script> <ul class="tabs"> <li class="selected"> <a href="#view1"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV6GxTaN6FWQlj-9W7H8E5imxRHXMeUPMrQl2aCGezcbf0v-_EBp0qV9nyQDnOs1KgOfa6waOHv6ny4NBDoKDqLHdMKtIF7C255mF36xwjQ6OEvs_FZ8XTZSSL7V54dgYHFCQHlEoIw6s/s1600/helperblogger.com-fb.png" height="32" width="32" /> </a> </li> <li> <a href="#view2"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOGQolhMSvxbAFgW1K7VaCyZOS0UL1dffq7vwL6aInN-W6gytTL3STeP4zkbP3Nw1pKqJgTxSjXYN32YN0FlOnyI5oa1LqIePVBThFxhAYHkr18yBwKmzoX0YpLFCG-QunjOXvQAUZFMg/s1600/helperblogger.com-twitter.png" height="32" width="32" /> </a> </li> <li> <a href="#view3"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7LXAz2Yt-bMFFZguqYUowY2Kp13nAojFTjfryBQ_jnHjq73zxcX7aLYijy4NZXYspfsL4oqrJSUDPDJkJ1jXR1xbVBNGLJ2w3Ngtm4Kpmys3ukx717Dxj89H3TDMVwoMXMLmzgHWaYnI/s1600/helperblogger.com-gplus.png" height="32" width="32" /> </a> </li> <li> <a href="#view4"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkhh07FhMhW9l44gdUv8bGqKlngG5JNRAlKLprmFwyS-oA0fza-6kre_WXA_pSUHy4LLBP20QCG1eCojoeDXIVSjaqd3NnNbmo909RC1cDMZIElEbWfRsG-Cta7f3wM6qVbUF2eIlwyrc/s1600/helperblogger.com-pinterest.png" height="32" width="32" /> </a> </li> </ul> <div class="tabcontents"> <div id="view1"> <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F408085549280135&width=285&height=180&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false&appId=409936535724253" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:250px;" allowtransparency="true"></iframe> </div> <div id="view2"> <div id="twitter-box"> </div> <script> var tw_user = 'Mcahitp'; var tw_width = 260; var tw_height = 250; var no_face = 8; (function() { var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true; tw_box.src = '//helperblogger.ucoz.com/code/hb-twitter.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box); })(); </script> </div> <div id="view3"> <script src="https://apis.google.com/js/platform.js" async defer></script> <div class="g-person" data-width="250" data-href="//plus.google.com/u/0/+MücahitPolat1992/posts" data-layout="landscape" data-rel="author"> </div> </div> <div id="view4"> <a href="http://pinterest.com/mcahitpolat/"> <img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /> </a> </div> <div style="clear: both; text-align: right;"> <span style="font-size: xx-small;"></span> </div> </div>


Kod içerisindeki değiştirilmesi gereken noktalar:

1/Facebook için 408085549280135 yazan yere kendi Id'nizi
2/Twitter için Mcahitp yazan yere kendi kullanıcı adınızı
3/Google+ için +MücahitPolat1992/posts yazan yere kendi Id'nizi
4/Pinterest için mcahitpolat/ yazan yere kendi Id'nizi 


Yazmayı sakın unutmayın aksi takdirde sonuç alamazsınız.

Yapamadığınız Noktaları  Butonunu kullanarak mesaj gönderebilirsiniz.