В Блоггере есть замечательная функция - шаблон сообщений. Благодаря ей мы можем сделать такой шаблон, который будет загружаться при каждом создании нового сообщения.
Не буду долго описывать, зачем это нужно, причин может быть масса. Тот, кто попросил меня об этом написать, просто замучился вставлять свою подпись-картинку в конце каждого поста.
Итак, давайте сделаем наш шаблон.
Сначала как обычно создадим новое сообщение в блоге. Напишем в тело сообщения ту информацию, которая будет автоматически появляться в каждом новом сообщении.
В моем случае это подпись в виде картинки, которую я сделала в Фотошопе. Если у вас это тоже картинка, вставляем ее:
Затем переходим в редактор 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;
}
Нажимаем Применить к блогу. Ненужной рамки больше нет
Вставляем видео и музыку в сообщение
Вставить в сообщение видеоролик очень просто - для этого даже не надо ковырять никакие коды. :)) Воспользуемся функцией Вставить видеоролик:
И тут выбираем один из нескольких способов загрузки:
Тут все просто. А как быть, если нам хочется поделиться любимой песней?
Это дело хорошее, если песню вы размещаете в сообщении, и она включается только по желанию посетителя. Поверьте, никто не любит, когда музыка начинает играть неожиданно.
Не буду продолжать рассуждения и писать собственный МК. Мне понравился вариант, описанный вот тут:
Как вставить музыку в блог.
Гаджет Похожие сообщения
Есть много способов поставить себе такой гаджет. Спросите любой поисковик, и вы в этом убедитесь. :) Я почитала отзывы о многих из них и поняла, что в каждом есть свои плюсы и минусы. Для себя я бы выбрала вариант, предоставленный автором блога
Школа Блоггера.
С вашего позволения, я снова не буду переносить описание к себе. Все, что нужно сделать, очень доступно описано здесь:
Добавить гаджет Похожие статьи. Там же автор отвечает на вопросы, связанные с этим гаджетом. :)
Теперь, когда наши сообщения красиво оформлены, можно добавить еще пару приятных штрихов в дизайн самого блога. :)
Разделитель между сообщениями
Почти во всех шаблонах Блоггера есть возможность вставить красивый разделитесь между сообщениями.Чтобы мой разделитель сочетался с шапкой, я поставила себе такие вот горошки:
Польская мастерица
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
***********************************************/
//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},
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
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
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.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
jQuery(document).ready(function($){
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})
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
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
$(window).bind('scroll resize', function(e){
Вставляем в выделенное место адрес нашей картинки и сохраняем. Этот гаджет надо перенести в самую нижнюю часть вашего блога. :)
0 коммент.:
Отправить комментарий