21 March 2014

Мой Красивый Блог - Урок №6

Здравствуйте, друзья!

У нас сегодня уже шестой урок курса Мой красивый блог! И в первый раз я начинаю урок с грустным настроением, ведь скоро курс подойдет к концу! Как и многие из вас, я была бы рада, если бы он не кончался никогда)) Но грустить пока рано - сегодня нас ждет кое-что интересное! :)

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



Оформление сообщений. Шаблон сообщений

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

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


Затем переходим в редактор HTML и видим там код:


Выделяем его весь и копируем правой кнопкой мыши:


Сообщение теперь можно удалить.
Идем в Настройки, далее в Сообщения и комментарии.
Видим пункт Шаблон сообщения и нажимаем Добавить:


В появившееся окошко вставляем код, который скопировали. Нажимаем Сохранить настройки.


Теперь можно создать новое сообщение и убедиться, что все работает. :)


Если в каком-то из постов информация из шаблона вам будет не нужна, ее легко удалить в теле сообщения.

---

Кнопка Читать далее

Хотя эта функция уже давно появилась в Блоггере, у некоторых девочек возникают с этим сложности. Поэтому быстренько расскажу, как это делается. :) Я сама всегда пользуюсь возможностью прятать сообщения под кат. И вы обязательно ставьте такую кнопочку! Особенно если ваши посты длинные, со множеством картинок и обилием текста.


Итак, все, что нам нужно, это нажать кнопку Вставить ссылку "Дальше". В том месте, где находился курсор, появится разрыв страницы:


Все, что находится над ним, будет отображаться на гавной странице вашего блога. А то, что под ним - уйдет под кат.

Слово Дальше можно заменить на любое другое.
Для этого идем в Дизайн и нажимаем Изменить у гаджета Сообщения блога:


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



Изучите и другие поля в этом окошке - тут много интересного! :)
Именно здесь настраивается количество сообщений на странице, убираются стандартные кнопки социальных сетей, которые отображаются у каждого поста, меняются местами данные в нижнем колонтитуле сообщений и еще многое другое!

---

Рамка вокруг изображений


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


Чтобы избавиться от нее, заходим в Шаблон -> Настроить. Во вкладке Дополнительно выбираем Редактировать CSS. Вставляем туда такой код:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}
Нажимаем Применить к блогу. Ненужной рамки больше нет!

Если же вы, наоборот, хотите создать рамку, вот здесь есть интересный мастер-класс: Оригинальная рамка вокруг изображений

--

Вставляем видео и музыку в сообщение

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


И тут выбираем один из нескольких способов загрузки:


Тут все просто. А как быть, если нам хочется поделиться любимой песней?
Это дело хорошее, если песню вы размещаете в сообщении, и она включается только по желанию посетителя. Поверьте, никто не любит, когда музыка начинает играть неожиданно.
Не буду продолжать рассуждения и писать собственный МК. Мне понравился вариант, описанный вот тут: Как вставить музыку в блог.

---

Гаджет Похожие сообщения
Есть много способов поставить себе такой гаджет. Спросите любой поисковик, и вы в этом убедитесь. :) Я почитала отзывы о многих из них и поняла, что в каждом есть свои плюсы и минусы. Для себя я бы выбрала вариант, предоставленный автором блога Школа Блоггера.
С вашего позволения, я снова не буду переносить описание к себе. Все, что нужно сделать, очень доступно описано здесь: Добавить гаджет Похожие статьи. Там же автор отвечает на вопросы, связанные с этим гаджетом. :)


---

Теперь, когда наши сообщения красиво оформлены, можно добавить еще пару приятных штрихов в дизайн самого блога. :)

Разделитель между сообщениями

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


 В блоге у Magda Mizera нежные цветочки:

Польская мастерица Mira поставила в качестве разделителя свою подпись:


Когда вы создали свой разделитель в Фотошопе, можно приступать к установке.

Для этого идем в Шаблон->Изменить HTML.
C помощью клавиш CTRL+F (на Mac OS - CMD+F) находим такой код: .post {

Удаляем весь код, который размещается между фигурными скобками, там должно быть примерно следующее:

margin:.5em 0 1.5em;border-bottom:1px dotted $bordercolor;padding-bottom:1.5em;

Вместо него вставляем этот код:

background: url(ссылка на изображение разделителя);background-repeat: no-repeat;background-position: bottom center;margin:.5em 0 1.5em; padding-bottom:1.5em;

Теперь весь код выглядит так:

.post {background: url(ссылка на изображение разделителя);background-repeat: no-repeat;background-position: bottom center;margin:.5em 0 1.5em;padding-bottom:1.5em;}

Нажимаем Сохранить и поверяем.
Если разделитель заходит на нижний колонтитул сообщений, его можно опустить ниже, увеличив значение в этом коде: padding-bottom:1.5em; Например, так: padding-bottom:2.5em; Мне пришлось поставить значение 5.5em, чтобы отодвинуть разделитель от колонтитула.

---

Кнопка Наверх

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

Для этого создадим свою кнопочку или найдем готовую. Я легко сделала свою с помощью кистей для Фотошопа Стрелки.

Потом заходим в Дизайн и добавляем новый гаджет HTML.

Поле Название не заполняем, а в Содержание вставляем этот код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
/*********************************************** 
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 
* Modified by www.MyBloggerTricks.com 
* This notice MUST stay intact for legal use 
* Visit Project Page at http://www.dynamicdrive.com for full source code 
***********************************************/
var scrolltotop={ 
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control 
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). 
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="адрес изображения кнопки" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" 
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner 
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){ 
        if (!this.cssfixedsupport) //if control is positioned using JavaScript 
            this.$control.css({opacity:0}) //hide control immediately after clicking it 
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) 
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists 
            dest=jQuery('#'+dest).offset().top 
        else 
            dest=0 
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration); 
    },
    keepfixed:function(){ 
        var $window=jQuery(window) 
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx 
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety 
        this.$control.css({left:controlx+'px', top:controly+'px'}) 
    },
    togglecontrol:function(){ 
        var scrolltop=jQuery(window).scrollTop() 
        if (!this.cssfixedsupport) 
            this.keepfixed() 
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false 
        if (this.state.shouldvisible && !this.state.isvisible){ 
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) 
            this.state.isvisible=true 
        } 
        else if (this.state.shouldvisible==false && this.state.isvisible){ 
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) 
            this.state.isvisible=false 
        } 
    }, 
    
    init:function(){ 
        jQuery(document).ready(function($){ 
            var mainobj=scrolltotop 
            var iebrws=document.all 
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode 
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') 
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') 
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) 
                .attr({title:'Scroll Back to Top'}) 
                .click(function(){mainobj.scrollup(); return false}) 
                .appendTo('body') 
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text 
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text 
            mainobj.togglecontrol() 
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ 
                mainobj.scrollup() 
                return false 
            }) 
            $(window).bind('scroll resize', function(e){ 
                mainobj.togglecontrol() 
            }) 
        }) 
    } 
}
scrolltotop.init()
</script>

Вставляем в выделенное место адрес нашей картинки и сохраняем. Этот гаджет надо перенести в самую нижнюю часть вашего блога. :)

---

Домашнего задания в этот раз не будет. :) Все, о чем говорится в этом уроке не обязательно к применению. Но если вам захочется поделиться своими успехами, Линки, как всегда, внизу сообщения))
В своем посте дайте, пожалуйста, активную ссылку на шестой урок. Линки для добавления постов будут открыты до 19 марта 12:00 (по Москве). Следующий урок выйдет 20 марта.

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

152 comments :

  1. Алена, спасибо! Даже читать не успеваю пока, к сожалению. Ты не удалишь потом уроки?

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

    ReplyDelete
    Replies
    1. Уроки останутся :)

      Delete
    2. Спасибо большое, что уроки будут доступны! Очень хочу заняться блогом, но вот именно сейчас нет для этого времени. Спасибо!

      Delete
  3. Алена, большое спасибо за такую помощь, за желание поделиться полезным, за щедрость, за доброту!
    Как много теперь стало понятным и несекретным!) а эти коды- это вообще сокровища!), кто бы нам еще все это раскрыл?!
    Я очень благодарна тебе за эти курсы!

    ReplyDelete
  4. Спасибо за полезный урок!!

    ReplyDelete
  5. Аленочка, подскажи еще плиз, как убирать серые тени и с основного поля блога и с картинок которые на панельках, хочется чтобы он был полностью белым, без всяких переходов........
    И еще вопрос по разделителю - какие должны быть размеры его, чтобы он ровненько стал?
    Спасибо!!!!)

    ReplyDelete
    Replies
    1. Этот код должен убрать рамки и с боковых панелей.
      Ширина разделителя должна быть ее шире колонки сообщений

      Delete
  6. Алена, а как убрать тень на фоне? Мне вот хочется чтобы все полотно экрана было белым, а у меня там тени :( нигде не могу найти как это убирается.
    Спасибо за уроки!

    ReplyDelete
    Replies
    1. Сохраняйте в фш не "сохранить как" , a "сохранить для веб" (там чуть ниже). И в прявившемся окне справа вверху укажите png 24. Потом кнопку сохранить .

      Delete
    2. А код, что я дала для фото не работает? По идее он все тени убирать должен.. У тебя что за шаблон ?

      Delete
    3. щас попробую, я думала он только от фотографий тени уберет =)

      Delete
    4. Нет, тень никуда не делась.
      Я говорила вот про эту тень по бокам
      https://lh3.googleusercontent.com/-xQBlq8vjG2s/UyHKewnainI/AAAAAAAADDM/NbRhemGik3E/w800-h427-no/%25D0%2591%25D0%25B5%25D0%25B7%25D0%25B8%25D0%25BC%25D0%25B5%25D0%25BD%25D0%25B8-1.jpg

      Delete
    5. У меня было тоже самое, я билась очень долго пока не поняла что это в шаблоне надо изменить вид, в шаблоне simple внизу надо выбрать самый первый вариант, а у меня как и у вас стоял второй. только после того как изменяешь это приходится всё заново настраивать, по шаблону новому, я этого не знала)))

      Delete
    6. Лена, спасибо, попробую

      Delete
  7. Алена, спасибо большое за ваши уроки!!! Они меня вдохновили на создание и ведение своего блога! БЛАГОдарю!
    У меня остался один вопросик: как сделать ссылку "Читать дальше" по центру? а то она у меня встает по левому краю. А красиво когда по серединке :)

    ReplyDelete
    Replies
    1. Маша, совсем забыла написать об этом. Исправлюсь в следующем уроке!)))

      Delete
    2. и если можно еще про центрирования названия постов и дат)
      отцентрируем всё:)

      Delete
    3. я серьезно, у меня не получаеться - я меняю а оно слетает.

      Delete
  8. Ух, здорово!!:))
    Спасибо большое, Алена!! Как ни странно, хоть мне и все-все твои уроки нравятся и всегда было что-то новое для меня, но почему именно сегодня ты прям "Америку" мне открыла с шаблонами сообщения особенно:)) почему-то всегда было лень что ли разобраться в этом самой... Спасибо!

    ReplyDelete
  9. Алёна во первых хотела бы тоже поблагодарить тебя за уроки грамотности в блоггере)) А во-вторых попросить оставить их в доступе, пока только все читаю, а делом заняться некогда((

    ReplyDelete
    Replies
    1. Они останутся, не переживайте)

      Delete
  10. А я не поняла про выделенный участок кода для стрелочки вверх. Я не тот кусок меняю наверно. У меня что- то не работает ((((

    ReplyDelete
    Replies
    1. В коде я выделила курсивом слова "адрес изображения кнопки". Вместо них и надо вставлять

      Delete
    2. Спасибо! Я точно не то меняла! Пойду еще раз пробовать :)

      Delete
    3. Ура! Работает. Давно об этом мечтала. Вот спасибо!

      Delete
  11. у меня такой код не ищет .post {,проверила поискать другие слова,все нашел,а это нет(((как найти?)

    ReplyDelete
    Replies
    1. Должен быть..Ты уже меняла раньше что то в коде?

      Delete
    2. и у меня тоже этот код не находит =(

      Delete
    3. такая же проблема=(((((((((((((((((

      Delete
    4. Попробуйте поискать просто .post

      Delete
    5. я заходила в этот раздел редактирования только когда мы шапку убирали из блога, но я применять к блогу ничего не стала и вышла, больше ничего там не трогала, а почему не ищет, а все остальное находит=((((

      Delete
    6. есть просто post без точки впереди, без фигурной скобки после, вот в таких вариантах:
      var='post'
      data:post.backlinksLabel


      Delete
    7. Алена, у меня та же проблема - не находит ни тот, ни другой вариант. Раньше там ничего не трогала.

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

      Delete
    9. да.никак не выходит.ни с точкой,не без.выходит просто post,но ничего подобного дальше не следует(((очень жаль(((

      Delete
    10. Девочки, поняла в чем проблема - мы забыли про кнопочку "Изменить шаблон". Надо сначала ее нажать, а потом уже искать .post - он там есть)))))

      Delete
    11. Девочки,зашла в свой НТМL посмотреть. Строчки с заголовком Posts начинаются с номера строки 397. и буквально следующие за ним идут main section margin и тд Я так поняла,что это оно. Да,Алена?
      Когда у вы заходите в HTML у строчки 14 стоит стрелочка - на нее надо нажать и появится весь код до следующей стрелочки.

      Delete
    12. Да я думаю это оно. В зависимости от выбранного шаблона и изменений в нем сделанных, номер строчки может немного различаться - у меня это 373
      Раздес со строчкой .post { выглядит так:
      /* Posts
      ----------------------------------------------- */
      И оттуда уже можно начинать искать, если поисковик не видит
      Про стрелочку я и забыла - это правда может стать препятствием! просто надо развернуть код))
      Спасибо Вика!!

      Delete
    13. Да,там как раз так и выглядит. Значит,оно)

      Delete
    14. Девочки, ну что бы я делала без вас)))) кто бы мог подумать что код представлен в свернутом виде))))))) я всю голову ломала с этими кодами, все глаза истерла читав каждую строчку, искала этот post. Спасибо вам за подсказку)))))

      Delete
    15. И я нашла! Алена у меня тоже эти коды с 373 строки начинаются. Там он быстро отыскался и всё получилось как надо. Спасибо большое за подсказку. Вот - можно посмотреть (на последней картинке) http://natavin-with-love-on-life.blogspot.ru/

      Delete
    16. Девулички, СПАСИБО!!!! нашла на 373 строке сама, раскрыла все стрелочки и все равно не искал...что надо ему, не понятно...

      Delete
  12. Очень интересные уроки! С огромным удовольствием их читаю! а вот делать пока не получается... (((
    У меня возник вопросик: как отменить редактирование фото при загрузке в блог?
    Вроде бы ставила когда-то гд-то галочку (или убирала), что б не редактировало, но где - не помню! (( может сбились настройки... а то заметила, что фото загружаются темнее, чем на компе и к тому же идут разводы почему-то (особенно по ткани)...

    ReplyDelete
    Replies
    1. И у меня такое же. И с шапкой и с моим фото на панели боковой. А загружала хорошего качества.

      Delete
    2. Вот ) http://tea-with-victoria.blogspot.ru/2013/09/blogger.html?m=0

      Delete
    3. СПАСИБО! Изучаю вопрос.

      Delete
  13. Ален, спасибо за уроки!!! Блог преображается на глазах))) Так классно становится)))
    У меня вопрос по поводу кода для CSS, унас ведь до этого там был вставлен код для того, что бы вкладки были по середине, этот код там и стоит, а для того что бы рамку убрать, код ставить где? Этот же наверное, не надо трогать, просто следующей строчкой ввести новый, или предыдущий удалить? Извини за сумбур, но вроде понятно написала))

    ReplyDelete
    Replies
    1. Да, следующий надо вставлять вслед за предыдущим, с новой строки )

      Delete
  14. Алена, спасибо! Я даже и не представляла, что можно делать шаблоны, подписи...

    ReplyDelete
  15. Алена, молчала долго, но больше не могу. СПАСИБО!!! Для таких чайников, как я - твои уроки - это именно то, о чем я мечтала. Пока не сделала ничего. Но я сделаю! и станет мой блогодом красивее, а значит и всем гостям в нем будет приятнее. СПАСИБО!!!

    ReplyDelete
  16. Алена, спасибо Вам в который раз!)
    Вопрос: как сделать так, чтобы писать сообщение сразу нужным мне шрифтом из стандартных и с наклоном? А то каждый раз после вставки фото приходится заново указывать шрифт...

    ReplyDelete
    Replies
    1. Шаблон - Настроить - Дополнительно - Текста страницы
      И там задаешь все параметры

      Delete
    2. Это на это никак не действует, вот мучаюсь каждый раз, когда пишу сообщения :(

      Delete
    3. Кажется, разобралась... Оказывается, можно не выставлять шрифт при создании сообщения, он сам изменяется при публикации ))))

      Delete
    4. ))) в редакторе конечно все отображается не так как после публикации )))

      Delete
  17. Алена, здравствуйте. Хочу еще раз поблагодарить за такой замечательный проект, за возможность узнавать новое и развиваться. И задам, пожалуй пару вопросов:
    1. Очень нравится в Вашем блоге то, что колонтитул даты и заголовок сообщения посередине страницы. К моему экспериментальному блогу этот вариант не очень подходит, но хотелось бы знать, ведь скорее всего впереди еще много экспериментов =)
    2. И вопрос по поводу страниц в блоге. На них возможно публиковать отдельные посты иди ставить кат? или такой возможности нет?

    ReplyDelete
    Replies
    1. Наташа, да, я хотела написать про центровку, но забыла( В следующий урок добавлю этот момент!
      Страницы - это только одна страничка, она как пост, только не публикуется в общем блоге)) Но если на ней нужно создать какой-то список со ссылкам на другие страницы, ты можешь создать сколько нужно страниц и просто дать на них ссылки.

      Delete
    2. Алена, спасибо большое. Уже жду следующего урока.

      Delete
    3. а я думала, что этот момент пропустила, а он еще впереди, оказывается))) мне тоже очень нужно про центровку узнать)

      Delete
  18. Алена, ты чудо :) спасибо :)

    ReplyDelete
  19. Алёна, ты открыла мне целый мир, правда-правда! Спасибо! Я не всё успела попробовать, но сейчас, например, установила кнопку "Читать далее"). Для меня даже это - новая информация!:) Надеюсь, она облегчит читателям общение с моим блогом:)))

    ReplyDelete
  20. Алена, ты просто ЧУДО! В одном посте ВСЕ, что я ТАК СИЛЬНО хотела изменить в блоге. Кнопку наверх, разделитель и подпись давно мечтаю поставить. Спасибо огромное!!!!!

    ReplyDelete
  21. Очень здорово))) я прям не знаю, что буду делать, когда курс кончится((( с нетерпением жду четверг)))_)

    ReplyDelete
  22. Девочки, спасибо, я рада, что урок понравился!)

    ReplyDelete
  23. Алена, СПАСИБО тебе огромнейшее!!! Ты не грусти:)) во первых - столько девочек тебе благодарны и рады своим успехам! А во-вторых, можно же еще организовать проекты:)) Я например, была бы безумно рада если бы ты нас поучила качественной обработке фотографий и т.п. что-то.....

    ReplyDelete
  24. Чудесный проект! Я не записывалась, но читаю с удовольствием, для меня столько полезного! Спасибо)

    ReplyDelete
  25. Алёна, доброй ночи. Никак не могу разобраться, с Разделитель между сообщениями. у меня получился сильно большой разделитель, как бы я не уменьшала картинку, в блоге она отображается очень большая. Может вы мне подскажите примерные размеры.

    ReplyDelete
    Replies
    1. Алена, ширина его должна быть на больше ширины колонки сообщений в вашем блоге.

      Delete
  26. Алена, у меня не получается вставить кнопку НАВЕРХ. В гаджете HTML вставляю код, но куда вставить адрес изображения? там нет выделенного для этого места. Может быть гаджет другой нужно использовать?

    ReplyDelete
    Replies
    1. Света, я в коде курсивом выделила слова "адрес изображения кнопки". Вместо них вставляй

      Delete
    2. Алена, спасибо! все получилось.

      Delete
  27. Алёна, хотела бы спросить тоже по-поводу кнопочки вверх. Может я упустила этот момент, а как найти сам адрес изображения кнопки?

    ReplyDelete
    Replies
    1. если я не ошибаюсь, кнопку надо загрузить в альбом пикасы например, и оттуда уже скопировать адрес.

      Delete
    2. можно загрузить изображение в программу пикасса, оттуда отправить в гугл+ (кнопочка такая есть), после загрузки в гугл - просмотр в интернет (можно правой кнопкой мыши по фото нажать, а также появляеться кнопка при загрузке), а уже после того как откроется в инете правой кнопкой по фото кликаете, копировать URL картинки...я так делаю, может конечно и проще варианты есть=)

      Delete
    3. Спасибо за советы))) я попробую!

      Delete
    4. а я через Радикал вставляю...копирую там первую ссылку

      Delete
    5. а что такое Радикал, программа такая???

      Delete
    6. Радикал через какое-то время стирает то, что там стоит, если я не ошибаюсь.

      Delete
  28. Аленочка, все пыхтела, пыхтела над блогом, пыталась успеть, и все некогда было поблагодарить тебя:)
    Спасибо тебе!!! Большущее спасибо!!! Ты МЕГА-человечище!!! Так нам помогла. Столько информации нам выдала, такие посты подробные и содержательные.
    А сколько нервов надо, что бы отвечать на все наши "а у меня не получается...", "а я не понимаю куда...как...":))) Спасибо:)

    ReplyDelete
  29. Аленааа, это самый информативный пост из всех уроков.
    Такая молодец!!
    Я брожу в восхищении.

    Еще, можешь добавить, чтобы поместить просто картинку без заголовка, нужно вставить в заголовок < hr > < /hr > без пробелов
    Или это было уже??

    ReplyDelete
    Replies
    1. А я не совсем поняла,что это значит?

      Delete
    2. О!!! Спасибо! Все не могла понять почему у меня без названия не вставляется :)

      Delete
    3. Это нововедение блоггера не вставлять изображение без заголовка)) и вот этот код (см. выше) помогает вставить изображение ссылкой на пост но без заголовка)
      Рада была помочь)

      Delete
  30. Огромнейшее СПАСИБО!!! Просто НАИПОЛЕЗНЕЙШИЕ уроки!!!

    ReplyDelete
  31. Алена, подскажи, пожалуйста по разделителю. Почему-то он у меня не отображается. в данном месте кода ... url(ссылка на изображение разделителя) .... адрес картинки надо располагать в скобках? Хотя я перепробовала все варианты, и в скобках, и без скобок, и вместо всего этого выражения..но разделитель не виден

    ReplyDelete
    Replies
    1. Я так же мучилась. Сделала в скобках! Еще и кавычки (в скобках) поставила. И обязательно, если фон подписи не прозрачный, увеличивайте расстояние (Алена писала, где надо менять цифру). Он может прятаться за фоном. Я только тогда увидела.

      Delete
    2. Ничего не помогает, и кавычки не сделали разделитель видимым, и увеличение расстояния тоже

      Delete
    3. у меня тоже один раз пропал,потом я увидела,что в строчке .post {background: url(адрес изображения) я удалила случайно слово background перед url, напечатала заново,все появилось.Проверьте!

      Delete
    4. Хм...Ну не знаю...У меня вот так .post {background: url("https://lh5.googleusercontent.com/-12fXLR8pF1k/UyKYtdw6ITI/AAAAAAAABtI/FSGLKDwEYhk/w500-h100-no/%25D1%2580%25D0%25B0%25D0%25B7%25D0%25B4%25D0%25B5%25D0%25BB%25D0%25B8%25D1%2582%25D0%25B5%25D0%25BB%25D1%258C.png");background-repeat: no-repeat;background-position: bottom center;margin:.5em 0 1.5em; padding-bottom:6.5em;
      }

      Delete
    5. Скобки должны быть. Проверьте, что код в правильном месте шаблона стоит, может вы его в другую строчку воткнули?)

      Delete
  32. Алена, спасибо огомное за твои уроки - все очень грамотно и понятно написано!!!Потихоньку их осваиваю, когда есть время - пытаюсь навести красоту :)

    Возник вопрос по поводу разделителя между сообщениями... у меня нарисована какая-то полоска после каждого сообщения - не нашла в шаблоне, как ее убрать(( подскажи, пожалуйста...
    ссылка на блог http://handymadeworld.blogspot.ru/

    А еще хотелось бы узнать, как сделать название сообщения и ссылки на тэги внизу сообщений по серединке :)

    ReplyDelete
    Replies
    1. про серединку напишу в четверг)
      А про полоску, надо кое-что сделать в шаблоне
      Находи там строчку .post-footer {
      После нее (строчки через 4) будет подобная такой:
      border-bottom: 1px solid $(post.footer.border.color);
      Это и есть твоя полоска
      Заключи ее в скобки, чтобы стало так (звезду убрать):
      <*!--border-bottom: 1px solid $(post.footer.border.color);-->
      Полоска должна пропасть

      Delete
    2. Алена, спасибо!!!! все получилось :)

      Delete
  33. Алена, спасибо большое за такие интересные и очень познавательные уроки.. Правда с разделителями у меня никак не получается.. Вот такой код у меня
    /* Posts
    ----------------------------------------------- */
    body .main-inner .Blog {
    background: url("https://lh3.googleusercontent.com/10vveYBGtugdUwkSZa8KsB5ojPvc0xEdgdknQOVVrWA=w400-h100-p-no");background-repeat: no-repeat;background-position: bottom center;margin:.5em 0 1.5em; padding-bottom:1.5em;
    },
    уже и кавычки поставила в скобках, где адрес изображения, а оно никак не появляется в блоге.. Может размер не тот или еще что-то.. уже не знаю.. подскажи, пожалуйста...

    ReplyDelete
    Replies
    1. Алена, можно я влезу?
      LiGa, девочки раньше уже писали и Алена тоже, что изображение может прятаться под нижним колонтитулом. Попробуйте изменить последний параметр padding-bottom: до 5.5 em. Я так делала и у меня все получилось.

      Delete
    2. Я меняла, какие только цифры и комбинации не подставляла...ничего не идет.
      А можете скопировать и показать, как выглядит ваш код для разделителя?

      Delete
    3. У меня вот так .post {background: url("https://lh5.googleusercontent.com/-12fXLR8pF1k/UyKYtdw6ITI/AAAAAAAABtI/FSGLKDwEYhk/w500-h100-no/%25D1%2580%25D0%25B0%25D0%25B7%25D0%25B4%25D0%25B5%25D0%25BB%25D0%25B8%25D1%2582%25D0%25B5%25D0%25BB%25D1%258C.png");background-repeat: no-repeat;background-position: bottom center;margin:.5em 0 1.5em; padding-bottom:6.5em;
      }
      Причем, когда последняя цифра была 5,5, его было не видно!!! И еще я фон в нижнем колонтитуле (или подпись кажется называется) поставила прозрачный!

      Delete
    4. УРА!!!! Заработало! Оказывается скобочку надо писать слитно со словом url
      Спасибо!

      Delete
    5. Девочки, я меняла на 5,5em ничего не вышло...

      Delete
    6. Галина, у вас не в том месте, похоже стоит код. Смотрите, где должен стоять:
      https://lh5.googleusercontent.com/-OwJlk0oD95A/UyaMMEUCklI/AAAAAAAAHZs/0SjxQSImClM/s971/Screen%2520Shot%25202014-03-17%2520at%25209.44.33%2520AM.jpg

      Delete
    7. Алена, у меня как у вас нет таких кодов... теперь картинка почему-то на фоне за постами((((... вот посмотрите, пожалуйста...http://liga2407.blogspot.ru/ уже боюсь, что либо делать, т.к. вообще еще все испорчу((

      Delete
  34. Алена,хотела спросить)
    Вот ты писала,как убрать прозрачную рамку вокруг фото,а я наоборот такую хочу поставить.Это возможно? У меня вместо прозрачной почему-то черная тонкая обводка http://vikkotorio.blogspot.ru/

    ReplyDelete
    Replies
    1. Тебе нужно найти в коде шаблона это место:
      .post-body img
      Чуть ниже будет строчка, начинающаяся с border:
      Все коды, что в этом пункте у тебя сейчас, удаляй и вставляй вместо них:
      1px solid $(image.border.color);

      -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
      }

      Должно выглядеть так: https://lh4.googleusercontent.com/-n6Bq3fDc6q4/UyaO5MSdnNI/AAAAAAAAHZ8/nb05Xok4w6g/s959/Screen%2520Shot%25202014-03-17%2520at%25209.56.55%2520AM.jpg
      Главное сделай заранее копию шаблона)))

      Delete
    2. Алена,все нашла,все сделала,обводка белая появилась,но не пропала эта тонкая линия поверх белой обводки.К тому же она стала не черной,а бардовой! Вот у тебя вообще обводок таких нет в блоге! Может эту настройку надо не в коде шаблона менять?

      Delete
    3. Проверь,какой цвет у тебя стоит в настройках
      Шаблон-Настроить-Дополнительно-Изображения-Цвет рамки

      Delete
    4. Алена,спасибо! Все получилось) вот я балда,не догадалась сразу в эти настройки заглянуть)

      Delete
  35. И еще вопрос немного не по теме: когда я хочу присоединиться к сайту (любому) мне выдает ошибку "Приносим свои извинения...Не удалось обработать ваш запрос. Повторите попытку или вернитесь немного позже".(так уже 4 день).Может я что в настройках блога нахимичила? Ты никогда с таким не сталкивалась?

    ReplyDelete
    Replies
    1. Тоже столкнулась с такой ситуацией. Потом у девочек прочитала, как можно обойти глюки Блогера. Делюсь :)))
      Жмём "Присоединиться" - синюю кнопочку на странице блога. Дальше кликаем на надпись "Дополнительные параметры", а дальше ищем внизу чуть левее белую кнопочку "Стать постоянным читателем" - жмем на неё и готово!

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

      Delete
    3. Вика, у меня дня три назад было тоже самое, видимо это глюк самого блога. У меня само прошло.

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

      Delete
    5. Девочки, попробуйте почистить кеш)

      Delete
    6. У меня вторую неделю глючит - постоянно вход через гугл - и приносим извинения...

      Delete
  36. This comment has been removed by the author.

    ReplyDelete
  37. У меня почему-то разделитель видно только внизу, а между сообщениями его нет... уже и размеры меняла.. не знаю... а картинку в ФШ надо было сохранять в JPG или PNG? может здесь что не так..

    ReplyDelete
    Replies
    1. Формат картинки значения не имеет. Вы наверное вставили его не в то место в коде, проверьте)

      Delete
  38. Спасибо большое за титанический труд, за подробное описание блоговедения! Я недавно начала изучать Ваш курс, многое стало понятно, буду и дальше читать и практиковать! Все же одна проблема у меня возникла, очень надеюсь на помощь- подсказку... А именно с гаджетом "Похожие сообщения", не подаеся он моему пониманию(((( Уже давно над ним корплю( Сначала девочки скинули мне эту ссылку http://www.linkwithin.com/learn , по которой можно было бы без проблем установить его, но мне не удалось. Поле, обязательное для заполнения, у меня пустое, что бы я не прописывала, гаджет появляется в настройках, но как- то неправильно, без фотографий, не активный. По Вашей ссылке тоже пыталась, если я правильно поняла, нужно скопировать код, выделенный красным шрифтом и вставить уже как описывал автор в код? Если первое ключевое слово я нашла для вставки, то второе, ни одно из приведенных в качестве примера, не могу найти(((( Или я совсем- совсем непонятливая(((
    http://innaryabina.blogspot.com/

    ReplyDelete
    Replies
    1. Инна, попробуйте еще на этом сайте http://www.engageya.com/widgets/new/, у меня тоже с теми были проблемы, а здесь вроде все вышло)))

      Delete
  39. Аленочка!!!!В очередной раз спасибо тебе за урок!!!!!!
    У меня такой вопрос:
    Можно ли как-то обозначать/называть гаджеты HТML, которые мы создали... Если мы при создании пишем название ну например Профиль, Соц.сети, то оно отображается и в блоге...
    А если ничего не писать...то в самом дизайне они получаются просто- гаджет HТML, гаджет HТML...
    А для ориентирования это не удобно..ведь со временем можно забыть что где стоит? Может есть какой-то способ делать пометочки/названия для себя, чтоб они при этом не отображались в блоге?

    ReplyDelete
    Replies
    1. И еще((((((((((((((я не могу разобраться как мне сделать рамочку((( Аленочка, в том уроке, что ты дала, я так понимаю идет разноцветная полосатая рамочка.....а я хочу обычную белую...которая в стандарте и которую многие убирают((((

      Delete
    2. Про заголовки, попробовала сейчас все что знаю - ничего не работает так, как хотелось бы(( Думаю, такая возможность есть, только я не знаю как это сделать. Может, кто из девочек подскажет?
      А про рамочку, я выше в комментах написала коды, как ее поставить)

      Delete
    3. Вот жалко...
      я тоже пробовала вставлять тэг,к-ый делает надпись не видимой, но ниче не получается...он просто исчезает...а было бы удобно,правда?)))

      Delete
  40. Алена, спасибо тебе большое...Я вчера открыла свой блог... И хотя вопросов пока больше чем ответов - знаю, что и дальше буду двигаться, руководствуясь твоими уроками...

    ReplyDelete
  41. Подскажите, пожалуйста, как вставлять код HTML, не могу понять((( Старый выделяю и удаляю с помощью кнопки Delete, а вставить ничего немогу

    ReplyDelete
    Replies
    1. Правой кнопкой мыши Копировать/Вставить или Ctrl+C/Ctrl+V

      Delete
    2. Вот в том-то и дело что правой кнопкой мыши щелкаю и нет вставить, сейчас попробую второй вариант, спасибо)))

      Delete
    3. Получилась, вставила, но разделительв блоге не появляется

      Delete
    4. Эх, ничего не выходит, вместо красивых кнопок прости надпись "изображение" и постоянно опера вылетает((( Буду ждать установки нового браузера

      Delete
  42. Аленочка..я добавила в Линки дом.задание..но не все получилось..Если будет возможность-загляни пож-та... Заранее спасибо

    ReplyDelete
  43. Алена, я не могу найти в своем шаблоне год .post { (для вставки разделителя)
    ПОИСК не находит эту строку в длинном списке строк. В какой части этого длинного кода приблизительно искать эту строку?
    Помогите пожалуйста!))

    ReplyDelete
    Replies
    1. Там выше в комментариях писали об этой проблеме. Разверните 14 строчку нажав на стрелочку-там и будет данный код примерно на 373 строчке))

      Delete
    2. Женя, большое спасибо за помощь! Я даже не подозревала, что строчки разворачиваются))) , на 373 все нашлось!)

      Delete
  44. Спасибо,Алёна за уроки! У меня всё получилось и никаких вопросов не возникло в процессе(кроме последней вставки html который я уже решила).)) Ты всё очень понятно написала и ...ну не знаю как ещё благодарить тебя! Ты всем нам очень помогла!))))

    ReplyDelete
  45. Спасибо огромное, хоть я и поздно присоединилась! Приглашаю в гости всех - в мой обновленный блог!

    ReplyDelete
  46. Ален, спасибо за уроки!!!! Колоссальный труд и такая большая помощь не только новичкам!!! Очень многое помогло, надеюсь, уроки ты не будешь удалять ;) Помучилась с обводкой вокруг фото, никак не хотел сохранять код CSS , пришлось вставлять код прям в код HTML, все получилось.

    ReplyDelete
  47. Спасибо, Алёна, за очень информативный проект. Сама так и не взялась в нём поучаствовать, но очень много полезной инфы нашла) Ты просто Чудо! Уже давно хотела кнопочку дальше переименовать... и тут как раз твой постик! Спасибо большое!

    ReplyDelete
  48. Ой, не успела в линки добавиться!( Алена, спасибо огромное за уроки, они очень полезны и интересны!!!!!!!))

    ReplyDelete
  49. Ален, у меня вот еще один вопрос есть. В инете все перерыла, но не могу найти подходящий вариант. Если не сложно и ты знаешь как это сделать, можешь осветить, как избавиться от СПАМа. Ну совсем замучил:( Каждый день по 20 шт шлется СПАМ, в комментах на один и тот же пост. Я ,конечно, пометила его, как спам, но почту уже замучилась чистить. Нашла только либо проверочное слово встасить, либо проверять каждый коммент перед публикацией, либо только постоянным читателям разрешить комментировать (остальные уже не смогут комменты оставлять). И не могу нужной информации найти...
    Девочки, может кто знает, как быть...

    ReplyDelete
  50. И я катастрофически не успеваю( Спасибо за невероятный, масштабный и актуальный проект)) Мой мир стал лучше благодаря тебе))

    ReplyDelete
  51. Алена, у тебя тут такие обалденные уроки!!! Я застряла где-то в палеолите :) Не могу сделать, чтобы названия постов были кликабельными, чтоб нажал и пост открылся... Чувствую, что уж очень просто должно быть, наверное наверное просто кнопочку где-то поставить нужно... ну все уже перетыкала - никак у меня не получается... Помоги пожалуйста...
    Спасибо тебе большое, что делишься с нами такой полезной информацией!

    ReplyDelete
  52. Аленушка, спасибочки большое за уроки ты большая умничка !!!!

    ReplyDelete
  53. у меня не находится .post {
    О_о
    видно, не судьба мне разделители поставить))

    ReplyDelete
  54. Алена добрый день.
    Я наконец то приступила опять к работе над блогом... и многое получается...но еще не оформила полностью, надо поработать с панелькой справа и нижними гаджетами...
    Сегодня правда произошла проблема.
    По 6 уроку вчера настраивала сообщения, коменты и "дальше"
    Эксперементировала как будет лучше смотреться.
    в итоге изменила слово далее- на Read more....
    теги- на Teg, а вот комменты на - comments не менялось ни в какую и смотрелось не очень. Оставила как есть.
    Сегодня с утра открыла и увидела как испарились не только слово коменты (под сообщением) но их нет и в самом открытом сообщении. Залезла по уроку №6 опять в настройки в дизайн - сообщения - изменить... ставлю галочку на коменты, но результата нет.
    Хотя комментарии никуда не испарились в настройках (обзор,сообщения, страницы, комменты,...и тд)
    Что то можешь подсказать по этому поводу?
    Ночью было стандартное обновление компа.
    Конечно курс уже окончен и может ты уже не отвечаешь на вопросы,...но все же надеюсь на помощь, с уважением Эля
    мой блог: http://rukodeliajufara.blogspot.ru/

    ReplyDelete
    Replies
    1. как посмотрела все это творится только на последних (новых) 15 сообщений, остальные сообщения с коментами

      Delete
  55. Ох как же я с этими рамками вокруг фотографий намучалась, всё облазила, не уходят и всё! Спасибо Вам огромное, сижу смотрю на свой блог без проклятущих рамочек и невероятно счастлива, всё благодаря Вам))

    ReplyDelete