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

виджет случайное сообщение
Доброго времени суток, друзья, читатели и гости блога. Выскальзающий виджет случайное сообщения, который появляется при прокрутке страницы вниз (в нижней её части), не оставит без внимания ваших посетителей и, наверняка, мотивирует их перейти к предложенному посту.
Можно самостоятельно настроить внешний вид самого виджета, изменив некоторые стили 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="http://4.bp.blogspot.com/-jCFjmfYh4To/UNgYaDfdufI/AAAAAAAAGFY/RrOdy-Jcoiw/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


10 комментариев:

  1. Здравствуйте. Что то не появилось всплывающее окно.

    ОтветитьУдалить
  2. Игорь Кацубо, это не всплывающее окно, а виджет который повляется справа при прокрутке страницы до самого конца. если Вы имеете ввиду не появилось на моём тестовом блоге, то проверила . Виджет работает.

    ОтветитьУдалить
  3. На Вашем блоге есть виджет и работает отлично. Я всё сделал на своём блоге и ничего не появилось.

    ОтветитьУдалить
  4. Игорь, поняла сейчас. В некоторых шаблонах Блоггер таких строчек data:post.body/ может быть 2 или 3 или 4. Попробуйте поставить после второго или 3. Добавлю это пояснение в пост.

    ОтветитьУдалить
  5. Я у себя насчитал с 10-ок штук. Позже буду пробовать. А то целый день уйдёт ))

    ОтветитьУдалить
  6. Что-то у вас с посещаемостью беда, фильтр какой поймали?

    ОтветитьУдалить
  7. Есть ли в Вашем блоге какие либо статьи о Google AdSense?

    ОтветитьУдалить
  8. zmoe, Посещаемость оставляет желать лучшего. Проверяла вчера как раз на фильтры и прочее всё ОК. Вчера Яндекс что-то совсем ничего не показал. в лайфе 70. А блоггер 345. Чему верить. Проверяю периодически.

    ОтветитьУдалить
  9. Игорь, а что именно Вы хотите. Я не писала про Адсенс, думаю информации достаточно.

    ОтветитьУдалить
  10. Дело в том что я подал заявку на участие в этом проекте своего блога о здоровье. Рассмотрение мой заявки длится уже скоро как 2 месяца. Никакой службы поддержки как я понял у них нету. Все инструкции от Гугла туманны и двусмысленны. Вообще такое впечатление что их через Гугл переводчик оформили. Я даже не знаю что думать: или с блогом что то не так или ещё моя очередь не дошла. Или уже отклонили бы или пропустили. Хоть знал бы уже что дальше делать. Вот я и поинтересовался у Вас об этой информации.
    А Ваш блог участвует в Адсенсе?

    ОтветитьУдалить

Пользовательский поиск
Foto Saya
My Photo