среда, 20 марта 2013 г.

Содержание блога с картинками.


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


У меня не все фото отобразились, а только те, которые я заливала из своего компьютера. Причина у меня вероятнее всего в том, что я из фотографий, позаимствованных в сети, убираю внешние ссылки. Поэтому в вашем случае все картинки могут быть на месте.

Почему удалила? Блог стал заметно дольше грузиться. Но это мне важно, у меня интернет с флешки и дорого выходит. Для больших городов с высокоскоростным интернетом причина не актуальна.

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

К сожалению, предыдущая статья была удалена в связи с хакерским взломом предыдущего скрипта. Если кому-то очень нужна подробная информация, пишите, вместе восстановим пошагово что и как делать.
<style>
  #resultados { /* общий блок */ }
  #loadingscript { /* текст "Загрузка" */ }

  .paginaposts { /* каждого прямоугольника */
    border: 1px solid #ddcca3;
    float: left;
    height: 50px;
    margin: 1px;
    padding: 5px;
    width: 230px;
    background: #ecdcb5;
  }

  .paginaposts a { /* ссылки */
    color: #61512c;
    display: block;
    font-size: 11px;
    text-decoration: none;
    text-indent: 0px;
  }

  .paginaposts img { /* изображения */
    float: left;
    height: 40px;
    width: 40px;
    padding: 2px;
    margin: 2px 5px 2px 2px;
  }

  .paginaposts h6 { /* заголовки */
    height: 45px;
    margin: 0;
    font-weight: normal;
  }

  .paginaposts:hover { /* эффект при наведении мышки */
    background-image: -moz-linear-gradient(100% 100% 90deg, #faf838, #fbfab3);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#faf838), to(#fbfab3));
    filter:progid: DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#fbfab3', EndColorStr='#faf838');
    border: 1px solid #faf838;
  }

  #paginacion { /* нижний контейнер с количеством записей */
    color: #bbb;
    font-family: Lucida Grande;
    font-size: 24px;
    font-weight: bold;
    height: 35px;
    line-height: 28px;
    padding: 20px 0;
    text-align: center;
  }

  #paginacion span, #paginacion a { /* постраничная навигация */
    border: 1px solid #ddcca3;
    color: #d6a87a;
    display: inline-block;
    font-family: Lucida Grande;
    font-size: 24px;
    font-weight: bold;
    margin: 0 2px;
    padding: 0 5px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-indent: 0px;
  }
 
  #paginacion span.actual { /* текущая страница */
    color: #ff9202;
    padding: 0 5px;
    -moz-box-shadow: 0 0 30px #fff inset;
    -webkit-box-shadow: 0 0 30px #fff inset;
    box-shadow: 0 0 30px #fff inset;
  }

  #paginacion a:hover { /* наведение на эти ссылки */
    color: #fff;
    -moz-box-shadow: 0 0 20px #666 inset;
    -webkit-box-shadow: 0 0 20px #666 inset;
    box-shadow: 0 0 20px #666 inset;
    text-decoration: none;
  }

  #paginacion .antesdespues { border: none; }
  #paginacion .antesdespues:hover {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  #paginacion span.deshabilitado { /* следующие */
    border: none;
    color: #c46f16;
  }

  #totales {text-align:center;}

</style><script type="text/javascript">
//<![CDATA[
var postporpagina = 60; // число записей на странице
var urlsitio = "****************************"; // адрес блога
var minpaginas = 5; // минимальное количество страниц 
var maxpaginas = 10; // максимальное количество страниц
var imgxdefecto = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuYdVuarReL0ExaVNJ9meDmA0x2HSBCWCbd7AfVQllAsVgIsiAIQZYwUiEKR5-5v6m7-ma5-bKcIl75LqTnHDiui_bMXIA7hd_n8DWWiJgkO5WjvXnss_V6O7OzYcR202fKjUr5xt-aMcj/s1600/vagaPlantilla_resumenpostsnoimage.gif"; // адрес изображения, который будет показан при отсутствии картинки в сообщении

var firsttime = 0; 
var paginaactual = 1; 
var cantidadpaginas = 0; 
var cantidadposts = 0; 

function showpageposts(json) {
  var entry, posttitle, posturl, postimg;
  var salida = "";

  if(cantidadpaginas==0) {
    cantidadposts = parseInt(json.feed.openSearch$totalResults.$t);
    cantidadpaginas = parseInt(cantidadposts / postporpagina) + 1;
  }

  for (var i = 0; i < postporpagina; i++) {
    if (i == json.feed.entry.length) { break; } 
    entry = json.feed.entry[i];

    posttitle = entry.title.$t;

    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = imgxdefecto;
    }

    salida += "<div class='paginaposts'>";
    salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
    salida += "</div>";
  }
  
  document.getElementById("resultados").innerHTML = salida;

  paginacion();
}

function paginacion() {
  contadorP = 0;
  salida = "";

  if(paginaactual>1) {
    salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual-1) + ")'>следующие</a>";
  } else {
    salida += "<span class='deshabilitado'>следующие</span>";
  }

  if (cantidadpaginas<(maxpaginas+1)) {
    for (contadorP = 1; contadorP <= cantidadpaginas; contadorP++){
      if (contadorP==paginaactual) {
        salida += "<span class='actual'>" + contadorP + "</span>";
      } else {
        salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
      }
    }
  } else if(cantidadpaginas>(maxpaginas-1)) {
    if(paginaactual<minpaginas) {
      for (contadorP=1; contadorP<(maxpaginas-2); contadorP++){
       if (contadorP == paginaactual) {
         salida += "<span class='actual'>" + contadorP + "</span>";
       } else {
         salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
       }
     }
     salida += " ... ";
     salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
     salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
    } else if(cantidadpaginas-(minpaginas-1)>paginaactual&&paginaactual>(minpaginas-1)) {
      salida += "<a href='javascript:incluirscript(1)'>1</a>";
      salida += "<a href='javascript:incluirscript(2)'>2</a>";
      salida += " ... ";
      for (contadorP=paginaactual-2; contadorP<=paginaactual+2; contadorP++) {
        if (contadorP==paginaactual) {
          salida += "<span class='actual'>" + contadorP + "</span>";
        } else {
          salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
        }
      }
      salida += " ... ";
      salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
      salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
    } else {
      salida += "<a href='javascript:incluirscript(1)'>1</a>";
      salida += "<a href='javascript:incluirscript(2)'>2</a>";
      salida += " ... ";
      for (contadorP=cantidadpaginas-(minpaginas+1); contadorP<=cantidadpaginas; contadorP++) {
        if (contadorP==paginaactual) {
          salida += "<span class='actual'>" + contadorP + "</span>";
        } else {
          salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
        }
      }
    }
  }

  if (paginaactual<contadorP-1) {
    salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual+1) + ")'>предыдущие</a>";
  } else {
    salida += "<span class='deshabilitado'>предыдущие</span>";
  }

  document.getElementById("paginacion").innerHTML = salida;

  var iniciopagina = (paginaactual * postporpagina) - (postporpagina - 1);
  var finalpagina = paginaactual * postporpagina;
  var totales = "Всего опубликовано сообщений: " + cantidadposts + " - из них показано " + iniciopagina + "-" + finalpagina + " записей";
  document.getElementById("totales").innerHTML = totales;
}

function incluirscript(pagina) {

  if(firsttime==1) {removerscript();}

  document.getElementById("resultados").innerHTML = "<div id='loadingscript'>загрузка ...</div>";
  document.getElementById("paginacion").innerHTML = "";
  document.getElementById("totales").innerHTML = "";

  var iniciopagina = (pagina * postporpagina) - (postporpagina - 1);

  var archivo = urlsitio + "/feeds/posts/default?start-index=" + iniciopagina;
  archivo += "&max-results=" + postporpagina;
  archivo += "&orderby=published&alt=json-in-script&callback=showpageposts";

  var nuevo = document.createElement('script');
  nuevo.setAttribute('type', 'text/javascript');
  nuevo.setAttribute('src', archivo);
  nuevo.setAttribute('id', 'TEMPORAL');
  document.getElementsByTagName('head')[0].appendChild(nuevo);

  firsttime = 1;
  paginaactual = pagina;
}

function removerscript() {
  var el = document.getElementById("TEMPORAL");
  var padre = el.parentNode;
  padre.removeChild(el);
}

onload=function() { incluirscript(1); }
//]]>
</script>
<div id="resultados" ></div>
<div style="clear:both;"></div>
<div id="paginacion"></div>
<div id="totales"></div>


Не забудьте сменить звездочки на адрес своего блога. Цифры выделенные красным цветом тоже могут быть другими, там все понятно. Удачи! Не забудьте поделиться впечатлениями.

 АНОНС СЛЕДУЮЩЕГО СООБЩЕНИЯ: Карта сайта по-новому. Компактная. 



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

  1. Энн, просто супер! я как раз в прошлом посте хотела спросить или можно сделать, чтоб картинки были:) но решила, не морочить тебе голову:)
    Спасибо!

    ОтветитьУдалить
    Ответы
    1. Оленка, здорово получать такие эмоции в ответ на проделанную работу. Спасибо! Рада, что понравилось.

      Удалить
  2. оооооооооо крутняк!!! вот это класс когда с картинками очень наглядно и понятно будет для посетителей. сегодня обязательно попробую и вернусь поделиться впечатлениями. с нетерпением жду новую карту сайта.

    ОтветитьУдалить
  3. Энн, ты просто умничка, попробовала - получилось! Как ты и предрекала, картинки отобразились только мною загруженные, но мне это не мешает. Красота!

    ОтветитьУдалить
    Ответы
    1. HandMadePassion, спасибо за похвалу)) Теперь знаете, что первое фото лучше загружать из компьютера.Если фото нужно из сети, то сначала скачать к себе. Хлопотнее, но зато будет картинка.

      Удалить
  4. бросила все дела и побежала пробовать. КЛАССС!!! очень понравилось. СПАСИБИЩЕ!!! за 1 мин посетитель может увидеть практически весь блог и посмотреть что именно его заинтересовало. опять это очень удобно если точно не знаешь какой ярлык нужно выбрать, приходиться тыркаться пыркаться по чужому блогу, а тут по картинке очень легко сориентироваться. пока не поняла на сколько это отразиться на быстроте самого блога, буду надеяться что не очень сильно все таки. сам архив загружается втечении 10 секунд мой новый архив исправилась по поводу активных ссылок :)

    ОтветитьУдалить
  5. у меня все посты с моими картинками, поэтому все высветились, очень наглядно и красиво и мне кажется удобно!!!

    ОтветитьУдалить
  6. БАЛДЕЮ!!! самой нравится:) Энн какая ты большая МОЛОДЕЦ!!!!! СПА-СИ-БО!!!

    ОтветитьУдалить
    Ответы
    1. Ирина, ты чудо! Спасибо за эмоции))) Это самая большая награда для меня, когда у читателей все получается и они радуются. А по ссылке загляну))

      Удалить
    2. Заглянула. Все отлично загружается и подходит твоему блогу, как будто к нему и создавали.

      Удалить
  7. Странно.. но у меня не получилось .... В смысле получилось, но так и не загрузилось при открытии страницы. Я обратно переделала, как в предыдущем посте )))
    И вроде бы инет самый наискоростной ....
    Попробую ночью - вдруг все таки скорость упала.

    ОтветитьУдалить
    Ответы
    1. Жаль, что не получилось хотя бы посмотреть. Ничего, завтра еще прикольну карту сайта увидите)))

      Удалить
  8. Энн, вот и я себе установила. очень нравится! Спасибо!
    Подскажи, пожалуйста, а можно картинки и текст увеличить, а то очень мелко написано.
    И выставить, что бы было в центре страницы? И еще можно цвет изменить ближе к своему блогу?
    Ну, я тебя сегодня забросала вопросами:))

    ОтветитьУдалить
    Ответы
    1. На счет цвета. Судя по скрипту, можно. Все, что выглядит примерно так #ecdcb5, это цвет. Можно просто методом тыка поменять. Вот ссылка на цвета, рядом с каждым есть название в цифрах и буквах.

      http://www.artlebedev.ru/tools/colors/ или еще один адрес

      http://www.w3schools.com/html/html_colornames.asp

      Удалить
    2. Что касается размещения по центру. Если сообщений много, то они будут равномерно распределены, нет необходимости их куда-то двигать.

      Кстати, сначала найдите в таблице в буквах-цифрах цвет и сравните со своим открытым архивом, так сможете выяснить что именно Вы меняете. Можно цвет и в поисковик забить, а из таблицы выбрать то, который хотите поставить.

      С размером я бы поэкспериментировала, но уже удалила. В скрипте вижу цифры с пикселями, но за что именно они в ответе, не знаю. Надо пробовать.

      Удалить
    3. спасибо! буду тогда разбираться, если получится:)

      Удалить
  9. Ой, как классно такое содержание смотрится!!! И красиво и содержательно) Супер!

    ОтветитьУдалить
  10. Отличное дополнение для украшения и оптимизации сайта! Я воспользовалась вашей записью и у себя в блоге протестировала. Очень интересно вышло, спасибо, Энн.

    ОтветитьУдалить
    Ответы
    1. Elizabeth Summer, да, действительно и оптимизация, и украшение в одном. Рада, что понравилось.

      Удалить
  11. Я Вас ЛЮБЛЮ! Идеи - ну просто нет слов ;)Спасибо

    ОтветитьУдалить
    Ответы
    1. Я тоже люблю своих читателей)))) Хотя сейчас ужасно стыдно, что не пишу, тем более, что статья обещана.

      Удалить
  12. Ой как здорово! Случайнно попала в этот блог! Архив первое, что испробовола - все получилось. Спасибо большое. Пойду изучать дальше это море очень полезной информации!!!!!!!!!!!!

    ОтветитьУдалить
    Ответы
    1. ЛИринка, я очень рада, что Вам сходу понравилось. Надеюсь, что не разочаруетесь. А как Вы ко мне в блог попали?

      Удалить
  13. Энн, спасибо огромное, потрясающее классно теперь смотрится архив!!

    ОтветитьУдалить
    Ответы
    1. Zarema Tagirova, реально интересный архив, еще бы поколдовать с цветом и размером шрифта.

      Удалить
    2. Энн, как говорится нет пределу совершенство)))

      Удалить
  14. ЭНН,СПАСИБО ТЕБЕ ОГРОМНЕЙШЕЕ!!!ВСЁ ПОЛУЧИЛОСь!!!!!ШИКАРНО!!!!СКАЖИ,ПЛИЗ,А МОЖНО ИЗ СОДЕРЖАНИЯ НЕНУЖНЫЕ СООБЩЕНИЯ УБРАТь????

    ОтветитьУдалить
    Ответы
    1. irushka78, если удалить его, то оно и в содержании должно исчезнуть. Нужно расписывать, как удалить?

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

      Удалить
    3. Энн,проблема следующая:У меня кулинарный блог.По этому примеру я сделала раздел:"все рецепты",а ещё хочу сделать страницу"сладкие блюда" и соответственно сделать выборку из предыдущего раздела...Помоги ,пожалуйста:)

      Удалить
    4. Иришка, давай пообщаемся вне комментариев. Пиши на почту nata59blogspot@yandex.ru (не пытайся разобрать буквы, просто копируй)

      Удалить
  15. Энн, привет! Давненько я Вам не писала. Но заглядывала часто
    Пишу благодарственное письмо
    Сколько всяких полезностей для блога я научилась у Вас в начале своего блогопути.
    Думала, что нечего больша пичкать в блог, чтоб не перенасытить.
    Но карта блога с картинками - именно то, что ОЧЕНЬ подходит моему фотоблогу!
    Спасибо за подсказку!!!

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

    ОтветитьУдалить
    Ответы
    1. Lysulka, заглядывала))) Все отлично смотрится! Спасибо за душевное благодарственное письмо. Хвалю за смелость и за упорство! Молодец!

      Удалить
  16. Большое спасибо! Карта с картинками самое то, мне как раз с картинками для фотокниг надо было! Давно искала и вот случайно наткнулась. Пожала ползать по вашему замечательному блогу дальше. Уверена, что найду ещё что-нибудь полезное!

    ОтветитьУдалить
    Ответы
    1. Наталья (Neco), спасибо и Вам на добром слове. А я, пожалуй, загляну в ваш блог.

      Удалить
  17. СПАСИБО!!!СПАСИБО!!!!СПАСИБО!!!!! Почти неделю искала, но натыкалась на такие сложности в установке - ужууусть!!!!. Уж совсем отчаялась, но благодаря Вам все получилось!

    ОтветитьУдалить
  18. Энн, добрый день!
    У меня случилась беда! Просто беда! Сунула свой длинный нос в установленную давно фотокарту блога, которая прекрасно работала... (((( поменяла 60 сообщений на странице на 100. Теперь не работает и не встает новая!
    Посоветуйте, что делать?

    ОтветитьУдалить
  19. Энн, добрый день! Спасибо, за предложенный вариант страницы, установила, все получилось. Немного изменила размеры ;)

    ОтветитьУдалить
  20. А я ничего абсолютно не понял, какой-то скрипт, куда его вставлять, никаких пояснений.Спасибо.

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

Дорогой мой читатель, если Вам понравилась статья, то напишите отзыв, мне очень приятно читать комментарии. А если Вы посчитаете, что статья достойна того, чтобы ее порекомендовать остальным, нажмите на +1.

Хотите сохранить полезную информацию в соц.сетях? Выбираем и сохраняем!

LinkWithin

Related Posts Plugin for WordPress, Blogger...