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

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

демонстрация

Как всегда нужные настройки разберу ниже. А пока просто скопируйте код в блокнот или черновик Блоггер.

<script type="text/javascript">

var Book_Image_Width    =348;
var Book_Image_Height   =250;
var Book_Border         = true;
var Book_Border_Color   ="gray";
var Book_Speed          =15;
var Book_NextPage_Delay =1500;
var Book_Vertical_Turn  =0;
var random_posts        = false;
var numposts_gal        = 10; 
</script>
<script type='text/javascript'>
 //<![CDATA[   
  var showpostthumbnails_gal  = true;
 var random_posts         = false;
 var numposts_gal   = 10;
 var Book_Image_Sources=new Array();
function showgalleryposts(json) {
    var numPosts = json.feed.openSearch$totalResults.$t;
    var indexPosts = new Array();
    for (var i = 0; i < numPosts; ++i) {
        indexPosts[i] = i;
    }
 if (random_posts == true){
    indexPosts.sort(function() {return 0.5 - Math.random()});
 }
    if (numposts_gal > numPosts) {
        numposts_gal = numPosts;
    }
    for (i = 0; i < numposts_gal; ++i) {
        var entry_gal = json.feed.entry[indexPosts[i]];
  var posttitle_gal =  entry_gal.title.$t;
        for (var k = 0; k <  entry_gal.link.length; k++) {
            if ( entry_gal.link[k].rel == 'alternate') {
                posturl_gal =  entry_gal.link[k].href;
                break;
            }
        }
  if ("content" in entry_gal) {
            var postcontent_gal = entry_gal.content.$t
        }
        s = postcontent_gal;
        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 != "")) {
            var thumburl_gal = d
        } else var thumburl_gal = 'https://upload.wikimedia.org/wikipedia/commons/9/9a/%D0%9D%D0%B5%D1%82_%D1%84%D0%BE%D1%82%D0%BE.png';
  if (i== 0){
  var thumb_ = 0;
  var thumb_link = 1;
  }
  else{
  var thumb_ = i * 2;
  var thumb_link = thumb_+1;
  }
  Book_Image_Sources[thumb_]=thumburl_gal;
  Book_Image_Sources[thumb_link]=posturl_gal;
    }
}
 //]]>
 </script>
<script type='text/javascript'>
 //<![CDATA[   
 var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
 var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);
 function ImageBook(){
  if(document.getElementById){
   for(i=0;i<Book_Image_Sources.length;i+=2){
   B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i];
   }
   Book_Div=document.getElementById("Book");
   B_LI=document.createElement("img");Book_Div.appendChild(B_LI);
   B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
   B_MI=document.createElement("img");Book_Div.appendChild(B_MI);
   B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
   B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
   B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
   B_LI.style.left=0+"px";
   B_MI.style.top=0+"px";
   B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
   B_RI.style.top=0+"px";
   B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
   B_LI.style.height=Book_Image_Height+"px";
   B_MI.style.height=Book_Image_Height+"px";
   B_RI.style.height=Book_Image_Height+"px";
   B_LI.style.width=Book_Image_Width+"px";
   B_MI.style.width=Book_Image_Width+"px";
   B_RI.style.width=Book_Image_Width+"px";
   if(Book_Border){
    B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
    B_LI.style.borderWidth=1+"px";
    B_MI.style.borderWidth=1+"px";
    B_RI.style.borderWidth=1+"px";
    B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
   B_LI.src=B_Pre_Img[0].src;
   B_LI.lnk=Book_Image_Sources[1];
   B_MI.src=B_Pre_Img[2].src;
   B_MI.lnk=Book_Image_Sources[3];
   B_RI.src=B_Pre_Img[4].src;
   B_RI.lnk=Book_Image_Sources[5];
   B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
   B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
   B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
   BookImages()}}
 function BookImages(){
  if(!B_Stppd){
   if(Book_Vertical_Turn){
    B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
    MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
    B_MI.style.top=MidOffset+"px";
    B_MI.style.height=B_MSz+"px"}
   else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
    MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
    B_MI.style.left=MidOffset+"px";
    B_MI.style.width=B_MSz+"px"}
   B_Angle+=Book_Speed/720*Math.PI;
   if(B_Angle>=Math.PI/2&&B_Direction){
    B_Direction=0;
    if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
    B_MI.src=B_Pre_Img[B_CrImg].src;
    B_MI.lnk=Book_Image_Sources[B_CrImg+1];
    B_CrImg+=2}
   if(B_Angle>=Math.PI){
    B_Direction=1;
    B_TI=B_LI;
    B_LI=B_MI;
    B_MI=B_TI;
    if(Book_Vertical_Turn)B_MI.style.top=0+"px";
    else B_MI.style.left=Book_Image_Width+1+"px"; 
    B_MI.src=B_RI.src;
    B_MI.lnk=B_RI.lnk;
    setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
   else setTimeout("BookImages()",50)}
  else setTimeout("BookImages()",50)}
 function Book_Next_Delay(){
   if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
   B_RI.src=B_Pre_Img[B_CrImg].src;
   B_RI.lnk=Book_Image_Sources[B_CrImg+1];
   B_MI.style.zIndex=2;
   B_LI.style.zIndex=1;
   B_Angle=0;
   B_CrImg+=2;
  setTimeout("BookImages()",50)}
 function B_LdLnk(){if(this.lnk)window.open(this.lnk, '_blank');}
 function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
 function B_Rstrt(){B_Stppd=false}
   //]]>
 </script>
<div id="Book" style="position:relative">
<img src="https://lh5.googleusercontent.com/-lBgvpM5Mj-w/Tkt-ISEw69I/AAAAAAAAUOU/y7gkoYhf-6w/s128/placeholder.gif" width="304" height="304" />
</div>
<script src="https://poluhka.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
<script type="text/javascript">
ImageBook();
</script>

Настройки


https://poluhka.blogspot.com/   замените на адрес вашего блога

зелёным цветом отмечена ширина и высота слайдов

gal        = 10;   количество отображаемых сообщений

'https://upload.wikimedia.org/wikipedia/commons/9/9a/%D0%9D%D0%B5%D1%82_%D1%84%D0%BE%D1%82%D0%BE.png адрес картинки на случай если изображение отсутствует

Delay =1500; скорость отображения слайдов

Если заменить  false; на true, то сообщения будут отображаться в случайном порядке.

Готовый код устанавливается в гаджет HTML/JavaScript или в тело сообщения в режиме HTML.

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

Всем добра и до встречи.

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

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

Подробнее...

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

Установка очень простая. Вы можете поменять основной цвет панели на желаемый или изменить другие стили. Они в коде отмечены комментарием.  Для просмотра, скопируйте код, предложенный ниже целиком и установите его в этом редакторе. В моём примере я дала ссылку на главную страницу.

<style>#sticky-footer {
 border-bottom: 1px solid #666666; /* цвет основного фона*/
 background: #CCC; /* цвет основного фона*/
 font-size: 16px; /* размер шрифта*/
 color: #666666; /* цвет шрифта*/
 padding: 10px 20px;
 position: fixed;
 bottom: 0;
 left: 0;
 z-index: 2000;
 width: 100%;
 text-align: center;
 }
#sticky-footer a {
 font: normal 18px Trebuchet MS;
 text-decoration: none;
 }
#close {
 width: 20px;
 height: 20px;
 background: url(http://mossklad.ru/images/callback_close.png) top no-repeat;
 border: none;
 margin: 3px 0 0 15px;
 position: absolute;
 cursor: pointer;
 }</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js"></script>

<script type="text/javascript">
$(document).ready(function() {
 (function() {
 //settings
 var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
 var sibar = function() { $('#sticky-footer').fadeTo(fadeSpeed,1); }, stbar = function() { $('#sticky-footer').fadeTo(fadeSpeed,fadeTo); };
 var inside = false;
 //do
 $(window).scroll(function() {
  position = $(window).scrollTop();
  if(position > topDistance && !inside) {
   //add mouseover events
   stbar();
   $('#sticky-footer').bind('mouseenter',sibar);
   $('#sticky-footer').bind('mouseleave',stbar);
   inside = true;
  }
 });
 //close
 $('#close').live('click', function(event) {
  $('#sticky-footer').toggle('show');
 });
 })();
});
</script>

<div id="sticky-footer">
 <a href="http://www.shpargalochki.ru" target="_blank">Спасибо за ваш визит!!! Заходите ещё!!!</a>
 <span id="close"></span>
</div>

То что отмечено розовым цветом в коде HTML, это будет нужный отображаемый текст и ссылка на конкретную  страницу(если требуется). Уберите атрибут  target="_blank если хотите, чтобы ссылка открылась в этом же окне.

Устанавливайте код в гаджет HTML/JavaScript в нижней части блога. Такой липкий футер не только простая фишка. Он вполне может задержать читателя на блоге и побудит перейти по ссылкам, размещённым в нём.

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

Всем добра и до встречи. 

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

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

Подробнее...

Доброго времени суток, всем. Сегодня в очередной раз публикую код виджета последние комментарии блога. Сколько их было - воз и маленькая тележка. И в конце концов многие из них "приказали долго жить" или перестали корректно отображаться.

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

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

Этот виджет не требует внешних скриптов и может быть установлен без изменения шаблона Blogger. Устанавливается в гаджет в нужном месте макета блога.

Сначала скопируйте код, приведённый ниже, сделайте соответствующие настройки, которые отмечены ниже. Затем  перейдите в Дизайн -> Добавить гаджет -> Основные -> HTML / Javascript .

<style type="text/css">
ul.commenti_recenti {
     list-style: none;
     margin: 0;
     padding: 0;
}
.commenti_recenti li {
     font-family:Georgia !important;
     font-size:13px !important;
     font-weight:bold;
     background: none !important;
     margin: 0 0 6px !important;
     padding: 0 0 6px 0 !important;
     display: block;
     clear: both;
     overflow: hidden;
     list-style: none;
}
.commenti_recenti li .avatarImage {
     padding: 3px;
     background: #efefef;   
     box-shadow: 0 1px 1px #bbb;
     float: left;
     margin: 0 6px 0 0;
     position: relative;
     overflow: hidden;
}

.commenti_recenti li img {
     padding: 0px;
     position: relative;
     overflow: hidden;
     display: block;
}
.commenti_recenti li span { 
     margin-top: 4px;
     color: #191919;
     display: block;
     font-size: 13px; 
    font-family:Georgia !important;
     font-weight:normal !important; 
     line-height: 1.3;
}
</style>
<script type="text/javascript">
//<![CDATA[
     // Impostazioni personalizzate
     var
numComments  = 6,
showAvatar  = true,
avatarSize  = 40,
roundAvatar = true,
characters  = 80,
showMorelink = true,
moreLinktext = "Дальше",
defaultAvatar  = "https://lh4.googleusercontent.com/-d8sFfc8eZoA/T8OGeWC33nI/AAAAAAAAYZA/OseLBU2FwI8/s80/avatar.png",
hideCredits = true;
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7 D=D||5,9=9||19,A=A||1a,m=m||"h://W.S.g/16/?d=18",E=E||" 1p &1f;",v=(p v===\'o\')?j:v,z=(p z===\'o\')?Z:z,n=(p n===\'o\')?j:n,M=(p M===\'o\')?Z:n;1l 12(L){7 b;b=\'<Y C="12">\';H(7 i=0;i<D;i++){7 x,y,2,k;4(i==L.14.8.q)1g;b+="<X>";7 8=L.14.8[i];H(7 l=0;l<8.I.q;l++){4(8.I[l].1j==\'1o\'){x=8.I[l].w}}H(7 a=0;a<8.K.q;a++){y=8.K[a].1i.$t;2=8.K[a].1h$1k.N}4(2.f("/O/")!=-1){2=2.u("/O/","/s"+9+"-c/")}e 4(2.f("/T/")!=-1){2=2.u("/T/","/s"+9+"-c/")}e 4(2.f("/U-c/")!=-1&&2.f("h:")!=0){2="h:"+2.u("/U-c/","/s"+9+"-c/")}e 4(2.f("G.g/B/1n-P.J")!=-1){2="h://3.13.Q.g/-1m-1e/17/1c/1b/s"+9+"/15.R"}e 4(2.f("G.g/B/1d-P.J")!=-1){2="h://3.13.Q.g/-1R/1U/1P/1K/s"+9+"/1J.R"}e 4(2.f("G.g/B/1M.J")!=-1){4(m.f("S.g")!=-1){2=m+"&s="+9}e{2=m}}e{2=2}4(v==j){4(n==j){k="1O"}e{k=""}b+="<V C=\\"1T "+k+"\\"><B C=\\""+k+"\\" N=\\""+2+"\\" 1H=\\""+y+"\\" 1w=\\""+9+"\\" 1I=\\""+9+"\\"/></V>"}b+="<a w=\\""+x+"\\">"+y+"</a>";7 11=8.1v.$t;7 6=11.u(/(<([^>]+)>)/1u,"");4(6!=""&&6.q>A){6=6.1r(0,A);6+="&1s;";4(z==j){6+="<a w=\\""+x+"\\">"+E+"</a>"}}e{6=6}b+="<r>"+6+"</r>";b+="</X>"}b+=\'</Y>\';7 F="";4(M==j){F="10:1F;"}b+="<r 1G=\\"1E-1D:1A;10:1B;1C-1S:1z;"+F+"\\">1y 1t<a w=\\"h://W.1x.1L/\\">1Q</a></r>";1N.1q(b)}',62,119,'||authorAvatar||if||commBody|var|entry|avatarSize||commentsHtml|||else|indexOf|com|http||true|avatarClass||defaultAvatar|roundAvatar|undefined|typeof|length|span|||replace|showAvatar|href|commentlink|authorName|showMorelink|characters|img|class|numComments|moreLinktext|hideCSS|blogblog|for|link|gif|author|w2b|hideCredits|src|s1600|rounded|blogspot|png|gravatar|s220|s512|div|www|li|ul|false|display|commHTML|commenti_recenti|bp|feed|w2b_blogger_logo|avatar|TxMKLVzQ5BI|mm|60|40|QYau8ov2blE|AAAAAAAABYY|openid16|1X32ZM|raquo|break|gd|name|rel|image|function|AaI8|b16|alternate|More|write|substring|hellip|by|ig|content|width|way2blogging|Widget|right|10px|block|text|size|font|none|style|alt|height|w2b_openid_logo|8iasY0xpLzc|org|blank|document|avatarRound|AAAAAAAABYc|Way2Blogging|9lSeVyNRKx0|align|avatarImage|TxMKMIqMNuI'.split('|'),0,{}))
//]]>
</script>
<script type="text/javascript" src="http://www.shpargalochki.ru/feeds/comments/default?alt=json&callback=commenti_recenti&max-results=6"></script>

Что можно изменить и отредактировать -

http://www.shpargalochki.ru/ вставьте адрес вашего блога
#efefef;  цвет фона изображения.
#191919; цвет текста комментариев
font-size:13px  размер текста имени в двух вхождениях
line-height: 1.3; высота межстрочного интервала
margin-top: 4px; это расстояние между именем комментатора и текстом комментария.
6 количество отображаемых комментариев
40 размер аваторки
Иконка анонимного комментатора отмечена строкой жёлтого цвета. Можно редактировать.

Если захотите сделать круглые аваторы в гаджете, тогда в коде над участком

.commenti_recenti li img {
     padding: 0px;
     position: relative;
     overflow: hidden;
     display: block;
}
Задайте стили для округления

.avatarRound {   
     border-radius: 100px;
}

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

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

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

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

Подробнее...

Привет друзья. Как правильно создать URL поста тема актуальная  и много об этом пишут. Этот пост у меня уже достаточно старый, но на данный момент решила его обновить и дополнить некоторыми деталями.

У меня в подписчиках много начинающих блогеров. Общаясь с ними, обратила внимание что, всё же, не все делают правильный или другими словами Человеко  - Понятный URL своих публикаций. Давайте разберёмся немного. Вот предоставлю вам скриншот из моих первых сообщений, когда я тоже не знала, как прописывать правильно ЧПУ.

ЧПУ - это аббревиатура от словосочетания «Человеко-понятные УРЛы», которая является переводом английского термина «Search Engine Friendly URLs», то есть, дружественные и красивые адреса.

Первое http://www.shpargalochki.ru/ понятно, далее идёт год и месяц публикации, а вот дальше в адресе прописано blog-post_7.html. Это не правильно.

Вообще, много рассуждений о том, насколько важно ЧПУ на сайте с точки зрения SEO - оптимизации. Но, как бы там ни было, а с красивыми и понятными человеку веб - адресами сайт будет смотреться и восприниматься лучше.

Смотрите, в этом адресе сначала идёт название блога, затем дата, и ЧПУ поста
delaem-chitaemyj-url-posta.html

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

site/D2%34%670%J5%PP%0GCE%R0%F9%D2%34%670%J5%PP%0GCE%R0%F9%D2%34%670%J5%

Концепция ЧПУ предусматривает создание кратких, лаконичных, доступных для понимания посетителей веб-адресов.

1. Придумываем заранее заголовок сообщения.

2. В названии сообщения прописываем латиницей вот так  delaem-chitaemyj-url-posta. Появляется резонный вопрос - что лучше выбрать для ЧПУ – кириллические адреса, латиницу или транслитерацию? Считается, что с точки зрения юзабилити, смешивать латиницу и кириллицу в одном ЧПУ не следует, так как пользователю приходится менять раскладку клавиатуры, чтобы набрать адрес вручную. С точки зрения SEO нет разницы, поисковики понимают и латиницу, и кириллицу, и транслитерацию.

3. Длинные ЧПУ не очень удобны: их трудно запомнить, они часто обрезаются при вставке ссылки на форумах и часто в соцсетях, а также в поисковой выдаче.

4. Длина ЧПУ должна быть не более 60-80 символов, а чем меньше, тем лучше и удобней.

5. Часто спрашивают, что лучше использовать для разделения слов - дефис или подчёркивание. Тут роли не играет, можно и то и другое, но большинство используют дефис. Скорее всего из -за того, что так удобнее.

6. Смотря, что Вы желаете можно использовать сервис translit.ru или воспользоваться этим, где пробелы заменяются на "-" (дефис), заглавные русские и английские буквы заменяются строчными английскими.

7. Не следует прописывать в ЧПУ какие - либо символы и ставить пробелы. Как и использовать какие -то цифровые символы. 

8 . Название сообщения мы можем менять в последствии сколько  желаем, а вот адрес останется тот, который мы задали поисковым роботам.

9. В адресах страниц лучше указать различные ключевые слова и/или фразы. Но тут тоже не сделать перебор с ключевиками - могут быть удалены из индекса.

10. Не стоит путать ЧПУ с хештегами, которые прописывают в соцсетях (видела и такое)

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

http://www.shpargalochki.ru/2013/12/delaem-chitaemyj-url-posta.html

Подведём итог

Лучше пользоваться понятными, запоминающимися и короткими адресами страниц, которые имеют конкретную смысловую нагрузку.
Задачей ЧПУ является помощь пользователю в ориентации на сайте, а также в возможности быстро и точно определится с местонахождением на конкретной странице.
Пользоваться только одним методом генерации URL (перевод либо транслитерация) в адресе вашего веб - ресурса.

Хочу посоветовать вам ещё этот пост по теме для лучшей оптимизации ваших постов и заголовков.

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

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

Подробнее...

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

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

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

Предлагаю простой и оптимальный вариант. Допустим, у меня картинка размером 1366 × 768 px.  При этом, когда я сделаю ей размер "исходный", она в сообщении будет обрезана, вот как - то так (это скриншот).

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

Посмотрите на этом тестовом блоге в идеале. Там у меня ещё отдельно эффект добавлен, но это к данной теме не относится.

Демонстрация

Как сделать автоматическое изменение размера картинки в Bloggere.

Не переживайте, эффект будет применён только к тем картинкам, которые вы сами захотите так показать. С остальными будет всё, как обычно. Сначала нужно убедиться что изображение шириной больше 640 px. Затем зайти во вкладку тема и найти строку ]]></b:skin>. Сразу перед ней установить вот этот небольшой код.

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}

Затем, когда вы вставляете картинку в пост, нужно выбрать именно опцию "исходный размер"

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

.post-body img
{  max-width: 100%;
max-height: auto;
display: block;
margin: auto;  box-shadow: none;
padding: 0px;  }

Если посмотреть код сейчас в режиме HTML можно увидеть следующее. 

<a href="https://1366x768.ru/children/6/children-wallpaper-1366x768.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="450" data-original-width="800" src="https://1366x768.ru/children/6/children-wallpaper-1366x768.jpg" /></a>

Размеры с 1366x768 стали 450 на 800 и изображение встало на всю ширину поля с сохранением качества. Как я писала уже выше, нужно обязательно при выборе размера нажать на функцию "исходный размер". Естественно не стоит его располагать слева или справа. В любом случае они автоматически отобразятся в полную ширину.

Такие картинки на странице смотрятся очень стильно.

Примечание - этот вариант отобразит только те картинки, которым задан параметр "исходный размер". Если нужно это применить ко всем фотографиям (разных размеров), добавленных в ваши посты, то код будет такой

.post-body img {
width: 100%;
высота: 100%;
display: block;
}

Пробуйте. Такой вариант с автоматическим изменением размера картинок гораздо удобнее, качественнее и элегантнее.

P.S. Чтобы пост отдельный не писать, поделюсь, как сделать эффект переливающихся картинок. Это именно то, что вы могли видеть на тестовом блоге по ссылке в начале статьи. При наведении курсора на изображение идёт изменение цвета. Радужные картинки можно применить на какой - то праздник. Для игровых или детских блогах, как дополнение к дизайну.

Совершенно маленькая строка кода позволяет этого добиться. Так же во вкладке Тема перед строкой ]></b:skin> устанавливаем вот такую строчку и сохраняем шаблон.

@-webkit-keyframes hue{100%{-webkit-filter:hue-rotate(360deg)}}img:hover{-webkit-animation:hue 1s linear infinite}

Вот, пожалуй и всё. Спасибо за внимание.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email

Подробнее...