.png "English"){kind=small}
.jpg)
«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() {
$('#slider').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>
Նյութի հեղինակ` Hayk,
գլեվել է` 14:24.
Պիտակ`
Blogger,
Նորություններ
.
Գրանցվեք և ստացեք նոր գրառումները էլ. փոստի միջոցով RSS 2.0
