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

Вот так это будет выглядеть

последние сообщения Блоггер


А наглядно увидеть можно на моём блоге


Что в итоге мы будем иметь

1. Статьи расположены списком
2. Настраиваемое по желанию количество постов
3. Заголовок, картинка и анонс поста
4. Отображение даты публикации, количество комментариев и ссылка читать далее


Все настройки разберём. А сейчас скопируйте пока предложенный ниже код целиком

<style>
#sidebar-left-1, #sidebar-right-1, #sidebar-right-2-1, sidebar-right-2-2 {
display: none;
visibility: hidden;
}
#main {
width: 820px; }
.bp_item_summary {text-align:justify;}
</style>


<br />
<div id="bp_recent">
</div>
<script>
//<![CDATA[

var postTitleOriginal,  myLink, myDiv, myImage,mySeparator;
var    main;
var float_clear=false;
var flag = 0;
function bprecentpostswiththumbnails(json) {
for (var i = 0; i < numberOfPosts; i++) {
if (i == json.feed.entry.length) break;
var s;
    var entry = json.feed.entry[i];
    var postTitle = entry.title.$t;
    postTitleOriginal = postTitle;
    if (isNaN(titleLength) || titleLength == 0) {
        postTitle = '';
    }
    else if (postTitle.length > titleLength) postTitle = postTitle.substring(0, titleLength) + "...";
    var postUrl="";
    for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
            var commentText = entry.link[k].title;
            var commentUrl = entry.link[k].href;
        }
        if (entry.link[k].rel == 'alternate') {
            postUrl = entry.link[k].href;
            break;
        }
    }
    if (showThumbs == true) {
        var thumbUrl = "";
        try {
            thumbUrl = entry.media$thumbnail.url;
            thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");
        } catch (error) {
            if ("content" in entry) s = entry.content.$t; else s="";
            if (thumbUrl == "" && mediaThumbsOnly == false) {
                 regex = /http\:\/\/www\.youtube(-nocookie){0,1}\.com\/(v){0,1}(embed){0,1}\/(([^"&?' ]*))/;
                videoIds = s.match(regex);
                if (videoIds != null) {
                    videoId = videoIds[4];
                }
                if (videoIds != null && videoId != null) thumbUrl = "http://img.youtube.com/vi/" + videoId + "/2.jpg"
            }
            if (thumbUrl == "" && mediaThumbsOnly == false) {
                a = s.indexOf("<img");
                b = s.indexOf("src=\"", a);
                c = s.indexOf("\"", b + 5);
                d = s.substr(b + 5, c - b - 5);
                if ((a != -1) && (b != -1) && (c != -1) && (d != "")) thumbUrl = d;             
            }
        }
        if(thumbUrl.indexOf("static.flickr.com")!=-1) {thumbUrl= thumbUrl.replace("_b_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_s_t.jpg","_s.jpg");
        thumbUrl= thumbUrl.replace("_b.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m.jpg","_s.jpg");}
        if (thumbUrl == "" && showNoImage == true)
        {
        thumbUrl = "https://lh5.googleusercontent.com/-Qwbi5xozsS8/T6pkMpQ4ZmI/AAAAAAAAYEo/kpwCFEWIKR8/s72/noimage.png";
        try{if(defaultImage!="") thumbUrl=defaultImage;}catch(error){}
        thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");
        }
    }
    if (showPostDate == true) {
        var postdate = entry.published.$t;
        var cdyear = postdate.substring(0, 4);
        var cdmonth = postdate.substring(5, 7);
        var cdday = postdate.substring(8, 10);
        var monthnames = new Array();
        monthnames[1] = "январь";
        monthnames[2] = "февраль";
        monthnames[3] = "март";
        monthnames[4] = "апрель";
        monthnames[5] = "май";
        monthnames[6] = "июнь";
        monthnames[7] = "июль";
        monthnames[8] = "август";
        monthnames[9] = "сентябрь";
        monthnames[10] = "октябрь";
        monthnames[11] = "ноябрь";
        monthnames[12] = "декабрь";
    }
    code = "";
        main = document.getElementById('bp_recent');
        myDiv = document.createElement('div');
        myDiv.setAttribute("class", "bp_item_title");
        myLink = createLink(postUrl,"_top",postTitleOriginal)
        if(main.innerHTML!=""){
        mySeparator = createDiv("bp_recent_separator");
        main.appendChild(mySeparator)
        }
        if(postTitle != ''){myDiv.appendChild(myLink);}
        main.appendChild(myDiv);if(postTitle != '')myLink.innerHTML = postTitle;
    if (showThumbs == true && thumbUrl != "") {
        myImage = document.createElement('img');
        myImage.setAttribute("src", thumbUrl);
        if(imgFloat!="none")
        {
        float_clear=true;
        myImage.style.cssFloat=imgFloat;
        myImage.style.styleFloat=imgFloat;
        }
      try{if(myMargin!=0)myImage.style.margin = myMargin+"px";} catch(error){}
        myImage.setAttribute("alt", postTitleOriginal);
        myImage.setAttribute("width", imgDim);
        myImage.setAttribute("height", imgDim);
        myLink = document.createElement('a');
        myLink.setAttribute("href", postUrl+"");
        myLink.setAttribute("target", "_top");
        myLink.setAttribute("title", postTitleOriginal);
        myLink.appendChild(myImage);
        myDiv = document.createElement('div');
        myDiv.setAttribute("class", "bp_item_thumb");
        myDiv.appendChild(myLink);
        main.appendChild(myDiv);
    }
try {
        if ("content" in entry) {
            var postContent = entry.content.$t;
        }
        else if ("summary" in entry) {
            var postContent = entry.summary.$t;
        }
        else var postContent = "";
        var re = /<\S[^>]*>/g;
        postContent = postContent.replace(re, "");
        if (showSummary == true) {
            myDiv = createDiv("bp_item_summary");
                if (postContent.length < summaryLength) {myDiv.appendChild(document.createTextNode(postContent));}
            else {
                postContent = postContent.substring(0, summaryLength);
                var quoteEnd = postContent.lastIndexOf(" ");
                postContent = postContent.substring(0, quoteEnd);
                myDiv.appendChild(document.createTextNode(postContent + '...'));
            }
            main.appendChild(myDiv);
        }
    } //end try
    catch (error) {}
    myDiv =  createDiv("bp_item_meta");
    myDiv.style.clear="both";
    myDiv.style.marginBottom="4px"; 
    if (showPostDate == true) {
        myDiv.appendChild(document.createTextNode(monthnames[parseInt(cdmonth, 10)] + '-' + cdday + '-' + cdyear));
        flag = 1;
    }
    if (showCommentCount == true) {
        if (flag == 1) {
            myDiv.appendChild(document.createTextNode(" | "));
        }
        if (commentText == '1 Comments') commentText = '1 Comment';
        if (commentText == '0 Comments') commentText = 'No Comments';
        var myLink = createLink(commentUrl,"_top",commentText + " on " + postTitleOriginal)
        myDiv.appendChild(myLink);
        myLink.innerHTML=commentText;
        flag = 1;;
    }
    if (showReadMore == true) {
        if (flag == 1) {
            myDiv.appendChild(document.createTextNode(" | "));
        }
        var myLink = createLink(postUrl,"_top",postTitleOriginal)
        myDiv.appendChild(myLink);
        myLink.innerHTML = readMore+" &raquo;";
        flag = 1;;
    }
    if (flag == 1) main.appendChild(myDiv);
}
if(float_clear==true && imgFloat!="none")
{
myDiv = createDiv("bp_clear_float");
myDiv.style.clear=imgFloat;
main.appendChild(myDiv);
}
document.getElementById("bp_recent_link").style.backgroundImage="url('http://3.bp.blogspot.com/-H8WPIh3wjr4/TmHnuo9tnnI/AAAAAAAACDE/_yuVqfb1HAk/blogger-widgets.png')";
document.getElementById("bp_recent_link").style.backgroundRepeat="no-repeat";
try{
if(myMargin!=0 && imgFloat=="left" && flag==0) document.getElementById("bp_recent_link").style.marginLeft = myMargin+"px";
} catch(error){}
}
function createDiv(className)
{
var myDiv = document.createElement('div');
myDiv.setAttribute("class", className);
return myDiv;
}
function createLink(href,target,title)
{
var myLink = document.createElement('a');
        if(href.substring(href.length-13,href.length)=="#comment-form") {href= href.substring(0,href.length-13)+""+"#comment-form";myLink.setAttribute("href", href);}
        else myLink.setAttribute("href", href+"");
        myLink.setAttribute("target", target);
        myLink.setAttribute("title", title);
        return myLink;
}
//]]>
</script>
<script>
var numberOfPosts = 20;
var showPostDate = true;
var showSummary = true;
var summaryLength = 400;
var titleLength = 140;
var showCommentCount = true;
var showThumbs = true;
var showNoImage = false;
var imgDim = 100;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = true;
var readMore = 'далее';
</script>
<script src="https://poluhka.blogspot.com/feeds/posts/summary?max-results=18&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails"></script>


Настройки элементарные и совсем не сложные.

width: 820px; }  меняйте по желанию саму ширину фрагментов
var numberOfPosts = 20;  количество отображаемых последних сообщений
вместо моего https://poluhka.blogspot.com/ вставьте адрес вашего блога.

Сейчас идём в админ - панель, выбираем опцию страницы и создаём новую страницу. Перейдя сразу в режим HTML, вставляем готовый код и, не используя функцию просмотра, сразу публикуем. Сейчас просмотрите страницу и увидите, что последние статьи отображены, соответственно настройкам.

У меня уже набралось масса вариантов отображения последних статей блога. Если вы заинтересованы посмотрите их в меню ВСЕ СТАТЬИ под ярлыком ГАДЖЕТЫ.

Всем добра, настроения. Увидимся. 


хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

Реклама
Приветствую, вас. Облако меток - это виджет, предоставляемый Blogger, который позволяет классифицировать контент по определенным меткам. Виджет ярлыков делает ваш блог удобным для пользователя, позволяя посетителям легко перемещаться по контенту, который они ищут, выбирая категории / ярлыки.

гаджет ярлыки

Стандартный гаджет  ярлыки для блоггера, сам по себе выглядит очень просто и оставляет желать более интересный вариант. Но мы можем его настроить с помощью CSS. Если вы не знаете как, не волнуйтесь, с этим можно легко справиться. Используя CSS и эффект анимированного градиента, зададим ему интересный и привлекательный вид.  Давайте начнем:

Ниже я покажу вам 4 готовых варианта дизайна виджета ярлыки в блоге. На самом же деле используя готовые коды, вы сможете довольно просто подстроить цвета под ваши предпочтения.

Но для начала обращу ваше внимание на то, что все предложенные коды работают именно для отображения ярлыков в виде облака. Вот так

гаджет ярлыки в блоггере



1 вариант. Красные кнопки

ярлыки в блоггере


.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}

.label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
  background-image: linear-gradient(#EE4343, #E07C7C); /*цвет кнопки*/
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000; /*размер и цвет нижней границы*/
}

.label-size a:hover {
  background-position: 0 0;
}


2 вариант. Зелёные кнопки.

ярлыки в блоге

.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}

.label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
  background-image: linear-gradient(#00FF3B, #778C7C); /*цвет кнопки*/
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000; /*толщина и цвет нижней границы*/
} .label-size a:hover {
  background-position: 0 0;
}


3 вариант. Чёрные кнопки.


.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}

.label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
  background-image: linear-gradient(#8A8C8B, #1A1D1B); /*цвет кнопки-->
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000; /*толщина и цвет нижней границы*/
}

.label-size a:hover {
  background-position: 0 0;
}


4 вариант. Пёстренький вариант.

ярлыки в блоге

.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:12px;
  font-family:Open Sans;
  color:#fff!important;
  }

.sidebar .label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
}

.sidebar .label-size-1 a {background:#1abc9c;border:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#127F69;border:3px solid #1abc9c;}
.sidebar .label-size-2 a {background:#3498db;border:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#226693;border:3px solid #3498db;}
.sidebar .label-size-3 a {background:#2ecc71;border:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#1F8C4C;border:3px solid #2ecc71;}
.sidebar .label-size-4 a {background:#9b59b6;border:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#74398E;border:3px solid #9b59b6;}
.sidebar .label-size-5 a {background:#e74c3c;border:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#922C20;border:3px solid #e74c3c;}


В первых трёх вариантах меняйте значения linear-gradient /*цвет кнопки*/ на нужные. Можно найти в поиске генераторы linear-gradient.

Меняйте размер и цвет нижней границы - border-bottom:3px solid #000000; /*толщина и цвет нижней границы*/

Последний вариант предусмотрен именно для сайдбара. Многие гаджет ярлыки устанавливают в подвале или ещё где, так что первые коды можно использовать независимо от того, где гаджет будет установлен.

В четвёртом коде тоже можно играться со всеми значениями в этих строках

.sidebar .label-size-1 a {background:#1abc9c;border:3px solid #127F69;} /*основные цвета кнопки, нижней границы*/
.sidebar .label-size-1 a:hover {background:#127F69;border:3px solid #1abc9c;} /*цвета при наведении курсора*/

Когда определились с выбором, идём во вкладку ТЕМА - ИЗМЕНИТЬ HTML. Находим строку ]]></b:skin> (читаем здесь) и сразу над ней устанавливаем нужный код. Сохраняем.

Остаётся только полюбоваться результатом или что - то подкорректировать.

Ещё один вариант как изменить дизайн гаджета ярлыки в блоге.


хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

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

популярные сообщения

Особенности гаджета популярные сообщения

Показывает посты миниатюрами с заголовками
Эффект масштабирования при наведении курсора
Названия показываются в прозрачном цвете
Вы сможете сами установить размер миниатюр, которые обычно выводятся в Блоггере размером 72 х 72 пикселя.
Лёгкая настройка цветовой гаммы

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



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

2. Сейчас ниже выберите для себя подходящий вариант и копируйте его код.

3. Опять зайдите в админпанель - добавить виджет - HTML/JavaScript и вставьте в него код.

4. Виджет с кодом нужно установить над созданным на шаге 1 гаджетом популярные сообщения.

5. Сохраните расположение и посмотрите результат.

Вот 2 варианта стилей гаджета популярных сообщений

1 вариант. Сообщения отображаются лентой в одну колонку

популярные сообщения

код

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>//<![CDATA[
    $undefineddocument).readyundefinedfunctionundefined) {
      var tbn = 150;
      $undefined'#PopularPosts1').findundefined'img').eachundefinedfunctionundefinedn, image){
        var image = $undefinedimage);
        image.attrundefined{src : image.attrundefined'src').replaceundefined/s\B\d{2,4}/,'s' + tbn)});
        image.attrundefined'width',tbn);
        image.attrundefined'height',tbn);
      });
    });
    //]]></script>

<style>
  .sidebar .popular-posts ul {
  counter-reset: popcount;
  margin: 0;
  padding: 0;
  }
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li {
  font-family: "Oswald",sans-serif;
  height: 130px;
  font-weight: bold;
  list-style: none !important;
  overflow: hidden;
  padding: 0px !important;
  position: relative;
  margin: 2px;
  border: 0;
  width: 100%;
  float: left;
}
.sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;}
.sidebar .PopularPosts ul li img {
  display: block;
  float: left;
  padding: 0;
  width: 100%;
  height: 130px;
  -webkit-transition-duration: 1.0s;
  -moz-transition-duration: 1.0s;
  -o-transition-duration: 1.0s;
  transition:1.0s;
  }
.sidebar .PopularPosts ul li img:hover {
  -webkit-transform:scale(1.06);
  -moz-transform:scale(1.06);
  -o-transform:scale(1.06);
  transform:scale(1.06);
  overflow: hidden;
  }
.sidebar .PopularPosts .item-title {
  bottom:0;
  left: 0;
  right: 0;
  padding-bottom: 0;
  position: absolute;
  z-index: 999;
 }
.sidebar .PopularPosts .item-title a {
  background: rgba(32, 32, 32, 0.77);
  color: #FFFFFF;
  display: block;
  font-size: 16px;
  font-weight: bold;
  line-height: normal;
  font-family: "Oswald",sans-serif;
  padding: 10px 0px 5px 10px;
  text-transform: capitalize;
  transition: all .4s ease-in-out;
}
.sidebar .popular-posts ul li:hover .item-title a {
  color: rgba(255, 255, 255, 1);
  background: rgba(231, 76, 60, 0.88);
  text-decoration: none;
  }
.sidebar .popular-posts ul li:before {
  background: rgba(255, 252, 8, 1);
  color: #000;
  content: counter(popcount, decimal);
  counter-increment: popcount;
  float: left;
  font-size: 14px;
  line-height: 20px;
  list-style-type: none;
  padding: 0px 8px 1px 1px;
  border-radius: 0px 0px 10px 0px;
  position: absolute;
  top: 0;
  z-index: 4;
  border: solid #FFF;
  border-width: 0px 2px 2px 0px;
  }</style>


2 вариант. Сообщения отображаются сеткой в две колонки

популярные сообщения
код

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>//<![CDATA[
    $undefineddocument).readyundefinedfunctionundefined) {
      var tbn = 150;
      $undefined'#PopularPosts1').findundefined'img').eachundefinedfunctionundefinedn, image){
        var image = $undefinedimage);
        image.attrundefined{src : image.attrundefined'src').replaceundefined/s\B\d{2,4}/,'s' + tbn)});
        image.attrundefined'width',tbn);
        image.attrundefined'height',tbn);
      });
    });
    //]]></script>
<style>
 .sidebar .popular-posts ul {
      counter-reset: popcount;
      margin: 0;
      padding: 0;
      }
    .sidebar .popular-posts ul li:first-child {}
    .sidebar .popular-posts ul li {
      font-family:'Oswald','Open Sans','Helvetica Neue',Arial,Tahoma,sans-serif;
      height: 130px;
      list-style: none !important;
      overflow: hidden;
      padding: 0 !important;
      position: relative;
      margin: 2px;
      border: 0;
      width: 48%;
      float: left;
      }
    .sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;}
    .sidebar .PopularPosts ul li img {
      display: block;
      float: left;
      padding: 0;
      width: 100%;
      height: 130px;
      -webkit-transition-duration: 1.0s;
      -moz-transition-duration: 1.0s;
      -o-transition-duration: 1.0s;
      transition:1.0s;
      }
    .sidebar .PopularPosts ul li img:hover {
      -webkit-transform:scale(1.06);
      -moz-transform:scale(1.06);
      -o-transform:scale(1.06);
      transform:scale(1.06);
      overflow: hidden;
      }
    .sidebar .PopularPosts .item-title {
      bottom:0;
      left: 0;
      right: 0;
      padding-bottom: 0;
      position: absolute;
      z-index: 999;
     }
    .sidebar .PopularPosts .item-title a {
      background: rgba(32, 32, 32, 0.77);
      color: #FFFFFF;
      display: block;
      font-size: 12px;
      line-height: normal;
      padding: 5px 0px 2px 5px;
      text-transform: capitalize;
      transition: all .4s ease-in-out;
      }
    .sidebar .popular-posts ul li:hover .item-title a {
      color: rgba(255, 255, 255, 1);
      background: rgba(231, 76, 60, 0.88);
      text-decoration: none;
      }
    .sidebar .popular-posts ul li:before {
      background: rgba(255, 252, 8, 1);
      color: #000;
      content: counter(popcount, decimal);
      counter-increment: popcount;
      float: left;
      font-size: 14px;
      line-height: 20px;
      list-style-type: none;
      padding: 0px 8px 1px 1px;
      border-radius: 0px 0px 10px 0px;
      position: absolute;
      top: 0;
      z-index: 4;
      border: solid #FFF;
      border-width: 0px 2px 2px 0px;
      }</style>



На тестовом блоге посмотрите как будет выглядеть вариант 2. У меня там мало опубликованных сообщений поэтому отображено только 2 статьи, чтобы вас это не смущало.


Копируйте код понравившегося виджета популярных сообщений в виде картинок и устанавливайте, следуя описанным шагам.

Жёлтый цвет background: rgba(255, 252, 8, 1); нумерации можно изменить на ваше усмотрение. Он задан в формате rgba (найдите в поиске). Так же поиграйтесь со всеми значениями
background:.

Важно:

если вы уже устанавливали виджет популярные сообщения на боковой панели и захотите установить этот вариант, вам нужно убрать стили CSS старого.

некоторые устанавливают популярные сообщения над или под постами блога. Этот виджет работает только для боковой панели.

если вы всё сделали правильно, а виджет не работает, следует обратить внимание на использование различных классов CSS для боковой панели. Шаблоны у всех разные. В предложенных примерах я использовала класс .sidebar .PopularPosts { у вас может быть .sidebar-wrapper .PopularPosts { или  #sidebar .PopularPosts {. Просто везде в коде нужно заменить на тот который в вашем шаблоне

Больше ни каких заморочек быть не должно.

Посмотрите ещё варианты оформления виджета популярных постов

Красивый анимированный виджет популярных сообщений
Ещё один анимированный виджет популярных постов.
И здесь очень красивый виджет самых читаемых публикаций

Выбор за вами. Спасибо за внимание и до встречи. 

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

Привет, друзья. Всё больше и больше набирают популярность при веб - дизайне различные hover эффекты для картинок на страницах сайта. Как же я давно не писала про оформление изображений. Если вы что - то пропустили, все эффекты для изображений можно посмотреть под ярлыком картинки. Сегодня предложу красивый, назову его полупрозрачный эффект, когда при наведении курсора на картинку появиться описание и красиво оформленный тон. 

эффекты для картинок


Сама фишка ни чем особым не отличается от других подобных эффектов. Всё создаётся так же с помощью CSS и не несёт нагрузки на блог в целом. Сейчас мы сделаем сразу несколько слоёв, но результат будет достаточно интересный. Самое главное использовать будем всего 2 основных цвета. Реализация достаточно простая, но как современно, стильно и красиво это выглядит.

Так же добавим некоторый эффект анимации к картинке. 

Чтобы долго  не говорить, сразу предлагаю посмотреть результат. Скопируйте код, приведённый ниже и установите его в редакторе для просмотра результата.

<figure class="snip">
  <img src="http://veneratour.com/pics/resorts/2011/03/02/8296_1299055722_big.jpg" alt="sample110" />
  <figcaption>
    <h3>Индонезия</h3>
    <p>Красивый остров Бали в океане</p>
  </figcaption>
  <a href="#"></a>
</figure>

<figure class="snip"><img src="http://tourweek.ru/upload/iblock/858/544133614_3e2445332a_o.jpg" alt="sample59" />
  <figcaption>
    <h3>Таиланд</h3>
    <p>Уникальный остров Пхи - Пхи в Таиланде </p>
  </figcaption>
  <a href="#"></a>
</figure>


<style>
.snip {
  background-color: #fff;
  color: #ffffff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  margin: 10px 5px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: right;
  width: 100%;
}

.snip *,
.snip *:before,
.snip *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip img {
  backface-visibility: hidden;
  max-width: 100%;
  vertical-align: top;
}

.snip:before,
.snip:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background-color: #b81212;
  opacity: 0.5;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip:before {
  -webkit-transform: skew(30deg) translateX(80%);
  transform: skew(30deg) translateX(80%);
}

.snip:after {
  -webkit-transform: skew(-30deg) translateX(70%);
  transform: skew(-30deg) translateX(70%);
}

.snip figcaption {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  bottom: 0;
  padding: 20px 20px 20px 40%;
}

.snip figcaption:before,
.snip figcaption:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #b81212;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  content: '';
  opacity: 0.5;
  z-index: -1;
}

.snip figcaption:before {
  -webkit-transform: skew(30deg) translateX(100%);
  transform: skew(30deg) translateX(100%);
}

.snip figcaption:after {
  -webkit-transform: skew(-30deg) translateX(90%);
  transform: skew(-30deg) translateX(90%);
}

.snip h2,
.snip p {
  margin: 0;
  opacity: 0;
  letter-spacing: 1px;
}

.snip h2 {
  font-family: 'Teko', sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase;
}

.snip p {
  font-size: 0.9em;
}

.snip a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip:hover h2,
.snip.hover h2,
.snip:hover p,
.snip.hover p {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 0.9;
}

.snip:hover:before,
.snip.hover:before {
  -webkit-transform: skew(30deg) translateX(30%);
  transform: skew(30deg) translateX(30%);
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

.snip:hover:after,
.snip.hover:after {
  -webkit-transform: skew(-30deg) translateX(20%);
  transform: skew(-30deg) translateX(20%);
}

.snip:hover figcaption:before,
.snip.hover figcaption:before {
  -webkit-transform: skew(30deg) translateX(50%);
  transform: skew(30deg) translateX(50%);
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.snip:hover figcaption:after,
.snip.hover figcaption:after {
  -webkit-transform: skew(-30deg) translateX(40%);
  transform: skew(-30deg) translateX(40%);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
</style>

В строках, отмеченных зелёным цветом, вставляйте адреса ваших изображений. Розовым цветом я выделила, заголовок на картинке и описание.
Вместо решёток укажите, по необходимости ссылку, куда будет осуществляться переход при клике на картинку, в этом участке кода <a href="#"></a>.
Ну сам цвет такого эффекта в двух местах можно изменить на свой, соответствующий основе вашего дизайна. Воспользуйтесь таблицей цветов. 

Сейчас, как всегда, готовый код устанавливается в редакторе сообщений в нужном месте в режиме HTML.

Такой вот необычный и стильный hover эффект для изображений может украсить страницы ваших сообщений. 

Всем добра и солнечных денёчков. До встречи.

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

Всем, доброго времени суток. Очередная менюшка для вас. На этот раз предлагаю код выезжающего, вертикального, многоуровневого меню. На странице будет только небольшой лейбл с названием. При нажатии открывается пункты меню, с выпадающими вкладками. Разместить в таком меню можно массу информации.

меню для блога

В результате будем иметь -

Меню всегда на виду в верхнем правом углу страницы.
Легко можно добавить при необходимости, дополнительные пункты и подпункты меню непосредственно в код.
Экономится масса места на странице.
С помощью стилей можно легко подогнать внешний вид под ваш дизайн.
Установка меню в блоге не требует особых навыков.

Предлагаю скопировать код, приведённый ниже и установить его в этот редактор, для просмотра выскальзывающего меню в работе.

<style>#menu-vertical{width:19em;right:-19em;top:5.5em;height:auto;position:fixed;overflow-y:hidden;background-color:# CC6666;transition:right .4s ease-in-out;margin:0;padding:0}
#menu-vertical:hover{right:0;}
#menu-label{display:inline-block;background:#CC0033;position:fixed;text-align:center;right:0;top:3.2em;z-index:100;font-size:14px;line-height:30px;}
#menu-label a{color:#FFF;display:block;text-transform:uppercase;text-decoration:none;width:5.1em;}
#menu-label:hover{opacity:0.67;}
.vertical { font-size:13px; line-height:30px; font-weight:700; border:1px solid #1d1d1d; border-radius:1px; }
.vertical>ul { margin:0; padding:0; }
.vertical ul,.vertical li { list-style:none; }
.vertical>ul>li { background:#333333; margin:0;text-transform:uppercase;padding:0;color:#fff;}
.vertical>ul>li:hover {background:#4B4B4B}
.vertical>ul>li a{color:#fff}
.vertical>ul>li ul { transition:.3s ease-out; opacity:0; margin:0; padding:0; }
.vertical>ul>li li { background:#efefef;}
.vertical>ul>li li a{color:#333;text-transform:none}
.vertical a { display:block; text-align:center; text-decoration:none!important; }
.vertical>ul>li>a { border-top:1px solid #353535; border-bottom:1px solid #161616;}
.vertical>ul>li ul li a { height:0; transition:.3s ease-out}
.vertical>ul>li:hover ul li a { height:30px; }
.vertical>ul>li:hover ul { opacity:1; }
.vertical > ul > li li:hover { box-shadow:inset 0 1px #4077CB,inset 0 -1px #4077cb; background:#3e6db5;}
.vertical > ul > li li:hover a{color:#fff }</style>

<div id="menu-vertical">
<h3 id="menu-label"><a href="#">Меню</a></h3>
<div class='vertical'>
<ul>
<li><a href='/' title='Menu1'>Меню 1</a>
<ul>
<li><a href='/' title='Menu1'>вкладка 1 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 2 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 3 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 4 Меню 1</a></li>
<li><a href='/' title=' Menu1'>вкладка 5 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 6 Меню 1</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='/' title='Menu2'>Меню 2</a>
<ul>
<li><a href='/' title='вкладка 1 Menu2'>вкладка 1 Меню2</a></li>
<li><a href='/' title='вкладка 2 Menu2'>вкладка 2 Меню2</a></li>
<li><a href='/' title='вкладка 3 Menu2'>вкладка 3 Меню2</a></li>
<li><a href='/' title='вкладка 4 Menu2'>вкладка 4 Меню2</a></li>
<li><a href='/' title='вкладка 5 Menu2'>вкладка5 Меню2</a></li>
<li><a href='/' title='вкладка 6 Menu2'>вкладка 6 Menu2</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='/' title='Menu3'>Меню 3</a>
<ul>
<li><a href='/' title='Sub1 Menu3'>вкладка 1 Меню3</a></li>
<li><a href='/' title='Sub2 Menu3'>вкладка2 Меню3</a></li>
<li><a href='/' title='Sub3 Menu3'>вкладка3 Меню3</a></li>
<li><a href='/' title='Sub4 Menu3'>вкладка4 Меню3</a></li>
<li><a href='/' title='Sub5 Menu3'>вкладка5 Меню3</a></li>
<li><a href='/' title='Sub6 Menu3'>вкладка6 Меню3</a></li>
</ul>
</li>
</ul>
</div>
</div>


А теперь с настройками разберёмся.

background:#CC0033  это цвет самого лейбла. Другие background меняйте на своё усмотрение. В первом коде (я его отметила другим шрифтом) изменить можно почти все стили.
Меню  название страниц меню
вкладка 1   название подпунктов меню

Во всех участках текста где прописано <a href='/'  вместо слеша (/)вставляйте адреса своих страниц и подстраниц ( вкладок). Для начинающих блогеров советую прочитать статьи о подстраницах и страницах блога.

Добавляйте для дополнительных пунктов меню и подменю такой участок кода

<ul>
<li><a href='/' title='Menu1'>Меню 1</a>
<ul>
<li><a href='/' title='Menu1'>вкладка 1 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 2 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 3 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 4 Меню 1</a></li>
<li><a href='/' title=' Menu1'>вкладка 5 Меню 1</a></li>
<li><a href='/' title='Menu1'>вкладка 6 Меню 1</a></li>
</ul>
</li>
</ul>


Если есть необходимость добавить дополнительные вкладки (подпункты), добавляйте строки

<li><a href='/' title='Menu1'>вкладка 6 Меню 1</a></li>


Вроде как и все настройки. Прекрасное выезжающее меню с раскрывающимися вкладками. 

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :