2013-08-06

Анимированный виджет “Популярные сообщения”

popular_scrolling_post_widget_blogger1
В прошлой записи мы создавали анимированный виджет последних сообщений. Сегодня вы узнаете, как сделать похожий виджет для популярных сообщений блога.  
Создание сайта, предполагает его администрирование и постоянную доработку. Так, вы можете добавить на сайт виджеты для улучшения юзабилити.
Как сделать анимированный виджет популярных сообщений для blogspot.

..
  1. В административной панели блога перейдите в раздел Дизайн,
  2. Добавьте гаджет, выберите из списка гаджетов “Популярные сообщения”. Количество сообщений укажите больше, чем 4:
    доработка сайта на Bitrix
  3. Зайдите в раздел Шаблон, найдите отрезок кода ]]></b:skin>, и вставьте выше этого кода следующее:
    <!----Start copy here---->
    <style type="text/css" media="screen">
    #PopularPosts1 {
    overflow:hidden;
    margin-top:5px;
    width:100%;
    padding:0px 0px;
    height:310px; }
    #PopularPosts1 ul {
    width:310px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:10px 0px 0px 10px;
    }
    #PopularPosts1 li {
    width:290px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:80px;
    overflow: hidden;
    background:#fff url(http://4.bp.blogspot.com/-AexFsTTa33c/TmFNoxg9zSI/AAAAAAAAE6I/7K8bPKYBr8Q/s400/popular%2Bposts.jpg) repeat-x;
    border:1px solid #ddd;
    }
    #PopularPosts1 li .item-title {
        font-size:1em;
        margin-bottom:0.5em;
    }
    #PopularPosts1 li .item-title a {
    text-decoration:none;
    color:#7CA2C4;
    font:bold 12px verdana;

    height:18px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }
    #PopularPosts1 li img {
    float:left;
    margin-right:5px;
    background:#EFEFEF; border:2px solid #7CA2C4;
    }
    #PopularPosts1 li .item-snippet {
      overflow:hidden;
    font-family:Tahoma,Arial,verdana, sans-serif;
    font-size:10px;
    color:#289728;
    padding:0px 0px;
    margin:0px 0px;
    }
    #PopularPosts1 .item-snippet a,
    #PopularPosts1 .item-snippet a:visited {
        color:#3E4548;
        text-decoration: none;
    }
    #PopularPosts1 .spyWrapper {
        height: 100%;
        overflow: hidden;
        position: relative;
    }
    #PopularPosts1 {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }
    .tags span,
    .tags a {
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
    }
    a img {
        border: 0;
    }
    -->
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
    $(function () {
        $('.popular-posts ul').simpleSpy();
    });
    </script>
    <script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script><div style="float:   left;"><a href="http://freewidget4u.blogspot.com/2012/11/scrolling-popular-post-gadjet-widget.html" target="_blank"><sup> GrabThis!! </sup></a></div>
    <!----Stop copy here---->

3 комментария :

Andrew Andrushkov комментирует...

Спасибо!

TisaF комментирует...

Здравствуйте! Подскажите, пожалуйста, в чем проблема:
Данный виджет работает на ура, а его аналог (анимированные последние сообщения) не работает. Ошибиться - как заблудиться в трех соснах - невозможно. Не могли бы вы подсказать в чем может быть проблема?

Mycrib комментирует...

TisaF, даже не знаю что вам сказать. Может конфликт какой-нибудь в виджетах. У меня на тестовом блоге - работает.

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML