Blogger lesson: Блогтоо зурагтай солигддог слайд хийх

Энэхүү нийтлэлээ шинэчилж өөр солигддог слайдийг оруулж байна. Wordpress дээрхи Slideshow гаргагчийг блоггер болон бусад блогуудад ашиглаж болно. Өмнөх slideshow нь блоггерт зориулсан байдаг энгийн слайд гаргагч байсан болхоор сольж хийлээ сонирхоод үзээрэй.

Хийх алхамууд:

1. За тэгээд юуны түрүүнд блогтоо нэвтэрч орно

2. Тэгээд блогийнхоо Dashboard > Design > Edit HTML -руу орно

3. Гарнаасаа Ctrl+F товчийг дарж гарч ирсэн нүдэнд  ]]></b:skin>  хуулж тавина 

4. Хайлтанд гарч ирсэн  ]]></b:skin>  энэний доод талд доорхи кодуудыг хуулна

/*Start Slider Css*/
/*
* jQuery Nivo Slider v2.6
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 
* March 2010
*/


/* The Nivo Slider styles */
#slider{
width:618px;
height:246px;
}
.nivoSlider {
position:relative;

}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
/*
Skin Name: Pascal Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: fixed
Description: A nice, light skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom & Pascal Gartner
Author URI: http://dev7studios.com
*/

.theme-pascal.slider-wrapper {
background:url(http://1.bp.blogspot.com/-ILr32hEyEv4/TjarIFuIrEI/AAAAAAAAE3U/vSN_lW1qjIM/s1600/slider.png) no-repeat;
width:668px;
height:299px;
margin:0 auto;
padding-top:17px;
position:relative;
}

.theme-pascal .nivoSlider {
position:relative;
width:630px;
height:235px;
margin-left:19px;
background:url(http://4.bp.blogspot.com/-q9aJRd_k5RQ/Tjaqy4XX5OI/AAAAAAAAE3E/Y32S6GBDjso/s1600/loading.gif) no-repeat 50% 50%;
}
.theme-pascal .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
width:630px; /* Make sure your images are the same size */
height:235px; /* Make sure your images are the same size */
}
.theme-pascal .nivoSlider a {
border:0;
display:block;
}

.theme-pascal .nivo-controlNav {
background:url(http://4.bp.blogspot.com/-HIPfhGDE4hk/TjaqyBgponI/AAAAAAAAE28/Tx8B5kcVWvg/s1600/controlnav.png) no-repeat;
width:251px;
height:40px;
position:absolute;
left:200px; /* Tweak this to center bullets */
bottom:-42px;
padding:8px 0 0 82px;
z-index:20;
}
.theme-pascal .nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(http://2.bp.blogspot.com/-roNkMPuTzA0/Tjaqxid76eI/AAAAAAAAE24/i-Q9G-YMd8c/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.theme-pascal .nivo-controlNav a.active {
background-position:0 -22px;
}

.theme-pascal .nivo-directionNav a {
display:none;
}

.theme-pascal .nivo-caption {
bottom:40%;
left:auto;
right:0px;
width:auto;
max-width:630px;
overflow:hidden;
background:#fff;
text-shadow:none;
font-family: arial, serif;
color:#4c4b4b;
}
.theme-pascal .nivo-caption p {
padding:5px 15px;
color:#333;
font-weight:bold;
font-size:27px;
text-transform:uppercase;
}
.theme-pascal .nivo-caption a { 
color:#333;
font-weight:bold;
font-size:27px;
text-transform:uppercase;
}

.theme-pascal .ribbon {
background:url(http://2.bp.blogspot.com/-nA_TG0PDAWI/TjaqzNcGeVI/AAAAAAAAE3I/2k21uBeyfng/s1600/ribbon.png) no-repeat;
width:111px;
height:111px;
position:absolute;
top:-8px;
left:-8px;
z-index:300;
}
/*End Slider Css*/

5. Мөн дахиад гарнаас Ctrl+F дараад </head> гэж хайгаад доорхи кодыг доод талд нь хуулна

<!--Start Slider Scripts-->
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/8855314511/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>
<!--End Slider Scripts info @ http://www.spiceupyourblog.com-->

6. Тэгээд Save Template гэж хадгална. 
7. Одоо Design> Page Element ээс Add Gadget HTML/Javascript доорхи кодыг хуулаад болно

<div class="slider-wrapper theme-pascal">
<div class="ribbon"></div>

<div id="slider" class="nivoSlider">

<a href="http://www. sobriquet2.blogspot.com"><img src="http://2.bp.blogspot.com/-Xt9jSbEPD6c/TjanOOIOSTI/AAAAAAAAE2o/dDqmBNpHpbk/s1600/nemo.jpg" alt="" /></a>
<a href="http://www.sobriquet2.blogspot.com"><img src="http://4.bp.blogspot.com/-5RO8VkEJdSc/TjanPX3-QWI/AAAAAAAAE2s/sSkePF_NHOw/s1600/toystory.jpg" alt="" title="This is an example of a caption" /></a>

<a href="http://www.sobriquet2.blogspot.com"><img src="http://1.bp.blogspot.com/-1FkuuXVZtRg/TjanQD78lnI/AAAAAAAAE2w/F6jlTj3E3ZE/s1600/up.jpg" alt="" /></a>

<a href="http://www.sobriquet2.blogspot.com"><img src="http://3.bp.blogspot.com/-qJt0cLCCEwk/TjanQl7IG1I/AAAAAAAAE20/mP2euczZ8d0/s1600/walle.jpg" alt="" title="#htmlcaption" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This is an example of a caption.
</div>

</div>

Зураг нэмхээр бол улаанаар тэмдэглэсний оронд зургийнхаа URL-ийг оруулаарай