Google+ Followers

Будь в курсе событий!

20.11.2013

Добавить эффект увеличения изображений на блогспот

Leave a Comment
 
Как я и обещал друзья,я начал писать еще один учебник или(статью).  © zarnakoom Рассказ начну с того что, все мы добавляем в свои статьи какие либо фотографии, изображения для того что бы статья лучше выглядела.И для того что бы пользователь зашедший к нам, на на наш веб ресурс мог понять о чем идет речь в какой либо статье по картинке, не вникая даже в смысл статьи. Это очень удобно, но по мимо того когда мы пишем для наших сайтов, какие то материалы не всегда так получается что на изображениях которые мы добавляли в статью  видно все нюансы данных изображений.  © zarnakoom И для того что бы  пользователи зашедшие к нам на веб ресурс, не мучились я  решил сегодня с вами дорогие читатели поделиться  виджетом увеличения картинок.Но а виджет не простой, но и он не золотой)он с подсветкою красивой, розовой и немного шубутной. © zarnakoom  В том плане что он при наведении на него указателя мыши, немного поворачивается. А вот собственно его скрипт установки:

    Откройте Ваш аккаунт Blogger, Нажмите на шаблон нажмите на Изменить HTML.  Теперь нужно зажать CTRL+F , и найти следующий код ]]></b:skin> .  

Теперь вставьть  нижеуказанный код вставляем перед       ]]></b:skin>


   

/* Post Image Shadow Effect by http://www.zarnakoom.blogspot.com */
.post img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px #FF0000;
-moz-box-shadow: 0 0 20px #FF0000;
box-shadow: 0 0 20px #FF0000;
}                               

Так же вы можете поменять цвет подсветки, на любой вам нужный просто поменяйте  те три строчки ( #FF0000 ) что я отметил маркером на любой другой цвет. Цвет можно выбрать любой, у  меня на блоге в разделе ссылка  Инструменты , там есть генератор Цветовое колесо там можно выбрать любой цвет. © zarnakoom

И если у кого не сработает оборачиваем его стили вот так:

<style>
* Post Image Shadow Effect by www.showmedreams.blogspot.com */
.post img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px #FF0000;
-moz-box-shadow: 0 0 20px #FF0000;
box-shadow: 0 0 20px #FF0000;
}</style>                              
                                                                                                                    
И вставляем его перед тегом </body>    предварительно его (тег) найдя через поисковую строчкку вызываемую комбинацией клавишь  CTRL+F             © zarnakoom

0 коммент. :

© 2012-2017 Cash's from program