Главная » Украшение » Как украсить Blogger к празднику

Как украсить Blogger к празднику

Что же ещё можно установить на блог красивого, что бы порадовать читателей и напомнить им о скором Новом годе?

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

Шапка на блог

Здесь всё просто, если есть навыки работы в редакторах, можно сделать такую новогоднюю шапку, что другим завидно будет. А если нет?

1. Можно подыскать в интернете готовые шапки. Например, на https://ru.pngtree.com, после регистрации разрешает скачать любую графику два раза в день бесплатно.

2. https://www.stockvault.net - здесь можно найти бесплатные фотографии для шапки блога.
3. Сделать красивую шапку в программе Xheader.
4. Вот по этому адресу http://blogodel.com/2012/12/novogodnjaja-shapka-blogspot-blogger.html можно сделать новогоднюю шапку с анимацией, картинку в шапке можно менять.
5. Заходите на страницу сайта:

https://www.bdblogov.ru/2016/12/novogodnij-vneshnij-fon-dlya-blogov-blogger-oformlenie-na-css.html и вам помогут установить не только праздничную шапку на блог, но и оформить фон, колонку боковых панелей.

Уголки

Если вам не по вкусу мерцающая гирлянда, можно украсить уголки блога красивыми лапами ёлки с игрушками.
Найти уголки на прозрачном фоне можно без проблем в интернете. Как в Яндекс или Гугл картинках, так и на специализированных сайтах. Пишите в поисковике — Украшение
PNG уголок новогодний, рождественский, праздничный, 8 Марта или День Победы (в зависимости от того, для чего уголок нужен) и выбирайте из предложенных поисковиком результатов. К примеру, мне сразу поиск выдал https://yadi.sk/a/-sKQAXSJ3WYcph, где можно выбрать уголок.
А можно сделать в любом редакторе самостоятельно, соединяя скачанные по отдельности детали. В GIMP сделала несколько уголков для образца.

Готовый уголок устанавливаем на сайт. Дизайн — Добавить гаджет - XTML/JavaScript. Как только праздники закончатся, гаджет можно удалить.

<img src="URL картинки" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/>

Выделенное красным - адрес вашей картинки.
Синим - сторона, где будет расположена картинка, в коде прописана левая сторона, если желаете картинку на правой, замените left на right.
Если нужны картинки по обеим сторонам используйте код:

<img src="URL картинки слева" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/><img src="URL картинки справа" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/>

Вот так выглядят уголки на сайте.

Картинки и текст

1. Поставить поздравительную открытку или картинку для посетителей блога можно добавив её в Дизайн — Добавить гаджет — Изображение. Можно добавлять по URL или из компьютера. Найти в интернете сайты с открытками и красивыми поздравительными или прикольными картинками на тему зимы, не составит труда.

2. Почитать, где сделать открытки, можно на блоге здесь.

3. Анимированные картинки с поздравлениями можно сделать на сайтах, о которых я писала в статье про фоны:

https://ru.picmix.com

http://ru.blingee.com

4. Гиф-картинки и анимацию можно найти здесь.

http://gifotkrytki.ru

http://www.gifki.org

5. Поздравить читателей блога можно текстом, о сервисах красивого текста я упоминала в этой статье, а можно сделать в любом редакторе на ПК или онлайн.

6. Красиво поздравить с Новым годом читателя можно бегущей строкой. Подробнее узнать об этом можно на странице:

https://inshabashka.blogspot.com/2018/05/Kak-ustanovit-neskolko-foto-v-ryad-na-Blogger.html.

7. Поздравление можно сделать во всплывающем или диалоговом окне.

Самое простое окно:

добавляем код в шаблон, НИЖЕ тега ]]></b:skin>:

<script language='JavaScript'>
//
alert ("Любой текст ")
</script>

Посложнее окошко — добавляем в Дизайн/Добавить гаджет/XTML/JavaScript. На боковой панели будет видно поздравление со ссылкой, нажав на которое, откроется окно.

<a class="popup-open" href="#"><b>С праздником! Нажми на ссылку!</b></a>
<div class="popup-fade">
	<div class="popup">
		<a class="popup-close" href="#">Закрыть</a>
		<p>Добавляем текст, код, ссылки на картинку и т.д.</p>
	</div>		
</div>
<style>
.popup-fade {
	display: none;
}
.popup-fade:before {
	content: '';
	background: #000;
	position: fixed; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%;
	opacity: 0.7;
	z-index: 9999;
}
.popup {
	position: fixed;
	top: 20%;
	left: 50%;
	padding: 20px;
	width: 360px;
	margin-left: -200px;	
	background: #fff;
	border: 2px solid darkslategray;
	border-radius: 4px; 
	z-index: 99999;
	opacity: 1;	
}
.popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
}
</style>
<script src="https://yandex.st/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
	$('.popup-open').click(function() {
		$('.popup-fade').fadeIn();
		return false;
	});	
	$('.popup-close').click(function() {
		$(this).parents('.popup-fade').fadeOut();
		return false;
	});		
	$(document).keydown(function(e) {
		if (e.keyCode === 27) {
			e.stopPropagation();
			$('.popup-fade').fadeOut();
		}
	});
	$('.popup-fade').click(function(e) {
		if ($(e.target).closest('.popup').length == 0) {
			$(this).fadeOut();					
		}
	});
});
</script>

Поменять можно:

Ширину окаёмки окошка — синим цветом.

Оранжевым — текст, заменить на свой.

Красным — то, что нужно добавить в сплывающее окно.

Зелёным — цвет окаёмки окошка.

Анимированного деда Мороза, часы информеры, гирлянды и другую информацию можно посмотреть в блогах:

https://application-1.blogspot.com/p/blog-page_16.html

http://blogodel.com/2012/11/novogodnij-vidzhet-blogspot-blogger.html

Ваши комментарии:

Комментарии со спамом удаляются.