Պատրաստում ենք Jquery սլայդեր

Հարգելի բլոգգերասերներ, արդեն մի քանի օր է, ինչ չեմ ներկայացրել նյութ կապված Blogger-ի հետ և այսօր որոշեցի ներկայացնել մի հետաքրքիր եղանակ սլայդ պատրաստելու համար:

Իսկ ինչպես տեղադրել  Jquery  սլյադերը?
Կոդերը տեղադրելու համար կատարում ենք 4 քայլ՝ 

1. a. CSS կոդի տեղադրում և կարգավորում
2. b. Jquery կոդի տեղադրում
3. c. Javascript-ի տեղադրում 
4. d. Slider Widget-ի տեղադրում

CSS կոդի տեղադրում և կարգավորում

1. Բացում ենք  Blogger Dashboard > Design > Edit HTML
2. Փնտրում ենք ]]></b:skin> կոդը և նրա անմիջապես վերևում ավելացնում ենք ներքևի կոդը՝

#gallery {
    position:relative;
    height:320px; /* Set Height   */
    width:540px;  /* Set Width    */
    overflow:hidden;
}
#gallery a {
    float:left;
    position:absolute;
}
#gallery a img {
    border:none;
}
#gallery a.show {
    z-index:500;
}
#gallery .caption {
    z-index:600;
    background-color:#000;
    color:#ffffff;
    height:100px;
    width:100%;
    position:absolute;
    bottom:0;
}
#gallery .caption .content {
    margin:5px;
}
#gallery .caption .content h3 {
    margin:0;
    padding:0;
    color:#1DCCEF;
}

Jquery կոդի տեղադրում

Եթե Ձեր բլոգում արդեն տեղադրված է այս կոդը, ապա այս քայլը բաց թողեք:
Գտեք այս կոդը </head> և նրա վերևում տեղադրեք ներքևի կոդը:

Javascript-ի տեղադրում 

Կրկին փորձում ենք գտնել  </head>  կոդը և նրա վերևում տեղադրում ենք ներքևում գրված կոդը

<script type="text/javascript">
//<!--
$(document).ready(function() {  
 slideShow();
});
function slideShow() {
    var dur= 5000;
 $('#gallery a').css({opacity: 0.0});
 $('#gallery a:first').css({opacity: 1.0});
 $('#gallery .caption').css({opacity: 0.7});
 $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
 $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
 .animate({opacity: 0.7}, 400);
 setInterval('gallery()', dur);
}
function gallery() {
 var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
 var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); 
 var caption = next.find('img').attr('rel'); 
 next.css({opacity: 0.0})
 .addClass('show')
 .animate({opacity: 1.0}, 1000);
 current.animate({opacity: 0.0}, 1000)
 .removeClass('show');
 $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); 
 $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
 $('#gallery .content').html(caption);
}
//-->
</script>

Slider Widget-ի տեղադրում

1. Բացում ենք ՝ Blogger Dashboard > Design > Page Elements 
2. Ավելացնում ենք HTML/JavaScript գադջիթը
3. Գաթջիթի անվանման հատվածը չենք լրացնում
4.Ավելացնում ենք ներքևի կոդը և տալիս ենք համապատասխան կարգավորումներ

<div id="gallery">

<!-- Image Slide 1 and must have a class='show' -->
 <a href="Link url" class="show">
  <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
 </a>

<!-- Image Slide 2 -->
 <a href="Link Url" >
  <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
 </a>

<!-- You can add more n more images as link above  -->

 <div class="caption"><div class="content"></div></div>
 <div style='clear:both;'/>
</div>Կարգավորումներ
1.Link Url-ի փոխարեն ավելացնում եք ձեր ցանկացած հղումը 
2.Image url here-ի փոխարեն ավելացնում եք նկարի հղումը և տալիս եք համապատասխան չափսը 
3.This is Title-ի փոխարեն գրում եք անվանումը 
4.This is Description-ի փոխարեն գրում եք նյութի նկարագրությունը
Բացի այդ, եթե ցանկանում եք ավելացնել նոր սլայդներ, ապա պետք է գադջիթում ավելացնեք ներքևի կոդը և անեք համապատասխան կարգավորումները:

<!-- Image Slide -->
 <a href="Link Url" >
  <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
 </a>
Շնորհակալություն queness բլոգին: