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

Sunday, June 30, 2013

RSS blogger 2

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

tweetn

RSS blogger 2

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

Posted: 30 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 (выделен красным фоном), где цифра, это выбранный вами эффект.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0MTbbVp_YFcceQ7yM3OSNgjD0mihrdipl5_nipNDU4eGArqlBHY61b1NdUwFzUKmjQrnZkIwUKMMfXVXc6zsTVFi9u7XRW0XvIcDFXtiI4U09f-zgsQVRd82ktqLn1SIFlfohsLZ_C_Cz/s1600/image-effects-image-2.png"><img class="effect1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0MTbbVp_YFcceQ7yM3OSNgjD0mihrdipl5_nipNDU4eGArqlBHY61b1NdUwFzUKmjQrnZkIwUKMMfXVXc6zsTVFi9u7XRW0XvIcDFXtiI4U09f-zgsQVRd82ktqLn1SIFlfohsLZ_C_Cz/s1600/image-effects-image-2.png" /></a>
http://blogodel.com/

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

Posted by Tanjah3 at 2:02 PM

0 comments:

Post a Comment