Доброе утро читатели моего блога Osxit.ru! Сегодня я расскажу о крутой на мой взгляд фишке, которую вы сможете установить себе на сайт после прочтения данной статьи. Собственно о чем идет речь вы можете увидеть у меня на всех страницах блога, вот чтоб не искать 
Это футер (footer) и он фиксированный и двигается вместе с сайтом в одном положении внизу, так же на нем расположены социальные кнопки, с помощью которых посетитель может легко поделиться с друзьями вашей статьей, на нем так же расположена информация о сайте. Если хотите можете расположить на нем счетчики, баннеры, все что угодно! И при этом сделать это не сложно потому что код очень простой! Конечно на сайте где я увидел что футер прижат к низу страницы но об этом было статьи о том как это сделать, но я залез в код и так сказать “перенял” установил себе и поделился с вами!
Плюс данной штуки, то что такой футер вы можете поставить не только на WordPress, но и на другие движки (CMS) такие как DLE, Joomla, Umi CMS и т.д
Добавляем стиль в наш style.css
Открываем style.css – находится он у вас в корне шаблона вашего сайта, открываем его в блокноте (Настоятельно рекомендую использовать Notepad ++) и добавляем представленный ниже код в самый низ вашего style.css:
#stickey_footer {
background: url(‘images/niz.jpg’) repeat-x;
border-top: 1px solid #686868;
bottom: 0;
font-family : ‘Arial’, Sans-serif;
height: 40px;
left: 52%;
margin: 0 auto 0 -530px;
padding: 0 10px;
position: fixed;
text-shadow: 0px 1px 0px #6b6a6a;
width: 964px;
z-index:2;
}
#stickey_footer {
-moz-border-radius: 8px 8px 0px 0px;
-webkit-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
}
#stickey_footer {
-moz-box-shadow:0px 0px 11px #191919;
-webkit-box-shadow:0px 0px 11px #191919;
box-shadow:0px 0px 11px #191919;
}
#footer_menu {
margin: 0;
padding: 0;
width:auto;
}
#footer_menu li {
list-style: none;
float: left;
font-size:13px;
padding: 12px 14px 14px 14px;
}
#footer_menu .imgmenu {
padding:5px 8px 3px 1px;
float:left;
width:36px;
height:30px;
border:none;
border-right:1px solid rgba(0, 0, 0, 0.4);
cursor:pointer;
}
#footer_menu li a {
display: block;
color: #000;
text-shadow: 0px 1px 0px #c2c2c2;
text-decoration: none;
}
#footer_menu li a:hover {
color: #056690;
text-shadow: 0px 1px 5px #32d0ff;
}
#footer_menu li span {
display:none;
}
#stickey_footer #social_icons {
float:right;
width:auto;
margin:10px 15px 0px;
padding:0px;
overflow:hidden;
position: static;
}
#stickey_footer #social_icons li {
margin-right:16px;
float:left;
padding:0px;
height:22px;
list-style:none;
_margin-right:0px;
position: static;
}
Далее нам нужно загрузить картинку на ваш сайт, фон нашего нового футера, у меня это niz.jpg
Вставляем основной код вывода в шаблон сайта
После того как загрузили картинку вставляем в нижнюю часть шаблона, обычно он называется footer.php, можно у кого то он в index.php в нижней части, если будет непонятно спросите в комментарии я помогу сделать.
Вот собственно и код после чего наш footer прижат к низу страницы:
<div id=”stickey_footer”>
<ul id=”footer_menu”>
<li><a href=”/”>Блог Дмитрия Казанцева © 2013</a>
</ul>
<ul id=”social_icons”>
<li style=”margin-right: -26px;”>
<!– twitter –>
<a href=”https://twitter.com/share” class=”twitter-share-button” data-via=”DKazantzev” data-lang=”ru”>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=”https://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>
<!– twitter –>
</li>
<li style=”margin-right: -24px;”>
<script type=”text/javascript” src=”https://userapi.com/js/api/openapi.js?34″></script>
<script type=”text/javascript”>
VK.init({apiId: 3682263, onlyWidgets: true});
</script>
<div id=”vk_like”></div>
<script type=”text/javascript”>
VK.Widgets.Like(“vk_like”, {type: “button”, height: 20});
</script>
</li>
<li style=”margin-top: -0px;”>
<!– google –>
<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”>
{lang: ‘ru’}
</script>
<!– Place this tag where you want the share button to render. –>
<div class=”g-plus” data-action=”share” data-annotation=”bubble”></div>
<!– google –>
</li>
<li>
<div style=”margin-right: -10px;”>
<!– facebook –>
<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/ru_RU/all.js#xfbml=1″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<!– facebook –>
<div class=”fb-like” data-send=”false” data-layout=”button_count” data-width=”150″ data-show-faces=”true” data-colorscheme=”dark”></div>
</div>
</li>
</ul>
</div>
Вот практически и все, но у нас еще работают не все социальные кнопки, все кроме Вконтакте, потому что нам нужно изменить ApiId, сейчас я расскажу где его взять:
Заходим по ссылке, в раздел разработчиков Вконтакте (вот прямая ссылка)
Заменяем мой ApiID в коде, у меня это 3682263 на свой, на картинке все показано, если что спрашивайте, с удовольствием помогу
На этом всё, если все сделали как я написал, то все должно получиться, Если понравилась статья, поделитесь ею с друзьями в знак благодарности, подписывайтесь на новые статьи!
