Мой Красивый Блог - Урок №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 марта.

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