Скрытые боковые панели для блога





Прячущиеся боковые панели для блога вещь полезная и удобная.Плавно выезжающая панель при наведении курсора мышки не раздражает посетителей,которым не интересна  спрятанная там информация,но тем не менее всё что там находиться в случае необходимости будет расположено всегда под рукой.






Практическое применение выдвигающихся боковых панелей.


Разместить там можно всё что угодно; например блок статистики и форму подписки,кнопки социальных сетей и даже спрятать присоединившихся *друзей* занимающих на некоторых популярных блогах большую часть свободного пространства.Короче выдвигающие панели могут являться той самой антресолью в квартире куда можно спрятать,то что сегодня не нужно,но выбросить жалко,так как может когда то пригодиться.

Каждый из нас сталкивался в интернете со страницами на которых стоят огромные кнопки социалок или форма подписки неестественных размеров,занимающая треть страницы.Не понимаю авторов подобных произведений,как будто посетитель зашедший на вашу страницу слепой и не увидит эти пресловутые кнопки.Да и если он и обратит внимание,то в большинстве случаев всё равно не станет на них нажимать,так как ему по большому счёту до лампочки,а заинтересованный человек и так найдёт куда вставить и нажать.

Установка скрипта для плавно выезжающих боковых панелей для блога.


Установка гаджета несложная и легко выполнимая.Первое ,скрипт работает на jquery и если у вас не подключена библиотека, то нужно добавить код в шаблон перед закрывающимся тегом /head,так как jquery устанавливается один раз для всех скриптов использующих jquery. Хотя если вы не планируете больше никаких подключений,то можно всё сразу вставить в гаджет НТМЛ и ява-скрипт.Код подключения jquery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>

и непосредственно сам скрипт вызова с настройками GSS
<style> img,a { border: 0;} #on { visibility: visible;} #off { visibility: hidden;}  #box2_div { width: 250px; height: 353px; overflow: hidden;} #box2_right { z-index: 10004; border: 2px solid #6CC5FF; background-color: #F2F2F2; width: 240px; height: 350px; position: fixed; right: -239px;} #box2_right_img { position: absolute; top: -2px; left: -42px; border: 1;}#feedburner_right { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-right: 2px solid #5b5b5b; border-left: hidden; width: 300px; height: 97px; position: fixed; right: -303px;} #feedburner_right_img { position: absolute; top: -2px; left: -33px; border: 0;}   #box2_left { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; height: 353px; position: fixed; left: -250px;} #box2_left_img { position: absolute; top: -2px; right: -35px; border: 0;}  #feedburner_left { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-left: 2px solid #5b5b5b; border-right: hidden; width: 300px; height: 97px; position: fixed; left: -303px;} #feedburner_left_img { position: absolute; top: -2px; right: -33px; border: 0;}  .box-title1 { border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; /*box-shadow*/ -webkit-box-shadow: 5px 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px 5px #CCCCCC; box-shadow: 5px 5px 5px #CCCCCC; padding: 10px; margin: 10px 0;} .enteryouremail { background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 165px; /*border-radius*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 0px;} .submitbutton { background: #F2F2F2; border: 1px solid #F66303; /*box-shadow*/ -webkit-box-shadow: 3px 3px 3px #666; box-shadow: 3px 3px 3px #666; font: bold 12px Arial, sans-serif; color: #0F0F0F; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; /*border-radius*/ -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer;} </style><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#box1_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 5}, 500); },function(){ jQuery("#box1_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#box2_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 5}, 500); },function(){ jQuery("#box2_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script>
<div id="on">
<div id="box2_right" style="top: 35%;">
<div id="box2_div">
<img src="http://3.bp.blogspot.com/-ugVtnNi4PH8/UwpPGv510fI/AAAAAAAADMA/Wilnko3hvPs/s1600/v-gol.ru.png" id="box2_right_img" /> Ваш текст,ссылки,картинки
</div>
</div>


<div id="on">
<div id="feedburner_right" style="top: 69%;">
<div id="knfeedburner_div">
<center>
<h4 style="color: #f66303;">
Подпишитесь на обновления блога:</h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open ('http://feedburner.google.com/fb/a/mailverify?uri=http://feeds.feedburner.com/v-gol/KLBW', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="enteryouremail" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Введите свой email...';}" onfocus="if (this.value == 'Введите свой email...') {this.value = '';}" type="text" value="Введите свой email..." /> <input name="uri" type="hidden" value="v-gol/KLBW" /><input class="submitbutton" type="submit" value="Подписаться" /> </form>
</center>Ваш текст <img src="http://1.bp.blogspot.com/-JUxRBzdBdtg/Uwo4rwovYuI/AAAAAAAADLw/SyCi5FrBjGA/s1600/v-gol.ru.png" id="feedburner_right_img" /> </div>
</div>
</div></div>

Места выделенные красным это рабочая часть контейнера,куда можно будет вставить текст,ссылки,различные коды и т.д. и т.п. А то,что помечено зелёным поменяйте на свой адрес фидбарнера.Сам скрипт можно регулировать и настраивать под дизайн своего блога. Воспользовавшись онлайн редактором НТМЛ и изменяя переменные величины можно поменять цвет,размер,фон гаджета было бы желание.


Отправить комментарий