Июл 12

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

Web дизайн | Автор: Дмитрий | Опубликованно: 12. 07. 2013Комментировать

Зафиксировать футер с помощью 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="http://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 на свой, на картинке все показано, если что спрашивайте, с удовольствием помогу 🙂

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

И снова Уральские пельмени, Очень смешное видео, из за рингтона у внука, хотелось посмотреть еще 3 раза:)

Всем пока , Спасибо за внимание! 🙂


Узнавайте О Новых Статьях По Почте:
Делитесь статьями с друзьями в Соцсетях:
HashFlare