0 Livefyre-форма комментариев как альтернатива Disqus

И снова здравствуйте! Поговорим сегодня о системе комментариев Livefyre. Так как Disqus, похоже, исчерпал себя,часто тормозит и грузится долго. А это отпугивает дорогих посетителей наших блогов. Так, что можно смело менять систему комментариев Disqus на вполне дружелюбную Livefyre. Хотя Disqus используют большенство блоггеров, но кто знает, что нам завтрашний день готовит. Livefyre - очень дружественная система,грузится быстро без нареканий, довольно много функций,красивое оформление. К большому сожалению русского языка ни в интерфейсе, ни в самих комментариях нет.Так же добавлю,что комментарии индексироваться не будут.

Что из себя представляют комментарии Livefyre ?
Форма комментариев от Livefyre поддерживают:

• модерирование в веб-интерфейсе;
• древовидную структуру;
• различные виды авторизации (соц. сети, open id);
• автопостинг своего комментария в фейсбук и твиттер;
• автоматические ссылки (при наличии http);
• постинг чужих комментов в твиттер и фейсбук;
• теггинг (в тексте комментариев можно отмечать юзеров твиттера и фейсбука);
• моментальное удаление любого комментария;
• сортировка (старые/новые);
• кнопка флаг (сообщить о нарушении/спаме) для админа.

И так, кто решил попробовать систему комментариев от сервиса Livefyre, прошу на официальный сайт. Попадаем на главную страницу.

Офсайт Livefyre

Теперь смело жмём кнопку Sign Up (регистрация).

Форма регистрации

Момент лени учтён: можно просто выбрать учётную запись твиттера,Facebook или Google+ и, по-быстренькому прописавшись в системе, авторизоваться. Это очень удобно..
Livefyre поставляется в двух релизах. 1ая версия - Community (бесплатная), вторая - Professional (коммерческая для сайтов-многотысячников).

Community (бесплатная), вторая - Professional (коммерческая для сайтов-многотысячников)

Для установки в блог сначала нужно получить код. Поэтому выбираем свой вариант (это бесплатный Community), вводим url блога, в качестве платформы выбираем Custom.

вводим url блога, в качестве платформы выбираем Custom

После чего Вам будет предложен код для установки в блог:

Код для установки в блог

 Затем код поставить "в правило", запрещающее отображать комментарии на главной странице (только на внутренних):
<b:if cond='data:blog.pageType == &quot;item&quot;'>код-комментариев<b:if/> и всё это дело добавить в шаблон после <data:post.body/>.

А вот и скриншот готов.

Форма комментариев от Livefyre

Проверил и как видите всё работает отлично.На этом позвольте с вами попрощаться.Удачи.До новых встреч.

Подглядел и кое что позаимствовал здесь.

Подробнее

0 Кнопки скачать (Download) и демо (Demo) для blogger

Привет дорогие друзья! Думал я думал,чего у меня не хватает для Вас в блоге. Оказалось у меня нет обыкновенных кнопок. Вот теперь хочу исправить свою забывчивость. Предлагаю вашему вниманию две стильные кнопочки-демо (Demo) и скачать (Download). Думаю кому нибудь пригодятся,особенно тем кто предлагает чего нибудь скачать.

Ставятся кнопки в шаблон совсем просто и при написании статьи добавлять кнопки легко. Кто заинтересовался прошу Вас посмотреть демо кнопок. Даже можете спокойно попробовать их в действии.При наведении курсора мышки надпись меняет цвет,красота. Также для наглядности приведу скриншот кнопок демо (Demo) и скачать(Download):

кнопочки-демо(Demo) и скачать(Download)

А теперь перейдём к простой операции над шаблоном.
Как установить кнопки демо(Demo) и скачать(Download)-стиль CSS для blogger
Войти на приборную панель блоггера: Дизайн--Изменить HTML.Находим вот эту маленькую строчку ]]></b:skin> и после неё (не перед ней) вставляем небольшой кодик.Вот этот:

<style type='text/css'>
.bttoolz {
   border-top: 1px solid #adadad;
   background: #4dd417;
   background: -webkit-gradient(linear, left top, left bottom, from(#133466), to(#4dd417));
   background: -moz-linear-gradient(top, #133466, #4dd417);
   padding: 7px 14px;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 20px;
   font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.bttoolz:hover {
   border-top-color: #11a800;
   background: #11a800;
   color: #ffffff;
   }
.bttoolz:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }
</style>

Теперь сохраните шаблон.

Теперь при написании статьи(где требуются эти кнопки) в режиме HTML вставляем этот код.
Код для вставки при написании поста:
<a class="bttoolz" href="Ваш DEMO URL адрес" rel="nofollow" target="_blank">Демо</a>&nbsp;&nbsp;<a class="bttoolz" href="Ваш DOWNLOAD URL адрес" rel="nofollow" target="_blank">Скачать</a></div>
Дальше просто вставляем нужные URL адреса,выделенные красным цветом и можете поменять надписи Демо,Скачать на свои.Вот и всё.С кнопками покончили.Теперь хочу Вам приготовить какой нибудь классный виджет. Постараюсь для Вас.Удачи до новых встреч.

Подробнее

0 Полезный виджет объявлений для Blogger

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

А теперь устанавливаем виджет объявлений для Blogger
Перейдите Дизайн.Выберите HTML/JavaScript гаджет.Вставьте в его поле следующий  длинный код:

<style type="text/css">
/*Example CSS for the two demo scrollers*/
#pscroller2{
background:url(https://lh3.googleusercontent.com/-j_Gl9nMOfYM/TuGZtu3yIbI/AAAAAAAACpo/Zc3qQ2y63V8/s30/upda%25D1%2582.png) no-repeat top left;
width: 430px;
height: 20px;
border: 1px solid #ddd;
padding: 3px 3px 3px 40px;
margin:10px 0;
}
#pscroller2 a{
text-decoration: none;
color:#0080ff;
}
#pscroller2 a:hover{
text-decoration: underline;
}
.someclass{
}
</style>
<script type="text/javascript">
/*Example message arrays for the two demo scrollers*/
var pausecontent2=new Array()
pausecontent2[0]='<a href="#">Ваш текст здесь</a>'
pausecontent2[1]='<a href="#">Ваш текст здесь</a>'
pausecontent2[2]='<a href="#">Ваш текст здесь</a>'
pausecontent2[3]='<a href="#">Ваш текст здесь</a>'
</script>
<script type="text/javascript">
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
// -------------------------------------------------------------------
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start up down animation
// -------------------------------------------------------------------
pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}
// -------------------------------------------------------------------
// animateup()- Move the two inner divs of the scroller up and in sync
// -------------------------------------------------------------------
pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}
// -------------------------------------------------------------------
// swapdivs()- Swap between which is the visible and which is the hidden div
// -------------------------------------------------------------------
pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}
pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}
// -------------------------------------------------------------------
// setmessage()- Populate the hidden div with the next message before it's visible
// -------------------------------------------------------------------
pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
</script>
<script type="text/javascript">
//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
new pausescroller(pausecontent2, "pscroller2", "someclass", 1000)
</script>

Теперь можно поговорить о настройках:

width: 430px;--ширина виджета.color:#0080ff;--цвет выводимого текста. Можно подобрать генератором цвета.
#--замените на Ваш URL адрес ссылки.Ваш текст здесь--замените на название заголовка объявления.1000--Изменить время задержки прокрутки.Чем меньше это значение, тем быстрее будут меняться заголовки. Теперь можно сохранить гаджет и переместить в нужное для Вас место.Вот теперь всё.Желаю удачи.До новых встреч.

Подробнее

4 Эффект вращения картинок с зумом в популярных сообщениях

Добрый вечер дорогие друзья!Совсем забыл опубликовать крутой виджет-эффект вращения картинок с зумом в популярных сообщениях.Зато теперь Вам будет небольшой подарок.Будем продолжать совершенствовать блоги,делая их ещё более привлекательными для ваших посетителей. Наведите у меня курсором на миниатюру в популярных сообщениях. Правда круто,надеюсь и Вы захотите такой же эффект вращения миниатюр с зумом. Прежде чем мы приступим колдовать с нашим шаблоном,необходимо сначала добавить гаджет популярных  сообщений на боковую панель Blogger.Так,вроде вступительную часть осилил,теперь пора действовать.

Как добавить в Blogger-Эффект вращения картинок с зумом в популярных сообщениях,с использованием CSS
Как,как-да очень просто (что то у меня сегодня отличное настроение).Идём--Дизайн--Изменить HTLM, ищем эту строчку ]]></b:skin> и сразу перед ней вставляем небольшой код:

<style type='text/css'>
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>

Сохраняем шаблон.Теперь можете полюбоваться на свою работу. Да,кто случайно заглянул ко мне в гости прошу присоединяйтесь к моему супер блогу и не забываем про мою страницу на Google плюс.Вот вроде и всё.Удачи. Жду комментариев.

Подробнее