Blogger Sosyal Menü Eklentisi//Hover Efektli

Profosyonel Sosyal Menü[Hover Efektli]

Çok profosyonel şekilde hazırlanmış bu hover efektli sosyal menü butonları ile blogunuza renk katacaksınız.Sayfanızın sol tarafında hiç yer kaplamayan bu sosyal menüyü sitenize eklemek ise çok basittir.Blogger yerleşim bölümünden gadget ekle dedikten sonra Html/javascript bölümüne eklemeniz yeterli olacaktır.




<div id='social-sidebar'> <ul> <li> <a class='entypo-twitter' href='https://twitter.com/Mcahitp' rel="external nofollow"> <span>Twitter</span> </a> </li> <li> <a class='entypo-gplus' href='https://plus.google.com/u/0/100119104645461238989/posts' rel="external nofollow"> <span>Google+</span> </a> </li> <li> <a class='entypo-tumblr' href='http://www.tumblr.net/mpolat1992/' rel="external nofollow"> <span>Tumblr</span> </a> </li> <li> <a class='entypo-facebook' href='https://www.facebook.com/profile.php?id=1027816099' rel="external nofollow"> <span>facebook</span> </a> </li> <li> <a class='entypo-rss' href='http://feeds.feedburner.com/BilgiHakkndaAradnzHerey' rel="external nofollow"> <span>Feedburner</span> </a> </li> </ul> </div> <style type='text/css'> /*<![CDATA[*/ @charset "utf-8"; /* CSS Document */ /* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://www.digitalhubinc.com/---------- */ /* ---------- http://weloveiconfonts.com/ ---------- */ @import url(http://weloveiconfonts.com/api/?family=entypo); [class*="entypo-"]:before { font-family: 'entypo', sans-serif; } /* ---------- GENERAL ---------- */ #social-sidebar a { text-decoration: none; } #social-sidebar ul { list-style: none; margin: 0; padding: 0; } /* ---------- Social Sidebar ---------- */ #social-sidebar { left: 0; margin-top: -75px; /* (li * a:width) / -2 */ position: fixed; top: 50%; } #social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; } #social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; } #social-sidebar ul li a { background: #121212; color: #fff; display: block; height: 50px; font-size: 18px; line-height: 50px; position: relative; text-align: center; width: 50px; } #social-sidebar ul li a:hover span { left: 130%; opacity: 1; } #social-sidebar ul li a span { border-radius: 3px; line-height: 24px; left: -100%; margin-top: -16px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; padding: 4px 8px; position: absolute; -webkit-transition: opacity .3s, left .4s; -moz-transition: opacity .3s, left .4s; -ms-transition: opacity .3s, left .4s; -o-transition: opacity .3s, left .4s; transition: opacity .3s, left .4s; top: 50%; z-index: -1; } #social-sidebar ul li a span:before { content: ""; display: block; height: 8px; left: -4px; margin-top: -4px; position: absolute; top: 50%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 8px; z-index: -2; } #social-sidebar ul li a[class*="twitter"]:hover, #social-sidebar ul li a[class*="twitter"] span, #social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; } #social-sidebar ul li a[class*="gplus"]:hover, #social-sidebar ul li a[class*="gplus"] span, #social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; } #social-sidebar ul li a[class*="tumblr"]:hover, #social-sidebar ul li a[class*="tumblr"] span, #social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; } #social-sidebar ul li a[class*="facebook"]:hover, #social-sidebar ul li a[class*="facebook"] span, #social-sidebar ul li a[class*="facebook"] span:before { background: #234999; } #social-sidebar ul li a[class*="rss"]:hover, #social-sidebar ul li a[class*="rss"] span, #social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; } /*]]>*/ </style>



Kod içerisindeki gerekli ayarlamaları yapmayı unutmayınız.Yapamadığınız bir yer olursa yorum kısmında belirtiniz.

Sosyal Paylaşım Butonları>>En güncel

Sitenize Twitle /+1 le/ Ve Beğen Butonu Ekleyin

Bu blogger eklentisi sitenizi hem facebook'da hem twitter da hem de google+ da beğendirme fırsatı sunuyor çok şık bir görünüme sahip bu kod sayesinde ziyaretçi sayınız oldukça artacak.

<!--Kod Dostu Social Menu BAŞLA--> <div style="border:1px solid #4891c1;box-shadow: 0px 0px 4px #888888;position:relative;width:300px;height:250px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLQwVUjTnO9H0U_st3n8BOmqwZPzQrYEfaNDLPHzdfDk-UISEJNHMFwaPFNP55f_Nx53pwoQsckW-DMYW5iDN1DH57fuaiEPtgGfUvk2cjbIcOGb8nSBqzAr8v36VAmYVzA-x0TZOrFuYT/s1600/fg.png) no-repeat;overflow:hidden !important;"> <div style="position:absolute;top:32px;left:215px;"> <g:plusone annotation="none"></g:plusone></div> <div style="position:absolute;top:112px;left:228px;width:60px;overflow:hidden;"> <div class="fb-like" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false" data-font="arial"> </div> <div id="fb-root"> </div> </div> <div style="position:absolute;top:179px;left:130px;"> <a href="https://twitter.com/share" class="twitter-share-button" data-via="koddostu" data-lang="en" data-count="none">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> <!--http://siteneeklekodlari.blogspot.com--> <script Language='Javascript'> <!-- Bu Kısımları Değiştirmeyin --> <!-- document.write(unescape('%3C%61%20%73%74%79%6C%65%3D%22%70%6F%73%69%74%69%6F%6E%3A%61%62%73%6F%6C%75%74%65%3B%62%6F%74%74%6F%6D%3A%30%70%78%3B%72%69%67%68%74%3A%2D%36%31%70%78%3B%64%69%73%70%6C%61%79%3A%62%6C%6F%63%6B%3B%6D%61%72%67%69%6E%3A%30%70%78%3B%70%61%64%64%69%6E%67%3A%30%70%78%3B%62%6F%72%64%65%72%3A%6E%6F%6E%65%3B%68%65%69%67%68%74%3A%31%38%70%78%3B%77%69%64%74%68%3A%39%30%70%78%3B%62%61%63%6B%67%72%6F%75%6E%64%3A%74%72%61%6E%73%70%61%72%65%6E%74%20%75%72%6C%28%27%68%74%74%70%3A%2F%2F%69%6D%67%35%36%30%2E%69%6D%61%67%65%73%68%61%63%6B%2E%75%73%2F%69%6D%67%35%36%30%2F%31%38%35%2F%6B%64%32%2E%70%6E%67%27%29%20%6E%6F%2D%72%65%70%65%61%74%3B%6F%70%61%63%69%74%79%3A%30%2E%35%3B%66%69%6C%74%65%72%3A%61%6C%70%68%61%28%6F%70%61%63%69%74%79%3D%35%30%29%3B%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%73%69%74%65%6E%65%65%6B%6C%65%6B%6F%64%6C%61%72%69%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%32%30%31%32%2F%30%35%2F%73%69%74%65%6E%65%2D%62%65%67%65%6E%2D%31%6C%65%2D%74%77%65%65%74%6C%65%2D%62%6F%6C%75%6D%75%2D%65%6B%6C%65%2E%68%74%6D%6C%22%20%63%6C%61%73%73%3D%22%67%65%62%65%70%64%22%3E%3C%2F%61%3E%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%68%74%74%70%73%3A%2F%2F%61%70%69%73%2E%67%6F%6F%67%6C%65%2E%63%6F%6D%2F%6A%73%2F%70%6C%75%73%6F%6E%65%2E%6A%73%22%3E%7B%6C%61%6E%67%3A%20%27%74%72%27%7D%3C%2F%73%63%72%69%70%74%3E%3C%73%63%72%69%70%74%3E%28%66%75%6E%63%74%69%6F%6E%28%64%2C%73%2C%69%64%29%7B%76%61%72%20%6A%73%2C%66%6A%73%3D%64%2E%67%65%74%45%6C%65%6D%65%6E%74%73%42%79%54%61%67%4E%61%6D%65%28%73%29%5B%30%5D%3B%69%66%28%64%2E%67%65%74%45%6C%65%6D%65%6E%74%42%79%49%64%28%69%64%29%29%72%65%74%75%72%6E%3B%6A%73%3D%64%2E%63%72%65%61%74%65%45%6C%65%6D%65%6E%74%28%73%29%3B%6A%73%2E%69%64%3D%69%64%3B%6A%73%2E%73%72%63%3D%22%2F%2F%63%6F%6E%6E%65%63%74%2E%66%61%63%65%62%6F%6F%6B%2E%6E%65%74%2F%74%72%5F%54%52%2F%61%6C%6C%2E%6A%73%23%78%66%62%6D%6C%3D%31%26%61%70%70%49%64%3D%33%35%33%38%31%33%35%30%34%36%36%31%31%35%33%22%3B%66%6A%73%2E%70%61%72%65%6E%74%4E%6F%64%65%2E%69%6E%73%65%72%74%42%65%66%6F%72%65%28%6A%73%2C%66%6A%73%29%7D%28%64%6F%63%75%6D%65%6E%74%2C%27%73%63%72%69%70%74%27%2C%27%66%61%63%65%62%6F%6F%6B%2D%6A%73%73%64%6B%27%29%29%3B%3C%2F%73%63%72%69%70%74%3E%0A%3C%73%74%79%6C%65%3E%2E%67%65%62%65%70%64%3A%68%6F%76%65%72%7B%72%69%67%68%74%3A%30%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%7D%3C%2F%73%74%79%6C%65%3E')); //--> </Script> </div> <!--Kod Dostu Social Menu BİTİR-->

• Gerekli alanları değiştirmeyi unutmayın.