| Необычные кнопки-ссылки со звуком на ваш Блогспот, Блоггер Posted: 04 May 2014 09:35 AM PDT Здравствуйте, уважаемые подписчики и новые посетители моего блога. За то, что время от времени посещаете мой скромный веб-ресурс, предлагаю вам совершенно уникальную вещь - кнопку-ссылку со звуком. А вот и само "чудо":
а вот код кнопки:
<object data="http://agitki.ru/flash/template/knopka_02.swf" height="43" type="application/x-shockwave-flash" width="128"><param name="movie" value="http://agitki.ru/flash/template/knopka_02.swf" /><param name="wmode" value="transparent" /><param name="flashvars"value="&in_title=Наведи курсор!&&url=http://blogodel.com/"/></object>
Еще один вариант:
<object type="application/x-shockwave-flash" height="103" width="118" data="http://agitki.ru/flash/template/knopka_01.swf"><param name="movie" value="http://agitki.ru/flash/template/knopka_01.swf" /><param name="wmode" value="transparent" /> <param name="flashvars"value="&in_title=Нажми!&&url=http://blogodel.com/"/></object>
Для выравнивания кнопки по центру сайта вставьте её в div:
<div align="center">Код кнопки</div> Там где красная маркировка вставляется текст. Синий цвет, это урл-адрес ссылки по которой должен быть осуществлен переход.
Решайте сами, куда на вашем Блогспот-блоге это "чудо" разместить. http://blogodel.com/ This posting includes an audio/video/photo media file: Download Now |
| Делаем уникальную рамку для РОЛИКА С 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 |
| Удивительные бабочки при наведении курсора для Блогспот, Блоггер 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 |
| Удивительный ротатор текста для Блоггер, Блогспот 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 |
| Качающаяся картинка, как украшение к празднику для блога на 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 |
| Праздничные открытки к 23 февраля на Блоггер, Блогспот Posted: 22 Feb 2014 06:43 AM PST Пост (в основном) для пользователей: Blogger, Блоггер (Blogspot, Блогспот)Тороплюсь к 23 февраля успеть опубликовать этот пост. Речь сегодня пойдет об открытке на ваш блог к предстоящим праздникам. Что бы вам не "рыскать" в поисках таковых, я сделал маленькую подборочку. Открытки на любой вкус!
Устанавливаются открытки очень просто - Дизайн - Добавить гаджет - HTML/JavaScript
<img border="0" height="290" src="http://statusram.ru/images/stories/animation/23-fev/04.gif" width="220" />
<img border="0" height="290" src="http://statusram.ru/images/stories/animation/23-fev/11.gif" width="220" />
 Красная маркировка - размеры картинок 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 |
+%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