«jQuery Image Slider» հատուկ BlogSpot-ի համար

Հարգելի՛ բլոգերներ, հաշվի առնելով այն, որ շատ շատերը հաղորդագրություններ են ուղարկում կապված տարբեր տեսակի սլայդ-շոուների հետ, որոշեցի այսօր Ձեզ ներկայացնել մի հետաքրքիր «jQuery Image Slider» հատուկ BlogSpot-ի վրա պատրաստված բլոգների համար: Այս գադջիթը կարող եք օգտագործել բլոգում՝ լավագույն նյութերը առանձնացնելու համար:

Բացի այդ նշեմ նաև, որ ի տարբերություն մյուս նմանատիպ գադջիթների, որոնք ես եմ ներկայացրել, սա ունի մի առավելություն՝ այն է արագ աշխատանքը: Իսկ մինչ այն կտեղադրեք, կարող եք տեսնել գադջիթի դեմո տաբերակը այստեղ:

Ինչպես միշտ, այնպես էլ հիմա նախքան փոփոխություններ անելը պահպանեք բլոգի կրկնօրինակը: Այդ մասին կարող եք կարդեալ այստեղ:

Տեղադրում ենք CSS կոդը Blogger-ում:

Քայլ 1-բացում ենք բլոգի կարգավորումների էջը և կատարում ենք հետևյալ քայլերը հերթականությամբ՝ Design > Edit Html կամ (Шаблон › Изменить HTML>Расширить шаблоны виджета), որից հետո փնտրում ենք ]]></b:skin> կոդը: Կոդը գտնելուց հետո, նրա վերևում տեղադրում ենք ներքևում նշված կոդը:

/* START
--------------------------------------------------------------------
MrBLogger.ru-my blog on blogger, go
--------------------------------------------------------------------  Nivo Slider */ /*-----START Default Theme ----------------------------------------*/.theme-default .nivoSlider {  position:relative;  background:#fff url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/loading.gif) no-repeat 50% 50%;  -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;  -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;  box-shadow: 0px 1px 5px 0px #4a4a4a; } .theme-default .nivoSlider img {  position:absolute;top:0px;left:0px;display:none; } .theme-default .nivoSlider a {  border:0;display:block; } .theme-default .nivo-controlNav {  position:absolute;left:50%;bottom:-42px;  margin-left:-40px; /* Tweak this to center bullets */ } .theme-default .nivo-controlNav a {  display:block;width:22px;height:22px;  background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/bullets.png) no-repeat;  text-indent:-9999px;border:0;margin-right:3px;float:left; } .theme-default .nivo-controlNav a.active {  background-position:0 -22px; } .theme-default .nivo-directionNav a {  display:block;width:30px;height:30px;  background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/arrows.png) no-repeat;  text-indent:-9999px;border:0; } .theme-default a.nivo-nextNav {  background-position:-30px 0;right:15px; } .theme-default a.nivo-prevNav {  left:15px; } .theme-default .nivo-caption {  font-family: Helvetica, Arial, sans-serif; } .theme-default .nivo-caption a {  color:#fff;  border-bottom:1px dotted #fff; } .theme-default .nivo-caption a:hover {  color:#fff; } /*----- END Default Theme ----------------------------------------*//* The Nivo Slider styles */ .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; } .theme-default #slider {  margin:100px auto 50px auto;  width:618px; /* Make sure your images are the same size */  height:246px; /* Make sure your images are the same size */ } .theme-pascal.slider-wrapper, .theme-orman.slider-wrapper {  margin-top:150px; } .clear {  clear:both; } /* END --------------------------------------------------------------------MrBLogger.ru-my blog on blogger, go
--------------------------------------------------------------------  Nivo Slider */

Տեղադրում ենք JavaScript Blogger-ում:

Քայլ 2-այս քայլում տեղադրում ենք JavaScript կոդը, որը տեղադրելու համար պետք է փնրենք </body> կոդը և նրա վերևում տեղադրում ենք ներքևում գրված կոդը: Այս քայլը կատարելուց հետո նախ ստուգեք բլոգը, ապա պահպանեք այն:

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
 <script src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modified.min.js' type='text/javascript'/>
 <script type='text/javascript'>
 $(window).load(function() {
 $(&#39;#slider&#39;).nivoSlider();
 });
 </script>

Տեղադրում ենք գադջիթը Blogger-ում:

Քայլ 3-այս քայլում պետք է տեղադրենք HTML/JavaScript գադջիթը, որի համար պետք է կատարենք հետևյալ քայլերը՝ Design -> Click on “Add a Gadget” -> HTML/JavaScript և գադջիթում ավելացնենք հետևյալ կոդը:

<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
 <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;   //number of posts
 var image_height = 246; //image height
 var image_width = 618;  //image width
</script>
<script src="այստեղ գրում եք ձեր բլոգի հասցեն/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

MRBlogger