www.blogspot.com
blogodel
Blogodel - Blogger, Блогспот
1	http://blogodel.com/2013/10/Padajushhie-listja-na-Blogspot-Blogger.html	Падающие листья на Блогспот, Блоггер	2013-10-23T05:13:12.952-07:00	___	    Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)   Заглянул я как то в "Одноклассники" и узрел возможность оформления аккаунта падающими листьями. А листья за окном действительно падают! И придумалось мне сделать примерно такое же на наши Блогспот - Блоггер блоги. Сказано - сделано! Вот такие точно листья смогут теперь "кружиться" на ваших блогах!         Все что вам необходимо сделать, то это добавить код:    В Дизайн - Добавить гаджет - HTML/JavaScript         Что бы листья "падали" сверху вниз, код необходимо разместить сверху (как можно выше) - примерно там, где показано на скриншоте:       А вот и сам код:   &lt;script type="text/javascript"&gt;   //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&amp;&amp;!document.all) ? 1 : 0;     function iecompattest(){     return (document.compatMode &amp;&amp; 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 &lt; 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("&lt;div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"&gt;&lt;a href=\"http://dynamicdrive.com\"&gt;&lt;img src='"+snowsrc+"' border=\"0\"&gt;&lt;\/a&gt;&lt;\/div&gt;");       } else {         document.write("&lt;div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"&gt;&lt;img src='"+snowsrc+"' border=\"0\"&gt;&lt;\/div&gt;");       }     }   }   function snowIE_NS6() {  // IE and NS6 main animation function     doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;         doc_height=(window.innerHeight &amp;&amp; snowdistance=="windowheight")? window.innerHeight : (ie4up &amp;&amp; snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up &amp;&amp; !window.opera &amp;&amp; snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;     for (i = 0; i &lt; no; ++ i) {  // iterate for every dot       yp[i] += sty[i];       if (yp[i] &gt; 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&lt;no; i++) document.getElementById("dot"+i).style.visibility="hidden"     } if (ie4up||ns6up){     snowIE_NS6();         if (hidesnowtime&gt;0)         setTimeout("hidesnow()", hidesnowtime*1000)         } &lt;/script&gt;     У скрипта существуют настройка - отключение через некоторое время:  var hidesnowtime = 0;     Для тех, у кого листья уже опали и идет снег:   "Снежинки и снежная пыль для блога"  http://blogodel.com/
2	http://blogodel.com/2013/09/Neobychnoe-uvelichenie-izobrazhenija-pri-navedenii-kursora-na-vash-Blogspot-Blogger.html	Необычное увеличение изображения при наведении курсора, на ваш Блогспот, Блоггер	2013-09-22T06:37:26.905-07:00	___	  Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)   Я уже неоднократно публиковал возможность изменения изображения при наведении курсора:  Плавное увеличении картинки при наведении курсора    или  Панорамное увеличении картинки при наведении курсора    Сегодня я публикую еще один вариант. Наведите курсор и опробуйте эффект:               Если эффект вам понравился, то данный виджет можно использовать, вставив код в редактор в любом месте статьи.    &lt;style&gt; .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; } &lt;/style&gt; &lt;div class="dsblockzoom" style="width:300px; height:171px"&gt; &lt;img class="minimg" src="http://delaisait.ucoz.ru/script/menu/img/1/esizbr1.jpg" alt="zoom effect" /&gt; &lt;img class="maximg" src="http://delaisait.ucoz.ru/script/menu/img/1/esizbr.jpg" alt="zoom effect" /&gt; &lt;/div&gt;    Выделенные красным урл. - адрес ваших изображений (изображения должны иметь разный размер, вначале маленький потом большой), вставляете по вашему усмотрению!  http://blogodel.com/
3	http://blogodel.com/2013/09/S-kazhdym-klikom-novaja-shapka-vashego-bloga-Blogspot-Blogger.html	Автоматическая генерация с каждым кликом новой шапки, для вашего блога Блогспот, Блоггер	2013-09-16T05:01:24.738-07:00	___	   Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)    Сегодня я предлагаю очередную совершенно уникальную вещь на ваш Блогспот, Блоггер. В данном случае, уникальность заключается в том, что шапка (или изображение в шапке) будет меняться в каждый раз с переходом на новую страницу вашего блога! Таким образом, у вас будет в каждый раз - новый дизайн шапки!         Я пожалуй не смогу, да и не буду описывать, как это будет выглядеть - у всех разные шаблоны и возможно это не всем подойдет. Но поскольку установка (как обычно) архипростая - ПРОБУЙТЕ!  Установка осуществляется добавлением кода:    В Дизайн - Добавить гаджет - HTML/JavaScript         &lt;style type='text/css'&gt;#header { background: url("your header image url in quotes") no-repeat left bottom; margin:0; padding:2px; } &lt;/style&gt;&lt;script type="text/javascript"&gt; 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("&lt;style&gt;"); document.write("#header {"); document.write(' background:url("' + banner[random] + '") no-repeat left TOP;'); document.write(" }"); document.write("&lt;/style&gt;"); &lt;/script&gt;    Вам необходимо только вставить ВАШИ изображения туда, где отмечено красным. Естественно, за вас искать фотографии и выставлять размеры я не буду! Шапки можно найти задав в Гугл "ШАПКИ ДЛЯ САЙТА". Для тех, кто не знает как (выставлять размеры), даю ссылку моего любимого фото редактора: http://pixlr.com/express/  http://blogodel.com/
4	http://blogodel.com/2013/09/Pojavlenie-opisanija-u-kartinki-pri-navedenii-kursora-dlja-Blogspot-Blogger.html	Появление описания у картинки при наведении курсора для Блогспот, Блоггер	2013-09-14T09:41:44.999-07:00	___	  Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)   Сегодня друзья, как обычно публикую очень простое в установке, но очень эффективное при использовании, очередное усовершенствование на ваш Блогспот, Блоггер. Речь идет об описании изображения вашего блога, которое читатель сможет увидеть наведя курсор. В описании, так же есть возможность добавления ссылки куда нибудь. А впрочем убедитесь сами:               Название изображения Текст описания изображения... Читать дальше          Данный виджет можно использовать, вставив код в редактор в любом месте статьи.    &lt;center&gt; &lt;style&gt; .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} &lt;/style&gt;  &lt;div class="image-box-wrapper" id="image-box-wrapper"&gt; &lt;div class="image-box"&gt; &lt;div class="image-container"&gt; &lt;img alt="Наведите курсор" height="280" src="Ссылка урл. вашего изображения" width="280" /&gt;   &lt;/div&gt; &lt;div class="image-details"&gt; &lt;div class="details"&gt; &lt;h4&gt; Название изображения&lt;/h4&gt; Текст описания изображения...&lt;br /&gt; &lt;a class="more" href="Ссылка урл.- адрес"&gt;Читать дальше&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="clear: both;"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/center&gt;    То, что выделено красным, вы заполняете по вашему усмотрению!  http://blogodel.com/
5	http://blogodel.com/2013/08/Begushhaja-stroka-s-avtomaticheskim-zapolneniem-klikabelnymi-ssylkami-dlja-Blogspot-Blogger.html	Бегущая строка с автоматическим заполнением кликабельными ссылками для Блогспот, Блоггер	2013-08-27T04:57:19.124-07:00	___	  Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)     Бегущая строка несмотря на относительную древность применения, все еще популярна. Особенно у начинающих блоггеров. Поэтому сегодня я предлагаю вам очень интересный вариант.         Впрочем убедитесь сами:         Код вставляется очень просто:    В Дизайн - Добавить гаджет - HTML/JavaScript         &lt;script src="http://blogger.com.md/uploads/demo/scroll/scroll.js"&gt;&lt;/script&gt; &lt;script&gt;    var nMaxPosts = 10; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection="left"; var sOpenLinkLocation="N"; var sBulletChar="»»"; &lt;/script&gt;  &lt;script src="http://blogodel.com/feeds/posts/default?alt=json-in-script&amp;amp;callback=RecentPostsScrollerv2"&gt;&lt;/script&gt;   Там где маркировано красным, необходимо внести адрес-урл вашего блога  http://blogodel.com/
6	http://blogodel.com/2013/08/Krasivyj-dizajn-bokovyh-storon-Blogger-Blogspot.html	Красивый дизайн боковых сторон Блоггер, Блогспот	2013-08-11T10:29:09.421-07:00	___	     Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)   Прежде всего надо объяснить о чем речь. Трудно будет, но все же попытаюсь.  Началось все с заявки в комментариях:   у многих видела фон чётка по границам блога, как например тут http://hobbystudi0.blogspot.com/2013/07/blog-post_23.html , когда я ставлю подобные фоны на свой блог они разъезжаются, что нужно менять в настройках чтобы узнать точные размеры серединки блога и боков? Не знаю правильными ли я терминами задала вопрос, надеюсь вы поймёте.     После просмотра блога по предложенной ссылке, я увидел следующую картину:        Может вы этого и не видите, но читатели, у которых ширина монитора больше вашего, видят по бокам вашего блога - очень некрасивую пустоту! В данном случае, там, куда показывают красные стрелочки, вместо однотонной "пустоты" - красивый дизайн! Как это сделать? Пришлось обратится к коллегам из других стран и решение было найдено. Вначале необходимо В Дизайн - Добавить гаджет - HTML/JavaScript добавить следующий код:    &lt;style type="text/css"&gt; body {background-image: url("УРЛ.- АДРЕС БОКОВОЙ КАРТИНКИ"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; } &lt;/style&gt;   Где красным выделен УРЛ.- АДРЕС БОКОВОЙ КАРТИНКИ, которую можно найти по следующей ссылке:  http://izziegraceblogbackgrounds.blogspot.com/  (по этой ссылке, под каждым изображением вы можете скопировать - УРЛ.- АДРЕС БОКОВОЙ КАРТИНКИ):  И еще хотелось бы добавить, что дизайны у всех разные и как "ляжет" этот боковое оформление на ваш блог, заранее сказать невозможно. Нужно пробовать! http://blogodel.com/
7	http://blogodel.com/2013/07/Polosa-prokrutki-vsego-soderzhanija-bloga-dlja-Blogger-Blogspot.html	Полоса прокрутки всего содержания блога для Блоггер, Блогспот	2013-07-21T16:50:17.842-07:00	___	  Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)     По многочисленным заявкам читателей, публикую "Полосу прокрутки всего содержания блога для Блоггер, Блогспот"      Данный виджет можно использовать (вставить в редактор), как для страницы "Содержание" так и в конце статьи.  Код для страницы "Содержание"     &lt;style&gt; #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=&amp;#39;#ffffff&amp;#39;, endColorstr=&amp;#39;#e5e5e5&amp;#39;,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; } &lt;/style&gt; &lt;script src="http://bloggerndch.googlecode.com/files/tocbyarchivemin.js"&gt; &lt;/script&gt; &lt;script src="http://blogodel.com/feeds/posts/default?max-results=999&amp;amp;alt=json-in-script&amp;amp;callback=loadtoc"&gt; &lt;/script&gt;    Туда, где выделено красным, вставляется урл.- адрес вашего блога.    Код полосы прокрутки, вставляется в конце статьи (в редактор сообщений)    &lt;style&gt;    .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;    }  &lt;/style&gt; &lt;div class='layer'&gt; &lt;style&gt; #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; } &lt;/style&gt; &lt;script src='http://bloggerndch.googlecode.com/files/tocbyarchivemin.js'&gt; &lt;/script&gt; &lt;script src='http://blogodel.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc'&gt; &lt;/script&gt;    Туда, где выделено красным, вставляется урл.- адрес вашего блога.  Для продвинутых пользователей Блогспот, Блоггер, код в шаблоне вставляется после строчки:  &lt;div class='post-footer-line post-footer-line-1'&gt;    Убедительная просьба для тех, кто попытается вставить код в шаблон. Шаблоны у всех разные, я не телепат и поэтому с претензиями в комментариях НЕ ОБРАЩАТЬСЯ!     По мотивам: http://blogger.omg-linux.ru/   http://blogodel.com/
8	http://blogodel.com/2013/06/Udivitelnye-jeffekty-pri-navedenii-kursora-na-kartinku-dlja-Blogspot-Blogger.html	Удивительные эффекты при наведении курсора на картинку, для Блогспот, Блоггер	2013-08-01T15:43:13.939-07:00	___	       Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)      Сегодня я покажу вам, как легко и просто, оформить изображение различными эффектами при наведении курсора. Иногда хочется выделить какую нибудь картинку особенно, вот для этого и хороши данные эффекты! Но для начала убедитесь в том, как это работает!       &amp;&amp;                            Эффект1     Эффект2                          Эффект4     Эффект5     Эффект3        Код добавляется (куда угодно) в редакторе сообщения    Обратите внимание на маркированный красным скрипт jQuery, если эффект не работает то его нужно удалить. Информация об этом здесь.      &lt;style&gt;.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&gt;img,.adipoli-before,.adipoli-after{position:absolute;z-index:0}&lt;/style&gt;&lt;script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'&gt;&lt;/script&gt; &lt;script src='http://yourjavascript.com/143237963/jquery.adipoli.min.js' type='text/javascript'&gt;&lt;/script&gt; &lt;script type='text/javascript'&gt; /*&lt;![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'     });    }); /*]]&gt;*/                    &lt;/script&gt; &lt;script type="text/javascript"&gt;var a=navigator,b="userAgent",c="indexOf",f="&amp;m=1",g="(^|&amp;)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&lt;=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&amp;&amp;-1!=a[b][c]("WebKit")&amp;&amp;-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var m=l();m&amp;&amp;window.location.replace(m)}; &lt;/script&gt;&lt;script type="text/javascript"&gt; if (window.jstiming) window.jstiming.load.tick('headEnd'); &lt;/script&gt;    Ну и последний шаг: вставляем в код вашей картинки - идентификатор class="effect1 (выделен красным фоном), где цифра, это выбранный вами эффект.  &lt;img border="0" class="effect1" src="http://4.bp.blogspot.com/-iMK9uYw-2aM/T_NYaaCK0rI/AAAAAAAAHUw/rc10qNZX5Fk/s1600/image-effects-image-2.png" /&gt;   http://blogodel.com/
9	http://blogodel.com/2013/06/Samaja-prostaja-ustanovka-vsplyvajushhej-podskazki-dlja-Blogspot-Blogger.html	Самая простая установка всплывающей подсказки для Блогспот, Блоггер	2013-07-16T10:19:29.565-07:00	___	       Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)     По заявкам читателей, публикую самую простую установку всплывающей подсказки, которую можно применять как к ссылкам, так и к изображениям. Изюминка заключается в самой простой инсталляции данного виджета, по сравнению с другими вариантами опубликованными в сети. Что бы не быть голословным, предлагаю убедится в том, как это работает. Наведите курсор на эту ссылку: Блогодел   Наведите курсор на картинку!           Если эффект вам понравился, приступаем к установке, которая осуществляется добавлением кода:     В Дизайн - Добавить гаджет - HTML/JavaScript         &lt;style&gt;#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;   /*преобладание подсказки над всеми остальными элементами*/ }&lt;/style&gt;&lt;script language='javascript' type='text/javascript'&gt; var tooltip = {     /* &amp;#1053;&amp;#1040;&amp;#1063;&amp;#1040;&amp;#1051;&amp;#1054; &amp;#1053;&amp;#1040;&amp;#1057;&amp;#1058;&amp;#1056;&amp;#1054;&amp;#1045;&amp;#1050; */     options: {         attr_name: "tooltip", // &amp;#1085;&amp;#1072;&amp;#1080;&amp;#1084;&amp;#1077;&amp;#1085;&amp;#1086;&amp;#1074;&amp;#1072;&amp;#1085;&amp;#1080;&amp;#1077; &amp;#1089;&amp;#1086;&amp;#1079;&amp;#1076;&amp;#1072;&amp;#1074;&amp;#1072;&amp;#1077;&amp;#1084;&amp;#1086;&amp;#1075;&amp;#1086; tooltip'&amp;#1086;&amp;#1075;&amp;#1086; &amp;#1072;&amp;#1090;&amp;#1088;&amp;#1080;&amp;#1073;&amp;#1091;&amp;#1090;&amp;#1072;         blank_text: "{откроется в новом окне}", // &amp;#1090;&amp;#1077;&amp;#1082;&amp;#1089;&amp;#1090; &amp;#1076;&amp;#1083;&amp;#1103; &amp;#1089;&amp;#1089;&amp;#1099;&amp;#1083;&amp;#1086;&amp;#1082; &amp;#1089; target="_blank"         newline_entity: "  ", // &amp;#1091;&amp;#1082;&amp;#1072;&amp;#1078;&amp;#1080;&amp;#1090;&amp;#1077; &amp;#1087;&amp;#1091;&amp;#1089;&amp;#1090;&amp;#1091;&amp;#1102; &amp;#1089;&amp;#1090;&amp;#1088;&amp;#1086;&amp;#1082;&amp;#1091; (""), &amp;#1077;&amp;#1089;&amp;#1083;&amp;#1080; &amp;#1085;&amp;#1077; &amp;#1093;&amp;#1086;&amp;#1090;&amp;#1080;&amp;#1090;&amp;#1077; &amp;#1080;&amp;#1089;&amp;#1087;&amp;#1086;&amp;#1083;&amp;#1100;&amp;#1079;&amp;#1086;&amp;#1074;&amp;#1072;&amp;#1090;&amp;#1100; &amp;#1074; tooltip'&amp;#1072;&amp;#1093; &amp;#1084;&amp;#1085;&amp;#1086;&amp;#1075;&amp;#1086;&amp;#1089;&amp;#1090;&amp;#1088;&amp;#1086;&amp;#1095;&amp;#1085;&amp;#1086;&amp;#1089;&amp;#1090;&amp;#1100;; &amp;#1077;&amp;#1078;&amp;#1077;&amp;#1083;&amp;#1080; &amp;#1093;&amp;#1086;&amp;#1090;&amp;#1080;&amp;#1090;&amp;#1077;, &amp;#1090;&amp;#1086; &amp;#1091;&amp;#1082;&amp;#1072;&amp;#1078;&amp;#1080;&amp;#1090;&amp;#1077; &amp;#1090;&amp;#1086;&amp;#1090; &amp;#1089;&amp;#1080;&amp;#1084;&amp;#1074;&amp;#1086;&amp;#1083; &amp;#1080;&amp;#1083;&amp;#1080; &amp;#1089;&amp;#1080;&amp;#1084;&amp;#1074;&amp;#1086;&amp;#1083;&amp;#1099;, &amp;#1082;&amp;#1086;&amp;#1090;&amp;#1086;&amp;#1088;&amp;#1099;&amp;#1077; &amp;#1073;&amp;#1091;&amp;#1076;&amp;#1091;&amp;#1090; &amp;#1079;&amp;#1072;&amp;#1084;&amp;#1077;&amp;#1085;&amp;#1103;&amp;#1090;&amp;#1100;&amp;#1089;&amp;#1103; &amp;#1085;&amp;#1072; &amp;#1087;&amp;#1077;&amp;#1088;&amp;#1077;&amp;#1074;&amp;#1086;&amp;#1076; &amp;#1089;&amp;#1090;&amp;#1088;&amp;#1086;&amp;#1082;&amp;#1080;         max_width: 250, // &amp;#1084;&amp;#1072;&amp;#1082;&amp;#1089;&amp;#1080;&amp;#1084;&amp;#1072;&amp;#1083;&amp;#1100;&amp;#1085;&amp;#1072;&amp;#1103; &amp;#1096;&amp;#1080;&amp;#1088;&amp;#1080;&amp;#1085;&amp;#1072; tooltip'&amp;#1072; &amp;#1074; &amp;#1087;&amp;#1080;&amp;#1082;&amp;#1089;&amp;#1077;&amp;#1083;&amp;#1072;&amp;#1093;; &amp;#1086;&amp;#1073;&amp;#1085;&amp;#1091;&amp;#1083;&amp;#1080;&amp;#1090;&amp;#1077; &amp;#1101;&amp;#1090;&amp;#1086; &amp;#1079;&amp;#1085;&amp;#1072;&amp;#1095;&amp;#1077;&amp;#1085;&amp;#1080;&amp;#1077;, &amp;#1077;&amp;#1089;&amp;#1083;&amp;#1080; &amp;#1096;&amp;#1080;&amp;#1088;&amp;#1080;&amp;#1085;&amp;#1072; &amp;#1076;&amp;#1086;&amp;#1083;&amp;#1078;&amp;#1085;&amp;#1072; &amp;#1073;&amp;#1099;&amp;#1090;&amp;#1100; &amp;#1085;&amp;#1077;&amp;#1083;&amp;#1080;&amp;#1084;&amp;#1080;&amp;#1090;&amp;#1080;&amp;#1088;&amp;#1086;&amp;#1074;&amp;#1072;&amp;#1085;&amp;#1072;         delay: 100, // &amp;#1079;&amp;#1072;&amp;#1076;&amp;#1077;&amp;#1088;&amp;#1078;&amp;#1082;&amp;#1072; &amp;#1087;&amp;#1088;&amp;#1080; &amp;#1087;&amp;#1086;&amp;#1082;&amp;#1072;&amp;#1079;&amp;#1077; tooltip'&amp;#1072; &amp;#1074; &amp;#1084;&amp;#1080;&amp;#1083;&amp;#1083;&amp;#1080;&amp;#1089;&amp;#1077;&amp;#1082;&amp;#1091;&amp;#1085;&amp;#1076;&amp;#1072;&amp;#1093;         skip_tags: ["link", "style"] // &amp;#1090;&amp;#1077;&amp;#1075;&amp;#1080;, &amp;#1091; &amp;#1082;&amp;#1086;&amp;#1090;&amp;#1086;&amp;#1088;&amp;#1099;&amp;#1093; &amp;#1085;&amp;#1077; &amp;#1086;&amp;#1073;&amp;#1088;&amp;#1072;&amp;#1073;&amp;#1072;&amp;#1090;&amp;#1099;&amp;#1074;&amp;#1072;&amp;#1077;&amp;#1084; &amp;#1072;&amp;#1090;&amp;#1088;&amp;#1080;&amp;#1073;&amp;#1091;&amp;#1090;&amp;#1099; alt &amp;#1080; title     },     /* &amp;#1050;&amp;#1054;&amp;#1053;&amp;#1045;&amp;#1062; &amp;#1053;&amp;#1040;&amp;#1057;&amp;#1058;&amp;#1056;&amp;#1054;&amp;#1045;&amp;#1050; */     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 &amp;&amp; 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 &amp;&amp; !window.opera ? document.all : document.getElementsByTagName("*"); // in opera 9 document.all produces type mismatch error         var l = a.length;         for (var i = 0; i &lt; 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 &amp; name="title"; then IE crashes; so...             if (tooltip_title &amp;&amp; typeof tooltip_title != "string") tooltip_title = "";             var tooltip_alt = a[i].getAttribute("alt");             var tooltip_blank = a[i].getAttribute("target") &amp;&amp; a[i].getAttribute("target") == "_blank" &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; 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) &amp;&amp; tooltip_blank){                 //             }         }         document.onmousemove = tooltip.m;         window.onscroll = tooltip.h;         tooltip.a(-99, -99);     },        _: function(s){         s = s.replace(/&amp;/g,"&amp;amp;");         s = s.replace(/&lt;/g,"&amp;lt;");         s = s.replace(/&gt;/g,"&amp;gt;");         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"), "&lt;br /&gt;");             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 &amp;&amp; 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 &amp;&amp; document.all.item &amp;&amp; !window.opera) tooltip.t.style.width = tooltip.options.max_width &amp;&amp; tooltip.t.offsetWidth &gt; 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 &gt; w_width) tooltip.t.style.left = w_width - t_width + "px";         if (y + t_height &gt; 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 &lt; 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); } &lt;/script&gt;       После внедрения кода на ваш блог, предстоит еще один незначительный шаг, а именно прописать атрибут title (в котором будет текст всплывающей подсказки) или к картинке или к ссылке. Разберемся вначале с картинкой. Во время редактирования сообщения при нажатии на картинку выдается контекстное меню "Маленький-Средний-Крупный-Исходный размер-....-Добавить подпись-Свойства-Удалить". Надо выбрать "Свойства" и заполнить поле (с текстом для подсказки) для title ("текст заголовка") и можете (по желанию) заполнить alt ("альтернативный текст").        С картинкой разобрались, теперь как прописать title для ссылки? Вставляете просто в конструкцию ссылки - атрибут title, выделенный красным цветом.   &lt; a href="http://СТРАНИЦА КУДА ВЕДЕТ ССЫЛКА/" title="ТЕКСТ ВСПЛЫВАЮЩЕЙ ПОДСКАЗКИ"&gt;Текст ссылки&lt; /a&gt;   Если у вас все получилось, то поздравляю с новым усовершенствованием вашего блога!  http://blogodel.com/
10	http://blogodel.com/2013/06/Unikalnye-socialnye-knopki-v-vide-dvigajushhihsja-mashinok-dlja-Blogspot-Blogger.html	Уникальные социальные кнопки в виде двигающихся машинок, для Блогспот, Блоггер	2013-07-16T10:19:54.983-07:00	___	        Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)     Давненько я вас, не радовал новыми виджетами для Блогспот, Блоггер. Сегодня я предлагаю совершенно уникальную вещь - социальные кнопки в виде двигающихся машинок!        Полюбуйтесь!                     Виджет пришлось немного "довести до ума": сделать остановку при наведении курсора и добавить машинку с Гугл +.   Код вставляется очень просто:    В Дизайн - Добавить гаджет - HTML/JavaScript         &lt;div style="position: relative; z-index: 65535; left: 0px; bottom: -3px; width:100%;"&gt; &lt;marquee onmouseover=this.stop() onmouseout=this.start() &gt;&lt;a href="адрес вашего профиля Facebook" target="blank"&gt; &lt;abbr title="Подпишитесь!"&gt;&lt;img src="http://3.bp.blogspot.com/-5QIHreJnNjs/UVfcvUGusHI/AAAAAAAAFJY/hU52X7HJMnw/s1600/Social-Truck_fb2.png" width="120px" height="100px" /&gt; &lt;/abbr&gt; &lt;/a&gt; &lt;a href="адрес вашего Feed-канала" target="blank"&gt; &lt;abbr title="Подпишитесь!"&gt;&lt;img src="http://4.bp.blogspot.com/-RLtBIrJOZII/UVfcwigIc2I/AAAAAAAAFJg/uKKtDZGlwOk/s1600/Social-Truck_rss.png" width="120px" height="100px" /&gt; &lt;/abbr&gt; &lt;/a&gt;&lt;a href="адрес вашего профиля в Twitter" target="blank"&gt; &lt;abbr title="Подпишитесь!"&gt;&lt;img src="http://3.bp.blogspot.com/-HZV2Agt3tLI/UVfcxJitLuI/AAAAAAAAFJo/yuuhQf1IQ_8/s1600/Social-Truck_twi.png" width="120px" height="100px" /&gt; &lt;/abbr&gt; &lt;/a&gt; &lt;a href="адрес вашего профиля в Google +" target="blank"&gt; &lt;abbr title="Подпишитесь!"&gt;&lt;img src="http://s017.radikal.ru/i435/1306/4a/fec6be0cf802.jpg" width="120px" height="100px" /&gt; &lt;/abbr&gt; &lt;/a&gt;&lt;/marquee&gt;&lt;/div&gt;    Там где маркировано красным, необходимо внести адрес-урл ваших профилей в социальных сетях.   http://blogodel.com/
11	http://blogodel.com/2013/06/Zakrojut-li-Blogspot-Blogger.html	Закроют ли Блогспот, Блоггер?	2013-07-16T10:20:14.625-07:00	___	   Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)     Невеселые сомнения и тягостные раздумья о судьбах Гугловских сервисов, заставили меня опубликовать некоторые "мысли вслух". Вот она печальная статистика: GReader закрывается в июле, FriendConnect может закрыться, FeedBurner тоже на очереди! Невольно напрашивается логический вопрос: а нужен ли Гуглу - Блогспот, Блоггер?   Вроде бы ничего не предвещает скоропостижную кончину Гугло-блога (Блогспота). Время от времени появляются новые настройки, новые возможности. Блоггер, как нельзя лучше готов к взаимодействию с поисковыми системами (даже с Яндексом).  Но все же!?  Складывается подозрение, что имеет место быть "ползучая" проблема погружения Блогспота в социальную сеть Гугл+, с последующей дематерилизацией! Делать вид, что ничего не происходит, это все равно, что уподобляться страусу, который прячет голову в песок!        Началось все с профиля.   Как неудобно теперь просматривать профиль! Вместо четкого представления об авторе и его блогах, какая то "каша" из обрывочных анонсов непонятно чего!   Потом новые комментарии от Гугл+?  Вроде бы безобидное нововведение, но как сильно отдает "душком" зависимости от социальной сети.   И все сильнее и сильнее складывается впечатление, что не Гугл+ приложение Блогспота, а наоборот! Формальная, но столь привлекательная индивидуальность Блоггера, все больше сжимается, как шагреневая кожа!     Поэтому лично я, ничего хорошего от социальной сети Гугл+ для Блогспота не жду! Единственная надежда на то, что проект Гугловской социальной сети ожидаемого успеха не приносит и не принесет! И будет по этой причине закрыт! Пока люди формально вступают в эту сеть, что бы пользоваться Гугловкими сервисами. Активность аккаунтов при этом - практически нулевая! Кроме того, я думаю, что связка Майкрсофт - Фейсбук, не допустит Гугл в свою епархию!   Все это, конечно дело завтрашнего дня и поэтому советую (пользователям платформы Блогспот) - крепко держать руку на "пульсе перемен", что бы вовремя "эвакуироваться" с тонущего корабля!    http://blogodel.com/
12	http://blogodel.com/2013/06/Zakrojut-li-Google-Friend-Connect-dlja-Blogger-Blogspot.html	Закроют ли Google Friend Connect для Блоггер, Блогспот?	2013-06-05T03:54:46.202-07:00	___	    Пост (в основном) для пользователей:  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/
13	http://blogodel.com/2013/05/banner-s-kukami-i-s-tajmerom-dlja-Blogger-Blogspot.html	Информационно приветственный баннер, который не раздражает читателей (с куками) и с таймером, для Блоггер, Блогспот	2013-06-20T05:15:02.948-07:00	___	     Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)     Вот такое замысловатое название у изделия, которое я предлагаю вашему вниманию. Этот баннер "изготовлен" мною из нелюбимых читателями всплывающих окон.   Всплывающих окон больше не будет, а вместо них, вы можете вставить любое изображение. При переходе нового читателя картинка появится только один раз и не будет "преследовать" посетителя во время "листания" блога.  Скрипт не имеет аналогов в интернете, так как обладает одновременно двумя особенностями - таймером (картинка без необходимости нажимать на close пропадает сама) и так называемыми куками (скрипт "запоминает" посетителя и показывает картинку только один раз и только новым посетителям).        Код вставляется очень просто:    В Дизайн - Добавить гаджет - HTML/JavaScript         &lt;style&gt;  #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position: fixed;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}.cboxPhoto{float:left; margin:auto; border:0; display:block;} #cboxSlideshow{cursor:pointer;} &lt;/style&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function() { setTimeout ("$('#popup2').fadeIn('fast');", 6000); setTimeout ("$('#popup2').fadeOut('slow');", 9000); }); &lt;/script&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24* 7 ; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"0px", inline:true, href:"#subscribe"}); } }); &lt;/script&gt; &lt;!-- This contains the hidden content for inline calls --&gt; &lt;div style='display:none'&gt; &lt;div id='subscribe' style='padding:0px;'&gt;&lt;center&gt;&lt;span id='popup2'&gt;&lt;img border="0" height="69" src="http://3.bp.blogspot.com/-Z1yxE_YzLjw/UN-1OavIMxI/AAAAAAAACns/WLWM8SQ5wIs/s1600/cooltext868333624.png" width="490" /&gt;&lt;/span&gt;&lt;/center&gt;&lt;/div&gt; &lt;/div&gt;   Как вы уже догадались, там где выделено красным, вы можете вставить код картинки или еще проще урл.-адрес картинки, туда где синий цвет.    Для проверки и настройки скрипта, я рекомендую редактор:   http://www.timsfreestuff.com/HTMLEditor/     Внимание! картинка будет показываться только один раз! Если пожелаете увидеть, как работает скрипт, зайдите на свой блог с другого браузера.  Если у вас уже есть "двигающиеся" виджеты со скриптом jQuery, то код может не работать!  http://blogodel.com/
14	http://blogodel.com/2013/05/Volshebnoe-jajco-socialnyh-knopok-dlja-Blogspot-Blogger.html	Волшебное яйцо - социальных кнопок, для Блогспот, Блоггер	2013-05-18T09:22:57.548-07:00	___	  Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)     Это "волшебное" яйцо когда то красовалось на этом блоге и по моему мнению, является самым оригинальным размещением социальных кнопок, которое я когда либо видел.      См. демо: http://blogodel-test.blogspot.ru/       Но из-за загруженности моего блога скриптами, от этого чуда к сожалению пришлось отказаться.   Виджет этот "гуляет" по Рунету уже давно НО! Трудоемкая операция внедрения кода, связанная с необходимостью "ковыряться" в шаблоне Блогспота, для многих являлась препятствием. Мой вклад в модернизацию кода виджета заключается в том, что код теперь вставляется очень просто:   В Дизайн - Добавить гаджет - HTML/JavaScript        &lt;script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'&gt;&lt;/script&gt; &lt;script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'&gt;&lt;/script&gt; &lt;script type='text/javascript'&gt;stLight.options({publisher: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", onhover:false}); &lt;/script&gt; &lt;link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/&gt;  &lt;div style='position: fixed; bottom: 2%; left: 2%;'&gt; &lt;div class='shareEgg' id='shareThisShareHeart'&gt;&lt;/div&gt; &lt;/div&gt; &lt;script type='text/javascript'&gt;stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:'blog',url:'http://blogodel.com/',theme:'shareheart'});&lt;/script&gt;&lt;a href="http://tinyurl.com/brcxahg"&gt;&lt;script type="text/javascript"&gt;&lt;!-- document.write(unescape('%3C%73%70%61%6E%20%73%74%79%6C%65%3D%22%66%6F%6E%74%2D%73%69%7A%65%3A%20%78%78%2D%73%6D%61%6C%6C%3B%22%3E%62%6C%6F%67%6F%64%65%6C%3C%2F%73%70%61%6E%3E')); //&lt;/script&gt;&lt;/a&gt;   Там где выделено красным, вставляется урл.- адрес вашего блога.  http://blogodel.com/
15	http://blogodel.com/2013/05/Unikalnoe-slajd-shou-v-vide-raskryvajushhejsja-knigi-dlja-Blogger-Blogspot.html	Уникальное слайд-шоу в виде раскрывающейся книги, для Блоггер, Блогспот	2013-10-16T10:56:02.266-07:00	___	    Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)    Опубликованный мною "Самый лучший слайдер-ротатор контента" вызвал многочисленные отклики и поэтому сегодня, уважаемые читатели, я публикую для вас еще один виджет из этой серии. Речь идет о слайд-шоу, в виде раскрывающейся книги.                          Устанавливается слайд-шоу очень просто! В Дизайн - Добавить гаджет - HTML/JavaScript или в HTML редактор сообщений Блогспот.        &lt;script type="text/javascript"&gt;   // 7 variables to control behavior   var Book_Image_Width    =140;   var Book_Image_Height   =225;   var Book_Border         =true;   var Book_Border_Color   ="gray";   var Book_Speed          =15;   var Book_NextPage_Delay =1500; //1 second=1000   var Book_Vertical_Turn  =0;   // variables for content   var random_posts        = true; // random posts   var numposts_gal        = 10;   // number of posts   &lt;/script&gt;   &lt;script src="http://yourjavascript.com/308313822/bookflip.txt.js" type="text/javascript"&gt;&lt;/script&gt;   &lt;script src="http://yourjavascript.com/223538418/bookflip_btt.txt.js" type="text/javascript"&gt;&lt;/script&gt;   &lt;div id="Book" style="position:relative"&gt;   &lt;img src="http://4.bp.blogspot.com/-9sc2d4nT_1g/T1DcFAm2NuI/AAAAAAAAB4k/J0KUHhwrTVA/s1600/placeholder.gif" width="144" height="227"&gt;   &lt;/div&gt;   &lt;script src="http://blogodel.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts"&gt;&lt;/script&gt;   &lt;script type="text/javascript"&gt;   ImageBook();   &lt;/script&gt;    Красным выделены размеры "книги" и то место, куда вставить адрес вашего блога.  http://blogodel.com/
16	http://blogodel.com/2013/05/Menju-dlja-Blogger-Blogspota-kotoroe-vsegda-svrhu.html	Меню для Блоггер, Блогспот, которое всегда сверху	2013-08-29T10:49:07.482-07:00	___	        Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)      Выполнил заявку одного читателя, переделал код меню. Изначально меню отображалось внизу страницы, теперь наверху. Я уже писал о том "Как убрать NavBar - панель навигации, узкую полоску вверху Блогспот, Blogger?" и благодаря этому меню, вы сможете использовать освободившееся место с пользой. Кроме того, меню отображается всегда сверху, несмотря на прокрутку страницы.          Устанавливается меню очень просто! В Дизайн - Добавить гаджет - HTML/JavaScript.   &lt;style&gt; #stickey_footer { /* This will make your footer stay where it is */  background: none repeat scroll 0 0 #1D1D1D;  border: 1px solid rgba(0, 0, 0, 0.3);  bottom: 0;  font-family: Arial, Helvetica, sans-serif;  height: 45px;  left: 50%;  margin: 0 auto 0 -490px;  padding: 0 10px;  position: fixed; top: 0px;  text-shadow: 1px 1px 1px #000000;  width: 960px; z-index:999; } /* border curves */ #stickey_footer {  -moz-border-radius: 0px 0px 10px 10px;  -webkit-border-radius: 0px 0px 10px 10px;  border-radius: 0px 0px 10px 10px; } /* hover effect */ #stickey_footer:hover {  background: none repeat scroll 0 0 #2b2a2a; } /* shadow for the footer*/ #stickey_footer {  -moz-box-shadow:0px 0px 11px #191919;  -webkit-box-shadow:0px 0px 11px #191919;  box-shadow:0px 0px 11px #191919; } #footer_menu {  margin: 0;  padding: 0;  width:auto; } #footer_menu li {  list-style: none;  float: left;  font-size:12px;  padding: 12px 14px 14px 14px;  border-right:1px solid rgba(0, 0, 0, 0.4);  background: rgba(0, 0, 0, 0.1); } #footer_menu li:hover {  background:#202020; /* Fallback color for old browsers */  background: rgba(0, 0, 0, 0.3); } #footer_menu .imgmenu:hover {  background:url("images/home_hover.png") 23px 5px no-repeat; } #footer_menu li a {  display: block;  color: #cccccc;  text-decoration: none; } #footer_menu li a:hover {  color: #ffffff; } #footer_menu li span {  display:none; } #stickey_footer #social_icons {  float:right; /* social icons positions */  width:auto;  margin:-45px 15px 0px;  padding:0px;  overflow:hidden; } #stickey_footer #social_icons li {  margin-right:12px; /* 12px is the space between each one of them */  float:left;  width:24px;  padding:0px;  height:32px;  list-style:none;  _margin-right:0px; /* this is for IE6 only */ &lt;/style&gt; &lt;div id="stickey_footer"&gt; &lt;div id="stickey_footer"&gt; &lt;ul id="footer_menu"&gt;  &lt;li&gt;&lt;a href="Ссылка на страницу"&gt;Название&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="Ссылка на страницу"&gt;Название&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="Ссылка на страницу"&gt;Название&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="Ссылка на страницу"&gt;Название&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="Ссылка на страницу"&gt;Название&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;   &lt;/div&gt;&lt;/div&gt;   Меню можно интегрировать в любой дизайн изменив цвет. Красная маркировка - цвет меню. Желтая - цвет меню при наведении.    По заявкам читателей, публикую код меню с переводчиком!         &lt;style&gt; #stickey_footer { /* This will make your footer stay where it is */  background: none repeat scroll 0 0 #1D1D1D;  border: 1px solid rgba(0, 0, 0, 0.3);  bottom: 0;  font-family: Arial, Helvetica, sans-serif;  height: 45px;  left: 50%;  margin: 0 auto 0 -490px;  padding: 0 10px;  position: fixed; top: 0px;  text-shadow: 1px 1px 1px #000000;  width: 960px; z-index:999; } /* border curves */ #stickey_footer {  -moz-border-radius: 0px 0px 10px 10px;  -webkit-border-radius: 0px 0px 10px 10px;  border-radius: 0px 0px 10px 10px; } /* hover effect */ #stickey_footer:hover {  background: none repeat scroll 0 0 #2b2a2a; } /* shadow for the footer*/ #stickey_footer {  -moz-box-shadow:0px 0px 11px #191919;  -webkit-box-shadow:0px 0px 11px #191919;  box-shadow:0px 0px 11px #191919; } #footer_menu {  margin: 0;  padding: 0;  width:auto; } #footer_menu li {  list-style: none;  float: left;  font-size:12px;  padding: 12px 14px 14px 14px;  border-right:1px solid rgba(0, 0, 0, 0.4);  background: rgba(0, 0, 0, 0.1); } #footer_menu li:hover {  background:#202020; /* Fallback color for old browsers */  background: rgba(0, 0, 0, 0.3); } #footer_menu .imgmenu:hover {  background:url("images/home_hover.png") 23px 5px no-repeat; } #footer_menu li a {  display: block;  color: #cccccc;  text-decoration: none; } #footer_menu li a:hover {  color: #ffffff; } #footer_menu li span {  display:none; } #google_translate_element {  float:right; /* social icons positions */  width:auto;  margin:8px 15px 0px;  padding:0px;  overflow:hidden; } #stickey_footer #social_icons li {  margin-right:12px; /* 12px is the space between each one of them */  float:left;  width:24px;  padding:0px;  height:32px;  list-style:none;  _margin-right:0px; /* this is for IE6 only */ &lt;/style&gt; &lt;div id="stickey_footer"&gt; &lt;div id="stickey_footer"&gt; &lt;ul id="footer_menu"&gt; &lt;li&gt;&lt;a href="Ссылка на страницу"&gt;Название&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="Ссылка на страницу"&gt;Название&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="Ссылка на страницу"&gt;Название&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="Ссылка на страницу"&gt;Название&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="Ссылка на страницу"&gt;Название&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;&lt;div id="google_translate_element"&gt;&lt;/div&gt;&lt;div id='google_translate_element'&gt;&lt;/div&gt; &lt;script&gt;     function googleTranslateElementInit() {       new google.translate.TranslateElement({         pageLanguage: 'ru',         autoDisplay: 'true',         layout: google.translate.TranslateElement.InlineLayout.SIMPLE       }, 'google_translate_element');     }   &lt;/script&gt; &lt;script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'&gt;&lt;/script&gt;  &lt;/div&gt;&lt;/div&gt;     По заявкам читателей публикую код для баннера или рисунка по центру блога (для важных объявлений).     &lt;style&gt;#stickey_footer { bottom: 0; font-family: Arial, Helvetica, sans-serif; height: 45px; left: 50%; margin: 0 auto 0 -300px; padding: 0 10px; position: fixed; top: 300px;}&lt;/style&gt;&lt;div id="stickey_footer"&gt;&lt;img border="0" height="69" src="http://3.bp.blogspot.com/-Z1yxE_YzLjw/UN-1OavIMxI/AAAAAAAACns/WLWM8SQ5wIs/s1600/cooltext868333624.png" width="490" /&gt;&lt;/div&gt;   Там, где выделено красным вставляете ваше изображение!   http://blogodel.com/
17	http://blogodel.com/2013/04/Animirovannye-privetstvija-na-Blogger-Blogspot.html	Анимированные приветствия на Блоггер, Блогспот	2013-04-28T11:04:53.845-07:00	___	      Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)    Сегодня, дорогие друзья, делюсь с вами подборкой замечательных анимированных приветствий на ваш блог. На любой вкус и дизайн!        Устанавливаются приветствия очень просто! В Дизайн - Добавить гаджет - HTML/JavaScript или редактор сообщений.              &lt;center&gt; &lt;object data="http://xflash.ucoz.ru/ogor/376.swf" height="180" type="application/x-shockwave-flash" width="260"&gt;&lt;param name="bgcolor" value="#ffffff" /&gt; &lt;param name="allowFullScreen" value="true" / &lt;param name="allowScriptAccess" value="always" /&gt; &lt;param name="wmode" value="transparent" /&gt; &lt;param name="movie" value="" /&gt;  &lt;param name="flashvars" value="st=;file=" /&gt;&lt;/object&gt;&lt;/center&gt;              &lt;center&gt; &lt;object data="http://xflash.ucoz.ru/ogor/343.swf" height="400" type="application/x-shockwave-flash" width="450"&gt;&lt;param name="bgcolor" value="#ffffff" /&gt; &lt;param name="allowFullScreen" value="true" / &lt;param name="allowScriptAccess" value="always" /&gt; &lt;param name="wmode" value="transparent" /&gt; &lt;param name="movie" value="" /&gt;  &lt;param name="flashvars" value="st=;file=" /&gt;&lt;/object&gt;&lt;/center&gt;        &lt;center&gt; &lt;div align="center"&gt; &lt;embed height="45" src="http://chasikov.net.ru/flash/Li/MC10.swf" type="application/x-shockwave-flash" width="300" wmode="transparent"&gt;&lt;/embed&gt;&lt;/div&gt; &lt;/center&gt;   Красный цвет приветствия  &lt;center&gt;&lt;div align="center"&gt; &lt;embed height="45" src="http://chasikov.net.ru/flash/Li/MC10.swf" type="application/x-shockwave-flash" width="300" wmode="transparent"&gt;&lt;/embed&gt;&lt;/div&gt; &lt;/center&gt;    Синий цвет приветствия   &lt;center&gt;&lt;div align="center"&gt;&lt;embed src="http://chasikov.net.ru/flash/Li/MC8.swf" width="300" height="45" wmode="transparent" type="application/x-shockwave-flash"&gt;&lt;/embed&gt;&lt;/div&gt;&lt;/center&gt;    Зеленый цвет приветствия  &lt;center&gt;&lt;div align="center"&gt;&lt;embed src="http://chasikov.net.ru/flash/Li/MC6.swf" width="300" height="45" wmode="transparent" type="application/x-shockwave-flash"&gt;&lt;/embed&gt;&lt;/div&gt;&lt;/center&gt;  http://blogodel.com/
18	http://blogodel.com/2013/04/Kalligraficheskaja-podpis-na-kirillice-v-konce-stati-dlja-Blogspot-Blogger.html	Каллиграфическая подпись на кириллице в конце статьи, для Блогспот, Блоггер	2013-04-16T15:07:04.474-07:00	___	  Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)        Вспомнилось мне сегодня, как я на первом своем блоге сгенеририровал онлайн способом подпись в конце статьи и как радовался таковой. И захотелось мне поделится с вами, как это сделать. Но все оказалось непросто! Дело в том, что мой никнейм на латыни и здесь проблем нет никаких. Вот адреса соответствующих онлайн сервисов:    http://cooltext.com/  http://www.mylivesignature.com/mls_wizard1_1.php     А вот для тех, у кого подпись на кириллице, возникли проблемы. Собственно сегодня, об этом и будет речь. Вот образец того что может получится:            Если вас подпись такого вида устраивает, продолжаем дальше. Для того, что бы создать красивую подпись, мы пойдем в обход, используя русскоязычный сервис для обработки фотографий: http://www.effectfree.ru/ Поскольку это сервис обработки фотографий, то мы поступим хитро и сделаем скриншот пустого места вашего блога, что бы задний фон соответствовал цвету шаблона (в данном случае белого). Примерно вот такой:        Тут возникает вопрос, как сделать скриншот. Я могу помочь только пользователям Хроме и мануал вы сможете найти в  "Лучшие бесплатные программы для блогера"    После того, как вы сделаете скриншот, необходимо перейти на страницу сайта effectfree.ru и загрузить ваш скриншот с жесткого диска, а затем нажать:                     Далее вы нажимаете                  И выбираете понравившийся вам шрифт                Потом нажимаем            И в самом конце                    Все, изображение с подписью у вас на жестком диске. Теперь, с жесткого диска размещаем это как картинку в текстовом редакторе Блогспота. В исходном коде у вас должно получится следующее:      &lt;div class="separator" style="clear: both; text-align: center;"&gt; &lt;a href="http://3.bp.blogspot.com/-9vuhJFbQa7E/UWrepoxC37I/AAAAAAAADeY/XNFDWIiMry0/s1600/2421da7f.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"&gt;&lt;img border="0" src="http://3.bp.blogspot.com/-9vuhJFbQa7E/UWrepoxC37I/AAAAAAAADeY/XNFDWIiMry0/s1600/2421da7f.jpg" /&gt;&lt;/a&gt;&lt;/div&gt;   Убираем лишнее (то, что отмечено красным) и у нас остается:   &lt;img border="0" src="http://3.bp.blogspot.com/-9vuhJFbQa7E/UWrepoxC37I/AAAAAAAADeY/XNFDWIiMry0/s1600/2421da7f.jpg" /&gt;     Все, код подписи почти готов. Почти? Осталась маленькая проблемка, как убрать рамку? Ведь это изображение!  Подпись в рамке будет смотреться некрасиво!   Поэтому, в самый конец кода, надо добавить следующую строку:       style="border: none; box-shadow: none;"       И в должно получится так:       &lt;img border="0" src="http://4.bp.blogspot.com/-9vuhJFbQa7E/UWrepoxC37I/AAAAAAAADec/Le3InTJyjwQ/s1600/2421da7f.jpg"  style="border: none; box-shadow: none;" /&gt;       Все, подпись готова!    Куда добавлять подпись?    Я бы посоветовал, начинающим блогерам, ставить подпись непосредственно в редактор сообщений Блогспота.  Для более опытных товарищей, код размещать в шаблоне перед:  &lt;div class='post-footer-line post-footer-line-1'/&gt;  заключённый в такую конструкцию:  &lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt; Код автографа&lt;/b:if&gt;        http://blogodel.com/
19	http://blogodel.com/2013/04/Krasivoe-oformlenie-citat-na-Blogspot-Blogger.html	Красивое оформление цитат на Блогспот, Блоггер	2013-04-12T10:56:26.441-07:00	___	  Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)    Сегодня, дорогие друзья, речь пойдет о цитатах на Блогспот Блоггер. Для тех, кто еще не знает как в редакторе оформить цитату, предлагаю скриншот. Текст надо обвести (смаркировать), а потом кликнуть на символ кавычки (туда, куда указывает стрелочка).      К сожалению особенного оформления цитат на Блогспот не предусмотрено и текст всего лишь "ужимается". Поэтому мы установим дополнительный код, который придаст цитатам более презентабельный вид,  Устанавливается код очень просто! В Дизайн - Добавить гаджет - HTML/JavaScript, необходимо добавить следующий код, который я и оформил им же, как цитату:   &lt;style&gt;.post blockquote { font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic; background-color: #F2F1F1; color: #000; margin: 5px 10px; padding: 20px 20px 20px 20px; border: 2px dotted lightgrey; border-radius: 10px; box-shadow: -1px -1px 12px 2px gainsboro; transition: background-color .777s; -webkit-transition: background-color .777s; -moz-transition: background-color .777s; -o-transition: background-color .777s; -ms-transition: background-color .777s; } .post blockquote:hover { background-color: CornflowerBlue ; color: #fff; } .post blockquote:active { background-color: lightblue ; ; color: #000; } &lt;/style&gt;      http://blogodel.com/
20	http://blogodel.com/2013/04/Krasivoe-oformlenie-zagolovka-stati-Blogspot-Blogger.html	Красивое оформление заголовка статей Блогспот, Блоггер	2013-04-07T09:46:40.971-07:00	___	   Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)    Вот так примерно будет выглядеть оформленный заголовок:     Если вам такое украшение вам понравилось, то переходим к практической части. Сразу оговорюсь, с картинкой перед заголовком страницы это не совместимо! Или картинка или оформление!    Устанавливается украшение очень просто. В Дизайн - Добавить гаджет - HTML/JavaScript, необходимо добавить следующий код:      &lt;style&gt;.post h3 {background: url("http://3.bp.blogspot.com/-gLnHp4LoL-Q/T-hYlORTm3I/AAAAAAAAA0s/IN1bvxW-hwg/s1600/h3.png") no-repeat 4px center transparent;font-size: 20px;font-family: Oswald;font-weight:normal;padding: 3px 10px 3px 80px;color: #0274be;border: 3px solid #5bb5f0;text-shadow: 0 1px 0 #CCC;-moz-border-radius: 60px;-webkit-border-radius: 60px;border-radius: 60px;-moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;-webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;margin: 15px 3px;text-transform: uppercase;line-height: 1.3;}&lt;/style&gt;  http://blogodel.com/
21	http://blogodel.com/2013/04/Unikalnyj-skript-knopki-Vverh-Vniz-s-medlennoj-prokrutkoj-dlja-chtenija-dlja-Blogspot-Blogger.html	Уникальный скрипт кнопки "Вверх - Вниз" с медленной автоматической прокруткой для чтения, для Блогспот, Блоггер	2013-04-03T06:26:37.433-07:00	___	  Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)        Сегодня я публикую еще один уникальный скрипт, так называемой кнопки "Наверх".   В чем же уникальность?   Во первых, можно прокручивать страницу не только вверх, но и в низ! А во вторых, (в этом уникальность) если нажать туда, куда указывает красная стрелка, страница будет сама, автоматически, медленно прокручиваться до самого низа! Читателю при этом, ничего делать не надо - только читать или рассматривать фотографии!     Такая кнопка в первую очередь будет полезна тем, у кого длинные статьи или много фотографий!  Посмотреть как работает кнопка можно здесь:   http://russiaphotoblog.blogspot.de/2012/01/frost-in-russia.html   Кнопка устанавливается очень просто. В Дизайн - Добавить гаджет - HTML/JavaScript, необходимо добавить следующий код:      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;&lt;script src='http://phonedevelop.googlecode.com/files/updownPhonedevelop.js' type='text/javascript'&gt;&lt;/script&gt;    Внимание, скрипт капризный и на этом блоге не пошел, потому что много "двигающихся" виджетов и со скриптом jquery вступает в конфликт! Если у вас уже установлен скрипт вида указанным ниже, то кнопка РАБОТАТЬ НЕ БУДЕТ! &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;  http://blogodel.com/
22	http://blogodel.com/2013/03/Kartinka-pered-zagolovkom-stranicy-na-Blogspot-Blogger.html	Картинка перед заголовком страницы на Блогспот, Блоггер	2013-03-30T19:11:06.879-07:00	___	  Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)        Сегодня речь пойдет о маленьком косметическом украшении на ваш Блогспот, Блоггер. Небольшая картинка перед заголовком статьи, бесспорно является элементом эксклюзивного дизайна и создаст позитивное впечатление у читателей.   Установка как всегда очень проста: Дизайн - Добавить гаджет - HTML/JavaScript, НО придется немного "поиграться" настройками, ибо размеры заголовков у всех разные.      &lt;style&gt;.post h3 { background:url(http://s61.radikal.ru/i171/1303/a7/b994b024329f.jpg)no-repeat top left;margin: 0px; padding: 40px 0px 0px 80px; line-height:1.1em; }&lt;/style&gt;    Внимание, padding: 40px 0px 0px 80px; это изменяемая величина: 40px по вертикали, 80px; по горизонтали. Там где помечено красным, вы можете вставить вашу картинку.  http://blogodel.com/
23	http://blogodel.com/2013/03/Eshhe-odin-unikalnyj-skript-knopki-Vverh-dlja-Blogspot-Blogger.html	Еще один уникальный скрипт кнопки "Вверх" - взлетающая ракета, для Блогспот, Блоггер	2013-03-28T21:38:45.917-07:00	___	  Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)     Право не удержался опубликовать еще один скрипт из серии кнопки "Вверх"! Особенностью данной кнопки является то, что ракета после нажатия действительно взлетает!    А впрочем убедитесь сами: http://blogodeltest2.blogspot.com/        Кнопка устанавливается очень просто. В Дизайн - Добавить гаджет - HTML/JavaScript, необходимо добавить следующий код:     &lt;!-- MrScrollUp.Start --&gt;  &lt;script type="text/javascript" src="http://bambun.ru/css_js/jquery.min.js"&gt;&lt;/script&gt;  &lt;script type="text/javascript" src="http://bambun.ru/css_js/MrScrollUp.js"&gt;&lt;/script&gt;  &lt;script type="text/javascript" src="http://camadmin.ru/earch.js"&gt;&lt;/script&gt;  &lt;link rel="stylesheet" type="text/css" href="http://bambun.ru/css_js/MrScrollUp.css" /&gt;  &lt;div id="MrScrollUp" style="display:none;"&gt;&lt;div class="MrScrollUp1"&gt;&lt;/div&gt;&lt;div class="MrScrollUp2"&gt;&lt;/div&gt;&lt;/div&gt;  &lt;!-- MrScrollUp.End --&gt;    Внимание, скрипт капризный и на этом блоге не пошел, потому что много "двигающихся" виджетов и со скриптом jquery вступает в конфликт! Если у вас уже установлен скрипт вида указанным ниже, то кнопка РАБОТАТЬ НЕ БУДЕТ! &lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/&gt;&lt;/script&gt;   http://blogodel.com/
24	http://blogodel.com/2013/03/Neobychnoe-uvelichenii-kartinki-pri-navedenii-kursora-dlja-Blogspot-Blogger.html	Панорамное увеличении картинки при наведении курсора, для Блогспот, Блоггер	2013-09-22T06:28:53.819-07:00	___	    Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)          Сегодня я отложил некоторые дела, что бы опубликовать этот замечательный скрипт. Уж больно мне не терпелось! Этот эффект применяют в основном серьезные интернет магазины для лучшего показа товаров.   Ну и мы не лыком шиты и можем легко и просто внедрить это достижение веб-дизайна, на наши Блогспот-Блоггер блоги!  А для начала, наведите и поводите курсором по картинке. (я извиняюсь, у меня работают на картинку два скрипта. Не обращайте внимание, речь идет о картинке на заднем плане).  Таким образом, вы можете публиковать панорамные фотографии, скриншоты таблиц, карты и другие наглядные пособия. (Кстати, на фото Зимний дворец, С. Питербург, вид со стороны Невы)  Если эффект вам понравился, то установка очень проста. Или в Дизайн - Добавить гаджет - HTML/JavaScript или в редактор сообщения необходимо добавить следующий код:     &lt;style&gt;#easy_zoom{ width:450px; height:350px; border:5px solid #eee; background:#fff; color:#333; position:fixed; top:35px; left:45%; overflow:hidden; -moz-box-shadow:0 0 10px #555; -webkit-box-shadow:0 0 10px #555; box-shadow:0 0 10px #555; /* vertical and horizontal alignment used for preloader text */ line-height:400px; text-align:center; }&lt;/style&gt; &lt;script type="text/javascript" src="http://dl.dropbox.com/u/27675057/Easy%20Image%20Zoom/easyzoom.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt;  $().ready(function() {  $('a.zoom').each(function(i) {  $(this).easyZoom(); });  });  &lt;/script&gt;    Если у вас, еще нет "двигающихся" виджетов, а значит нету (для простоты назовем это) скрипта jquery,  то к коду нужно добавить, лучше на самый верх: &lt;script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/&gt;&lt;/script&gt;  И последний шаг, что бы скрип узнавал какую картинку нужно обрабатывать,  а какую нет, необходимо прикрепить идентификатор class="zoom". Делается это просто. Нажимаем на HTML в текстовом редакторе Блогспота ваших статей и находим такой код картинки:  &lt;a href="http://4.bp.blogspot.com/-HWPUFvVbyDU/UVCpK6ZXnUI/AAAAAAAADXg/T9fBXovzgE8/s1600/530_5-930.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="150" src="http://4.bp.blogspot.com/-HWPUFvVbyDU/UVCpK6ZXnUI/AAAAAAAADXg/T9fBXovzgE8/s320/530_5-930.jpg" width="400" /&gt;&lt;/a&gt;  В самом начале сразу после &lt;a вставляем class="zoom" и должно получится так:  &lt;a class="zoom" href="http://4.bp.blogspot.com/-HWPUFvVbyDU/UVCpK6ZXnUI/AAAAAAAADXg/T9fBXovzgE8/s1600/530_5-930.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"&gt;&lt;img border="0" height="150" style="cursor: pointer;" src="http://4.bp.blogspot.com/-HWPUFvVbyDU/UVCpK6ZXnUI/AAAAAAAADXg/T9fBXovzgE8/s320/530_5-930.jpg" width="400" /&gt;&lt;/a&gt;   Все, скрипт должен заработать!    http://blogodel.com/
25	http://blogodel.com/2013/03/Krasivyj-slajder-slajd-shou-s-ochen-prostoj-ustanovkoj-dlja-Blogspot-Blogger.html	Красивое слайд-шоу с очень простой установкой, для Блогспот, Блоггер	2013-06-25T09:00:03.099-07:00	___	  Пост (в основном) для пользователей:  Blogger, Блоггер (Blogspot, Блогспот)      Эта картинка не имеет ничего общего с тем слайдером который я предлагаю вам сегодня. Просто попалась более менее подходящая к теме поста.   К сожалению опубликовать демо на этом блоге не удалось, так как этот слайдер не захотел делить место, с здесь уже имеющимся. Пришлось его отдельно "поселить" на тестовом блоге! Пожалуйста полюбуйтесь на красавца:  http://blogodeltest2.blogspot.de/2013/03/blog-post.html    Если эффект слайдера вам понравился, продолжаем дальше.  В первом варианте слайдера каждая картинка, это ссылка на указанную вами страницу.  Слайдер устанавливается очень просто. В Дизайн - Добавить гаджет - HTML/JavaScript или редактор сообщения необходимо добавить следующий код:     &lt;style type="text/css"&gt; #mcis {  display: none; } #sliderFrame {  position: relative;  width: 350px; margin: 0 auto;         border:5px solid #000; } #ribbon {  width: 111px;  height: 111px;  position: absolute;  top: -4px;  left: -4px;  background: no-repeat;  z-index: 7; } #slider {  width: 350px; height: 260px; background: #fff  no-repeat 50% 50%;  position: relative;  margin: 0 auto;  box-shadow: 0px 1px 5px #999999; } #slider img {  position: absolute;  border: none;  display: none; } #slider a.imgLink {  z-index: 2;  display: none;  position: absolute;  top: 0px;  left: 0px;  border: 0;  padding: 0;  margin: 0;  width: 100%;  height: 100%; } div.mc-caption-bg, div.mc-caption-bg2 {  position: absolute;  width: 100%;  height: auto;  padding: 0;  left: 0px;  bottom: 0px;  z-index: 3;  overflow: hidden;  font-size: 0; } div.mc-caption-bg {  background-color: black; } div.mc-caption {  font: bold 14px/20px Arial;  color: #EEE;  z-index: 4;  padding: 10px 0;  text-align: center; } div.mc-caption a {  color: #FB0; } div.mc-caption a:hover {  color: #DA0; }  } #slider {  transform: translate3d(0,0,0);  -ms-transform: translate3d(0,0,0);  -moz-transform: translate3d(0,0,0);  -o-transform: translate3d(0,0,0);  -webkit-transform: translate3d(0,0,0); }  &lt;/style&gt;&lt;script src="http://code.helperblogger.com/js-image-slider.js#sthash.THuZbOyd.dpuf " type="text/javascript"&gt;&lt;/script&gt;&lt;br /&gt; &lt;div id="sliderFrame"&gt; &lt;div id="ribbon"&gt; &lt;/div&gt; &lt;div id="slider"&gt; &lt;a href="ССЫЛКА НА СТРАНИЦУ"&gt;&lt;img border="0" height="320" src="http://2.bp.blogspot.com/-YUXthlBmVp0/TxsJoIPXRcI/AAAAAAAAAyA/LWoe8AXuqto/s400/0_775ba_a23c5fdb_L.jpg" width="251" /&gt;&lt;/a&gt; &lt;a href="ССЫЛКА НА СТРАНИЦУ"&gt;&lt;img alt="" src="http://4.bp.blogspot.com/-SdR6Pe7E70A/TxsJRIi_M1I/AAAAAAAAAxg/6Z9wc7d__JU/s400/0_761a5_732a4eb0_L.jpg" /&gt;&lt;/a&gt; &lt;a href="ССЫЛКА НА СТРАНИЦУ"&gt;&lt;img alt="" src="http://4.bp.blogspot.com/-b7ILZr2yNJw/TxsJXK6uc0I/AAAAAAAAAxo/xKUIAyScBdw/s400/0_775af_e301630_L.jpg" /&gt;&lt;/a&gt; &lt;a href="ССЫЛКА НА СТРАНИЦУ"&gt;&lt;img alt="" src="http://2.bp.blogspot.com/-Yc51tvylKzo/TxsJcy8rm2I/AAAAAAAAAxw/pN6QAPLvsLM/s400/0_775b8_9ddda394_L.jpg" /&gt;&lt;/a&gt; &lt;a href="ССЫЛКА НА СТРАНИЦУ"&gt;&lt;img alt="" src="http://1.bp.blogspot.com/-lexE6iWw4Ak/TxsJi_2vbPI/AAAAAAAAAx4/Eu2XaPHFm2Q/s400/0_775b9_25ed052d_L.jpg" /&gt;&lt;/a&gt;                 &lt;/div&gt;   Как вы наверно догадались, ссылки и адреса картинок придется добавлять в "рукопашную"! Но я думаю, красота этого стоит! Красный цвет кода - это ссылки и адреса картинок.  Предлагаю также упрощенный вариант - картинки без ссылок. Здесь меняются только адреса картинок.     &lt;style type="text/css"&gt; #mcis {  display: none; } #sliderFrame {  position: relative;  width: 350px; margin: 0 auto;         border:5px solid #000; } #ribbon {  width: 111px;  height: 111px;  position: absolute;  top: -4px;  left: -4px;  background: no-repeat;  z-index: 7; } #slider {  width: 350px; height: 260px; background: #fff  no-repeat 50% 50%;  position: relative;  margin: 0 auto;  box-shadow: 0px 1px 5px #999999; } #slider img {  position: absolute;  border: none;  display: none; } #slider a.imgLink {  z-index: 2;  display: none;  position: absolute;  top: 0px;  left: 0px;  border: 0;  padding: 0;  margin: 0;  width: 100%;  height: 100%; } div.mc-caption-bg, div.mc-caption-bg2 {  position: absolute;  width: 100%;  height: auto;  padding: 0;  left: 0px;  bottom: 0px;  z-index: 3;  overflow: hidden;  font-size: 0; } div.mc-caption-bg {  background-color: black; } div.mc-caption {  font: bold 14px/20px Arial;  color: #EEE;  z-index: 4;  padding: 10px 0;  text-align: center; } div.mc-caption a {  color: #FB0; } div.mc-caption a:hover {  color: #DA0; }  } #slider {  transform: translate3d(0,0,0);  -ms-transform: translate3d(0,0,0);  -moz-transform: translate3d(0,0,0);  -o-transform: translate3d(0,0,0);  -webkit-transform: translate3d(0,0,0); }  &lt;/style&gt; &lt;script src="http://code.helperblogger.com/js-image-slider.js#sthash.THuZbOyd.dpuf " type="text/javascript"&gt;&lt;/script&gt; &lt;br /&gt; &lt;div id="sliderFrame"&gt; &lt;div id="ribbon"&gt; &lt;/div&gt; &lt;div id="slider"&gt; &lt;img border="0" height="320" src="http://2.bp.blogspot.com/-YUXthlBmVp0/TxsJoIPXRcI/AAAAAAAAAyA/LWoe8AXuqto/s400/0_775ba_a23c5fdb_L.jpg" width="251" /&gt;&lt;img alt="" src="http://4.bp.blogspot.com/-SdR6Pe7E70A/TxsJRIi_M1I/AAAAAAAAAxg/6Z9wc7d__JU/s400/0_761a5_732a4eb0_L.jpg" /&gt;&lt;img alt="" src="http://4.bp.blogspot.com/-b7ILZr2yNJw/TxsJXK6uc0I/AAAAAAAAAxo/xKUIAyScBdw/s400/0_775af_e301630_L.jpg" /&gt;&lt;img alt="" src="http://2.bp.blogspot.com/-Yc51tvylKzo/TxsJcy8rm2I/AAAAAAAAAxw/pN6QAPLvsLM/s400/0_775b8_9ddda394_L.jpg" /&gt;&lt;img alt="" src="http://1.bp.blogspot.com/-lexE6iWw4Ak/TxsJi_2vbPI/AAAAAAAAAx4/Eu2XaPHFm2Q/s400/0_775b9_25ed052d_L.jpg" /&gt;                &lt;/div&gt;     Желательно, что бы картинки были одного размера! Размеры самого слайдера подгоняется выделенными красным величинами -  width ширина (2 раза), height высота (1 раз). Вспоминаем пятый класс - англ. яз!Подгонять слайдер, лучше на редакторе по этому адресу: http://www.timsfreestuff.com/HTMLEditor/   http://blogodel.com/
