“Полоса прокрутки всего содержания блога для Блоггер, Блогспот” plus 24 more

Полоса прокрутки всего содержания блога для Блоггер, Блогспот
Удивительные эффекты при наведении курсора на картинку, для Блогспот, Блоггер
Самая простая установка всплывающей подсказки для Блогспот, Блоггер
Уникальные социальные кнопки в виде двигающихся машинок, для Блогспот, Блоггер
Закроют ли Блогспот, Блоггер?
Закроют ли Google Friend Connect для Блоггер, Блогспот?
Информационно приветственный баннер, который не раздражает читателей (с куками) и с таймером, для Блоггер, Блогспот
Волшебное яйцо - социальных кнопок, для Блогспот, Блоггер
Уникальное слайд-шоу в виде раскрывающейся книги, для Блоггер, Блогспот
Меню для Блоггер, Блогспот, которое всегда сверху
Анимированные приветствия на Блоггер, Блогспот
Каллиграфическая подпись на кириллице в конце статьи, для Блогспот, Блоггер
Красивое оформление цитат на Блогспот, Блоггер
Красивое оформление заголовка статей Блогспот, Блоггер
Уникальный скрипт кнопки "Вверх - Вниз" с медленной автоматической прокруткой для чтения, для Блогспот, Блоггер
Картинка перед заголовком страницы на Блогспот, Блоггер
Еще один уникальный скрипт кнопки "Вверх" - взлетающая ракета, для Блогспот, Блоггер
Панорамное увеличении картинки при наведении курсора, для Блогспот, Блоггер
Красивое слайд-шоу с очень простой установкой, для Блогспот, Блоггер
Уникальная кнопка Scroll To Top (наверх) для Блогспот, Блоггер
Смайлики в комментариях Блогспот, Блоггер
Самая простая установка гаджета "Летающий твиттер" на Блогспот, Блоггер
Красочное поздравление на ваш сайт к 8 марта
Оригинальный виджет - профиль автора для Блогспот, Блоггер
Еще одно простое решение для скрытого текста - спойлера для блога на Blogger, Блогспот

Полоса прокрутки всего содержания блога для Блоггер, Блогспот

Posted: 21 Jul 2013 04:20 PM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

По многочисленным заявкам читателей, публикую "Полосу прокрутки всего содержания блога для Блоггер, Блогспот"

Данный виджет можно использовать (вставить в редактор), как для страницы "Содержание" так и в конце статьи.

Код для страницы "Содержание"

<style>
#arch {
font-size: 0px;
}
#arch ul li {
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
border-radius: 3px;
font-size: 75.75%;
color: #2A7700;
line-height: 1.93;
padding: 3px 45px;
border-radius: 3px;
list-style: none;
}
#arch ul a {
font-size: 14px;
}
</style>
<script src="http://bloggerndch.googlecode.com/files/tocbyarchivemin.js">
</script>
<script src="http://blogodel.com/feeds/posts/default?max-results=999&alt=json-in-script&callback=loadtoc">
</script>

Туда, где выделено красным, вставляется урл.- адрес вашего блога.

Код полосы прокрутки, вставляется в конце статьи (в редактор сообщений)

<style>
.layer {
overflow-x:hidden;overflow-y:scroll; /* Добавляем полосы прокрутки */
width: 810px; /* Ширина блока */
height: 310px; /* Высота блока */
padding: 0px 0 0 0px; /* Поля вокруг текста */
border: solid 0px white; /* Параметры рамки */ margin: 0px 165px 0 0px;
}

</style>
<div class='layer'>
<style>
#arch {
font-size: 0px;
}
#arch ul li {
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
border-radius: 3px;
font-size: 75.75%;
color: #2A7700;
line-height: 1.93;
padding: 5px 55px;
border-radius: 3px;
list-style: none;
}
#arch ul a {
font-size: 14px;
}
</style>
<script src='http://bloggerndch.googlecode.com/files/tocbyarchivemin.js'>
</script>
<script src='http://blogodel.com/feeds/posts/default?max-results=999&alt=json-in-script&callback=loadtoc'>
</script>

Туда, где выделено красным, вставляется урл.- адрес вашего блога.

Для продвинутых пользователей Блогспот, Блоггер, код в шаблоне вставляется после строчки:
<div class='post-footer-line post-footer-line-1'>

Убедительная просьба для тех, кто попытается вставить код в шаблон. Шаблоны у всех разные, я не телепат и поэтому с претензиями в комментариях НЕ ОБРАЩАТЬСЯ!

По мотивам: http://blogger.omg-linux.ru/

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Удивительные эффекты при наведении курсора на картинку, для Блогспот, Блоггер

Posted: 29 Jun 2013 07:01 AM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

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


Эффект1	Эффект2

Эффект4	Эффект5

Эффект3

Код добавляется (куда угодно) в редакторе сообщения

Обратите внимание на маркированный красным скрипт jQuery, если эффект не работает то его нужно удалить. Информация об этом здесь.

<style>.adipoli-wrapper{position:relative;display:inline-block;margin:auto}
.adipoli-slice{display:block;position:absolute;z-index:0;height:100%}
.adipoli-box{display:block;position:absolute;z-index:0}
.post img{border:0!important;margin:0!important;padding:0!important}
.adipoli-wrapper>img,.adipoli-before,.adipoli-after{position:absolute;z-index:0}</style><script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'></script>
<script src='http://yourjavascript.com/143237963/jquery.adipoli.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*<![CDATA[*/
jQuery(function($pice){
$pice('.effect1').adipoli({
'startEffect' : 'normal',
'hoverEffect' : 'popout'
});
$pice('.effect2').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'sliceDown'
});
$pice('.effect3').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRandom'
});
$pice('.effect4').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'foldLeft'
});
$pice('.effect5').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRainGrowReverse'
});

});
/*]]>*/

</script>
<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",k="?m=1";function l(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+k;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var m=l();m&&window.location.replace(m)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

Ну и последний шаг: вставляем в код вашей картинки - идентификатор class="effect1 (выделен красным фоном), где цифра, это выбранный вами эффект.

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Самая простая установка всплывающей подсказки для Блогспот, Блоггер

Posted: 23 Jun 2013 08:59 AM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

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

Наведите курсор на картинку!

Если эффект вам понравился, приступаем к установке, которая осуществляется добавлением кода:

В Дизайн - Добавить гаджет - HTML/JavaScript

<style>#tooltip {opacity:0.8; border-radius: 9px;
background:#ffffff; /*цвет фона*/
color:#191919; /*цвет текста*/
font-size:16px; /*размер шрифта*/
box-shadow:0 0 10px #191919; /*тень блока всплывающей подсказки*/
-moz-box-shadow:0 0 10px #191919;
-webkit-box-shadow:0 0 10px #191919;
margin:0;
padding:10px; /*расстояние от текста до рамки*/
position:absolute;
visibility:hidden;
z-index:999999; /*преобладание подсказки над всеми остальными элементами*/
}</style><script language='javascript' type='text/javascript'>
var tooltip = {
/* НАЧАЛО НАСТРОЕК */
options: {
attr_name: "tooltip", // наименование создаваемого tooltip'ого атрибута
blank_text: "{откроется в новом окне}", // текст для ссылок с target="_blank"
newline_entity: " ", // укажите пустую строку (""), если не хотите использовать в tooltip'ах многострочность; ежели хотите, то укажите тот символ или символы, которые будут заменяться на перевод строки
max_width: 250, // максимальная ширина tooltip'а в пикселах; обнулите это значение, если ширина должна быть нелимитирована
delay: 100, // задержка при показе tooltip'а в миллисекундах
skip_tags: ["link", "style"] // теги, у которых не обрабатываем атрибуты alt и title
},
/* КОНЕЦ НАСТРОЕК */
t: document.createElement("DIV"),
c: null,
g: false,
canvas: null,
m: function(e){
if (tooltip.g){
var x = window.event ? event.clientX + (tooltip.canvas.scrollLeft || document.body.scrollLeft) : e.pageX;
var y = window.event ? event.clientY + (tooltip.canvas.scrollTop || document.body.scrollTop) : e.pageY;
tooltip.a(x, y);
}
},
d: function(){
tooltip.canvas = document.getElementsByTagName(document.compatMode && document.compatMode == "CSS1Compat" ? "HTML" : "BODY")[0];
tooltip.t.setAttribute("id", "tooltip");
document.body.appendChild(tooltip.t);
if (tooltip.options.max_width) tooltip.t.style.maxWidth = tooltip.options.max_width + "px"; // all but ie
var a = document.all && !window.opera ? document.all : document.getElementsByTagName("*"); // in opera 9 document.all produces type mismatch error
var l = a.length;
for (var i = 0; i < l; i++){
if (!a[i] || tooltip.options.skip_tags.in_array(a[i].tagName.toLowerCase())) continue;
var tooltip_title = a[i].getAttribute("title"); // returns form object if IE & name="title"; then IE crashes; so...
if (tooltip_title && typeof tooltip_title != "string") tooltip_title = "";
var tooltip_alt = a[i].getAttribute("alt");
var tooltip_blank = a[i].getAttribute("target") && a[i].getAttribute("target") == "_blank" && tooltip.options.blank_text;
if (tooltip_title || tooltip_blank){
a[i].setAttribute(tooltip.options.attr_name, tooltip_blank ? (tooltip_title ? tooltip_title + " " + tooltip.options.blank_text : tooltip.options.blank_text) : tooltip_title);
if (a[i].getAttribute(tooltip.options.attr_name)){
a[i].removeAttribute("title");
if (tooltip_alt && a[i].complete) a[i].removeAttribute("alt");
tooltip.l(a[i], "mouseover", tooltip.s);
tooltip.l(a[i], "mouseout", tooltip.h);
}
}else if (tooltip_alt && a[i].complete){
a[i].setAttribute(tooltip.options.attr_name, tooltip_alt);
if (a[i].getAttribute(tooltip.options.attr_name)){
a[i].removeAttribute("alt");
tooltip.l(a[i], "mouseover", tooltip.s);
tooltip.l(a[i], "mouseout", tooltip.h);
}
}
if (!a[i].getAttribute(tooltip.options.attr_name) && tooltip_blank){
//
}
}
document.onmousemove = tooltip.m;
window.onscroll = tooltip.h;
tooltip.a(-99, -99);
},

_: function(s){
s = s.replace(/&/g,"&");
s = s.replace(/</g,"<");
s = s.replace(/>/g,">");
return s;
},
s: function(e){
if (typeof tooltip == "undefined") return;
var d = window.event ? window.event.srcElement : e.target;
if (!d.getAttribute(tooltip.options.attr_name)) return;
var s = d.getAttribute(tooltip.options.attr_name);
if (tooltip.options.newline_entity){
var s = tooltip._(s);
s = s.replace(eval("/" + tooltip._(tooltip.options.newline_entity) + "/g"), "<br />");
tooltip.t.innerHTML = s;
}else{
if (tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild);
tooltip.t.appendChild(document.createTextNode(s));
}
tooltip.c = setTimeout(function(){
tooltip.t.style.visibility = 'visible';
}, tooltip.options.delay);
tooltip.g = true;
},
h: function(e){
if (typeof tooltip == "undefined") return;
tooltip.t.style.visibility = "hidden";
if (!tooltip.options.newline_entity && tooltip.t.firstChild) tooltip.t.removeChild(tooltip.t.firstChild);
clearTimeout(tooltip.c);
tooltip.g = false;
tooltip.a(-99, -99);
},
l: function(o, e, a){
if (o.addEventListener) o.addEventListener(e, a, false); // was true--Opera 7b workaround!
else if (o.attachEvent) o.attachEvent("on" + e, a);
else return null;
},
a: function(x, y){
var w_width = tooltip.canvas.clientWidth ? tooltip.canvas.clientWidth + (tooltip.canvas.scrollLeft || document.body.scrollLeft) : window.innerWidth + window.pageXOffset;
var w_height = window.innerHeight ? window.innerHeight + window.pageYOffset : tooltip.canvas.clientHeight + (tooltip.canvas.scrollTop || document.body.scrollTop); // should be vice verca since Opera 7 is crazy!
if (document.all && document.all.item && !window.opera) tooltip.t.style.width = tooltip.options.max_width && tooltip.t.offsetWidth > tooltip.options.max_width ? tooltip.options.max_width + "px" : "auto";

var t_width = tooltip.t.offsetWidth;
var t_height = tooltip.t.offsetHeight;
tooltip.t.style.left = x + 8 + "px";
tooltip.t.style.top = y + 8 + "px";

if (x + t_width > w_width) tooltip.t.style.left = w_width - t_width + "px";
if (y + t_height > w_height) tooltip.t.style.top = w_height - t_height + "px";
}
}
Array.prototype.in_array = function(value){
var l = this.length;
for (var i = 0; i < l; i++)
if (this[i] === value) return true;
return false;
};
var root = window.addEventListener || window.attachEvent ? window : document.addEventListener ? document : null;
if (root){
if (root.addEventListener) root.addEventListener("load", tooltip.d, false);
else if (root.attachEvent) root.attachEvent("onload", tooltip.d);
}
</script>

После внедрения кода на ваш блог, предстоит еще один незначительный шаг, а именно прописать атрибут title (в котором будет текст всплывающей подсказки) или к картинке или к ссылке.
Разберемся вначале с картинкой. Во время редактирования сообщения при нажатии на картинку выдается контекстное меню "Маленький-Средний-Крупный-Исходный размер-....-Добавить подпись-Свойства-Удалить". Надо выбрать "Свойства" и заполнить поле (с текстом для подсказки) для title ("текст заголовка") и можете (по желанию) заполнить alt ("альтернативный текст").

С картинкой разобрались, теперь как прописать title для ссылки? Вставляете просто в конструкцию ссылки - атрибут title, выделенный красным цветом.

< a href="http://СТРАНИЦА КУДА ВЕДЕТ ССЫЛКА/" title="ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ">Текст ссылки< /a>

Если у вас все получилось, то поздравляю с новым усовершенствованием вашего блога!

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Уникальные социальные кнопки в виде двигающихся машинок, для Блогспот, Блоггер

Posted: 15 Jun 2013 04:26 AM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Давненько я вас, не радовал новыми виджетами для Блогспот, Блоггер. Сегодня я предлагаю совершенно уникальную вещь - социальные кнопки в виде двигающихся машинок!

Полюбуйтесь!

Виджет пришлось немного "довести до ума": сделать остановку при наведении курсора и добавить машинку с Гугл +.

Код вставляется очень просто:

В Дизайн - Добавить гаджет - HTML/JavaScript

<div style="position: relative; z-index: 65535; left: 0px; bottom: -3px; width:100%;"> <marquee onmouseover=this.stop() onmouseout=this.start() ><a href="адрес вашего профиля Facebook" target="blank"> <abbr title="Подпишитесь!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi__wENZIRoCAZOH6VBLDTgZxbPvGrHBrwahFfz5eIxq0BAAZmsbSU_fFj26YiBn6S1e80Vd4PaF8mxcuBCyKjujfzof9SM-XPLlIujZzVyUBHreBcLcA3REWPkc2S8lXFlwqZjtNwiEu2z/s1600/Social-Truck_fb2.png" width="120px" height="100px" /> </abbr> </a> <a href="адрес вашего Feed-канала" target="blank"> <abbr title="Подпишитесь!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy3mNKMYNVjV4tJ1zBl1U37yP60LNGc44wHyBmsYCg8CQs8N2fYkEYh3LYqZA2JRtNKgTIC-VT7oulkypjchXphbq6CRGukrPYaQEjsZWcbG2OHgWiv9-B3NyPNngYTZWtRdYbk17JJdHR/s1600/Social-Truck_rss.png" width="120px" height="100px" /> </abbr> </a><a href="адрес вашего профиля в Twitter" target="blank"> <abbr title="Подпишитесь!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpktM3g1RKYPdOK2m838oHe9YZll2XpydbttNVlA6Rw9pJoMsI67hnoGs-C7scB6c-CH-sflzKv2PKSkM1WaWZF2rSC5iyNznLyBv395DpC2LsExjRbecbvPV4YfPfUmuVFGCqq_jQNe5t/s1600/Social-Truck_twi.png" width="120px" height="100px" /> </abbr> </a> <a href="адрес вашего профиля в Google +" target="blank"> <abbr title="Подпишитесь!"><img src="http://s017.radikal.ru/i435/1306/4a/fec6be0cf802.jpg" width="120px" height="100px" /> </abbr> </a></marquee></div>

Там где маркировано красным, необходимо внести адрес-урл ваших профилей в социальных сетях.

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Закроют ли Блогспот, Блоггер?

Posted: 09 Jun 2013 12:30 AM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Невеселые ~~сомнения и тягостные~~ раздумья о судьбах Гугловских сервисов, заставили меня опубликовать некоторые "мысли вслух". Вот она печальная статистика: GReader закрывается в июле, FriendConnect может закрыться, FeedBurner тоже на очереди! Невольно напрашивается логический вопрос: а нужен ли Гуглу - Блогспот, Блоггер?

Вроде бы ничего не предвещает скоропостижную кончину Гугло-блога (Блогспота). Время от времени появляются новые настройки, новые возможности. Блоггер, как нельзя лучше готов к взаимодействию с поисковыми системами (даже с Яндексом).
Но все же!?
Складывается подозрение, что имеет место быть "ползучая" проблема погружения Блогспота в социальную сеть Гугл+, с последующей дематерилизацией! Делать вид, что ничего не происходит, это все равно, что уподобляться страусу, который прячет голову в песок!

Началось все с профиля.

Как неудобно теперь просматривать профиль! Вместо четкого представления об авторе и его блогах, какая то "каша" из обрывочных анонсов непонятно чего!

Потом новые комментарии от Гугл+?

Вроде бы безобидное нововведение, но как сильно отдает "душком" зависимости от социальной сети.

И все сильнее и сильнее складывается впечатление, что не Гугл+ приложение Блогспота, а наоборот! Формальная, но столь привлекательная индивидуальность Блоггера, все больше сжимается, как шагреневая кожа!

Поэтому лично я, ничего хорошего от социальной сети Гугл+ для Блогспота не жду! Единственная надежда на то, что проект Гугловской социальной сети ожидаемого успеха не приносит и не принесет! И будет по этой причине закрыт!
Пока люди формально вступают в эту сеть, что бы пользоваться Гугловкими сервисами. Активность аккаунтов при этом - практически нулевая! Кроме того, я думаю, что связка Майкрсофт - Фейсбук, не допустит Гугл в свою епархию!

Все это, конечно дело завтрашнего дня и поэтому советую (пользователям платформы Блогспот) - крепко держать руку на "пульсе перемен", что бы вовремя "эвакуироваться" с тонущего корабля!

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Закроют ли Google Friend Connect для Блоггер, Блогспот?

Posted: 03 Jun 2013 09:53 AM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Вот такой вопрос, волнует многих владельцев Блогспот, Блоггер!

"Извините, Justus, может это немного не по теме, но сейчас всех блогеров волнует такой вопрос:с 1 июля 2013 года Google закроет возможность читать блоги, на которые Вы уже подписаны, а также подписываться на новые через Google Reader/Google Friend Connect.Т.е. новые посты из блогов, которые мы постоянно читаем, перестанут отображаться в ленте Blogspot, а кнопка "Присоединиться" с расположенным под ней списком всех читателей блога попросту исчезнет. Вы как-то можете просветить нас в этом вопросе?"

Необходимо сразу же отметить, что главная ошибка тех, кто озадачен этим вопросом, это непонимание того, что Reader/Google (который действительно закрывается 1 июля 2013) и Google Friend Connect, это разные сервисы и о закрытии Google Friend Connect - ни где, ничего не говорится! А это означает, что список чтения из административной панели Блогспота, после закрытия Reader/Google, никуда не денется! И Google Friend Connect будет функционировать дальше!

Другое дело, что рано или поздно вероятность того, что Google Friend Connect полностью будет заменен на Гугл+, очень велика! Хотя может и Гугл+ прекратит свое существование, как проект не оправдавший надежды руководства ??? Фейсбук Гуглу+, не догнать ни когда!
Что ж, поживем - увидим!

Кстати, рекомендую вместо закрывающегося Reader/Google, перейти на Яндекс подписки! Пользуюсь уже давно и доволен! Кроме того, это хорошее сохранение контента в случае бана блога или аккаунта Гуглом. У меня был как то бан и я сохранил контент, благодаря Яндекс подпискам! Об этом, я уже писал - "Яндекс спасает забаненный Гуглом блог".

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Информационно приветственный баннер, который не раздражает читателей (с куками) и с таймером, для Блоггер, Блогспот

Posted: 26 May 2013 10:00 AM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

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

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

Скрипт не имеет аналогов в интернете, так как обладает одновременно двумя особенностями - таймером (картинка без необходимости нажимать на close пропадает сама) и так называемыми куками (скрипт "запоминает" посетителя и показывает картинку только один раз и только новым посетителям).

Код вставляется очень просто:

В Дизайн - Добавить гаджет - HTML/JavaScript

<style> #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position: fixed;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}.cboxPhoto{float:left; margin:auto; border:0; display:block;} #cboxSlideshow{cursor:pointer;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js" type="text/javascript"></script> <script>
$(document).ready(function() {
setTimeout ("$('#popup2').fadeIn('fast');", 6000);
setTimeout ("$('#popup2').fadeOut('slow');", 9000);
});
</script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24* 7 ; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"0px", inline:true, href:"#subscribe"}); } }); </script>  <div style='display:none'> <div id='subscribe' style='padding:0px;'><center><span id='popup2'><img border="0" height="69" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg29Xf7ZoI9U6tOoHRem14CuraPraR9FQkI_Wa1lFeO5CBd7h8BzqEByevSq4lZ1JjNfxI-X3v2x83Lk9PNbG5TLg9bFj8pJuJVjyUptl2QTXjltxkvG2vkGI_vgY9O-djv7dfDrnrm6FM/s1600/cooltext868333624.png" width="490" /></span></center></div> </div>

Как вы уже догадались, там где выделено красным, вы можете вставить код картинки или еще проще урл.-адрес картинки, туда где синий цвет.

Для проверки и настройки скрипта, я рекомендую редактор:

http://www.timsfreestuff.com/HTMLEditor/

Внимание! картинка будет показываться только один раз! Если пожелаете увидеть, как работает скрипт, зайдите на свой блог с другого браузера.
Если у вас уже есть "двигающиеся" виджеты со скриптом jQuery, то код может не работать!

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Волшебное яйцо - социальных кнопок, для Блогспот, Блоггер

Posted: 18 May 2013 08:55 AM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Это "волшебное" яйцо когда то красовалось на этом блоге и по моему мнению, является самым оригинальным размещением социальных кнопок, которое я когда либо видел.

См. демо: http://blogodel-test.blogspot.ru/

Но из-за загруженности моего блога скриптами, от этого чуда к сожалению пришлось отказаться.

Виджет этот "гуляет" по Рунету уже давно НО! Трудоемкая операция внедрения кода, связанная с необходимостью "ковыряться" в шаблоне Блогспота, для многих являлась препятствием. Мой вклад в модернизацию кода виджета заключается в том, что код теперь вставляется очень просто:

В Дизайн - Добавить гаджет - HTML/JavaScript

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'></script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'></script>
<script type='text/javascript'>stLight.options({publisher: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'></div>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:'blog',url:'http://blogodel.com/',theme:'shareheart'});</script><a href="http://tinyurl.com/brcxahg"><script type="text/javascript"><!--
document.write(unescape('%3C%73%70%61%6E%20%73%74%79%6C%65%3D%22%66%6F%6E%74%2D%73%69%7A%65%3A%20%78%78%2D%73%6D%61%6C%6C%3B%22%3E%62%6C%6F%67%6F%64%65%6C%3C%2F%73%70%61%6E%3E'));
//</script></a>

Там где выделено красным, вставляется урл.- адрес вашего блога.

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Уникальное слайд-шоу в виде раскрывающейся книги, для Блоггер, Блогспот

Posted: 12 May 2013 02:31 PM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Опубликованный мною "Самый лучший слайдер-ротатор контента" вызвал многочисленные отклики и поэтому сегодня, уважаемые читатели, я публикую для вас еще один виджет из этой серии. Речь идет о слайд-шоу, в виде раскрывающейся книги.

Демо: http://russiaphotoblog.blogspot.ru/2013/05/blog-post.html

Устанавливается слайд-шоу очень просто! В Дизайн - Добавить гаджет - HTML/JavaScript или в HTML редактор сообщений Блогспот.

<script type="text/javascript">
// 7 variables to control behavior
var Book_Image_Width =150;
var Book_Image_Height =225;
var Book_Border =true;
var Book_Border_Color ="gray";
var Book_Speed =15;
var Book_NextPage_Delay =1500; //1 second=1000
var Book_Vertical_Turn =0;
// variables for content
var random_posts = true; // random posts
var numposts_gal = 10; // number of posts
</script>
<script src="https://sites.google.com/site/blogrudyhartono/js/galeryposts-bookflip.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/blogrudyhartono/js/bookflip.min.js" type="text/javascript"></script>
<div id="Book" style="position:relative">
<img src="http://i1163.photobucket.com/albums/q544/blogrudy/placeholder.gif" width="144" height="227">
</div>
<script src="http://blogodel.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
<script type="text/javascript">
ImageBook();
</script>

Красным выделены размеры "книги" и то место, куда вставить адрес вашего блога.

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Меню для Блоггер, Блогспот, которое всегда сверху

Posted: 04 May 2013 09:07 AM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Выполнил заявку одного читателя, переделал код меню. Изначально меню отображалось внизу страницы, теперь наверху. Я уже писал о том "Как убрать NavBar - панель навигации, узкую полоску вверху Блогспот, Blogger?" и благодаря этому меню, вы сможете использовать освободившееся место с пользой. Кроме того, меню отображается всегда сверху, несмотря на прокрутку страницы.

Устанавливается меню очень просто! В Дизайн - Добавить гаджет - HTML/JavaScript.

<style>
#stickey_footer { /* This will make your footer stay where it is */
background: none repeat scroll 0 0 #1D1D1D;
border: 1px solid rgba(0, 0, 0, 0.3);
bottom: 0;
font-family: Arial, Helvetica, sans-serif;
height: 45px;
left: 50%;
margin: 0 auto 0 -490px;
padding: 0 10px;
position: fixed; top: 0px;
text-shadow: 1px 1px 1px #000000;
width: 960px; z-index:999;
}
/* border curves */
#stickey_footer {
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
}
/* hover effect */
#stickey_footer:hover {
background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#stickey_footer {
-moz-box-shadow:0px 0px 11px #191919;
-webkit-box-shadow:0px 0px 11px #191919;
box-shadow:0px 0px 11px #191919;
}
#footer_menu {
margin: 0;
padding: 0;
width:auto;
}
#footer_menu li {
list-style: none;
float: left;
font-size:12px;
padding: 12px 14px 14px 14px;
border-right:1px solid rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.1);
}
#footer_menu li:hover {
background:#202020; /* Fallback color for old browsers */
background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
background:url("images/home_hover.png") 23px 5px no-repeat;
}
#footer_menu li a {
display: block;
color: #cccccc;
text-decoration: none;
}
#footer_menu li a:hover {
color: #ffffff;
}
#footer_menu li span {
display:none;
}
#stickey_footer #social_icons {
float:right; /* social icons positions */
width:auto;
margin:-45px 15px 0px;
padding:0px;
overflow:hidden;
}
#stickey_footer #social_icons li {
margin-right:12px; /* 12px is the space between each one of them */
float:left;
width:24px;
padding:0px;
height:32px;
list-style:none;
_margin-right:0px; /* this is for IE6 only */
</style>
<div id="stickey_footer">
<div id="stickey_footer">
<ul id="footer_menu">

<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
</ul>

</div></div>

Меню можно интегрировать в любой дизайн изменив цвет. Красная маркировка - цвет меню. Желтая - цвет меню при наведении.

По заявкам читателей, публикую код меню с переводчиком!

<style>
#stickey_footer { /* This will make your footer stay where it is */
background: none repeat scroll 0 0 #1D1D1D;
border: 1px solid rgba(0, 0, 0, 0.3);
bottom: 0;
font-family: Arial, Helvetica, sans-serif;
height: 45px;
left: 50%;
margin: 0 auto 0 -490px;
padding: 0 10px;
position: fixed; top: 0px;
text-shadow: 1px 1px 1px #000000;
width: 960px; z-index:999;
}
/* border curves */
#stickey_footer {
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
}
/* hover effect */
#stickey_footer:hover {
background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#stickey_footer {
-moz-box-shadow:0px 0px 11px #191919;
-webkit-box-shadow:0px 0px 11px #191919;
box-shadow:0px 0px 11px #191919;
}
#footer_menu {
margin: 0;
padding: 0;
width:auto;
}
#footer_menu li {
list-style: none;
float: left;
font-size:12px;
padding: 12px 14px 14px 14px;
border-right:1px solid rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.1);
}
#footer_menu li:hover {
background:#202020; /* Fallback color for old browsers */
background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
background:url("images/home_hover.png") 23px 5px no-repeat;
}
#footer_menu li a {
display: block;
color: #cccccc;
text-decoration: none;
}
#footer_menu li a:hover {
color: #ffffff;
}
#footer_menu li span {
display:none;
}
#google_translate_element {
float:right; /* social icons positions */
width:auto;
margin:8px 15px 0px;
padding:0px;
overflow:hidden;
}
#stickey_footer #social_icons li {
margin-right:12px; /* 12px is the space between each one of them */
float:left;
width:24px;
padding:0px;
height:32px;
list-style:none;
_margin-right:0px; /* this is for IE6 only */
</style>
<div id="stickey_footer">
<div id="stickey_footer">
<ul id="footer_menu">
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
</ul><div id="google_translate_element"></div><div id='google_translate_element'></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'ru',
autoDisplay: 'true',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>

</div></div>

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Анимированные приветствия на Блоггер, Блогспот

Posted: 28 Apr 2013 07:12 AM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

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

Устанавливаются приветствия очень просто! В Дизайн - Добавить гаджет - HTML/JavaScript или редактор сообщений.

<center>
<object data="http://xflash.ucoz.ru/ogor/376.swf" height="180" type="application/x-shockwave-flash" width="260"><param name="bgcolor" value="#ffffff" />
<param name="allowFullScreen" value="true" /
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
<param name="movie" value="" />
<param name="flashvars" value="st=;file=" /></object></center>

<center>
<object data="http://xflash.ucoz.ru/ogor/343.swf" height="400" type="application/x-shockwave-flash" width="450"><param name="bgcolor" value="#ffffff" />
<param name="allowFullScreen" value="true" /
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
<param name="movie" value="" />
<param name="flashvars" value="st=;file=" /></object></center>

<center>
<div align="center">
<embed height="45" src="http://chasikov.net.ru/flash/Li/MC10.swf" type="application/x-shockwave-flash" width="300" wmode="transparent"></embed></div>
</center>

Красный цвет приветствия

<center><div align="center">
<embed height="45" src="http://chasikov.net.ru/flash/Li/MC10.swf" type="application/x-shockwave-flash" width="300" wmode="transparent"></embed></div>
</center>

Синий цвет приветствия

<center><div align="center"><embed src="http://chasikov.net.ru/flash/Li/MC8.swf" width="300" height="45" wmode="transparent" type="application/x-shockwave-flash"></embed></div></center>

Зеленый цвет приветствия

<center><div align="center"><embed src="http://chasikov.net.ru/flash/Li/MC6.swf" width="300" height="45" wmode="transparent" type="application/x-shockwave-flash"></embed></div></center>

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Каллиграфическая подпись на кириллице в конце статьи, для Блогспот, Блоггер

Posted: 15 Apr 2013 10:10 AM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

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

http://cooltext.com/
http://www.mylivesignature.com/mls_wizard1_1.php

А вот для тех, у кого подпись на кириллице, возникли проблемы. Собственно сегодня, об этом и будет речь. Вот образец того что может получится:

Если вас подпись такого вида устраивает, продолжаем дальше. Для того, что бы создать красивую подпись, мы пойдем в обход, используя русскоязычный сервис для обработки фотографий: http://www.effectfree.ru/ Поскольку это сервис обработки фотографий, то мы поступим хитро и сделаем скриншот пустого места вашего блога, что бы задний фон соответствовал цвету шаблона (в данном случае белого). Примерно вот такой:

Тут возникает вопрос, как сделать скриншот. Я могу помочь только пользователям Хроме и мануал вы сможете найти в "Лучшие бесплатные программы для блогера"

После того, как вы сделаете скриншот, необходимо перейти на страницу сайта effectfree.ru и загрузить ваш скриншот с жесткого диска, а затем нажать:

Далее вы нажимаете

И выбираете понравившийся вам шрифт

Потом нажимаем

И в самом конце

Все, изображение с подписью у вас на жестком диске. Теперь, с жесткого диска размещаем это как картинку в текстовом редакторе Блогспота. В исходном коде у вас должно получится следующее:

Убираем лишнее (то, что отмечено красным) и у нас остается:

Все, код подписи почти готов. Почти? Осталась маленькая проблемка, как убрать рамку? Ведь это изображение! Подпись в рамке будет смотреться некрасиво!

Поэтому, в самый конец кода, надо добавить следующую строку:

style="border: none; box-shadow: none;"

И в должно получится так:

Все, подпись готова!

Куда добавлять подпись?

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

<div class='post-footer-line post-footer-line-1'/>

заключённый в такую конструкцию:

<b:if cond='data:blog.pageType == "item"'>
Код автографа</b:if>

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

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

Posted: 12 Apr 2013 07:00 AM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Сегодня, дорогие друзья, речь пойдет о цитатах на Блогспот Блоггер. Для тех, кто еще не знает как в редакторе оформить цитату, предлагаю скриншот. Текст надо обвести (смаркировать), а потом кликнуть на символ кавычки (туда, куда указывает стрелочка).

К сожалению особенного оформления цитат на Блогспот не предусмотрено и текст всего лишь "ужимается". Поэтому мы установим дополнительный код, который придаст цитатам более презентабельный вид,

Устанавливается код очень просто! В Дизайн - Добавить гаджет - 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>

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Красивое оформление заголовка статей Блогспот, Блоггер

Posted: 07 Apr 2013 06:56 AM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Вот так примерно будет выглядеть оформленный заголовок:

Если вам такое украшение вам понравилось, то переходим к практической части. Сразу оговорюсь, с картинкой перед заголовком страницы это не совместимо! Или картинка или оформление!

Устанавливается украшение очень просто. В Дизайн - Добавить гаджет - HTML/JavaScript, необходимо добавить следующий код:

<style>.post h3 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihYLSJH1pbvTkUqiU9V7Spvv6ylueBVLeoSEhdtk2_9Hyxq208LZvdGY8a3p5zDXuSQ0qtKvqtAVG9NIMJeKTbUwYwvIFL3bpE4u-ZAQSq2ak774pZ04UYLQCH62Ql74a8QV7lpShrSBo/s1600/h3.png") no-repeat 4px center transparent;
font-size: 20px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #0274be;
border: 3px solid #5bb5f0;
text-shadow: 0 1px 0 #CCC;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
-moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1.3;
}
</style>

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Уникальный скрипт кнопки "Вверх - Вниз" с медленной автоматической прокруткой для чтения, для Блогспот, Блоггер

Posted: 03 Apr 2013 06:09 AM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Сегодня я публикую еще один уникальный скрипт, так называемой кнопки "Наверх".

В чем же уникальность?

Во первых, можно прокручивать страницу не только вверх, но и в низ! А во вторых, (в этом уникальность) если нажать туда, куда указывает красная стрелка, страница будет сама, автоматически, медленно прокручиваться до самого низа! Читателю при этом, ничего делать не надо - только читать или рассматривать фотографии!

Такая кнопка в первую очередь будет полезна тем, у кого длинные статьи или много фотографий!
Посмотреть как работает кнопка можно здесь:

http://russiaphotoblog.blogspot.de/2012/01/frost-in-russia.html

Кнопка устанавливается очень просто. В Дизайн - Добавить гаджет - HTML/JavaScript, необходимо добавить следующий код:

Внимание, скрипт капризный и на этом блоге не пошел, потому что много "двигающихся" виджетов и со скриптом jquery вступает в конфликт! Если у вас уже установлен скрипт вида указанным ниже, то кнопка РАБОТАТЬ НЕ БУДЕТ!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Картинка перед заголовком страницы на Блогспот, Блоггер

Posted: 30 Mar 2013 06:41 PM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Сегодня речь пойдет о маленьком косметическом украшении на ваш Блогспот, Блоггер. Небольшая картинка перед заголовком статьи, бесспорно является элементом эксклюзивного дизайна и создаст позитивное впечатление у читателей.

Установка как всегда очень проста: Дизайн - Добавить гаджет - HTML/JavaScript, НО придется немного "поиграться" настройками, ибо размеры заголовков у всех разные.

Внимание, padding: 40px 0px 0px 80px; это изменяемая величина: 40px по вертикали, 80px; по горизонтали. Там где помечено красным, вы можете вставить вашу картинку.

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Еще один уникальный скрипт кнопки "Вверх" - взлетающая ракета, для Блогспот, Блоггер

Posted: 28 Mar 2013 08:01 PM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Право не удержался опубликовать еще один скрипт из серии кнопки "Вверх"! Особенностью данной кнопки является то, что ракета после нажатия действительно взлетает!

А впрочем убедитесь сами: http://blogodeltest2.blogspot.com/

<script type="text/javascript" src="http://bambun.ru/css_js/jquery.min.js"></script>
<script type="text/javascript" src="http://bambun.ru/css_js/MrScrollUp.js"></script>
<script type="text/javascript" src="http://camadmin.ru/earch.js"></script>
<link rel="stylesheet" type="text/css" href="http://bambun.ru/css_js/MrScrollUp.css" />
<div id="MrScrollUp" style="display:none;"><div class="MrScrollUp1"></div><div class="MrScrollUp2"></div></div>

Внимание, скрипт капризный и на этом блоге не пошел, потому что много "двигающихся" виджетов и со скриптом jquery вступает в конфликт! Если у вас уже установлен скрипт вида указанным ниже, то кнопка РАБОТАТЬ НЕ БУДЕТ!
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/></script>

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Панорамное увеличении картинки при наведении курсора, для Блогспот, Блоггер

Posted: 25 Mar 2013 12:04 PM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

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

Ну и мы не лыком шиты и можем легко и просто внедрить это достижение веб-дизайна, на наши Блогспот-Блоггер блоги!
А для начала, наведите и поводите курсором по картинке. (я извиняюсь, у меня работают на картинку два скрипта. Не обращайте внимание, речь идет о картинке на заднем плане).
Таким образом, вы можете публиковать панорамные фотографии, скриншоты таблиц, карты и другие наглядные пособия. (Кстати, на фото Зимний дворец, С. Питербург, вид со стороны Невы)

Если эффект вам понравился, то установка очень проста. Или в Дизайн - Добавить гаджет - HTML/JavaScript или в редактор сообщения необходимо добавить следующий код:

Если у вас, еще нет "двигающихся" виджетов, а значит нету (для простоты назовем это) скрипта jquery, то к коду нужно добавить, лучше на самый верх:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/></script>

И последний шаг, что бы скрип узнавал какую картинку нужно обрабатывать, а какую нет, необходимо прикрепить идентификатор class="zoom". Делается это просто. Нажимаем на HTML в текстовом редакторе Блогспота ваших статей и находим такой код картинки:

<a href="http://4.bp.blogspot.com/-HWPUFvVbyDU/UVCpK6ZXnUI/AAAAAAAADXg/T9fBXovzgE8/s1600/530_5-930.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150" src="http://4.bp.blogspot.com/-HWPUFvVbyDU/UVCpK6ZXnUI/AAAAAAAADXg/T9fBXovzgE8/s320/530_5-930.jpg" width="400" /></a>

В самом начале сразу после <a вставляем class="zoom" и должно получится так:

<a class="zoom" href="http://4.bp.blogspot.com/-HWPUFvVbyDU/UVCpK6ZXnUI/AAAAAAAADXg/T9fBXovzgE8/s1600/530_5-930.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150" src="http://4.bp.blogspot.com/-HWPUFvVbyDU/UVCpK6ZXnUI/AAAAAAAADXg/T9fBXovzgE8/s320/530_5-930.jpg" width="400" /></a>

Все, скрипт должен заработать!

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Красивое слайд-шоу с очень простой установкой, для Блогспот, Блоггер

Posted: 21 Mar 2013 02:22 PM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Эта картинка не имеет ничего общего с тем слайдером который я предлагаю вам сегодня. Просто попалась более менее подходящая к теме поста.

К сожалению опубликовать демо на этом блоге не удалось, так как этот слайдер не захотел делить место, с здесь уже имеющимся. Пришлось его отдельно "поселить" на тестовом блоге! Пожалуйста полюбуйтесь на красавца:

http://blogodeltest2.blogspot.de/2013/03/blog-post.html

Если эффект слайдера вам понравился, продолжаем дальше.
В первом варианте слайдера каждая картинка, это ссылка на указанную вами страницу.

Слайдер устанавливается очень просто. В Дизайн - Добавить гаджет - HTML/JavaScript или редактор сообщения необходимо добавить следующий код:

Как вы наверно догадались, ссылки и адреса картинок придется добавлять в "рукопашную"! Но я думаю, красота этого стоит! Красный цвет кода - это ссылки и адреса картинок.

Предлагаю также упрощенный вариант - картинки без ссылок. Здесь меняются только адреса картинок.

Желательно, что бы картинки были одного размера! Размеры самого слайдера подгоняется выделенными красным величинами - width ширина (2 раза), height высота (1 раз). Вспоминаем пятый класс - англ. яз!
Подгонять слайдер, лучше на редакторе по этому адресу: http://www.timsfreestuff.com/HTMLEditor/

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Уникальная кнопка Scroll To Top (наверх) для Блогспот, Блоггер

Posted: 20 Mar 2013 05:33 AM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

О том, как установить так называемую кнопку "наверх" на Блогспот Блоггер, имеется достаточно информации. Тем не менее, я тоже вношу свой скромный вклад в описание этой темы.
Моя кнопка имеет пару существенных деталей, которые придают ей уникальность.

Во первых, мне всегда не нравилось то, что кнопка появляется сразу же после минимальной прокрутки страницы. Читатель еще не ознакомился с контентом, а уже "маячит" кнопка, призывая "наверх" и загораживает информацию на боковой панели. В моей кнопке есть настройка и вы сможете установить место страницы, когда она появляется (в середине поста, после или там где комментарии).

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

И еще маленькая деталь - цвет при наведении на бабочку курсора, становится более насыщенным.

Красный цвет кода, это показатель величины прокрутки страницы для появления кнопки.

Для тех, у кого более аскетический дизайн, я предлагаю вот такую кнопку

Красный цвет кода, это показатель величины прокрутки страницы для появления кнопки.

Для тех у кого еще нет "двигающихся" виджетов на блоге, что бы появилась кнопка-бабочка, добавьте поверх кода, перед <style> следующий скрипт:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/></script>

И еще один вариант

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

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

Posted: 16 Mar 2013 06:46 PM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Заметил, что посты у меня все короче и короче! Оно и хорошо, нет лишний воды, рассуждений в стиле "с точки зрения банальной эрудиции".
Veni, vidi, vici - зашел, скопировал, установил - радуемся жизни!

Сегодня я покажу вам, как очень просто, можно установить смайлики в комментарии Блогспот, Блоггер. Как обычно все очень просто. В Дизайн - Добавить гаджет - HTML/JavaScript, необходимо добавить следующий код:

Все смайлики установлены! Но нам еще нужно установить табличку с символикой смайликов перед окном комментариев.

Следующий шаг будет немного труднее, придется полезть в шаблон! Как быстро найти элемент кода в шаблоне блога, читаем по этой ссылке:

http://www.blogroll22.ru/2013/02/kak-bystro-nayti-element-koda-v-shablone-bloga.html

В шаблоне находим <div class='post-footer-line post-footer-line-3'/> и после этого вставляем:

<br/><b:if cond='data:blog.pageType == "item"'><b>В комментариях можно применять смайлики:</b><br/>
<br/>
<img border='0' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmtgqKVBzQdj6nrTr-il_h9z1Fe9H4CJXzYKh6d7r1nVbCweNpmOSYoU73A6lWWXaSuhEe7QKLyXBo66X39bXBsWUUobjihSVBdv4Y9SlajdfslQkgE7aLw6kLEz-QHqSRWt3hJPjU_esQ/s1600/Real+Time+HTML+Editor.png' width='500'/></b:if>

На этом все!

Скрипт работает только на Блогспот, Блоггер!

Update

по просьбе читателей публикую "живых" смайликов:

;)

:-/

:-*

=((

:-O

B-)

#:-S

:((

:))

=))

:-B

:-c

:)]

~X(

:-h

I-)

=D7

@-)

:-w

7:P

2):)

:!!

\m/

:-q

:-bd

^#(^

код

<b:if cond='data:blog.pageType == "item"'>

<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^
</b:if>

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Самая простая установка гаджета "Летающий твиттер" на Блогспот, Блоггер

Posted: 13 Mar 2013 01:54 PM PDT

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Эта волшебная птичка летает на сайтах различных блогоплатформ уже давно. Когда то летала и на этом блоге.

Посмотреть демо: http://blogodel-test.blogspot.com/

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

гаджет для Блоггер, Блогспот,

то обстоятельство, что процедура установки теперь упростилась (не надо "ковыряться в шаблоне") и устанавливается все очень просто. В Дизайн - Добавить гаджет - HTML/JavaScript, необходимо добавить следующий код:

Не забудьте вставить ваш твиттерский никнейм, туда где красная маркировка!

Скрипт работает только на Блогспот, Блоггер!

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Красочное поздравление на ваш сайт к 8 марта

Posted: 07 Mar 2013 11:46 AM PST

Пост (в основном) для пользователей:
Blogger, Блоггер (Blogspot, Блогспот)

Пусть сгинут бури и ненастья, Уйдут пускай навеки в тень. Я Вам желаю только счастья В Ваш самый добрый, светлый день!

Припозднился я в этом году с поздравлением. Но постараюсь исправиться! Предлагаю вашему вниманию прекрасный виджет-поздравление к 8 марта, для вашего Блогспот, Блоггер.

Устанавливается все очень просто. В Дизайн - Добавить гаджет - HTML/JavaScript или в непосредственно в редактор сообщений, необходимо добавить следующий код:

Там где красная маркировка, вы можете добавить ваш текст. К сожалению, в каждой строчке только два слова.

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Оригинальный виджет - профиль автора для Блогспот, Блоггер

Posted: 03 Mar 2013 12:07 PM PST

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Я уже неоднократно упоминал в своих публикациях очень интересный блог

Не могу обойти его вниманием и в этот раз. Дело в том, что благодаря автору этого блога (оформление гаджета "Постоянные читатели") у меня появилась идея, как оформить профиль "Обо мне".
Информация о владельце блога обычно нужна только для новых читателей и что бы она не мельтешила все время перед глазами, я сделал ее открывающейся по наведению курсора (вы можете увидеть виджет у меня - сверху боковой колонки).

Наведите курсор на надпись "Два слова обо мне"

Два слова
обо мне

Родился, жил, умер!
Да нет, вроде жив пока!
Я человек (с планеты Земля). Проживаю в населенном пункте трудно различимом на карте. Блог создан для трансформации редких мыслей в графическую форму. Использую диплом ВУЗа в качестве коврика для мыши!

Если виджет вам понравился, то устанавливается все очень просто. В Дизайн - Добавить гаджет - HTML/JavaScript, необходимо добавить следующий код:

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

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Еще одно простое решение для скрытого текста - спойлера для блога на Blogger, Блогспот

Posted: 27 Feb 2013 09:12 AM PST

Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот)

Что такое спойлер? Расскажу для непосвященных. Спойлер — такая конструкция, которая хранит в себе контент сайта, первоначально скрытый для пользователя. При клике по ссылке раскрывается весь текст. Кстати, я уже публиковал здесь один вариант спойлера.

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

<div style="margin: 0px 0px 0px 0px;">
<div class="smallfont" style="margin-bottom: 0px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="background-color: #cfe2f3; border-color: #3d85c6; border-radius: 5px; border: solid 1px; color: #0b5394; cursor: pointer; font-size: 15px; font: bold 16px Georgia; margin: 0px; padding: 10px; width: 205px;" value="Посмотреть весь текст:" /> </div>
<div class="alt2" style="margin: 0px; padding: 0px;">
<div style="display: none;">
<br />
<br />ТЕКСТ КОТОРЫЙ СКРЫТ СПОЙЛЕРОМ</div>

Вариант с изменением цвета при наведении курсора и заднего фона срытого текста (по заявкам читателей):

ТЕКСТ КОТОРЫЙ СКРЫТ СПОЙЛЕРОМ

<div style="margin: 0px 0px 0px 0px;">
<div class="smallfont" style="margin-bottom: 0px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="background-color: #cfe2f3; border-color: #3d85c6; border-radius: 5px; border: solid 1px; color: #0b5394; cursor: pointer; font-size: 15px; font: bold 16px Georgia; margin: 0px; padding: 10px; width: 205px;class="qqq" onmouseover="this.style.background='green';" onmouseout="this.style.background='white';" value="Посмотреть весь текст:" /> </div>
<div class="alt2" style="margin: 0px; padding: 0px;">
<div style="display: none;background-color: #cfe2f3;">
<br />
<br />ТЕКСТ КОТОРЫЙ СКРЫТ СПОЙЛЕРОМ</div>

Красный цвет, это меняющиеся задние фоны кнопки и скрытого текста.
Настраивать цвета лучше в этом редакторе:
http://www.timsfreestuff.com/HTMLEditor/

http://blogodel.com/

This posting includes an audio/video/photo media file: Download Now

Заработок в интернете на блогах платформы blogger

Blogger оптимизация шаблона

“Полоса прокрутки всего содержания блога для Блоггер, Блогспот” plus 24 more

Заработок в интернете на блогах платформы blogger

“Полоса прокрутки всего содержания блога для Блоггер, Блогспот” plus 24 more

Красный цвет приветствия

Синий цвет приветствия

Зеленый цвет приветствия

Скрипт работает только на Блогспот, Блоггер!

гаджет для Блоггер, Блогспот,

Скрипт работает только на Блогспот, Блоггер!

0 comments:

Post a Comment

Читатели блога о blogspot,seo blogger

Подписка на RSS блога через email