Фиксированный футер для вашего сайта с социальными кнопками. Css, подробное описание

Доброе утро читатели моего блога 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 который нужно заменить на свой

Заходим по ссылке, в раздел разработчиков Вконтакте (вот прямая ссылка)

Получаем apiID

Заменяем мой ApiID в коде, у меня это 3682263 на свой, на картинке все показано, если что спрашивайте, с удовольствием помогу :)

На этом всё, если все сделали как я написал, то все должно получиться, Если понравилась статья, поделитесь ею с друзьями в знак благодарности, подписывайтесь на новые статьи!