Выскальзывающий виджет случайных сообщений.

Доброго времени суток, друзья, читатели и гости блога. Выскальзающий виджет случайное сообщения, который появляется при прокрутке страницы вниз (в нижней её части), не оставит без внимания ваших посетителей и, наверняка, мотивирует их перейти к предложенному посту.
Можно самостоятельно настроить внешний вид самого виджета, изменив некоторые стили CSS. Кроме того, посетитель может его отключить в любой момент, если не нужен. И кнопка поделиться постом в Гугл+ тоже под рукой.

Посмотрите, о чём идёт речь на этой странице (прокрутите её вниз).

Установка виджета в блоге.

Шаг 1. Заходим в админпанель блога - вкладка шаблон - изменить HTML. Не забудьте сделать резервную копию заранее. Или потренируйтесь сначала на тестовом блоге. С помощью горячих клавиш Ctrl+F (читаем здесь) нужно найти вот такую строчку . Таких фрагментов в некоторых шаблонах может быть от 3 до 4. Попробуйте после второй или третьей.

 <data:post.body/>

И сразу под нeй устанавливаем следующий код -

<b:if cond='data:blog.pageType == "item"'> <div style='display:none' id='bpslidein_place_holder'></div> </b:if>

Сохраните изменения.

Шаг 2. Во вкладке дизайн, выбираем гаджет HTML/JavaScript  и вставляем в него код, приведённый ниже. Посоветую вам сначала скопировать его в блокнот, где вы сможете подогнать внешний вид под дизайн блога. Основные стили я отметила синим цветом.

<style>
#bpslidein{z index:5;
width:400px;
height:125px;
padding:10px;
background-color:#fff;
border-top:4px solid #4682B4;
position:fixed;
right:-430px;
bottom:0;
font-family:Arial, Helvetica, sans-serif;
}
#bpslidein p{
color:#4682B4;
font-size:11px;
text-transform:uppercase;
font-family:Arial,Helvetica,sans-serif;
letter-spacing:1px;color:#555;
}
#bpslidein_title{
color:#4682B4;
font-weight:700;
font-size:16px;
margin:10px 20px 10px 0;
}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{
text-decoration:none;color:#24328c;
}
#bpslidein .close,#bpslidein .expand,{
border:2px solid #EEE;
cursor:pointer;
color:#9A9AA1;
width:13px;
height:15px;
padding:2px 0 0 5px;
position:absolute;
right:10px;font-size:17px;
font-weight:700;font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

#bpslidein_title,#bpslidein_image{
float:left;width:80px;
}
#bpslidein_title{
width:290px;
}
</style>
<div id="bpslidein" style="display:none;">

<div class="expand">+</div>
<div class="close">X</div>
 <p>Рекомендуемое сообщение</p>
 <div id="bpslidein_image"></div>
 <div class='addthis_toolbox addthis_default_style '>
<div  id="bpslidein_title"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAFK2VHcCWdE0yB1IJIGWouICvqxH1NcInk07JEIItNA3Sb7OFmZvOnZLAhmpgpsXZW2e6EaadT2yuwgpsqs0I7vp6oDEKM3VJbRCT5zivqY-icGJIwJhbrXHn-m-kR7yfswuQEjOugOC0/s1600/MD-loading.gif" /></div>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
</a></div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f086bca05bf6861' type='text/javascript'>
</script>
<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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
<script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://makingdifferent.github.com/blogger-widgets/Recommended-slideout-right.js",function(){},"bp-out-slide")},"jQueryjs")} </script>

Установите гаджет в любое место блога и попробуйте его в работе. Вот такую ненавязчивую "выскочку" случайных или рекомендуемых сообщений увидят ваши посетители при прокрутке страници вниз.

Спасибо вам, что читаете мои шпаргалки. Сегодня у меня всё и до новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email