Красивые рамки для фотографий

Скопируйте нужный код и установите его в редакторе сообщений в нужном месте, переключившись в режим HTML. Эффект для рамки 1. <div class="image-wrapper"> <div class="image-inner"> <img height="320" src="адрес вашего изображения" width="320" /> </div> </div> <style> * {box-sizing: border-box;} .image-wrapper {   position: relative;   max-width: 400px;   margin: 50px auto;   padding: 15px;   background: #FFCCCC; } .image-inner {position: relative;} .image-wrapper img {   display: block;   width: 100%; } .image-wrapper:before, .image-wrapper:after, .image-inner:before, .image-inner:after {   content: "";   position: absolute;   width: 50px;   height: 50px; } .image-wrapper:before {   bottom: 0;   left: 0;   border-left: 5px double #CC0000;   border-bottom: 5px double #CC0000; } .image-wrapper:after {   right: 0;   top: 0;   border-right: 5px double#CC0000;   border-top: 5px double #CC0000; } .image-inner:before {   bottom: -15px;   right: -15px;   border-right:8px double #CC0000;   border-bottom: 8px double #CC0000; } .image-inner:after {   top: -15px;   left: -15px;   border-left: 5px double #CC0000;   border-top: 5px double #CC0000; }</style> Эффект для рамки 2. <div class="transform-border"> <img height="320" src="адрес вашего изображения" width="320" /> </div> <style> * {box-sizing: border-box;} .transform-border {   position: relative;   max-width: 400px;   margin: 50px auto;   transform: perspective(3000px) rotateY(29deg); } .transform-border img {   display: block;   width: 100%;   box-shadow: -12px 11px 1px #f2f2f2; } .transform-border:after {   content: "";   position: absolute;   width: 100%;   height: 100%;   left: -22px;   top: 22px;   background: #cccccc;   z-index: -1; }</style> Эффект для рамки 3. <div class="dbl-border"> <div class="image-wrapper"> <img src="адрес вашего изображения" height="320" width="231" />   </div> </div> <style> * {box-sizing: border-box;} .dbl-border {   position: relative;   display: table;   margin: 50px auto; } .dbl-border img {display: block;} .dbl-border:before, .dbl-border:after {   content: "";   position: absolute;   z-index: 1;   width: 100%;   height: 100%;   border: 2px solid #FF9999; } .dbl-border:before {   top: -15px;   left: -15px; } .dbl-border:after {   right: -15px;   bottom: -15px; } .image-wrapper {   position: relative;   z-index: 2;   padding: 5px;   background: white;   box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.1); }</style> Вставьте нужные URL адреса ваших картинок. Попробуйте изменить цвет и ширину рамочек меняя значения border. Практически многие свойства можно заменить и создать свою уникальную рамку для фото. источник:   http://www.shpargalochki.ru/2018/02/krasivye-ramki-dlya-fotografij.html[/url]

Галерея blogspot на jQuery с zoom эффектом

источник: https://www.mycrib.ru/2012/11/gallery-blogspot-jquery-zoom-effect.html
Еще статьи автора:
1.Простой галереи blogspot(http://www.mycrib.ru/2012/09/galereya-blogspot.html) в виде слайд-шоу,
2.Подборка шаблонов галерей для blogger(http://www.mycrib.ru/2012/09/shablony-blogger-gallery.html)и 3.Создание jquery карусели (http://www.mycrib.ru/2012/09/jquery-jcarousel.html)

Выделение текста в блок рамки с цветовой тенью

здесь не работает
Можно оформить для одной страницы выделение текста, в редакторе blogger перейти по вкладке HTML и вставить код рамки, или для всех страниц, вставить код CSS в шаблон блога в разделе <b:skin></b:skin. Ниже стиль CSS и сразу пример выделенного кода:

.gradient {
padding:20px;
margin: 10px;
box-shadow:-1px -2px 37px rgba(63, 175, 133, 1);
-webkit-box-shadow:-1px -2px 37px rgba(63, 175, 133, 1);
font-size: 14px;
}

Для отдельной страницы необходимо заключить CSS в <style>код CSS</style>. Затем для выделения заключите нужный текст в редакторе по вкладке HTML:

<div class="gradient">здесь текст или код</div>

Для еще более быстрого выделения текста, стиль CSS вставить цитатой

Находите в шаблоне с CSS стилях .post-body blockquote { далее вставьте стиль CSS, просмотрите и сохраните шаблон. Затем в редакторе на странице выделите нужный текст и сверху в меню нажмите значок Цитата. В этом варианте также есть возможность оформления для всех и для одной страницы.

Шаблоны у всех разные, поэтому  пример может  не поддерживаться. Пробуйте варианты: .blockquote{ или #blockquote{...

Вставка кода в статью блога

Для вставки кода в статью сайт htmlka предлагает такие варианты:

Чтобы вставить какой-либо свой код в статью на блоге, вставляем такой код в HTML-режиме редактора (скопирован с сайта htmlka):

<textarea style="border-right: black 2px solid; border-top: black 2px solid; background-color:dodgerblue; color:white; border-left: black 2px solid; border-bottom: black 2px solid; width: 100%;">КОДЫ</textarea>

 Некоторые пояснения к коду:

• border-right: black 2px solid - правая граница рамки: чёрный цвет, ширина 2 px, сплошная рамка
• background-color:dodgerblue - цвет фона: синий
• color:white - цвет текста: белый

Разные варианты цветового оформления:
1.
ВСТАВЬТЕ СЮДА ВАШ КОД
2.
ВСТАВЬТЕ СЮДА ВАШ КОД
3.
ВСТАВЬТЕ СЮДА ВАШ КОД
4.
ВСТАВЬТЕ СЮДА ВАШ КОД
Примечание:
HTML-редактор Блоггера незначительно видоизменил код, который предложен в источнике.
Поэтому код (например, по варианту 1) нужно вставлять в HTML-редактор в таком виде:

<textarea style="background-color: #cceeff; border-bottom: #004566 2px solid; border-left: #004566 2px solid; border-right: #004566 2px solid; border-top: #004566 2px solid; color: #004566; width: 100%;"> ВСТАВЬТЕ СЮДА ВАШ КОД </textarea>

Как пример, код вставки формы поиска на блоге от 404.RU! будет выглядеть так:
<form action="http://www.404.ru/search" target="_blank"> <input type="hidden" name="checkup" value="контроль" /> <b>Поиск</b><br /> <label><input type="radio" name="s" value="yandex" checked />Яндекс</label> <label><input type="radio" name="s" value="google" />Google</label> <br /> <input type="text" name="q" value="" size="20" /><br /> <label><input name="site" type="checkbox" value="http://exp13blog.blogspot.com" checked /> по сайту</label> <input type="submit" value="Найти!" /><br /> </form>
источник :http://exp13blog.blogspot.com/2013/06/vstavka-koda.html

Эффект появления рамки при наведении курсора

Куча статей про оформление текста в красивые рамки(http://www.shpargalochki.ru/2018/02/krasivye-ramki-dlya-fotografij.html). Ещё один эффект анимации рамки от центра к краям на CSS. Можно оформить участок текста или картинку.
Реализуется просто ,в редакторе сообщений в режиме HTML.

Красивое оформление цитат на Блоггер

Текст надо обвести (смаркировать),потом кликнуть на символ кавычк. Установим дополнительный код, который придаст цитатам более презентабельный вид, В Дизайн - Добавить гаджет - HTML/JavaScript, необходимо добавить следующий код. <style>.post blockquote { font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic; background-color: #F2F1F1; color: #000; margin: 5px 10px; padding: 20px 20px 20px 20px; border: 2px dotted lightgrey; border-radius: 10px; box-shadow: -1px -1px 12px 2px gainsboro; transition: background-color .777s; -webkit-transition: background-color .777s; -moz-transition: background-color .777s; -o-transition: background-color .777s; -ms-transition: background-color .777s; } .post blockquote:hover { background-color: CornflowerBlue ; color: #fff; } .post blockquote:active { background-color: lightblue ; ; color: #000; } </style> Классическое расположение автора цитаты для блога на Blogger. Вот и сама конструкция: <blockquote> ТЕКСТ <br /> <div style="text-align: right;"> <span style="font-size: x-small;">Автор или источник:<a data-cke-saved-href="URL источника" href="URL источника">Имя автора или источника</a></span></div> <br /></blockquote>

Мой Красивый Блог - Урок №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> Вставляем в выделенное место адрес нашей картинки и сохраняем. Этот гаджет надо перенести в самую нижнюю часть вашего блога. :)

Легкий способ выделить часть текста или всю страницу блога

ИСТОЧНИК:  http://www.bdblogov.ru/2014/04/how-quickly-and-beautifully-make-text-blog.html
С помощью этого кода можно (всего один раз настроить) красиво оформить текст в блоге.

Вот код

.code 1 {

margin : 15px 35px 15px 15px;

padding : 20px 10px 10px 35px;background : #f3f3f3;

border-top : 1px solid ; цвет верхней границы

border-right : 1px solid ;  цвет границы справа

border-bottom : 1px solid ; цвет нижней границы

border-left : 1px solid ; цвет границы слева

border-radius: 5px; размер рамки

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

}

background : #f3f3f3;-цвет фона;  

цвета окантовки (справа, слева, верх, низ) выделены. 

Они могут быть у Вас разными, тогда получится рамочка с разным цветом окантовки. 

border-top:1px;  border-right : 1px; border-bottom : 1px; border-left : 1px- это размер окантовки верхней (top), правой (right), нижней (bottom) и левой (left) границы рамки;  
solid-это форма прямой линии рамки.  
Вы можете вписать точечную (dotted), пунктирную (dashed), выпуклая (outset), вдавленная (inset), двойная (double), края рамки выемкой (groove), края в виде кромки (ridge).
border-radius: 5px;-размер закругленных углов рамки, измените при необходимости все значения, чтобы числа были одинаковы. 

Теперь этот код надо вставить один раз в шаблон-изменить шаблон выше строки ]]></b:skin>  Перешли в шаблон, в самом начале ищем строку <b:skin>...</b:skin>. 
Сюда вставляются все стили CSS во всех шаблонах.

Строка находится рядом с самой первой стрелкой слева

 

Нажимаем на стрелку слева, тихонечко прокручиваем вниз и находим строку ]]></b:skin>

Выше этой строки вставляем наши коды.

На скриншоте Вы видите, что вставлено несколько: 3,4,5 стилей CSS.

Остается сохранить шаблон и все.

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

<div class="code1">часть текста</div>

Таким образом можно оформить и целую страницу в блоге. 
Код в HTML вставляете в самом начале и в конце закрываете тэгом </div>.  
Запишите где нибудь в блокноте настройки кодов: 1, 2, 3, и.т.д, затем просто меняете цифры и выбираете подходящее оформление.

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