Новое в блоге
Loading...
11 авг. 2012 г.

Выдвижная панель рекомендуемых сообщений - виджет для Blogger

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

Для тех кто в "танке" - по настройкам внешнего вида читать внимательно, что бы потом не обижаться с моей задержкой ответа на Ваш вопрос. Сейчас блоги стали моим просто хобби. Основная работа это конечно на производстве, надо же власти на что то жить. Дорогие мои, если Вам не трудно давайте сбегаем в демонстрационный блог и посмотрим как выглядит простой виджет выдвижной панели с рекомендуемыми сообщениями для Blogger. Побежали. Прокручиваем вниз статью и справа выдвигается наша долгожданная панель с рекомендацией, что ещё почитать нашим читателям. Давайте приступим к установке простого виджета. Для этого нужно выбрать гаджет HTML/JavaScript и в его поле вставляем код:

<div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Рекомендую для Вас</p> <div id="bpslidein_image"></div> <div  id="bpslidein_title">Loading..</div> </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://dl.dropbox.com/u/48089857/slide.min.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://new-school-blogger.blogspot.com/l" target="_blank"><img src="https://lh4.googleusercontent.com/-3ZeBFGQpJLA/Tu3juLKG8EI/AAAAAAAACTs/9CxWgQBV9G8/I/bloggerplugins.png" alt="Рекомендуемые сообщения " /></a>

Теперь о настройках:
Загружаем скрипт: http://dl.dropbox.com/u/48089857/slide.min.js на свой хостинг и редактируем под свой дизайн в этом месте:

#bpslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #1616F5;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-2px 0 5px #aaa;font-family:Arial, Helvetica, sans-serif;}
#bpslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;}
#bpslidein_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0;}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{text-decoration:none;color:#1616F5;}
#bpslidein .close,#bpslidein .expand,#bpslidein .help{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 .help{right:35px;}
#bpslidein_title,#bpslidein_image{float:left;width:80px;}
#bpslidein_title{width:290px;}
Вот вроде и всё. Всего доброго. До новых встреч.

Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

5 коммент. :

  1. Всё очень просто.Идём--Дизайн--выбираем добавить гаджет
    HTML/JavaScript и вставляем в его поле первый код.Сохраняем гаджет.Всё.

    ОтветитьУдалить
  2. я чтот не понял, а где можно именно добавить гаджет HTML/JavaScript в wordpress

    ОтветитьУдалить
  3. Это для блоггер,а вордпресс не знаю.

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

 
Footer