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.

Hover Efektli Mini Sosyal İkonlar >>

Mini Sosyal İkonlar

Tasarımı ve kullanılabilirliği ile göz kamaştıran bu mini sosyal ikonları eminim sizde web sitenizde kullanmak isteyeceksiniz.Üstelik bu ikonlar hover efektli ve bence hem yazılarınızın altında hemde slidebarınızda çok şık duracak.Kurulumu kolay olan mini sosyal ikonları web sitenizin istediğiniz her yerinde kullanabilirsiniz.İsterseniz hemen önizlemesini ve kodları sizlerle paylaşalım.

1.Örnek:



<ul class="spicesocialwidget"> <li class="facebook"> <a rel="nofollow" href="http://www.facebook.com/" rel="external" title="facebook"> </a></li> <li class="googleplus"> <a rel="nofollow" href="https://plus.google.com/" rel="external" title="googleplus"> </a></li> <li class="twitter"> <a rel="nofollow" href="http://twitter.com/" rel="external" title="twitter"> </a></li> <li class="rss"> <a rel="nofollow" href="http://feedburner.com/" rel="external" title="rss"> </a></li> <li class="linkedin"> <a rel="nofollow" href="http://www.linkedin.com/" rel="external" title="linkedin"> </a></li> <li class="youtube"> <a rel="nofollow" href="http://www.youtube.com/" rel="external" title="youtube"> </a></li> </ul> <style> ul.spicesocialwidget {float:right;} ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;} ul.spicesocialwidget li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZXdi4XiRfXhFC6bxmtAVm2wuY5bSVejX6eNWJzXLYz9DR649VOHa9O79NDPmnI0nLkAz24nArZqMjXkkw6qrhj5bt0Ei_5Vwd5w04Yg7RiIeMWQfJ6iKXuuGyrfjnJuOGn7WJ16wrIEI/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px} .ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZXdi4XiRfXhFC6bxmtAVm2wuY5bSVejX6eNWJzXLYz9DR649VOHa9O79NDPmnI0nLkAz24nArZqMjXkkw6qrhj5bt0Ei_5Vwd5w04Yg7RiIeMWQfJ6iKXuuGyrfjnJuOGn7WJ16wrIEI/s1600/spice-social-gadget-sprite.png' )} ul.spicesocialwidget li.facebook a{ background-position:0 0} ul.spicesocialwidget li.googleplus a{ background-position:-96px 0} ul.spicesocialwidget li.linkedin a{ background-position:-128px 0} ul.spicesocialwidget li.rss a{ background-position:-192px 0} ul.spicesocialwidget li.twitter a{ background-position:-256px 0} ul.spicesocialwidget li.youtube a{ background-position:-320px 0} ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px} ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px} ul.spicesocialwidget li.linkedin a:hover, #sidebar ul.spicesocialwidget li.linkedin a:hover{ background-position:-128px -32px} ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px} ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px} ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px} </style>

2.Örnek



<style> .social-follow ul li{border: 1px solid rgb(226, 226, 226);display:inline;float:left;overflow:hidden; margin-left: 5px;} .social-follow ul li .icon{background-image:url(https://googledrive.com/host/0B8D3MQmcZTyvU1AteFRZSjVLdWs);} .social-follow ul li a{background:#F1F1F1;float:left;transition:all .2s;-moz-transition:all .2s;-ms-transition:all .2s;-o-transition:all .2s;-webkit-transition:all .2s;width:30px;height:30px;} .social-follow .facebook{background-position: 0 0px !important;} .social-follow .facebook:hover{background-color:#3b5997; background-position:0px -30px !important;} .social-follow .twitter{background-position:-30px -60px !important;} .social-follow .twitter:hover{background-color:#00aced; background-position:-30px -90px !important;} .social-follow .g-p{background-position:-88px -60px !important;} .social-follow .g-p:hover{background-color:#dd4b39; background-position:-88px -90px !important;} .social-follow .pinterest{background-position:-60px -60px !important;} .social-follow .pinterest:hover{background-color:#cb2027; background-position:-60px -90px !important;} .social-follow .youtube{background-position:-120px -60px !important; width:55px !important;} .social-follow .youtube:hover{background-color:#ff0000; background-position:-120px -90px !important;} .social-follow .linkedin{background-position:-173px -61px !important;} .social-follow .linkedin:hover{background-color:#006699; background-position:-173px -91px !important;} .social-follow .rss{background-position:-204px -61px !important;} .social-follow .rss:hover{background-color:#ff6600; background-position:-204px -90px !important;} </style> <div class="social-follow"> <ul> <li><a class="facebook icon" href="http://www.facebook.com/408085549280135" target="_blank"></a></li> <li><a class="g-p icon" href="https://plus.google.com/u/0/+M%C3%BCcahitPolat1992/posts" rel="author" target="_blank"></a></li> <li><a class="twitter icon" href="http://www.twitter.com/Mcahitp" target="_blank"></a></li> <li><a class="pinterest icon" href="http://www.pinterest.com/mcahitpolat" target="_blank"></a></li> <li><a class="youtube icon" href="http://www.youtube.com/user/Birsorumolacak.blog" target="_blank"></a></li> <li><a class="linkedin icon" href="http://www.linkedin.com/in/Birsorumolacak" target="_blank"></a></li> <li><a class="rss icon" href="http://feeds.feedburner.com/Birsorumolacak" target="_blank"></a></li> </ul> </div>

Bu kodu Yerleşim > Gadget ekle ardından Html/Javascript bölümüne eklemeniz yeterli olcaktır.

Kod içerisinde http://www.facebook.com/ ve benzeri bölümlere kendi sosyal medya hesaplarınızı eklemeyi unutmayınız.Aksi takdirde sonuç alamazsınız.

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