30 мая 2013 г.

Виджет последние комментарии с эффектом анимации для Blogger

Привет дамы и господа! Если Вы не ведете контроль комментариев, то установив этот виджет  на боковую панель своего блога, Вы сможете увидеть новые появившееся комменты. Быстро среагировать и дать незамедлительно ответ вашему посетителю.

Я сегодня покажу вам, как установить виджет последние комментарии с эффектом анимации в Blogger. У вас будет выбор между двух стилей - темный и светлый. Виджет оснащен аватаром, что делает его более привлекательным.

Как установить виджет последние комментарии с эффектом анимации в блог Blogger

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ivyth.googlecode.com/svn/js/rckmtr-dgn-animasi.js" type="text/javascript"></script>
<div id="rcentcomnets"><span class="loadingxrcm">Loading...</span></div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
rccommnetsx({
id_containrc:"#rcentcomnets",
animatedRecentcomments:true,
numComments:10,
url_blog:"###",
adminBlog:"nama_akun blogger/google+"
});
});
//]]>
</script>

Если у вас уже подключена библиотека JQuery, то эту строчку можете из кода удалить - <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>. Вместо решеток ### вписываем свой URL адрес блога. Сохраните гаджет. Идем дальше. Шаблон - Изменить HTML, находим тег - ]]></b:skin> и чуть выше вставляем стиль виджета.

Светлый и темный стиль виджета
Светлый стиль:

.loadingxrcm {background:transparent url(http://2.bp.blogspot.com/-Hus9BJOr9-8/UOsgyp7_8rI/AAAAAAAAH34/g2TQbl7GcsY/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;}
ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif}
ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative}
ul#kmtranimasi li{text-indent:0;height:90px;background:whiteSmoke;padding:0 8px;border:1px solid #DFDFDF;border-top:1px solid white}
ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#383838;border:0;float:left;margin:5px 5px 0 0}
ul#kmtranimasi .ketkomt{overflow:hidden}
ul#kmtranimasi .ketkomt a{display:block;color:white;font-weight:bold;overflow:hidden;background:#363636;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;}
ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:white}
ul#kmtranimasi p{margin:15px 0 0}

Темный стиль:

.loadingxrcm {background:transparent url(http://2.bp.blogspot.com/-Hus9BJOr9-8/UOsgyp7_8rI/AAAAAAAAH34/g2TQbl7GcsY/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;}
ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif}
ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative}
ul#kmtranimasi li{text-indent:0;height:90px;padding:0 8px;background:#252525;color:white;border:1px solid black;border-top:1px solid #353535}
ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#020202;border:0;float:left;margin:5px 5px 0 0}
ul#kmtranimasi .ketkomt{overflow:hidden}
ul#kmtranimasi .ketkomt a{display:block;color:black;font-weight:bold;overflow:hidden;background:#ECECEC;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;}
ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:black}
ul#kmtranimasi p{margin:15px 0 0}

Сохраните шаблон. Я рекомендую JS файл в первом коде, хранить на вашем собственном хостинге. Если Вы хотите знать, как хранить, перейдите по этой ссылке.

Удачи всем. До новых встреч.

Виджет - mkr-site.blogspot

С уважением, Сергей - блог Помощь Blogger-ru


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

9 коммент. :

  1. Здравствуйте. Данный виджет в настоящее время не работает по причине проблем с скриптом:
    http://ivyth.googlecode.com/svn/js/rckmtr-dgn-animasi.js" type="text/javascript
    Судя по Вашим работающим виджетам на данном блоге, например-нижерасположенный виджет "Случайные сообщения", Вы имеете доступ к данному скрипту (возможно даже он залит на Вашем хостинге Dropbox).
    Поделитесь пожалуйста скриптом. Спасибо. Хотелось бы установить себе виджет

    ОтветитьУдалить
    Ответы
    1. Привет! Нижний виджет- Случайные сообщения,на боковую панель нельзя установить.Это совсем другой виджет.

      Удалить
    2. Привет, Сергей. Вы так элегантно ушли от сути, мне понравилось. И все же, поделитесь работоспособным виджетом "Случайные сообщения"

      Удалить
  2. Этот комментарий был удален автором.

    ОтветитьУдалить
  3. Очень жаль, Сергей, что вы игнорируете комментарии. А может просто вы не знаете, что ответить, потому и делаете отписки в комментариях, не поняв сути и результат ответа "ниОчем"

    ОтветитьУдалить
    Ответы
    1. Привет!Люба,напрасно Вы так обо мне думаете.Суть я прекрасно понял,это Вы меня не хотите слышать.Нижний виджет не предназначен для боковой панели.Если хотите установить его именно в горизонтальном положении тогда я поделюсь с радостью с вами этим кодом.

      Удалить
    2. Привет, Сергей. Я написала Вам письмо через "Форма обратной связи". Жду ответа. Спасибо заранее.

      Удалить
  4. А вы сами его используете?

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

 
Яндекс.Метрика