Приветствую Вас дорогие мои читатели! Очень радует, что стали интересоваться моим блогом. Так о чём это я? Радоваться буду потом, а сейчас покажу как сделать Simple Page Peel Effect for Blogger.

Проще говоря по русски: эффект загнутой страницы в правом углу блога. При наведении мышью страница ещё больше отгибается, показывая кнопку подписаться по RSS. Сначала посмотрим демо. Теперь кто заинтересовался, можно приступать.

Как создать эффект загнутой страницы ( Peel Effect for Blogger)


Все действия производим здесь: "Шаблон"- "Изменить HTML" устанавливаем галочку "Расширить шаблоны виджета". Для поиска  в коде используем комбинацию клавиш CTRL+F.
Находим эту строку </head> и вставляем перед </head>  вот этот код:

<style type="text/css">
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(https://lh3.googleusercontent.com/-tu8M3PcWRZs/TrhbFOGyp0I/AAAAAAAABnQ/RtAikhe4uHc/s128/Newspaper-Feed-icon.png) no-repeat right top;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>

Внимание: копируйте код полностью,так как он с прокруткой

Дальше ищем другую строчку <body> и вставляем после <body> код:

<div id='pageflip'>
<a href='http://feeds.feedburner.com/blogspot/ydmnu'><img alt='' src='https://lh4.googleusercontent.com/-38h2skTig4M/TrhVWpfVo9I/AAAAAAAABnA/PfjQaXiBlT0/s319/peel-image.png'/></a>
<div class='msg_block'></div>
</div>
Сохраняем шаблон и радуемся. Установка простая, думаю ребёнок справится.
Примечание: кому не нравится иконка - меняем на свою. URL иконки выделено зелёным цветом. Можете поменять само изображение и размер изображения уголка.URL выделено тёмно красным. Также не забудьте поменять RSS канал на свой. URL выделено розовым. Вот блин уже на розовый перешёл (шутка). Вот и всё. Желаю удачи.


Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями в соцсетях:


19 коммент. :

  1. Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
    Сообщение об ошибке в XML: The element type "style" must be terminated by the matching end-tag "".

    ОтветитьУдалить
  2. Почему пишет ошибку то? Все сделал точно

    ОтветитьУдалить
  3. Убила фраза. Даже ребенок справится. Появился значок здоровый, а слайда нет. ППц кривой код!

    ОтветитьУдалить
  4. Зачем сразу ругаться.Я с первого раза всё устанавливаю.А Вы код полностью скопировали?Я сейчас изменю прокрутку чтоб удобней было копировать.

    ОтветитьУдалить
  5. strashilki pugalki3 июня 2012 г., 22:45

    всё нормально прошло!
    http://pugalki-strashilki.blogspot.com/

    ОтветитьУдалить
  6. Да, на тёмном фоне нормально смотрится.

    ОтветитьУдалить
  7. не нашла слово
    помогите блондинке плиз.

    ОтветитьУдалить
  8. Всё очень просто.Для старого интерфейса--сочетание клавиш Ctrl+F, в появившемся окне вставляем нажимаем ентер и найдёте этот код.

    ОтветитьУдалить
  9. с тегами не находится((( только который со слэшем( правильно написала?) а с простыми тегами пишет 0

    ОтветитьУдалить
  10. Попробуйте поставить галочку-Расширить шаблоны виджета и потом ищите.

    ОтветитьУдалить
  11. второй код надо ставить после а не

    ОтветитьУдалить
  12. Если получается,то ставьте.

    ОтветитьУдалить
  13. А ксс3 уроки есть?

    ОтветитьУдалить
  14. Тогда супер!Можно пофантазировать=)

    ОтветитьУдалить
  15. Большое спасибо за такой интересный материал,все написано четко и доступно

    ОтветитьУдалить