Дополнения и оформления к теме (меню)

Меню для блога можно создать не только стандартным блоггеровским методом (виджет страницы), но и установить его самостоятельно. Делается это, с помощью вставки в шаблон блога - код CSS и HTML код меню. Сегодняшнее фиксированное плавающее меню для вашего сайта будет с фото автора блога и небольшим описанием, социальными кнопками Google Plus, Facebook, Twitter и что естественно, с ссылками на ваши страницы или статьи. При прокрутке страницы блога, меню у вас будет оставаться на месте, всегда присутствовать перед глазами посетителей.

Следующий наш шаг, находим в коде шаблона закрывающий тег и чуть выше его вставляем сам HTML код меню:

<div id='BDrs-MENU'>
<div id='BDrs-MENU-NAV'>
<div id='top-BD'>
<p>
<img alt='gambar admin' height='50' src='https://lh3.googleusercontent.com/-5DCobLS7IsM/AAAAAAAAAAI/AAAAAAAATNw/0NI7vbXZiv8/s60-p-rw-no/photo.jpg' style='margin-top:-30px;margin-left:23px;border:solid #999 1px; border-radius:5px;' title='Сергей Загуляев' width='50'/>
</p>
<p class="text" style="width: 300px;margin-top:-21px;">
<span style="color:#990000; margin-left:-15px"><a class="pic" href='Ссылка на ваш профиль ' target='_blank' title='Мой профиль'><b>Сергей блогодел</b></a></span><br/>В этом блоге обсуждаются различные советы и обучающие программы, чтобы оптимизировать страницу Blogspot блога в поисковых системах (SEO), валидацию HTML 5, CSS 3.</p>
<div style="margin:3px 0px 0 570px; width:400px; text-align: right;" >
<a class="pic" href='Ссылка GOOGLE PLUS ' target='_blank' title='google plus'><img alt='gplus' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtIj3cm_NjME5N-HDz0PX_P1Pzx8fQAR0XqJ8SHYuBJ7Nu-dQ_jF-GXRb_oeLUN1hTg6J1P63qn4h1bYW0K0ROoAhZRVcYG15Ss5Ej6NTcRQJn8pnC-uF5JnCoj8HbWrenjm7Fkoc0Dt4/s1600/GP.png" width="100" height="28" title='google plus'/></a>
<a class="pic" href='Ссылка FACEBOOK ' target='_blank' title='like on facebook'><img alt='facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixz4HeG8y8UTnNCGoIpglkrQuBa5xBvrOMH5c9H2JQV384cl1Q93Ew44Q2XYRE1Z7bZqZokJ8WSvtX1AldExqKPlB5vtZ7LmMs16xT_DOt0xeQLLuW2yWSQ7MwyHbweJo0J1yg0VJrqYU/s1600/fbk.png" width="100" height="28" title='like в facebook'/></a>
<a class="pic" href='Ссылка TWITTER ' target='_blank' title='follow on twitter'><img alt='twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwQz3y0h4c1NorJrMkt7PfnsmZrNOdbW4rIFH66vdYz3ckRjnYMoW9RSlNKQ2rGFWi2tptg_f_l1E4feFP4siJEHWQ8opdN23FXCPO5ITrwX6iFXBSTFWgMBYruKhU_xhdEVMb3lbr7Ss/s1600/twk.png" width="100" height="28" title='follow в twitter'/></a></div>
<div>
<ul>
<li>
<a href='Ссылка на страницу ' rel="nofollow" target='_blank' title='Карта блога'>
Содержание
</a>
</li>
<li>
<a href='Ссылка на страницу ' rel="nofollow" target='_blank' title='Инструменты'>
Инструменты
</a>
</li>
<li>
<a href='Ссылка на страницу ' rel="nofollow" target='_blank' title='Пункт меню'>
Меню
</a>
</li>
<li>
<a href='Ссылка на страницу ' rel="nofollow" target='_blank' title='Контакт'>
Связь с автором
</a>
</li>
<li>
<a href='Ссылка на страницу ' rel="nofollow" target='_blank' title='О блоге'>
О блоге
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class='clearer'/>
<br/>
<br/>
<br/><br/>

Для установки кода стилей CSS для меню, найдите в вашем шаблоне блога такую строку ]]> (подробно, как вставлять стили, смотрим - тут) и чуть выше неё добавьте этот код:

/*****************************************
Widget Floating Menu Sosial Media 
******************************************/
#BDrs-MENU {
width : 100%;
height : 70px;
margin : 0 auto;
box-shadow : 1px 3px 6px #000;
position : fixed;
z-index : 9999;
overflow : hidden;
top : 0;
left : 0;
background-color : #f0f0f0;
border-bottom : 3px solid #999;
color: #990000;
}
#BDrs-MENU #BDrs-MENU-NAV {
width : 960px;
height : 63px;
margin : 0 auto;
padding : 0;
font-size : 14px;
text-align : left;
}
#BDrs-MENU #BDrs-MENU-NAV p {
width : 90px;
float : left;
padding : 23px 0;
}
#BDrs-MENU #top-BD ul {
margin : 0 auto;
width : auto;
list-style-type : none;
}
#BDrs-MENU #top-BD ul li {
float : right;
margin : 8px 0;
}
#BDrs-MENU #top-BD ul li a {
border : #494949 solid 1px;
position : relative;
line-height : 28px;
margin-top : -1px;
padding : 3px 10px;
color : #990000;
font-size : 13px;
text-shadow : 0 -1px 0 #000;
display : block;
text-decoration : none;
font-weight : 500;
text-transform : none;
margin-right : 3px;
font-family : Georgia, "Times New Roman", Times, serif;
border-radius:10px 10px 0 0;
box-shadow:0 0 2px 1px #FF0000 inset;
font-style: italic;
}
#BDrs-MENU #top-BD ul li a:hover {
color : #666666;
border : #494949 solid 1px;
box-shadow : 0 0 2px #666;
background-color : none;
}
#BDrs-MENU #top-BD .text {
width: 100px;
height:60px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;
line-height: normal;
}
#BDrs-MENU #top-BD .pic {
margin:0 15px 0 15px;
text-decoration: none;
color: #0000FF;
}
#BDrs-MENU #top-BD .pic:hover {
opacity:.3;
color: #333333;
}
/*** Blog Design CSS and ***/

Provenance: https://wordpressmania.ru/menyu-dlya-blogger-fiksirovannoe/

Easythelog

С наступающим Новым Годом!

RegionAds

API в соц сетях

Дополнения и оформления к теме (меню)