Blogger Soldan Açılan Sosyal Sevimli Butonlar Eklentisi

Blogger Soldan Açılan Sosyal Sevimli Butonlar Eklentisi

 

Blogger için kullanacağını bu eklenti ilk olarak jquery eklenti olduğunu unutmayın neden bunu ilk söylediğimi deneyimli arkadaşlar bilir ama bilmeyenler için söylüyorum jquery eklentileri eğerki blogunuzda var ise bu eklenti ile çakışabilir ve buda eklenti çalıştırmaz duruma getirir.

Hoş bir eklenti.

Blogger Paneline Girin.

1- Yerleşim Tıklıyoruz > 

2- Gatget Ekle > 

3- HTML/JavaScript 

dedikten sonra aşağıdaki kodları içersine yerleştiriyoruz.

<style type="text/css"> ul#social { position: fixed; margin: 0px; padding: 0px; top: 10px; left: 0px; list-style: none; z-index:9999; } ul#social li { width: 100px; } ul#social li a { display: block; margin-left: -2px; width: 100px; height: 70px; background-color:#fff; background-repeat:no-repeat; background-position:center center; border:1px solid #AFAFAF; -moz-border-radius:0px 10px 10px 0px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-top-right-radius: 10px; -moz-box-shadow: 0px 4px 3px #000; -webkit-box-shadow: 0px 4px 3px #000; } ul#social .twitter a{ background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinQOuzOkiWcDPOMpvwwv6M62uCveweuFYsZV2DlR1bBIaDdRSeJpqfh1Tap7BJ6HeuSh2F7MshjbJn-LuQcZv1TaXzGZ9nXJXPVDYIJ5lVI-rgK5Wdlvu2JzQ2UD5BcZ6wQgUybCdyJjo/s1600/Twitter.png)no-repeat; background-position:center center; } ul#social .googleplus a { background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEBs-iGVFDfH43WKFKl2FttlBxcBNpqN6sVwe9UWnsC59q8OiO-aUSecXXkEe_r1JUwR3Rblt8kwTtFhvvzmkrzIVFzQjdVpXQHtWtjUXu7Vc-LN8Urkx10jKFgkhXuPdUmdzQygrd36M/s1600/GOOGLE+PLus.png)no-repeat; background-position:center center; } ul#social .facebook a { background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxmvK3dnQmcbHEHiYdg6AbnF-5BRFSwI_v05N3a-dMynb4VlNR_ymu0YreeSfQki8NV_W2CMfvWV2SWfeck2W1TcyeiAzsUEov-zeRu246SWKOEeywUY6N-f0kS8rRF-Lq0bNVUKiVcH4/s1600/Facebook.png)no-repeat; background-position:center center; } ul#social .rss a { background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih2V63QivI-Jrc5a5tGU_6Ve8D2AJiKiEbaEWdnXqgyIfyGWEe6hOwVUD3nOhDd7TRaNjbvPiGfV9VU4o_fI_wp5TEUaUyKb9U56_cx6ICyWpWcMgAYe9xYuxCUYmD1AitwRgvz2SXZFU/s1600/rss.png)no-repeat; background-position:center center; } ul#social .pinterest a { background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSwLjn-c-RReZixFD3o8XNn6JDJTidPC39ZkoJmOh_SoykQ-6AyJj5xem_-UkzrY9W4lFM_Ok3NpP7MldJU4ITzEC3KqlVLAct_MBpUb4oBT6vHN6wrfyDTooFeSxDHUnjwSOALXAoTKU/s1600/Pinterest.png)no-repeat; background-position:center center; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type='text/javascript'> $(function () { $('#social a').stop().animate({ 'marginLeft': '-85px' }, 1000); $('#social > li').hover( function () { $('a', $(this)).stop().animate({ 'marginLeft': '-2px' }, 200); }, function () { $('a', $(this)).stop().animate({ 'marginLeft': '-85px' }, 200); } ); }); </script> <ul id='social'> <li class='twitter'><a href='http://twitter.com/BloggerTurkey' title='Twitter'></a></li> <li class='googleplus'><a href='http://plus.google.com/100921311785768138667' title='Google Plus'></a></li> <li class='facebook'><a href='http://www.facebook.com/BloggerTurkey' title='Facebook'></a></li> <li class='rss'><a href='http://feeds.feedburner.com/BloggerTurkey' title='Rss'></a></li> <li class='pinterest'><a href='http://www.pinterest.com/BloggerTurkey/' title='Pinterest'></a></li> </ul>

İçindeki yerleri kendinize göre ayarlayınız.
Kaynak: Bloggerturkey