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

Thursday, March 21, 2013

Cлайд-шоу с простой установкой, для blogspot

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

tweetn



RSS blogger 2

Красивое слайд-шоу с очень простой установкой, для Блогспот, Блоггер

Posted: 21 Mar 2013 02:22 PM PDT

Пост (в основном) для пользователей:
Blogger, Блоггер (Blogspot, Блогспот)

Эта картинка не имеет ничего общего с тем слайдером который я предлагаю вам сегодня. Просто попалась более менее подходящая к теме поста.

К сожалению опубликовать демо на этом блоге не удалось, так как этот слайдер не захотел делить место, с здесь уже имеющимся. Пришлось его отдельно "поселить" на тестовом блоге! Пожалуйста полюбуйтесь на красавца:
http://blogodeltest2.blogspot.de/2013/03/blog-post.html

Если эффект слайдера вам понравился, продолжаем дальше.
В первом варианте слайдера каждая картинка, это ссылка на указанную вами страницу.

Слайдер устанавливается очень просто. В Дизайн - Добавить гаджет - HTML/JavaScript или редактор сообщения необходимо добавить следующий код:

<style type="text/css">
#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);
}
 </style> <script src="https://www.opendrive.com/files/MV8zMTIyMDE4X2FmeHVy/lordhtml-javascriptslider.js" type="text/javascript"></script> <br />
<div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<a href="ССЫЛКА НА СТРАНИЦУ"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAEccorGidTA6wh4lJA9GFfAThn7kYQVMHmV6gWvbatdxtIfbMfmtUm8YJnSry7PVRlusHVPEczwfx09bvNd9Z8btnQqON5JQux3Q7RfcjO67_sLnrv-p7kb1Q6b1jJYxwXRFO09CmFQ5/s400/0_775ba_a23c5fdb_L.jpg" width="251" /></a> <a href="ССЫЛКА НА СТРАНИЦУ"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVCVRrxSjkhpUPl8M-xYzMtEMIaP9mIMufS4eOhgQ0JBV9bjhxaXB4GR-SDQGqkPZqH3OW3TAIU7t6SYO3j3CXHINnZcUPAeeMx88FaYH4R_MwS8BH9ly41Trj1UBni7A8lr0YfQkxi3BR/s400/0_761a5_732a4eb0_L.jpg" /></a> <a href="ССЫЛКА НА СТРАНИЦУ"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja8iGmxAcbHsGwTZPL8ha6v43i4nIoi6MeC3s8mNO1_H_7yZoEouzhLsiV6RjK5wL207Z0_BjCz_BpH8QE7-nadtOnDvOICqLAXXispEBJq7L1BEZflJUbSsVaN6he0LNLUoRzbe7_v6J-/s400/0_775af_e301630_L.jpg" /></a> <a href="ССЫЛКА НА СТРАНИЦУ"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYWzZWuvAjfJ_uRowDKWc91iUuJJxGKlHOMm2NdeeqESabixZkrkVD91GfZLiD0nKK5E5em3wFVVOojPKKUx04DZcHakuLRX6hCGSxC0QkUP0zUnRAMTc677rwreazm5XdkFyRME-U8gS5/s400/0_775b8_9ddda394_L.jpg" /></a> <a href="ССЫЛКА НА СТРАНИЦУ"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgapWI03xBWBv1Z8P5ifLVyQzTP12dlV-ZrgAR6wtbfxgR8yKqtgbztyh1Jwsx4Up_AUzFMxz39lPNetyLhEOf32s8MAZZSEu0AlTGei0IwaCkdqVd3sdV1nrLilNV8D6KL1I7PJeiOpB-L/s400/0_775b9_25ed052d_L.jpg" /></a>                 </div>

Как вы наверно догадались, ссылки и адреса картинок придется добавлять в "рукопашную"! Но я думаю, красота этого стоит! Красный цвет кода - это ссылки и адреса картинок.

Предлагаю также упрощенный вариант - картинки без ссылок. Здесь меняются только адреса картинок.

<style type="text/css">
#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);
}
 </style> <script src="https://www.opendrive.com/files/MV8zMTIyMDE4X2FmeHVy/lordhtml-javascriptslider.js" type="text/javascript"></script> <br />
<div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAEccorGidTA6wh4lJA9GFfAThn7kYQVMHmV6gWvbatdxtIfbMfmtUm8YJnSry7PVRlusHVPEczwfx09bvNd9Z8btnQqON5JQux3Q7RfcjO67_sLnrv-p7kb1Q6b1jJYxwXRFO09CmFQ5/s400/0_775ba_a23c5fdb_L.jpg" width="251" /><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVCVRrxSjkhpUPl8M-xYzMtEMIaP9mIMufS4eOhgQ0JBV9bjhxaXB4GR-SDQGqkPZqH3OW3TAIU7t6SYO3j3CXHINnZcUPAeeMx88FaYH4R_MwS8BH9ly41Trj1UBni7A8lr0YfQkxi3BR/s400/0_761a5_732a4eb0_L.jpg" /><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja8iGmxAcbHsGwTZPL8ha6v43i4nIoi6MeC3s8mNO1_H_7yZoEouzhLsiV6RjK5wL207Z0_BjCz_BpH8QE7-nadtOnDvOICqLAXXispEBJq7L1BEZflJUbSsVaN6he0LNLUoRzbe7_v6J-/s400/0_775af_e301630_L.jpg" /><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYWzZWuvAjfJ_uRowDKWc91iUuJJxGKlHOMm2NdeeqESabixZkrkVD91GfZLiD0nKK5E5em3wFVVOojPKKUx04DZcHakuLRX6hCGSxC0QkUP0zUnRAMTc677rwreazm5XdkFyRME-U8gS5/s400/0_775b8_9ddda394_L.jpg" /><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgapWI03xBWBv1Z8P5ifLVyQzTP12dlV-ZrgAR6wtbfxgR8yKqtgbztyh1Jwsx4Up_AUzFMxz39lPNetyLhEOf32s8MAZZSEu0AlTGei0IwaCkdqVd3sdV1nrLilNV8D6KL1I7PJeiOpB-L/s400/0_775b9_25ed052d_L.jpg" />                </div>


Желательно, что бы картинки были одного размера! Размеры самого слайдера подгоняется выделенными красным величинами -  width ширина (2 раза), height высота (1 раз). Вспоминаем пятый класс - англ. яз!
Подгонять слайдер, лучше на редакторе по этому адресу: http://www.timsfreestuff.com/HTMLEditor/

http://blogodel.com/

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

Posted by Tanjah3 at 3:39 PM
Labels: , , , ,

0 comments:

Post a Comment