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.