Както споменах в предния пост – “очаквайте още нови неща тея дни”. И ето, че се появи новия панел със бутони за споделяни
Задвижван само и изцяло от CSS3(пак за тези които не ползват браузъри, които да поддържат CSS3 – сори :)), елегантен, не-натрапващ се и в същото време лесно достъпен.
Първоначално смятах да го анимирам с jQuery(JavaScript библиотека), обаче в последствие реших да се възползвам(пък и да проверя) предимствата на CSS3. Оказа се че в общи линии анимациите стават изключително лесно което е голям плюс.
Ето кода който зарежда бутоните:
<div id="mw_custom_sharing"></div>
// функцията която зарежда самите бутони - във functions.php
function render_floating_social_buttons() {
$url = urlencode(curPageURL()); ?> // тук се взима и енкоудва URL-то на сегащната страница
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<div class="alignleft fb-share-btn"><a type="box_count" name="fb_share"></a></div>
<div class="alignleft google-plusone"></div>
<script type="text/javascript">// <![CDATA[
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
// ]]></script>
<a class="twitter-share-button" href="http://twitter.com/share" data-count="vertical">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<?php }
И съответно CSS-a :
#mw_custom_sharing { width: 70px; height: 40px; overflow: hidden; padding: 15px 15px 15px 0; position: fixed; left: -75px; top: 130px; z-index: 100; -webkit-border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; background: url(images/background.gif) repeat 0 0; } #mw_custom_sharing:hover { left: 0; height: auto; min-height: 330px !important; } /* това селектира всички елементи, които са директни наследници на #mw_custom_sharing, и не са script елемент И нямат id="fb-root" */ #mw_custom_sharing --> *:not(script):not(#fb-root) {
padding-bottom: 15px;
margin: 0 auto 15px auto !important;
text-align: center;
border-bottom: 1px solid #ccc;
width: 70px;
display: block;
}
/* за FB Share бутона трябва малко по-специфичен стил, за да се центрира */
#mw_custom_sharing .fb-share-btn .fb_share_count_wrapper { float: none; text-align: center; }
/* Това избира последните два директни наследника на #mw_custom_sharing, които не са script елемент и ...
Селектирам последните два, защото знам че почти винаги последния елемент е script */
body #mw_custom_sharing > :nth-last-child(-n+2):not(script):not(#fb-root) {
padding-bottom: 0 !important;
margin: 0 auto 0 auto !important;
border-bottom: none !important;
}
Промени бяха направени по следните файлове:
- header.php
- functions.php
- style.css
Линк към ревизията: Цък
