| Делаем уникальную рамку для РОЛИКА С YOUTUBE для Блогспот, Блоггер Posted: 21 Apr 2014 10:41 AM PDT Думал я сегодня думал, чем бы вас порадовать и придумал! Ролики с ютуба известны всем и поставить их может каждый. Беда только в том что ролики эти, как клоны по внешнему виду у всех одинаковые и поэтому представляют собой унылое однообразие! Отныне с этим покончено!
Красиво? И вы так сможете сделать! Для начала зайдем на очень интересный сайт, ВОТ СЮДА - http://youtubecolor.ru/index.html, где Вы сможете "смоделировать" рамку ролика под дизайн вашего блога!
Скопированный код размещаете в редакторе сообщений вашего блога. ВСЕ! http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| По каким словам находят мой сайт | SEO Posted: 20 Apr 2014 08:08 AM PDT Что такое ключевые слова Что делать со списком ключевых слов, по которым уже приходят на сайт, как его проанализировать, улучшить уже существующую страницу, тем самым увеличив посещаемость веб-ресурса зафиксировать панель [Бала доработана статья "Как писать ключевые слова"] Как узнать по каким популярным запросам находят мой сайт Яндекс.Вебмастер. Посмотрим на статистику по показам. Всего 25 This posting includes an audio/video/photo media file: Download Now |
| Удивительные бабочки при наведении курсора для Блогспот, Блоггер Posted: 13 Apr 2014 10:25 AM PDT Публикую сегодня прекрасное украшение на ваш Блогспот - летающие бабочки при наведении курсора. Наведите ниже курсор на пустое место под этой строчкой! Если эффект вам понравился, то пожалуйста код, который вставляется очень просто: В Дизайн - Добавить гаджет - HTML/JavaScript <object type="application/x-shockwave-flash" height="410" width="550" data="http://agitki.ru/_ld/8/845_butterfly_mouse.swf"><param name="movie" value="http://agitki.ru/_ld/8/845_butterfly_mouse.swf" /><param name="wmode" value="transparent" /><param name="flashvars" value="&in_title=Ваш текст&" /></object> К сожалению бабочки при наведении курсора будут появляются только в том месте, где установлен виджет. Так что размещайте бабочек там, где у вас на блоге пустое место! http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Межстрочный интервал line-height | CSS Posted: 10 Apr 2014 04:37 AM PDT Высота строки CSS Расстояние между строк HTML line-height наследуется от предка к потомку line-height и HTML тег span vertical-align CSS Как убрать отступ под изображением зафиксировать панель Высота строки CSS line-height: normal | <number> | <length> | <проценты> | inherit normalРасстояние между строчками вычисляется браузером самостоятельно <number>Число от... This posting includes an audio/video/photo media file: Download Now |
| Псевдокласс :focus | CSS Posted: 09 Apr 2014 01:40 AM PDT Все псевдоклассы CSS, хорошо видны сравнения Красивая форма входа (см. стилизацию input) зафиксировать панель Элементу, получившему фокус, можно задать стиль с помощью псевдокласса :focus [w3.org]. Чем отличаются :active, :focus и :hover .input1:hover { background: blue; } .input1:focus { background: green; } .input1:active { background: red; } .input2:active { background: red; } . This posting includes an audio/video/photo media file: Download Now |
| Горизонтальное выпадающее меню | CSS Posted: 09 Apr 2014 12:23 AM PDT Горизонтальное меню Горизонтальное выпадающее меню Как выровнять пункты меню по ширине Что делать, когда скачет меню Простое адаптивное меню для сайта Многоуровневый выпадающий список Горизонтальное выпадающее меню для Blogger зафиксировать панель Горизонтальное меню для сайта Как сделать горизонтальное меню Главная Поисковая оптимизация HTML О блоге #nav1, #nav1 li, #nav1 This posting includes an audio/video/photo media file: Download Now |
| Отключить onclick для дочернего элемента | JavaScript Posted: 04 Apr 2014 11:53 PM PDT Запретить переход по ссылке JavaScript зафиксировать панель <style> #raz { height: 25em; background: blue; } #raz div { height: 10em; background: green; } </style> <div id="raz"><div></div></div> <script> var raz = document.getElementById('raz'); raz.onclick = function(event) { event = event || window.event; // window.event для IE ниже 8... This posting includes an audio/video/photo media file: Download Now |
| Простая фотогалерея для сайта | CSS Posted: 30 Mar 2014 10:49 PM PDT Галерея изображений на CSS Слайдер для сайта с прокруткой Lightbox на CSS зафиксировать панель #gallery { position: relative; padding-top: 50%; -moz-user-select: none; user-select: none; } #gallery img { position: absolute; top: 25%; left: 12.5%; max-width: 24.5%; max-height: 49.5%; -webkit-transform: translate(-50%, -50%); transform: This posting includes an audio/video/photo media file: Download Now |
| Последний день месяца, сколько дней в году | JavaScript Posted: 26 Mar 2014 11:15 PM PDT Количество недель в году на JS Скрипт вычисления возраста на JavaScript и PHP Прибавить к дате день / месяц / год на JsvsScript Сколько дней в году зафиксировать панель Количество дней в месяце input[type="date"] { margin-right: 5px; } document.write(new Date(new Date().getFullYear(),new Date().getMonth()+1,0).getDate()); jsfiddle.net alert(new Date(2014,0+1,0).getDate()); // January This posting includes an audio/video/photo media file: Download Now |
| Пропорция | Математика Posted: 24 Mar 2014 02:55 AM PDT Пропо́рция — это равенство двух отношений, когда a:b=c:d Будущим выпускникам школ могу сказать, что умение составлять пропорции мне пригодилось и при расчёте процентов, и для того, чтобы пропорционально уменьшать картинки, и в HTML-вёрстке интернет-страницы, и в бытовых ситуациях. Решение пропорций Пример: нужно пить 1 таблетку активированного угля на 10 килограмм веса. Сколько таблеток нужно This posting includes an audio/video/photo media file: Download Now |
| Удивительный ротатор текста для Блоггер, Блогспот Posted: 23 Mar 2014 03:52 PM PDT Давненько "лежал" у меня в блокноте удивительный скрипт - ротатор текста. И вот появилась свободная минута и я публикую его для вас! Полюбуйтесь работой скрипта!Демо по ссылке▼ ▼ ▼ http://blogodeltest2.blogspot.ru/2014/03/blog-post.html Устанавливается скрипт, как всегда очень просто: В Дизайн - Добавить гаджет - HTML/JavaScript или в HTML редактор сообщения. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script><link href="https://googledrive.com/host/0B0WJjcJEFNziaGlLbi04Uk00b3c" rel="stylesheet"></link> <script src="https://googledrive.com/host/0B0WJjcJEFNzid180dVRuai1WQ1U" type="text/javascript"></script> <script>
jQuery(document).ready(function($) {
$('#words').quoteRotator();
});
</script> <!-- Quote Rotator --> <div id="words"> <ul class="word-container"> <li data-author="--- Не известный автор" data-easeout="lightSpeedOut">Однaжды мужчинa спросил у Богa:«Почeму всe дeвушки милыe, лaсковыe, нeжныe, a жeнщины грубые?». И получил в отвeт:«Дeвушeк создaю я, a жeнщин из них дeлaeтe вы!....</li> <li data-author="--- Ф. Достоевский">Никто не сделает первый шаг, потому что каждый думает, что это не взаимно.</li> <li data-author="--- Народная" data-easeout="fadeOutDown">Мир настолько испортился, что когда перед тобой чистый искренний человек, который хочет быть рядом, ты ищешь в этом подвох.</li> <li data-author="--- Тоже народная" data-easein="fadeInDown">Муж назвал жену курицей... Она не стала огорчаться, просто снесла ему два яйца...с разбегу.</li> <li data-author="--- Bill Gates (Microsoft)" data-easeout="bounceOut">Это прекрасно, чтобы отпраздновать успех, но это более важно прислушаться к урокам недостаточности.</li> <li data-author="--- Ченнинг Татум" data-easein="bounceIn">Главное в жизни — это семья. Карьера — не ждет тебя дома, деньги — не вытрут слезы, а слава — не обнимет ночью. </li> <li data-author="--- Народная" data-easein="lightSpeedIn">Я прошу, я Господа молю... Мне подарков, почестей не надо. Только пусть живут, кого люблю... И всегда со мною будут рядом!.</li> </ul> <div class="quote"> <div class="quote-content"> </div> <cite class="quote-author"></cite> </div> </div> </div> Красная маркировка это текст цитаты, желтый фон - автор. http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Безопасный скрипт для страницы "Содержание" для блога на Blogger, Блогспот! Posted: 21 Mar 2014 10:57 AM PDT Пост (в основном) для пользователей:
На самом деле я планировал другой пост. Но просматривая некоторые блоги (на платформе Blogger, Bлогспот ) на странице "Содержание" обнаружил вот такую угрожающею табличку!  Оно и не удивительно, так как большинство владельцев блогспот, для создания страницы "Содержание" используют скрипт разработчика абу-Фархан . Но как это обычно бывает - халявный сыр только в мышеловке! Дело в том, что скрипт абу-Фархан генерирует ссылку "Виджет Абу Фархан" , для увеличения ссылочной массы собственного сайта. Все бы это было не так страшно, но сайт абу-Фархан с некоторых пор превратился в источник вредоносного кода! А вместе с ним все те, кто использовал скрипт на своих ресурсах! Что делать?
Что бы не лишаться страницы "Содержание", я предлагаю безопасный скрипт, в котором нет никаких ссылок. Выглядеть страница будет примерно вот так:
А вот наконец и сам код, который нужно вставить в HTML редактор страницы: <script src="https://dl.dropboxusercontent.com/u/68659297/Neuer%20Ordner/js..txt"></script>
<script src="ВАШ БЛОГ/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script> Что бы не "потерялся" публикую JS файл. var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postMp3[ii]=o;if(h<10){postBaru[ii]=true}else{postBaru[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><a href="http://www.abu-farhan.com" style="font-size: 0px; text-decoration:none; color: #616469;">Widget by Abu Farhan</a>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postMp3[e];postMp3[e]=postMp3[g];postMp3[g]=f;var f=postBaru[e];postBaru[e]=postBaru[g];postBaru[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postMp3[f];postMp3[f]=postMp3[h];postMp3[h]=g;var g=postBaru[f];postBaru[f]=postBaru[h];postBaru[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Judul Artikel";var m="Klik untuk sortir berdasarkan judul";var d="Tanggal";var k="Klik untuk Sortir bedasarkan tanggal";var c="Kategori";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Klik untuk menampilkan semua"}h+="<table>";h+="<tr>";h+='<td class="toc-header-col1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="toc-header-col2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="toc-header-col3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="toc-header-col4">';h+="Download MP3";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Menampilkan Semua '+postTitle.length+" Artikel<br/></span>"}else{var f='<span class="toc-note">Menampilkan '+l+" artikel dengan kategori '";f+=postFilter+"' dari "+postTitle.length+" Total Artikel<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postBaru[a]==true){document.write(' - <strong><em><span style="color: rgb(255, 0, 0);">New !!</span> </em></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Menampilkan Daftar Isi</a> <img src="http://radiorodja.googlepages.com/new_1.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Download mp3 : <a href="'+postMp3[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Как запретить выделение/копирование изображения | HTML Posted: 18 Mar 2014 06:25 AM PDT Как запретить переход по ссылке HTML код картинки Как избежать плагиата контента сайта зафиксировать панель Защита картинки от копирования Есть скрипты, которые блокируют правую кнопку мышки, в результате чего нельзя вызвать контекстное меню, если нажать на фото. На CSS можно сделать более элегантное решение: в всплывающем контекстном меню не будет пункта "Сохранить изображение как...". <img This posting includes an audio/video/photo media file: Download Now |
| Как сделать содержание (оглавление) в статье сайта/блога | HTML5 Posted: 06 Mar 2014 08:38 PM PST Как создать оглавление внутри статьи блога Как сделать нумерованное содержание в статье сайта Многоуровневый нумерованный список HTML Нумерация в CSS Перелинковка страниц сайта Разбираем код ссылки: ссылка к заданному месту текста зафиксировать панель Оглавление в рамках статьи — это список ссылок. Только ссылки ведут не на другие страницы, а к подзаголовкам этой же статьи, размещённой на одной This posting includes an audio/video/photo media file: Download Now |
| Качающаяся картинка, как украшение к празднику для блога на Blogger, Блогспот! Posted: 04 Mar 2014 02:46 PM PST  Пост (в основном) для пользователей:
Как красиво оформить свой блог к празднику? Как сделать так что бы, на смену унылому однообразию будничных дней, на ваш сайт пришло предвкушение чего то особенного, того что повысит настроение не только вам, но и вашим читателям
Предлагаемый скрипт для блогов на платформе блогспот. Для тех, кто просто желает вставить анимированную открытку на любой сайт, в конце статьи можете найти варианты с простым кодом.
Сегодня я предлагаю вам очень простое и вместе с тем эффективное украшение, которое сможет поставить любой, даже новичок. Это праздничная открытка которая качается и увеличивается путем наведения курсора. Как это выглядит вы можете посмотреть на сайтбаре (боковой панели блога). Итак приступим к делу! Скрипт размещается благодаря гаджету HTML/JavaScript. Для этого проследуйте Дизайн > Добавить гаджет и после того, как вы нажали добавить гаджет, выбирайте рубрику - HTML/JavaScript. В открывшееся окно, вставляете скопированный ниже код и жмете сохранить. На том месте, где красная маркировка, можете всавить урл. (адрес) любой картинки, а размер можно регулировать, там где зеленая маркировка.
<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
.st {
width:150px;
border:3px solid #BBBBBB;opacity: 2.1;
-webkit-animation: ring 68s 9s ease-in-out infinite;
-webkit-transform-origin: 50% 14px;
-moz-animation: ring 68s 9s ease-in-out infinite;
-moz-transform-origin: 50% 14px;
animation: ring 68s 9s ease-in-out infinite;
transform-origin: 50% 14px;
}
@-webkit-keyframes ring {
0% { -webkit-transform: rotateZ(0); }
1% { -webkit-transform: rotateZ(30deg); }
3% { -webkit-transform: rotateZ(-28deg); }
5% { -webkit-transform: rotateZ(34deg); }
7% { -webkit-transform: rotateZ(-32deg); }
9% { -webkit-transform: rotateZ(30deg); }
11% { -webkit-transform: rotateZ(-28deg); }
13% { -webkit-transform: rotateZ(26deg); }
15% { -webkit-transform: rotateZ(-24deg); }
17% { -webkit-transform: rotateZ(22deg); }
19% { -webkit-transform: rotateZ(-20deg); }
21% { -webkit-transform: rotateZ(18deg); }
23% { -webkit-transform: rotateZ(-16deg); }
25% { -webkit-transform: rotateZ(14deg); }
27% { -webkit-transform: rotateZ(-12deg); }
29% { -webkit-transform: rotateZ(10deg); }
31% { -webkit-transform: rotateZ(-8deg); }
33% { -webkit-transform: rotateZ(6deg); }
35% { -webkit-transform: rotateZ(-4deg); }
37% { -webkit-transform: rotateZ(2deg); }
39% { -webkit-transform: rotateZ(-1deg); }
41% { -webkit-transform: rotateZ(1deg); }
43% { -webkit-transform: rotateZ(0); }
100% { -webkit-transform: rotateZ(0); }
}
.st:hover {
width:400px;
margin-bottom:-06px;
}
</style>
<left></left>
<div style="padding: 0px;">
<img class="st" src="http://s017.radikal.ru/i440/1202/4c/0b91309b9756.gif" title="название#1" /></div>
</div>
Для тех, кто просто желает поместить открытку на свой сайт или, у кого блоги не на блогспот (других платформах) предлагаю коды. Картинки размером в два раза больше и если желаете точно такой же размер, как опубликовано ниже, обратитесь в комментариях!
Анимированные фотографии к 8 марта. Кликните на эту строку, что бы увидеть открытки! <a href='http://games.businesskey.com.ua/articles31.html'><img src="http://games.businesskey.com.ua/images/открытка2.gif" /></a> <a href='http://games.businesskey.com.ua/articles32.html'><img src="http://games.businesskey.com.ua/images/открытка7.gif" /></a> <a href='http://games.businesskey.com.ua/articles31.html'><img src="http://games.businesskey.com.ua/images/открытка3.gif" /></a> <a href='http://games.businesskey.com.ua/articles31.html'><img src="http://games.businesskey.com.ua/images/открытка4.gif" /></a> <a href='http://games.businesskey.com.ua/articles31.html'><img src="http://games.businesskey.com.ua/images/открытка5.gif" /></a> <a href='http://games.businesskey.com.ua/articles31.html'><img src="http://games.businesskey.com.ua/images/открытка6.gif" /></a> http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Красочное поздравление на ваш сайт к 8 марта Posted: 03 Mar 2014 11:46 AM PST Пост (в основном) для пользователей: Blogger, Блоггер (Blogspot, Блогспот)Пусть сгинут бури и ненастья, Уйдут пускай навеки в тень. Я Вам желаю только счастья В Ваш самый добрый, светлый день!Припозднился я в этом году с поздравлением. Но постараюсь исправиться! Предлагаю вашему вниманию прекрасный виджет-поздравление к 8 марта, для вашего Блогспот, Блоггер. Устанавливается все очень просто. В Дизайн - Добавить гаджет - HTML/JavaScript или в непосредственно в редактор сообщений, необходимо добавить следующий код: <br />
<div align="center">
<object data="http://agitki.ru/_ld/12/1216_8marta.swf" height="420" type="application/x-shockwave-flash" width="570"><param name="movie" value="http://agitki.ru/_ld/12/1216_8marta.swf" /><param name="wmode" value="transparent" />
<param name="flashvars" value="&in_title=Женщины! Поздравляю&&in_title_2=Вас с 8 марта!&" /> </object></div>
<br />
Там где красная маркировка, вы можете добавить ваш текст. К сожалению, в каждой строчке только два слова. http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Как прижать футер к низу страницы | CSS Posted: 28 Feb 2014 12:09 PM PST Плавающий блок, замирающий над футером зафиксировать панель Для большинства предложенных решений обязательным условием является фиксированный footer. А как быть сайтам с резиновой вёрсткой? Ответ дал Philip Walton <style> body { display: flex; flex-direction: column; min-height: 100vh; /* высота веб-страницы больше или равна высоте окна браузера */ margin: 0; } main { flex: 1; ... This posting includes an audio/video/photo media file: Download Now |
| Как запретить переход по ссылке | CSS/JavaScript Posted: 28 Feb 2014 04:33 AM PST Как сделать, чтобы переход по ссылке был двойному щелчку Ссылка срабатывает только после установления галочки на чебоксе зафиксировать панель Для того, чтобы нельзя было переходить по ссылке, она не была кликабельна (см. поддержка pointer-events браузерами): Я ссылка, по мне не перейти .noLink { pointer-events: none; } <a href="http://shpargalkablog.ru/" class="noLink">Я ссылка, по мне... This posting includes an audio/video/photo media file: Download Now |
| Праздничные открытки к 23 февраля на Блоггер, Блогспот Posted: 22 Feb 2014 06:43 AM PST Красная маркировка - размеры картинок http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Самопечатающийся текст для Блогспот, Блоггер Posted: 26 Jan 2014 03:13 AM PST Пост (в основном) для пользователей: Blogger, Блоггер (Blogspot, Блогспот) Давненько собирался опубликовать этот скрипт. И вот сегодня наконец "Дошли руки"! Скрипт представлен в двух вариантах. Первый вариант вставляется в редактор сообщений. Туда где выделено желтым, вставляется ваш текст. К сожалению таким образом, можно будет оформить только одно предложение, около восьми слов. <script type="text/javascript"> var line="Печатающийся текст в JavaScript"; var speed=200; var i=0; function pechatanie() { if(i++<line.length) { document.pechat.pt.value=line.substring(0,i); } else{ document.pechat.pt.value=" "; i=0; } setTimeout('pechatanie()',speed); } </script> <form name="pechat"> <input name="pt" type="text" size="30" style="background-color:#fffff; border:0px; width:500px; "> </form> <script type="text/javascript">pechatanie();</script> Следующий скрипт будет циклично печататься в заглавии браузерной вкладки как у меня и вставляется в Дизайн - Добавить гаджет - HTML/JavaScript. <script><!--// var tit = document.title; var c = 0; function writetitle() { document.title = tit.substring(0,c); if(c==tit.length) { c = 0; setTimeout("writetitle()", 3000) } else { c++; setTimeout("writetitle()", 200) } } writetitle() // --> </script>
http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Вертикальное меню, типа "Аккордеон" для Блогспот, Блоггер Posted: 18 Jan 2014 04:22 AM PST Пост (в основном) для пользователей: Blogger, Блоггер (Blogspot, Блогспот)Получил я в комментариях заявку: "Подскажите, а у вас нет случайно скрипта для вертикального меню, типа Аккордеон?" И появилась у меня идея опубликовать пост на эту тему. Как выглядит меню, можно посмотреть на тестовом блоге: http://blogodeltest2.blogspot.com/ Сам скрипт вставляется просто: надо добавить код: В Дизайн - Добавить гаджет - HTML/JavaScript ( жёлтый фон это цвет меню, который можно поменять). <style>
#mymenu {
width: 200px;
margin: 0 auto;
}
#mymenu .mydiv {
width: 200px;/*ширина всего меню*/
transition: height ease-in-out 500ms;
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
.mydiv h3{height: 45px;
cursor:pointer;
margin: 0 0 0 0;
text-align: center;
color:white;padding: 12px 0px 0px 0px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #999999;/*цвет наружного меню*/
}
#mymenu p {
text-align: center;
margin: 0 0 1px 0;
height: 0px;
overflow: hidden;
transition: height ease-in-out 500ms;
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #cccccc; /*цвет фона внутреннего меню*/
filter: progid:DXImageTransform.Microsoft.gradient
( startColorstr='#E1A3370', endColorstr='#E1A337',GradientType=0 );
}
#mymenu p:hover {
background: #999999;
cursor:pointer;
}
#mymenu div:hover > p {
height: 45px;padding: 12px 0px 0px 0px;
}
* html #mymenu .mydiv {
filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr='#4EAEC1', endColorstr='#055261',GradientType=0 );
height: 45px;
overflow: hidden;
forIE: expression(
onmouseover = function() {this.className += ' hover'},
onmouseout = function() {this.className = this.className.replace('hover', '')}
);
}
* html #mymenu .mydiv.hover {
height: auto;
}
#mymenu p a {
color:white;
}
</style>
<div id="mymenu">
<div class="mydiv">
<h3 >Меню 1</h3>
<p><a href = "#">Под меню1</a></p>
<p><a href = "#">Под меню2</a></p>
</div>
<div class="mydiv">
<h3>Меню 2</h3>
<p><a href = "#">Под меню1</a></p>
<p><a href = "#">Под меню2</a></p>
<p><a href = "#">Под меню3</a></p>
</div>
<div class="mydiv">
<h3>Меню 3</h3>
<p><a href = "#">Под меню1</a></p>
<p><a href = "#">Под меню2</a></p>
<p><a href = "#">Под меню3</a></p>
<p><a href = "#">Под меню4</a></p>
</div>
<div class="mydiv">
<h3>Меню 4</h3>
<p><a href = "#">Под меню1</a></p>
<p><a href = "#">Под меню2</a></p>
<p><a href = "#">Под меню3</a></p>
<p><a href = "#">Под меню4</a></p>
<p><a href = "#">Под меню5</a></p>
</div></div> По просьбе читателей - горизонтальное выпадащее меню код добавить: В Дизайн - Добавить гаджет - HTML/JavaScript <style>/* Главное меню */
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #874006;
background: -moz-linear-gradient(#BF6306, #874006);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #874006),color-stop(1, #BF6306));
background: -webkit-linear-gradient(#BF6306, #874006);
background: -o-linear-gradient(#BF6306, #874006);
background: -ms-linear-gradient(#BF6306, #874006);
background: linear-gradient(#BF6306, #874006);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #874006;
-webkit-box-shadow: 0 2px 1px #874006;
box-shadow: 0 2px 1px #874006;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #ffffff;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Подменю */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #BF6306;
background: -moz-linear-gradient(#BF6306, #783B08);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #783B08),color-stop(1, #BF6306));
background: -webkit-linear-gradient(#BF6306, #783B08);
background: -o-linear-gradient(#BF6306, #783B08);
background: -ms-linear-gradient(#BF6306, #783B08);
background: linear-gradient(#BF6306, #783B08);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
width: 150px;
}
#menu ul a:hover
{
background: #9A1B19;
background: -moz-linear-gradient(#562F24, #9A1B19);
background: -webkit-gradient(linear, left top, left bottom, from(#562F24), to(#9A1B19));
background: -webkit-linear-gradient(#562F24, #9A1B19);
background: -o-linear-gradient(#562F24, #9A1B19);
background: -ms-linear-gradient(#562F24, #9A1B19);
background: linear-gradient(#562F24, #9A1B19);
}
#menu ul li:first-child a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #874006;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #5D2D23;
}
#menu ul li:last-child a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
#menu ul li:first-child a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #BF6306;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #5D2D23;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style><ul id="menu">
<li><a href="#">ГЛАВНАЯ</a></li>
<li>
<a href="#">КАТЕГОРИИ</a>
<ul>
<li><a href="#">Виджеты</a></li>
<li><a href="#">Украшения</a></li>
<li><a href="#">Настройка блога</a></li>
<li><a href="#">Сервисы</a></li>
</ul>
</li>
<li><a href="#">РОК'Н'РОЛЛ</a>
<ul>
<li><a href="#">Музыка</a></li>
<li><a href="#">Биографии</a></li>
</ul>
</li>
<li><a href="#">О ПРОЕКТЕ</a></li>
<li><a href="#">КОНТАКТЫ</a></li>
</ul> http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Уникальное Новогоднее поздравление на Блогспот, Блоггер Posted: 25 Dec 2013 10:53 AM PST Пост (в основном) для пользователей: Blogger, Блоггер (Blogspot, Блогспот)Случайно встретил в интернете интересное поздравление к Новому году и моментально реализовал это у себя на Блогспот, Блоггер. А впрочем меньше слов... полюбуйтесь сами: Самая изюминка заключается в том, что вы можете вставить в "лицо" Деда Мороза вашу фотографию! Кроме того, можно написать текст поздравления! Изготавливается поздравление двумя кликами на сервисе: http://www.dancingsantacard.com/ru/ Но есть одно Но! Когда ваша открытка будет готова - это будет Шаг 3, вам понадобится исходный код, что бы появилась возможность размещения на блоге. Добыть этот код не сложно и вы сможете это сделать самостоятельно. Наведите курсором на свободную (без изображений) часть страницы Шаг 3 и нажмите левой клавишей мышки. У вас появится примерно (в зависимости от браузера) такое окно: Выберите - "Исходный код страницы" (в Хроме "Просмотр кода страницы") и вы увидите "изнанку" вашей страницы в программном коде. В этом коде, начиная с 134 строчки, нужно выделить код поздравления, который выглядит так: <object type="application/x-shockwave-flash" data="http://assets.dancingsantacard.com/swf/santa.swf?version=3d522deaf85577451c01974654b36ad3" width="700" height="485" id="flash" > <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="http://assets.dancingsantacard.com/swf/santa.swf?version=3d522deaf85577451c01974654b36ad3" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="flashvars" value="user=199654&photo=http%3A%2F%2Fassets.dancingsantacard.com%2Fphotos%2F200%2F199654.jpg&photo_scale=56&photo_rotate=-22&photo_x=4&photo_y=-8&message=%D0%A1%D1%87%D0%B0%D1%81%D1%82%D0%BB%D0%B8%D0%B2%D0%BE%D0%B3%D0%BE+%D0%A0%D0%BE%D0%B6%D0%B4%D0%B5%D1%81%D1%82%D0%B2%D0%B0+%D0%B8+%D0%9D%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE+%D0%93%D0%BE%D0%B4%D0%B0+2014.+%D0%9F%D0%BE%D0%B7%D0%B4%D1%80%D0%B0%D0%B2%D0%BB%D1%8F%D1%8E+%D1%81%D0%B2%D0%BE%D0%B8%D1%85+%D1%87%D0%B8%D1%82%D0%B0%D1%82%D0%B5%D0%BB%D0%B5%D0%B9%21" /> <!--<embed src="http://assets.dancingsantacard.com/swf/santa.swf?version=3d522deaf85577451c01974654b36ad3" flashvars="user=199654&photo=http%3A%2F%2Fassets.dancingsantacard.com%2Fphotos%2F200%2F199654.jpg&photo_scale=56&photo_rotate=-22&photo_x=4&photo_y=-8&message=%D0%A1%D1%87%D0%B0%D1%81%D1%82%D0%BB%D0%B8%D0%B2%D0%BE%D0%B3%D0%BE+%D0%A0%D0%BE%D0%B6%D0%B4%D0%B5%D1%81%D1%82%D0%B2%D0%B0+%D0%B8+%D0%9D%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE+%D0%93%D0%BE%D0%B4%D0%B0+2014.+%D0%9F%D0%BE%D0%B7%D0%B4%D1%80%D0%B0%D0%B2%D0%BB%D1%8F%D1%8E+%D1%81%D0%B2%D0%BE%D0%B8%D1%85+%D1%87%D0%B8%D1%82%D0%B0%D1%82%D0%B5%D0%BB%D0%B5%D0%B9%21" quality="high" bgcolor="#ffffff" width="700" height="485" name="santa" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />--> </object>Копируем этот код и размещаем на вашем блоге в редакторе сообщения или В Дизайн - Добавить гаджет - HTML/JavaScript. Зеленым фоном выделены изменяемые размеры поздравления. Гирлянда <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/></script><script type="text/javascript" src="http://szenprogs.ru/scripts/garland/garland.js"></script>
<script type="text/javascript"><!--
garland.imgtop = 'http://szenprogs.ru/scripts/garland/girlyanda-t.gif';
garland.imgbottom = 'http://szenprogs.ru/scripts/garland/girlyanda-b.gif';
garland.imgleft = 'http://szenprogs.ru/scripts/garland/girlyanda-l.gif';
garland.imgright = 'http://szenprogs.ru/scripts/garland/girlyanda-r.gif';
garland.height = 30;
garland.showleft = true;
//-->
</script> http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Установка гаджета (слайдера) в шапку Блогспот, Блоггер Posted: 01 Dec 2013 09:18 AM PST Пост (в основном) для пользователей: Blogger, Блоггер (Blogspot, Блогспот)Из-за неоднократной и настойчивой просьбы одной читательницы, публикую установку любого гаджета в шапку Блогспот, Блоггера (в данном случае слайдера). Кому интересно, как это будет выглядеть, вот ссылка на тестовый вариант: http://blogodeltest2.blogspot.ru/ К сожалению по умолчанию, Блогспот не предусматривает возможности размещения гаджета в шапке и поэтому необходимо будет произвести небольшие изменения в шаблоне. 1) В настройках выходим в раздел "Шаблон". 2) Нажимаем "Изменить HTML". 3) Производим изменения в шаблоне. Где то на уровне 619 строки (в зависимости от шаблона) находим строчку: <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>и меняем , как указано на скриншоте на: maxwidgets='3'и maxwidgets='yes' После замены жмем вначале на "Просмотреть шаблон" (подчеркнуто снизу красным) и если все нормально (не появилась табличка об ошибке) нажимаем "Сохранить шаблон". Таким образом, мы дали "команду" в шаблоне разрешить наличие гадежта в шапке блога. В разделе "Дизайн" у вас должна появиться, выделенная на скриншоте красным маркером секция. В этой секции вы можете разместить любой код гаджета (в данном случае, я разместил код слайдера). Вот код слайдера: <style type="text/css"/>
/* dimpost.com - Basic Style */
body{
background: transparent;
font:15px/2 'Adobe Caslon Pro', Georgia, Serif;
margin:0;
padding:0;
}
a{outline:0 none}
#pagewrap{
margin:10px auto;
padding:0;
position:relative;
height:400px;
width: 640px;
}
#slidewrap{position:absolute;}
#slider {
border-color: #c0c0c0;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 10px 10px 30px;
box-shadow: 0 0 3px #2F2F2F;
height: 280px;
margin: 10px;
position: relative;
width: 600px;
}
#slider images{
position:absolute;
top:0px;
left:0px;
display:none;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider images {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
.nivo-directionNav{display:none!important}
.nivo-html-caption {
display:none;
}
.nivo-caption{
position:absolute;
right:20px;
text-align:center;
top:130px;
width:192px;
z-index:60;
}
.nivo-caption p{margin:0}
.nivo-caption .title{font-style:italic}
.nivo-controlNav {
bottom: -23px;
display: block;
height: 15px;
left: 204px;
position: absolute;
text-align: center;
width: 192px;
z-index: 51;
opacity: 0.6;
}
.nivo-controlNav a{
background:transparent url(http://project.dimpost.com/image-slider/images/button.png) no-repeat center center;
display:inline-block;
height:14px;
width:14px;
text-indent:-9999px;
cursor:pointer;
}
.nivo-controlNav .active{
background:transparent url(http://project.dimpost.com/image-slider/images/button_active.png);
}
</style>
<script src="http://project.dimpost.com/image-slider/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<!--[if IE]>
<script src="modernizr-2.0.min.js"></script>
<![endif]-->
<div id="pagewrap">
<div id="slidewrap">
<div id="slider">
<a href="http://dimpost.com/" target="_blank"><img alt="" title="#caption1" src="http://project.dimpost.com/image-slider/images/sample0.jpg" /></a>
<a href="#" target="_blank"><img alt="" title="#caption2" src="http://project.dimpost.com/image-slider/images/sample1.jpg" /></a>
<a href="#" target="_blank"><img alt="" title="#caption3" src="http://project.dimpost.com/image-slider/images/sample2.jpg" /></a>
<a href="#" target="_blank"><img alt="" title="#caption4" src="http://project.dimpost.com/image-slider/images/sample3.jpg" /></a>
<a href="#" target="_blank"><img alt="" title="#caption5" src="http://project.dimpost.com/image-slider/images/sample4.jpg" /></a>
<a href="#" target="_blank"><img alt="" title="#caption6" src="http://project.dimpost.com/image-slider/images/sample5.jpg" /></a>
</div>
</div>
</div> И еще один скрипт <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
function convertEntities(b){var d,a;d=function(c){if(/&[^;]+;/.test(c)){var f=document.createElement("div");f.innerHTML=c;return !f.firstChild?c:f.firstChild.nodeValue}return c};if(typeof b==="string"){return d(b)}else{if(typeof b==="object"){for(a in b){if(typeof b[a]==="string"){b[a]=d(b[a])}}}}return b};
//]]>
</script><style type="text/css"/>
/* Slider */
.slide{
padding-left:5px;
height:300px;
overflow:hidden;
}
#slider {
position:relative;
width:768px;
height:300px;
margin:0 auto;
padding:0;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMV-XbliiP4SBKM_srBEB3ym5fwY_feK3K8a0e7HKjd23A3vzYHQz_FOA6DNofeVKrNPjb8eWHAvEls9e2lYR7PUIzTnRxKOHhiRaAysW9sbC91sv5V7pJUsttEsio5BT2jNhnavZn1EL1/s0/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Arial, Helvetica,sans-serif;
text-align:center;
}
.nivo-caption a {
text-decoration:underline;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:768px;
margin:0 auto;
pading:0;
left:0;
z-index:10;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
top:0px;
color:#fff;
width:100%;
height:25px;
z-index:10;
}
.nivo-caption p {
padding:5px;
margin:0;
color:#ccc;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
.nivo-directionNav a {
position:absolute;
top:50%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
</style>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Nivo Slider v2.5.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
(function($){var NivoSlider=function(element,options){var settings=$.extend({},$.fn.nivoSlider.defaults,options);var vars={currentSlide:0,currentImage:'',totalSlides:0,randAnim:'',running:false,paused:false,stop:false};var slider=$(element);slider.data('nivo:vars',vars);slider.css('position','relative');slider.addClass('nivoSlider');var kids=slider.children();kids.each(function(){var child=$(this);var link='';if(!child.is('img')){if(child.is('a')){child.addClass('nivo-imageLink');link=child;}
child=child.find('img:first');}
var childWidth=child.width();if(childWidth==0)childWidth=child.attr('width');var childHeight=child.height();if(childHeight==0)childHeight=child.attr('height');if(childWidth>slider.width()){slider.width(childWidth);}
if(childHeight>slider.height()){slider.height(childHeight);}
if(link!=''){link.css('display','none');}
child.css('display','none');vars.totalSlides++;});if(settings.startSlide>0){if(settings.startSlide>=vars.totalSlides)settings.startSlide=vars.totalSlides-1;vars.currentSlide=settings.startSlide;}
if($(kids[vars.currentSlide]).is('img')){vars.currentImage=$(kids[vars.currentSlide]);}else{vars.currentImage=$(kids[vars.currentSlide]).find('img:first');}
if($(kids[vars.currentSlide]).is('a')){$(kids[vars.currentSlide]).css('display','block');}
slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');slider.append($('<div class="nivo-caption"><p></p></div>').css({display:'none',opacity:settings.captionOpacity}));var processCaption=function(settings){var nivoCaption=$('.nivo-caption',slider);if(vars.currentImage.attr('title')!=''){var title=vars.currentImage.attr('title');if(title.substr(0,1)=='#')title=$(title).html();if(nivoCaption.css('display')=='block'){nivoCaption.find('p').fadeOut(settings.animSpeed,function(){$(this).html(title);$(this).fadeIn(settings.animSpeed);});}else{nivoCaption.find('p').html(title);}
nivoCaption.fadeIn(settings.animSpeed);}else{nivoCaption.fadeOut(settings.animSpeed);}}
processCaption(settings);var timer=0;if(!settings.manualAdvance&&kids.length>1){timer=setInterval(function(){nivoRun(slider,kids,settings,false);},settings.pauseTime);}
if(settings.directionNav){slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+settings.prevText+'</a><a class="nivo-nextNav">'+settings.nextText+'</a></div>');if(settings.directionNavHide){$('.nivo-directionNav',slider).hide();slider.hover(function(){$('.nivo-directionNav',slider).show();},function(){$('.nivo-directionNav',slider).hide();});}
$('a.nivo-prevNav',slider).live('click',function(){if(vars.running)return false;clearInterval(timer);timer='';vars.currentSlide-=2;nivoRun(slider,kids,settings,'prev');});$('a.nivo-nextNav',slider).live('click',function(){if(vars.running)return false;clearInterval(timer);timer='';nivoRun(slider,kids,settings,'next');});}
if(settings.controlNav){var nivoControl=$('<div class="nivo-controlNav"></div>');slider.append(nivoControl);for(var i=0;i<kids.length;i++){if(settings.controlNavThumbs){var child=kids.eq(i);if(!child.is('img')){child=child.find('img:first');}
if(settings.controlNavThumbsFromRel){nivoControl.append('<a class="nivo-control" rel="'+i+'"><img src="'+child.attr('rel')+'" alt="" /></a>');}else{nivoControl.append('<a class="nivo-control" rel="'+i+'"><img src="'+child.attr('src').replace(settings.controlNavThumbsSearch,settings.controlNavThumbsReplace)+'" alt="" /></a>');}}else{nivoControl.append('<a class="nivo-control" rel="'+i+'">'+(i+1)+'</a>');}}
$('.nivo-controlNav a:eq('+vars.currentSlide+')',slider).addClass('active');$('.nivo-controlNav a',slider).live('click',function(){if(vars.running)return false;if($(this).hasClass('active'))return false;clearInterval(timer);timer='';slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');vars.currentSlide=$(this).attr('rel')-1;nivoRun(slider,kids,settings,'control');});}
if(settings.keyboardNav){$(window).keypress(function(event){if(event.keyCode=='37'){if(vars.running)return false;clearInterval(timer);timer='';vars.currentSlide-=2;nivoRun(slider,kids,settings,'prev');}
if(event.keyCode=='39'){if(vars.running)return false;clearInterval(timer);timer='';nivoRun(slider,kids,settings,'next');}});}
if(settings.pauseOnHover){slider.hover(function(){vars.paused=true;clearInterval(timer);timer='';},function(){vars.paused=false;if(timer==''&&!settings.manualAdvance){timer=setInterval(function(){nivoRun(slider,kids,settings,false);},settings.pauseTime);}});}
slider.bind('nivo:animFinished',function(){vars.running=false;$(kids).each(function(){if($(this).is('a')){$(this).css('display','none');}});if($(kids[vars.currentSlide]).is('a')){$(kids[vars.currentSlide]).css('display','block');}
if(timer==''&&!vars.paused&&!settings.manualAdvance){timer=setInterval(function(){nivoRun(slider,kids,settings,false);},settings.pauseTime);}
settings.afterChange.call(this);});var createSlices=function(slider,settings,vars){for(var i=0;i<settings.slices;i++){var sliceWidth=Math.round(slider.width()/settings.slices);if(i==settings.slices-1){slider.append($('<div class="nivo-slice"></div>').css({left:(sliceWidth*i)+'px',width:(slider.width()-(sliceWidth*i))+'px',height:'0px',opacity:'0',background:'url("'+vars.currentImage.attr('src')+'") no-repeat -'+((sliceWidth+(i*sliceWidth))-sliceWidth)+'px 0%'}));}else{slider.append($('<div class="nivo-slice"></div>').css({left:(sliceWidth*i)+'px',width:sliceWidth+'px',height:'0px',opacity:'0',background:'url("'+vars.currentImage.attr('src')+'") no-repeat -'+((sliceWidth+(i*sliceWidth))-sliceWidth)+'px 0%'}));}}}
var createBoxes=function(slider,settings,vars){var boxWidth=Math.round(slider.width()/settings.boxCols);var boxHeight=Math.round(slider.height()/settings.boxRows);for(var rows=0;rows<settings.boxRows;rows++){for(var cols=0;cols<settings.boxCols;cols++){if(cols==settings.boxCols-1){slider.append($('<div class="nivo-box"></div>').css({opacity:0,left:(boxWidth*cols)+'px',top:(boxHeight*rows)+'px',width:(slider.width()-(boxWidth*cols))+'px',height:boxHeight+'px',background:'url("'+vars.currentImage.attr('src')+'") no-repeat -'+((boxWidth+(cols*boxWidth))-boxWidth)+'px -'+((boxHeight+(rows*boxHeight))-boxHeight)+'px'}));}else{slider.append($('<div class="nivo-box"></div>').css({opacity:0,left:(boxWidth*cols)+'px',top:(boxHeight*rows)+'px',width:boxWidth+'px',height:boxHeight+'px',background:'url("'+vars.currentImage.attr('src')+'") no-repeat -'+((boxWidth+(cols*boxWidth))-boxWidth)+'px -'+((boxHeight+(rows*boxHeight))-boxHeight)+'px'}));}}}}
var nivoRun=function(slider,kids,settings,nudge){var vars=slider.data('nivo:vars');if(vars&&(vars.currentSlide==vars.totalSlides-1)){settings.lastSlide.call(this);}
if((!vars||vars.stop)&&!nudge)return false;settings.beforeChange.call(this);if(!nudge){slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');}else{if(nudge=='prev'){slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');}
if(nudge=='next'){slider.css('background','url("'+vars.currentImage.attr('src')+'") no-repeat');}}
vars.currentSlide++;if(vars.currentSlide==vars.totalSlides){vars.currentSlide=0;settings.slideshowEnd.call(this);}
if(vars.currentSlide<0)vars.currentSlide=(vars.totalSlides-1);if($(kids[vars.currentSlide]).is('img')){vars.currentImage=$(kids[vars.currentSlide]);}else{vars.currentImage=$(kids[vars.currentSlide]).find('img:first');}
if(settings.controlNav){$('.nivo-controlNav a',slider).removeClass('active');$('.nivo-controlNav a:eq('+vars.currentSlide+')',slider).addClass('active');}
processCaption(settings);$('.nivo-slice',slider).remove();$('.nivo-box',slider).remove();if(settings.effect=='random'){var anims=new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade','boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');vars.randAnim=anims[Math.floor(Math.random()*(anims.length+1))];if(vars.randAnim==undefined)vars.randAnim='fade';}
if(settings.effect.indexOf(',')!=-1){var anims=settings.effect.split(',');vars.randAnim=anims[Math.floor(Math.random()*(anims.length))];if(vars.randAnim==undefined)vars.randAnim='fade';}
vars.running=true;if(settings.effect=='sliceDown'||settings.effect=='sliceDownRight'||vars.randAnim=='sliceDownRight'||settings.effect=='sliceDownLeft'||vars.randAnim=='sliceDownLeft'){createSlices(slider,settings,vars);var timeBuff=0;var i=0;var slices=$('.nivo-slice',slider);if(settings.effect=='sliceDownLeft'||vars.randAnim=='sliceDownLeft')slices=$('.nivo-slice',slider)._reverse();slices.each(function(){var slice=$(this);slice.css({'top':'0px'});if(i==settings.slices-1){setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed);},(100+timeBuff));}
timeBuff+=50;i++;});}
else if(settings.effect=='sliceUp'||settings.effect=='sliceUpRight'||vars.randAnim=='sliceUpRight'||settings.effect=='sliceUpLeft'||vars.randAnim=='sliceUpLeft'){createSlices(slider,settings,vars);var timeBuff=0;var i=0;var slices=$('.nivo-slice',slider);if(settings.effect=='sliceUpLeft'||vars.randAnim=='sliceUpLeft')slices=$('.nivo-slice',slider)._reverse();slices.each(function(){var slice=$(this);slice.css({'bottom':'0px'});if(i==settings.slices-1){setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed);},(100+timeBuff));}
timeBuff+=50;i++;});}
else if(settings.effect=='sliceUpDown'||settings.effect=='sliceUpDownRight'||vars.randAnim=='sliceUpDown'||settings.effect=='sliceUpDownLeft'||vars.randAnim=='sliceUpDownLeft'){createSlices(slider,settings,vars);var timeBuff=0;var i=0;var v=0;var slices=$('.nivo-slice',slider);if(settings.effect=='sliceUpDownLeft'||vars.randAnim=='sliceUpDownLeft')slices=$('.nivo-slice',slider)._reverse();slices.each(function(){var slice=$(this);if(i==0){slice.css('top','0px');i++;}else{slice.css('bottom','0px');i=0;}
if(v==settings.slices-1){setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){slice.animate({height:'100%',opacity:'1.0'},settings.animSpeed);},(100+timeBuff));}
timeBuff+=50;v++;});}
else if(settings.effect=='fold'||vars.randAnim=='fold'){createSlices(slider,settings,vars);var timeBuff=0;var i=0;$('.nivo-slice',slider).each(function(){var slice=$(this);var origWidth=slice.width();slice.css({top:'0px',height:'100%',width:'0px'});if(i==settings.slices-1){setTimeout(function(){slice.animate({width:origWidth,opacity:'1.0'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){slice.animate({width:origWidth,opacity:'1.0'},settings.animSpeed);},(100+timeBuff));}
timeBuff+=50;i++;});}
else if(settings.effect=='fade'||vars.randAnim=='fade'){createSlices(slider,settings,vars);var firstSlice=$('.nivo-slice:first',slider);firstSlice.css({'height':'100%','width':slider.width()+'px'});firstSlice.animate({opacity:'1.0'},(settings.animSpeed*2),'',function(){slider.trigger('nivo:animFinished');});}
else if(settings.effect=='slideInRight'||vars.randAnim=='slideInRight'){createSlices(slider,settings,vars);var firstSlice=$('.nivo-slice:first',slider);firstSlice.css({'height':'100%','width':'0px','opacity':'1'});firstSlice.animate({width:slider.width()+'px'},(settings.animSpeed*2),'',function(){slider.trigger('nivo:animFinished');});}
else if(settings.effect=='slideInLeft'||vars.randAnim=='slideInLeft'){createSlices(slider,settings,vars);var firstSlice=$('.nivo-slice:first',slider);firstSlice.css({'height':'100%','width':'0px','opacity':'1','left':'','right':'0px'});firstSlice.animate({width:slider.width()+'px'},(settings.animSpeed*2),'',function(){firstSlice.css({'left':'0px','right':''});slider.trigger('nivo:animFinished');});}
else if(settings.effect=='boxRandom'||vars.randAnim=='boxRandom'){createBoxes(slider,settings,vars);var totalBoxes=settings.boxCols*settings.boxRows;var i=0;var timeBuff=0;var boxes=shuffle($('.nivo-box',slider));boxes.each(function(){var box=$(this);if(i==totalBoxes-1){setTimeout(function(){box.animate({opacity:'1'},settings.animSpeed,'',function(){slider.trigger('nivo:animFinished');});},(100+timeBuff));}else{setTimeout(function(){box.animate({opacity:'1'},settings.animSpeed);},(100+timeBuff));}
timeBuff+=20;i++;});}
else if(settings.effect=='boxRain'||vars.randAnim=='boxRain'||settings.effect=='boxRainReverse'||vars.randAnim=='boxRainReverse'||settings.effect=='boxRainGrow'||vars.randAnim=='boxRainGrow'||settings.effect=='boxRainGrowReverse'||vars.randAnim=='boxRainGrowReverse'){createBoxes(slider,settings,vars);var totalBoxes=settings.boxCols*settings.boxRows;var i=0;var timeBuff=0;var rowIndex=0;var colIndex=0;var box2Darr=new Array();box2Darr[rowIndex]=new Array();var boxes=$('.nivo-box',slider);if(settings.effect=='boxRainReverse'||vars.randAnim=='boxRainReverse'||settings.effect=='boxRainGrowReverse'||vars.randAnim=='boxRainGrowReverse'){boxes=$('.nivo-box',slider)._reverse();}
boxes.each(function(){box2Darr[rowIndex][colIndex]=$(this);colIndex++;if(colIndex==settings.boxCols){rowIndex++;colIndex=0;box2Darr[rowIndex]=new Array();}});for(var cols=0;cols<(settings.boxCols*2);cols++){var prevCol=cols;for(var rows=0;rows<settings.boxRows;rows++){if(prevCol>=0&&prevCol<settings.boxCols){(function(row,col,time,i,totalBoxes){var box=$(box2Darr[row][col]);var w=box.width();var h=box.height();if(settings.effect=='boxRainGrow'||vars.randAnim=='boxRainGrow'||settings.effect=='boxRainGrowReverse'||vars.randAnim=='boxRainGrowReverse'){box.width(0).height(0);}
if(i==totalBoxes-1){setTimeout(function(){box.animate({opacity:'1',width:w,height:h},settings.animSpeed/1.3,'',function(){slider.trigger('nivo:animFinished');});},(100+time));}else{setTimeout(function(){box.animate({opacity:'1',width:w,height:h},settings.animSpeed/1.3);},(100+time));}})(rows,prevCol,timeBuff,i,totalBoxes);i++;}
prevCol--;}
timeBuff+=100;}}}
var shuffle=function(arr){for(var j,x,i=arr.length;i;j=parseInt(Math.random()*i),x=arr[--i],arr[i]=arr[j],arr[j]=x);return arr;}
var trace=function(msg){if(this.console&&typeof console.log!="undefined")
console.log(msg);}
this.stop=function(){if(!$(element).data('nivo:vars').stop){$(element).data('nivo:vars').stop=true;trace('Stop Slider');}}
this.start=function(){if($(element).data('nivo:vars').stop){$(element).data('nivo:vars').stop=false;trace('Start Slider');}}
settings.afterLoad.call(this);return this;};$.fn.nivoSlider=function(options){return this.each(function(key,value){var element=$(this);if(element.data('nivoslider'))return element.data('nivoslider');var nivoslider=new NivoSlider(this,options);element.data('nivoslider',nivoslider);});};$.fn.nivoSlider.defaults={effect:'random',slices:15,boxCols:8,boxRows:4,animSpeed:500,pauseTime:3000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:false,controlNavThumbsSearch:'.jpg',controlNavThumbsReplace:'_thumb.jpg',keyboardNav:true,pauseOnHover:true,manualAdvance:false,captionOpacity:0.8,prevText:'Prev',nextText:'Next',beforeChange:function(){},afterChange:function(){},slideshowEnd:function(){},lastSlide:function(){},afterLoad:function(){}};$.fn._reverse=[].reverse;})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
jQuery('.squarebanner li:nth-child(even)').addClass('rbanner');
jQuery('#slider').nivoSlider({
effect:'random',
slices: 10 });
});
//]]>
</script>
<div class='nivoSlider' id='slider'>
<a href='#'><img alt='самый высокий водопад в мире' class='nivim' height='300' src='http://vallek.ru/wp-content/uploads/2013/06/anhel_1.jpg' title='#Post Title' width='768'/></a>
<a href='#'><img alt='#Post Title' class='nivim' height='300' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2sQM8Gn7v2aET74Ujjz-QtnF4CXHMLASdj2oapPJaRbLSgbbwQySPKCVfM2YcKV2QbXdtLNL1xdMTSoaVMogMofQJrNo0NmVGDFKwXIIySJUFzTkaGGrP4cN0s_5e_Izo_i5EtemZgjsq/s0/1.jpg' title='#Post Title' width='768'/></a>
<a href='#'><img alt='#Post Title' class='nivim' height='300' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCkAb6c7TI-zpPeZkGrQy3vEYidcCkpHoY-ol9DleINOqg6YDWBSBF3v85zDCqAdCcPqMViRk_5Y8e4YTFfQ_zxIKrRbcn4bnf99sGESLh1Y-Hmp5XXSaZHGUEV8dHNbhk24RgsFmQQrwi/s0/3.jpg' title='#Post Title' width='768'/></a>
</div> Красная маркировка это урлы ваших фотографий. Даю так же, адреса для обработки изображений: http://radikal.cc/ http://pixlr.com/express/ http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Самое простое увеличение картинки при наведении курсора для Блогспот, Блоггер Posted: 08 Nov 2013 08:58 AM PST Пост (в основном) для пользователей: Blogger, Блоггер (Blogspot, Блогспот)Ну вот и дошли у меня руки для публикации очень простого скрипта - увеличение изображения при наведении курсора для Блогспот, Блоггер. Отличие данного скрипта в простоте установки и универсальности (одноразовая установка на все картинки блога). Наведите курсор и проверьте работу скрипта! Большее увеличение изображения технически будет смотреться некрасиво и в результате многочисленных экспериментов скрипт настроен оптимально! Если эффект вам понравился, то добавьте код:
В Дизайн - Добавить гаджет - HTML/JavaScript <style>.post-body img { -webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;transition: all 0.4s ease;
padding: 8px;
background: #ffffff;
border: 1px solid #d0d0d0;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.post-body img:hover {-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);
background: #ffffff;
border: 1px solid #cccccc;
text-decoration: none;
text-shadow: none;
-moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
}</style>
http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Падающие листья на Блогспот, Блоггер Posted: 19 Oct 2013 10:33 AM PDT Пост (в основном) для пользователей: Blogger, Блоггер (Blogspot, Блогспот)Заглянул я как то в "Одноклассники" и узрел возможность оформления аккаунта падающими листьями. А листья за окном действительно падают! И придумалось мне сделать примерно такое же на наши Блогспот - Блоггер блоги. Сказано - сделано! Вот такие точно листья смогут теперь "кружиться" на ваших блогах! Все что вам необходимо сделать, то это добавить код:
В Дизайн - Добавить гаджет - HTML/JavaScript Что бы листья "падали" сверху вниз, код необходимо разместить сверху (как можно выше) - примерно там, где показано на скриншоте: А вот и сам код: <script type="text/javascript">
//Configure below to change URL path to the snow image
var snowsrc="http://likiliks.ru/le-site/2osen.png"
// Configure below to change number of snow to render
var no = 15;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://lh5.googleusercontent.com/-qTfnaEOmyws/TutpGkMPKUI/AAAAAAAAC_o/pE8yhnTmFDU/s32/ColoredStars.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}
function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script> У скрипта существуют настройка - отключение через некоторое время: var hidesnowtime = 0; Для тех, у кого листья уже опали и идет снег: http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Необычное увеличение изображения при наведении курсора, на ваш Блогспот, Блоггер Posted: 22 Sep 2013 05:13 AM PDT Пост (в основном) для пользователей: Blogger, Блоггер (Blogspot, Блогспот)Я уже неоднократно публиковал возможность изменения изображения при наведении курсора: или Сегодня я публикую еще один вариант. Наведите курсор и опробуйте эффект:
Если эффект вам понравился, то данный виджет можно использовать, вставив код в редактор в любом месте статьи. <style>
.dsblockzoom{
position: relative;
}
.dsblockzoom img{
position: absolute;
left: 0;
}
.dsblockzoom img.maximg{
opacity: 0;
visibility: hidden;
}
.dsblockzoom img.minimg{
z-index: 1;
}
@-webkit-keyframes dszooma{ 0%{
z-index: -1;
opacity: 0;
}
50%{
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{
z-index: 2;
}
100%{
left: 0;
box-shadow: 8px 8px 15px gray;
}
}
@-moz-keyframes dszooma{
0%{
z-index:-1;
opacity:0;
}50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
@-ms-keyframes dszooma{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
.dsblockzoom:hover img.maximg{
-webkit-animation-name:dszooma;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-name:dszooma;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-ms-animation-name:dszooma;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;
animation-name:dszooma;
animation-duration: 1s;
animation-iteration-count: 1;
visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;
z-index:2;
}
.dsblockzoom:hover img.minimg{
opacity:0.5;
}
</style>
<div class="dsblockzoom" style="width:300px; height:171px">
<img class="minimg" src="http://delaisait.ucoz.ru/script/menu/img/1/esizbr1.jpg" alt="zoom effect" />
<img class="maximg" src="http://delaisait.ucoz.ru/script/menu/img/1/esizbr.jpg" alt="zoom effect" />
</div> Выделенные красным урл. - адрес ваших изображений (изображения должны иметь разный размер, вначале маленький потом большой), вставляете по вашему усмотрению! http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Автоматическая генерация с каждым кликом новой шапки, для вашего блога Блогспот, Блоггер Posted: 16 Sep 2013 03:14 AM PDT Пост (в основном) для пользователей: Blogger, Блоггер (Blogspot, Блогспот)Сегодня я предлагаю очередную совершенно уникальную вещь на ваш Блогспот, Блоггер. В данном случае, уникальность заключается в том, что шапка (или изображение в шапке) будет меняться в каждый раз с переходом на новую страницу вашего блога! Таким образом, у вас будет в каждый раз - новый дизайн шапки!Я пожалуй не смогу, да и не буду описывать, как это будет выглядеть - у всех разные шаблоны и возможно это не всем подойдет. Но поскольку установка (как обычно) архипростая - ПРОБУЙТЕ! Установка осуществляется добавлением кода:
В Дизайн - Добавить гаджет - HTML/JavaScript <style type='text/css'>#header {
background: url("your header image url in quotes") no-repeat left bottom;
margin:0;
padding:2px;
}
</style><script type="text/javascript">
var banner= new Array();
banner[0]="УРЛ.- АДРЕС ИЗОБРАЖЕНИЯ для шапки 0";
banner[1]="УРЛ.- АДРЕС ИЗОБРАЖЕНИЯ для шапки 1";
banner[2]="УРЛ.- АДРЕС ИЗОБРАЖЕНИЯ для шапки 2";
banner[3]="УРЛ.- АДРЕС ИЗОБРАЖЕНИЯ для шапки 3";
banner[4]="УРЛ.- АДРЕС ИЗОБРАЖЕНИЯ для шапки 4";
var random=Math.round(4*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script> Вам необходимо только вставить ВАШИ изображения туда, где отмечено красным. Естественно, за вас искать фотографии и выставлять размеры я не буду! Шапки можно найти задав в Гугл "ШАПКИ ДЛЯ САЙТА". Для тех, кто не знает как (выставлять размеры), даю ссылку моего любимого фото редактора: http://pixlr.com/express/ http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Появление описания у картинки при наведении курсора для Блогспот, Блоггер Posted: 07 Sep 2013 08:16 AM PDT Пост (в основном) для пользователей: Blogger, Блоггер (Blogspot, Блогспот)Сегодня друзья, как обычно публикую очень простое в установке, но очень эффективное при использовании, очередное усовершенствование на ваш Блогспот, Блоггер. Речь идет об описании изображения вашего блога, которое читатель сможет увидеть наведя курсор. В описании, так же есть возможность добавления ссылки куда нибудь. А впрочем убедитесь сами: Данный виджет можно использовать, вставив код в редактор в любом месте статьи. <center>
<style>
.image-box {
width:280px;height:280px;overflow:hidden;background-color:white;
border:1px solid #ccc;float:center;margin:1px 1px;
font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
color:#333;
}
.image-container,
.image-details {height:280px;border:5px solid white;background-color:#ffc;
transition:margin-top .4s ease-out .4s;
}
.image-container img {
width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
max-height:none;
background-color:black;
}
.image-details h4,
.image-details p {
margin:0 0 .2em;padding:0 0;height:70px;
}
.image-details h4 {
font-size:120%;height:auto;
}
.image-details .details {
padding:10px 12px;overflow:hidden;
}
.image-details .more {
color:white;text-decoration:none;display:block;
text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;
}
.image-box:hover {border-color:#bbb; width:280px;
height:280px;}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}
</style>
<div class="image-box-wrapper" id="image-box-wrapper">
<div class="image-box">
<div class="image-container">
<img alt="Наведите курсор" height="280" src="Ссылка урл. вашего изображения" width="280" />
</div>
<div class="image-details">
<div class="details">
<h4>
Название изображения</h4>
Текст описания изображения...<br />
<a class="more" href="Ссылка урл.- адрес">Читать дальше</a></div>
</div>
</div>
<div style="clear: both;">
</div>
</div>
</center> То, что выделено красным, вы заполняете по вашему усмотрению! http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Бегущая строка с автоматическим заполнением кликабельными ссылками для Блогспот, Блоггер Posted: 25 Aug 2013 04:07 AM PDT Пост (в основном) для пользователей: Blogger, Блоггер (Blogspot, Блогспот)Бегущая строка несмотря на относительную древность применения, все еще популярна. Особенно у начинающих блоггеров. Поэтому сегодня я предлагаю вам очень интересный вариант.
 Впрочем убедитесь сами: Код вставляется очень просто: В Дизайн - Добавить гаджет - HTML/JavaScript <script src="http://blogger.com.md/uploads/demo/scroll/scroll.js"></script>
<script>
var nMaxPosts = 10; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection="left"; var sOpenLinkLocation="N"; var sBulletChar="»»";
</script>
<script src="http://blogodel.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"></script> Там где маркировано красным, необходимо внести адрес-урл вашего блога http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Красивый дизайн боковых сторон Блоггер, Блогспот Posted: 10 Aug 2013 09:50 AM PDT Пост (в основном) для пользователей: Blogger, Блоггер (Blogspot, Блогспот)Прежде всего надо объяснить о чем речь. Трудно будет, но все же попытаюсь. Началось все с заявки в комментариях: у многих видела фон чётка по границам блога, как например тут http://hobbystudi0.blogspot.com/2013/07/blog-post_23.html , когда я ставлю подобные фоны на свой блог они разъезжаются, что нужно менять в настройках чтобы узнать точные размеры серединки блога и боков? Не знаю правильными ли я терминами задала вопрос, надеюсь вы поймёте. После просмотра блога по предложенной ссылке, я увидел следующую картину: Может вы этого и не видите, но читатели, у которых ширина монитора больше вашего, видят по бокам вашего блога - очень некрасивую пустоту! В данном случае, там, куда показывают красные стрелочки, вместо однотонной "пустоты" - красивый дизайн! Как это сделать? Пришлось обратится к коллегам из других стран и решение было найдено. Вначале необходимо В Дизайн - Добавить гаджет - HTML/JavaScript добавить следующий код: <style type="text/css">
body {background-image: url("УРЛ.- АДРЕС БОКОВОЙ КАРТИНКИ"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style> Где красным выделен УРЛ.- АДРЕС БОКОВОЙ КАРТИНКИ, которую можно найти по следующей ссылке: http://izziegraceblogbackgrounds.blogspot.com/ (по этой ссылке, под каждым изображением вы можете скопировать - УРЛ.- АДРЕС БОКОВОЙ КАРТИНКИ): И еще хотелось бы добавить, что дизайны у всех разные и как "ляжет" этот боковое оформление на ваш блог, заранее сказать невозможно. Нужно пробовать! http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Полоса прокрутки всего содержания блога для Блоггер, Блогспот 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 (выделен красным фоном), где цифра, это выбранный вами эффект. <img border="0" class="effect1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje57sc0nVbn56VhUx_a6GKUE2mhvRepQYc4oGSETIXHFAGtzPbygj2eiCrZIXQeBC3jjOKWWy7_9VvJppmlYkUZSG5O9dfYeXQPYzBdXfz1V3gRTDKzuCDtsh4W9kqxeJzTGycroD0Drw/s1600/image-effects-image-2.png" /> 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> Если у вас все получилось, то поздравляю с новым усовершенствованием вашего блога! Код без target="_blank <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><!--Tooltip--> <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("targe") == "_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> <!--End Tooltip--> 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> <!-- This contains the hidden content for inline calls --> <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 |
| Что общего между PR сайта и красивой женщиной? Posted: 20 Dec 2007 05:37 PM PST Что общего между PR сайта и красивой женщиной? 1. Красивую женщину все хотят. -Даже те, которые утверждают что равнодушны к женской красоте, прячут под маской безразличия желание обладать красоткой. -Та же история и с PR сайта. Каждый владелец вебсайта не прочь поиметь высокий PR. Даже те отщепенцы (типа меня), которые утверждают что прекрасно обходится без […] This posting includes an audio/video/photo media file: Download Now |
+%D0%B2+%D0%B1%D0%BB%D0%BE%D0%B3+%D0%B2+%D0%B1%D0%BE%D0%BA%D0%BE%D0%B2%D1%83%D1%8E+%D0%BA%D0%BE%D0%BB%D0%BE%D0%BD%D0%BA%D1%83.jpg)
.jpg)
0 comments:
Post a Comment