Сегодня 16 мая, четверг

Какой рейтинг вас больше интересует?

получить код

Главная /

Каталог блогов

/

Cтраница блогера Блог для блогов - создание блога на blogspot

Записи в блоге

	Блог для блогов - создание блога на blogspot Голосов: 1 Адрес блога: http://bdblogov.blogspot.com/ Добавлен: 2013-06-02 03:52:18 блограйдером Olga28

Контактная форма для блогов Blogspot

2014-02-03 21:56:00 (читать в оригинале)

Элегантная форма для связи, работающая на CSS

Контактная форма для связи, работающая на CSS

Здравствуйте дорогие гости и читатели моего блога. Сегодня у нас информация о форме связи для блога. Наличие контактной формы очень важно в блоге. Вебмастер просто обязан держать связь со своими посетителями, ведь не все вопросы можно задать в комментариях. Иногда требуется индивидуальная переписка по тем или иным вопросам. У меня в блоге есть информация на эту тему, но там мы используем сторонний виджет, что не всегда хорошо, и я смотрю, что у многих проблемы с установкой формы. Здесь же мы получим форму для связи, используя родной гаджет Google и CSS стили. Пример смотрите в демо блоге.

Как добавить родной гаджет Форма для связи Google в блог

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

Второй шаг: переходим в шаблон-изменить щаблон. Кто с шаблоном пока на Вы, делайте резервную копию шаблона. После открывающего тэга <head> ищем строку <b:skin>...</b:skin>. Нажимаем на стрелку слева, идем вниз, находим ]]></b:skin>. Вставляем скопированный ниже код:

#ContactForm1{

display:none;

}

#contact_wrap {

margin: auto;

width: 321px;

height: 380px;

padding: 25px;

border-radius: 1em;

border-top:1px solid #dbdbdb;

border-right:1px solid #b2b2b2;

border-left:1px solid #dbdbdb;

border-bottom:1px solid #9d9d9d;

background-color:#cccccc;

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');

background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);

box-shadow: 1px 1px 5px #ccc;

}

#contact_wrap h3{

color: #e8f3f9;

font-family:Georgia;

font-size: 20px;

font-style:italic;

font-weight:bold;

margin: 0 -36px 20px -36px;

padding: 12px;

text-align: center;

text-shadow: 2px 0 0 #1f4962;

-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;

-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;

box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;

background-color: #3689b9;

position: relative;

}

#contact_wrap h3:before {

content: ' ';

position: absolute;

bottom: -10px;

left: 0;

width: 0;

height: 0;

border-style: solid;

border-width: 10px 0 0 10px;

border-color: #333 transparent transparent transparent;

}

#contact_wrap h3:after {

content: ' ';

position: absolute;

bottom: -10px;

right: 0;

width: 0;

height: 0;

border-style: solid;

border-width: 0 0 10px 10px;

border-color: transparent transparent transparent #333;

}

#ContactForm1_contact-form-name{

width: 270px;

height:auto;

margin: 5px auto;

padding: 10px 10px 10px 40px;

background:#f6f6f6 url(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/s1600/user.png)no-repeat 10px center;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

}

#ContactForm1_contact-form-email{

width: 270px;

height:auto;

margin: 5px auto;

padding: 10px 10px 10px 40px;

background: #f6f6f6 url(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/s1600/pen.png)no-repeat 10px center;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

}

#ContactForm1_contact-form-email-message{

width: 270px;

height: 150px;

margin: 5px auto;

padding: 10px 10px 10px 40px;

font-family:Arial, sans-serif;

background: #f6f6f6 url(http://1.bp.blogspot.com/-QduNKpNbFyQ/UZuZPuE_OfI/AAAAAAAAEPU/Rv4C4Kic2I0/s1600/msg2.png)no-repeat 10px 10px;

color:#777;

border:1px solid #ccc;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;

}

#ContactForm1_contact-form-submit {

width: 95px;

height: 30px;

float: right;

color: #FFF;

padding: 0;

cursor:pointer;

margin: 25px 0 3px 0 0;

background-color:#005a8a;

border-radius:4px;

text-shadow: 1px 0 0 #1f4962;

-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;

background-color: #3689b9;

border:1px solid #194f6d;

}

#ContactForm1_contact-form-submit:hover {

background:#4c9bc9;

}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{

width: 320px;

margin-top:35px;

}

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

<div id="contact_wrap">

<h3>Контактная форма</h3>

<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Имя" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Отправить" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

<style type="text/css">

#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}

</style>

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

Тэги: blogger
Постоянная ссылка

Оформление, выравнивание, убрать под кат текст в блоге

2014-02-03 04:49:00 (читать в оригинале)

Шпаргалка для вебмастеров

Коды для выравнивания текста, изменения размеров, цвета и шрифта текста

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

*Шпаргалка*	*Вебмастерам*
Оформление текста: <u>Ваш текст</u> - Ваш текст; <s>Ваш текст</s> - Ваш текст; <b>Ваш текст</b> - Ваш текст; <i>Ваш текст</i> - Ваш текст;       - пробел; <br/> - перенос по строке вниз; <center>Текст</center> - текст по центру.	Таблица: <table border=0 wight=52%> - начало таблицы; <tr> - начало строки; </tr> - конец строки; <td> и </td> - между этими символами заключается одна ячейка таблицы; </table> - конец таблицы.
Ссылки: <a href="URL страницы"> Ваш текст</a> <a href="URL страницы"><img src="URL картинки"></a> - кликабельная картинка, <a href="URL страницы" target="_blank">Ваш текст</a> - ссылка откроется в новом окне.	*Окошко для вставки кода:* 1.<textarea rows="2" cols="60"> Ваш код </textarea> ,где cols - ширина окошка в px, а rows - высота окна. 2.<input size="35" value="Ваш код"h-text"><div class="b-text"
Кат текста: <cut text="Читать подробнее">Основной текст </cut>	*Шрифт, размер, цвет текста:* <span style="font-family:Monotype Corsiva;color:fuchsia;font-size:25px">Ваш текст</span>
Кнопка: <a href="Ссылка"><input type="submit" value="Надпись на кнопке" /></a>	Обтекание картинки тектом: <img src="http:…" align=left hspace=20 vspace=20>

<br/> - Перенос по строке вниз;
title="Текст" - всплывающая подсказка;
        - пробел;
<u>Ваш текст</u> - Подчеркнутый;
<s>Ваш текст</s> - Перечеркнутый;
<b>Ваш текст</b> - Полужирный;
<big>Ваш текст</big> - Полужирный крупный;
<i>Ваш текст</i> - Курсив;
<tt>шрифт "пишущая машинка"</tt> - шрифт "пишущая машинка"
<blockquote>цитата</blockquote> - цитата <hr>-линия;

Таблица:
<table border=0 widht=52%> -

таблица (начало)

<tr> - строка (начало);

</tr> - конец строки;

Между символами <td> и </td> заключается отдельная ячейка таблицы;

</table>- конец таблицы.

Убрать под кат:
<cut text="Читать далее (смотреть видео, изображения) и т.д."> Ваш текст, который нужно убрать под кат </cut>

Выравнивание текста:

<div align=right> ваш текст </div> - выравнивание по правому краю;
<div align=left> Текст выровнен по левому краю </div>

<div align=justify> ваш текст </div> - выравнивание по всей ширине текста;

<center>ваш текст, картинка</center> - центрирование.

Списки HTML

*Нумерованный список*
<ol type=1><li>первый элемент</li> <li>второй элемент</li> ..... <li>Y - элемент</li> </ol>	первый элемент второй элемент ...... Y - элемент
*Маркированный список*
<ul type=disc> <li>первый элемент</li> <li>второй элемент</li> ..... <li>Y - элемент</li> </ul>	первый элемент второй элемент ...... Y - элемент

Надеюсь, что информация будет для Вас полезна. Пишите отзывы, делитесь с друзьями в социальных сетях. Всего доброго.

Тэги: blogger
Постоянная ссылка

Как выделить часть текста в рамку

2014-02-03 00:50:00 (читать в оригинале)

Выделение определенной части текста рамкой и оформление на заданном цветном фоне

Коды рамок для выделения части или всего текста на странице

Здравствуйте! Любому из вебмастеров в своих статьях бывает необходимо выделить какую то часть текста в рамку, чтобы текст был более заметным, чтобы читатели обратили внимание на запись. Сегодня мы рассмотрим самые простые способы выделения текста в рамку, Вы сможете выделять либо часть текста, либо весь текст на странице, а так же научимся оформлять текст на заданном Вами фоне. Итак поехали:

Самая простая обычная рамка точками, надо заключить текст вот в такой код:

<div style="border:5px dotted #044f4ee;padding:10px;">ваш текст</div>

Выделение текста простой линией, код такой:

<div align="center" style="border: 1px solid #9b089e;">Ваш текст</div>

А эта рамка размером 10 рх и с измененным цветом

Код для выделения текста обычной линией
<div style="border:3px solid #000000;padding:10px;">ваш текст.</div>

Выделение пунктирной линией

<div style="border:3px dashed #0e5198;padding:10px;">ваш текст.</div>

Край рамки вдавленный

<div style="border:10px inset #ff9900;padding:10px;">ваш текст.</div>

Край рамки выпуклый

<div style="border:10px outset #054f04;padding:10px;">ваш текст.</div>

Двойная рамка

<div style="border:10px double #0a9e08;padding:10px;">ваш текст.</div>

Край рамки с выемкой

<div style="border:10px groove #047AFE;padding:10px;">ваш текст </div>

Край рамки в виде кромки
<div style="border:10px ridge #8b00ff;padding:10px;">ваш текст.</div>

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

Прокручиваем вниз и выше строки ]]></b:skin> вставляем

.code1 {

margin : 15px 35px 15px 15px;

padding : 20px 10px 10px 35px;

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

border-top : 1px solid #E3E3E3; цвет окантовки

border-right : 1px solid #E3E3E3;

border-bottom : 1px solid #E3E3E3;

border-left : 1px solid #E3E3E3;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

}

Вы можете вставить несколько таких стилей, с настройкой разных цветов и размеров.

Измените только code2; code3; code4; и.т.д вставьте другие цвета и размеры.

Затем когда написали текст, заключите его в редакторе сообщений, нажав на вкладку HTML в следующий код

<div class="code1">ваш текст</div>

Вот собственно и все. Комментируйте, делитесь с друзьями. А я говорю Вам всего доброго.

Тэги: дизайн
Постоянная ссылка

Виджет последних комментариев с оригинальным эффектом

2014-02-02 16:30:00 (читать в оригинале)

Эффектный виджет последних комментариев для блога Blogspot

Как установить виджет последних комментариев блога в блог Blogspot

Всем привет! Хочу предложить Вам оригинальный виджет последних комментариев. Пример смотрите на главной странице этого блога. Для новых посетителей отличная возможность убедиться, что Ваш блог живет, статьи комментируют, да и сам виджет безусловно привлечет их внимание. Чудо это легко устанавливается с помощью JavaScript, требует минимум настроек. Итак, кто заинтересовался, переходим в дизайн-добавить гаджет-Html/JavaScript-вставить-настроить-сохранить. Копируем код ниже:

ul.allbloggertricks_recent{list-style:none;margin:0;padding:0;}

.allbloggertricks_recent li{background:none!important;display:block;clear:both;overflow:hidden;list-style:none;border:1px solid transparent;border-radius:9px;max-height:100px;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:0;-moz-transition-property:0;-o-transition-property:0;transition-property:transform;margin:0 0 6px!important;padding:3px!important}

.allbloggertricks_recent li:hover{border:1px solid #ddd;

-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg) }

.allbloggertricks_recent a {text-decoration:none;}

.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px

#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden}

.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}

.allbloggertricks_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}

</style>

//<![CDATA[

var

numComments = 9,

showAvatar = true,

avatarSize = 35,

roundAvatar = true,

characters = 50,

defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",

hideCredits = true;

maxfeeds=50,

adminBlog='Olga';

//]]>

</script>

</script>

Минимальные настройки: numComments = 9-количество комментариев; avatarSize = 35-размер аватара; adminBlog='Olga"-администратор блога; www.bdblogov.ru-замените мой адрес блога на свой. На этом все. Всего Вам доброго.

Тэги: гаджеты
Постоянная ссылка

Виджет новых постов блога в виде изображений

2014-02-02 15:30:00 (читать в оригинале)

Последние записи в блоге Blogspot в виде изображений

Как установить в блог виджет свежих постов в виде изображений

Здравствуйте, дорогие читатели и гости. Сегодня у нас еще один виджет последних сообщений, но с изюминкой. Ваши последние посты блога будут смотреться в виде изображений. Пример смотрите справа в этом блоге (пока не удалено). Или кликните по скриншоту, рисунок увеличиться, посмотрите как красиво выглядит гаджет свежих статей блога. Установить такой гаджет в блог дело нескольких минут. Требует минимальных настроек. Первое, копируем скрипт ниже. Второе, идем в черновик blogger-дизайн-добавить гаджет-Html/JavaScript-вставить-настроить-сохранить в нужном месте макета блога.

#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}

#post-gallery .rp-item {float:left;display:inline; position:relative; margin:2px; padding:0px 0px; background: url('http://4.bp.blogspot.com/-0E2ZARxMyAo/UZwiR3XjlvI/AAAAAAAAKDc/3Z8WjltqbCQ/s1600/LOAD+(66).gif') no-repeat 50% 50%; width:79px; height:79px;}

#post-gallery .rp-item img { width:69px; height:69px; border:none !important; margin:0px 0px !important; padding:0px 0px !important; background:transparent !important; display:none;}

#post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

#post-gallery .rp-item .rp-child { position:relative; top:10%!important; left:10%!important; z-index:1000; width:200px; background-color:white; border-bottom:5px solid #1BA1E2; -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7); box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7); padding:10px 15px; overflow:hidden; word-wrap:break-word; display:none; opacity: 0.9;}

#post-gallery .rp-item .rp-child h4 { font-size:12px; margin:0px 0px 5px; color:#1BA1E2;}

#post-gallery .rp-item:hover .hidden {display:block;}</style>

var rpTitle = "Свежие статьи в блоге", // Widget Title

numposts = 8, // Number of Posts to show

numchar = 200, // Number of Characters to be displayed

rcFadeSpeed = 600, // Speed

pBlank = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", // If No Image

blogURL = "http://www.bdblogov.ru/"; // Your Blog URL

</script>

Настройки: http://www.bdblogov.ru-замените мой адрес блога на свой; numposts = 8-количество сообщений; Свежие статьи в блоге-напишите свой текст; width:79px; height:79px;-ширина и высота изображений; При ширине (width) 79 рх-три картинки по горизонтали, при 70 рх-четыре картинки; У Вас может быть по другому, зависит от размера боковой колонки. Другие размеры не тестировала, по моему и так не плохо. На этом у меня все. Пишите отзывы, комментируйте. До свидания.

Тэги: гаджеты
Постоянная ссылка

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

Блограйдеров
14490

Блогов
219902
(+0 сегодня)

Сообществ
1309
(+0 сегодня)

ЖЖ все стерпит
по сумме баллов (758) в категории «Истории»

Категория «Размышления»

Взлеты Топ 5


+1561	1596	fiona
+1550	1597	Алексей Чернов
+1529	1559	Elen_i_rebyata
+1513	1584	Малти_Ошер
+1512	1589	Дрочливый_Драчун

Падения Топ 5


-2	74	Рыжая_Лада
-2	947	G-Traveler \| Сайт заметок путешественника
-2	1264	Сайт визажиста Мокровой Инны блог
-5	53	BJohn
-6	17	Аццкей_Сотона

Загрузка...

BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.