Սլայդ Blogger-ի համար: «JQuery Easy Slider»

Tweet

Վերջապես եկավ նաև այսքան սպասված՝ «JQuery Easy Slider» կոչվող, հավելման ժամանակը: Արդեն տեղադրված նյութերից մեկում արդեն խոսել եմ JQuery-ի մասին, վերջինս զբաղվում է HTML 5-ով և պատրաստում է JavaScript կոդեր: Այսօր կփորձենք միասին բլոգում տեղադրել փոքրիկ JQuery  կոդ, որը թույլ կտա առավել կարևոր նյութերը տեղադրել առանձին շարժվող հավելման մեջ: Ահա այսքանը սկզբի համար, իսկ հիմա անցնենք կարևոր գործին: Ինչպես միշտ պահպանում ենք բլոգի կրկնօրինակը (создать резервную копию шаблона Blogger ), որից հետո կատարում ենք հետևյալ քայլերը հերթականությամբ և զգուշությամբ: Design > Edit Html կամ(Шаблон › Изменить HTML>Расширить шаблоны виджета):Այս քայլերը կատարելուց հետո փորձում ենք գտնել ]]></b:skin> կոդը, որի անմիջապես վերևում տեղադրում ենք հետևյալ կոդը: ]]></b:skin> /*Slider Css*/ #slider{}  #slider ul, #slider li{ margin:0; padding:0; list-style:none; } #slider li{  width:320px; height:111px; overflow:hidden;  }  #prevBtn, #nextBtn{  display:block; width:30px; height:77px; position:absolute; left:-30px; top:15px; }  #nextBtn{  left:320px; }  #prevBtn a, #nextBtn a{  display:block; width:30px; height:77px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXfG4rAFKDlyKzitJ9QoOotfsBB5WLyKPeXiJdvVeFnBRshgvzLf0MCxJv48wpL2TGyfnUrw9YuSvRsXw6ziIalCXl4NS_MIyjJc4VUNAbwHnDNG0OH05n_CfRdkh0mIGqmwZL0UVhAF0/s1600/btn_prev.gif) no-repeat 0 0;  }  #nextBtn a{  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX7wDQuc6Xm6rMj0d647bg6eRv9MAYTm2aHH4ACrKWRA1f4az1eycLD5tEcHLowc2J_mcFpvKYHfpZkzASNvh1aaHBJY0RfpX34Qnw6DDEe36Ikdtz7KFyYoz-8s_pWh-w5IhR_gHgX7U/s1600/btn_next.gif) no-repeat 0 0;  }  /*Slider Css Info @ http://www.mrblogger.ru*/ *Կատարում ենք փոփոխություններ-Դեղին գույնով նշված կոդերը սլայդի բարձրությունը և երկարությունն են: Բացի այդ որոշ փոփոխություններ անելուց հետո անհրաժեշտ կլինի փոխել նաև սլաքների հեռավորությունը, վերջինս նշված է կարմիր գույնով: Մնացածը կարող եք կռահել ինքներդ: Հարցեր առաջանալու դեպքում գրեք մեկնաբանություններ: Կոդը տեղադրելուց և փոփոխություններ անելուց հետո անցնում ենք հաջորդ քայլին: Այս քայլում տեղադրում ենք ՝ JQuery .CSS կոդի կրճատ տարբերակը: Վերջինիս ապահովում է սլայդի աշխատանքը: Նախքան կոդը տեղադրելը փնտրում ենք (Ctrl+F սեղմակների համադրման միջոցով կարող եք արագ գտնել կոդը) </head> կոդը և նրա ներքևում ավելացնում ենք այս HTML կոդը՝ </head> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/> <script src='http://suyb.googlecode.com/files/easySlider1.7.js-blogger.js'/> <script> $(document).ready(function(){ $(&quot;#slider&quot;).easySlider({ auto: true, continuous: true }); }); </script> http://bloggerotblog.blogspot.com/ Կոդը տեղադրելուց հետո պահպանում ենք փոփոխությունները Պահպանել: և անցնում ենք հաջորդ քայլին: Այս քայլում արդեն պետք է տեղադրենք նյութերի հղումները և նրանց համար նախատեսված նկարները: Կատարում ենք այս՝Дизайн>Добавить гаджет>HTML/JavaScript քայլը և տեղադրում ենք ներքևում նշված կոդը  <div id="slider"> <ul> <li><a href="Նյութի URL հասցե"><img src="նկարի URL հասցե" width="320px" height="111px" /></a></li> <li><a href="Նյութի հասցե"><img src="նկարի հասցե" width="320px" height="111px"/></a></li> <li><a href="Նյութի հասցե"><img src="Նկարի հասցե" width="320px" height="111px" /></a></li> <li><a href="Նյութի հասցե"><img src="Նկարի հասցե" width="320px" height="111px" /></a></li> <li><a href="Նյութի հասցե"><img src="Նկարի հասցե" width="320px" height="111px" /></a></li> </ul> </div> Ահա այսքանը: Միայն վերջում տեղեկացնեմ, որ եթե ցանկանում եք ավելացնել սլայդների քանակը, ապա վերևում նշված կոդի մեջ ավելացրեք <li><a href="Նյութի հասցե"><img src="նկարի հասցե" width="320px" height="111px" /></a></li> կոդերի թիվը:

Վերջապես եկավ նաև այսքան սպասված՝ «JQuery Easy Slider» կոչվող, հավելման ժամանակը: Արդեն տեղադրված նյութերից մեկում արդեն խոսել եմ JQuery-ի մասին, վերջինս զբաղվում է HTML 5-ով և պատրաստում է JavaScript կոդեր: Այսօր կփորձենք միասին բլոգում տեղադրել փոքրիկ JQuery  կոդ, որը թույլ կտա առավել կարևոր նյութերը տեղադրել առանձին շարժվող հավելման մեջ:

Ահա այսքանը սկզբի համար, իսկ հիմա անցնենք կարևոր գործին:

Ինչպես միշտ պահպանում ենք բլոգի կրկնօրինակը (создать резервную копию шаблона Blogger ), որից հետո կատարում ենք հետևյալ քայլերը հերթականությամբ և զգուշությամբ:

• Design > Edit Html կամ(Шаблон › Изменить HTML>Расширить шаблоны виджета):Այս քայլերը կատարելուց հետո փորձում ենք գտնել ]]></b:skin> կոդը, որի անմիջապես վերևում տեղադրում ենք հետևյալ կոդը:

  ]]></b:skin>

/*Slider Css*/
#slider{} 
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{ 

width:320px;

height:111px;

overflow:hidden; 
} 
#prevBtn, #nextBtn{ 
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;

top:15px;

} 
#nextBtn{ 
left:320px;
} 
#prevBtn a, #nextBtn a{ 
display:block;
width:30px;
height:77px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXfG4rAFKDlyKzitJ9QoOotfsBB5WLyKPeXiJdvVeFnBRshgvzLf0MCxJv48wpL2TGyfnUrw9YuSvRsXw6ziIalCXl4NS_MIyjJc4VUNAbwHnDNG0OH05n_CfRdkh0mIGqmwZL0UVhAF0/s1600/btn_prev.gif) no-repeat 0 0; 
} 
#nextBtn a{ 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX7wDQuc6Xm6rMj0d647bg6eRv9MAYTm2aHH4ACrKWRA1f4az1eycLD5tEcHLowc2J_mcFpvKYHfpZkzASNvh1aaHBJY0RfpX34Qnw6DDEe36Ikdtz7KFyYoz-8s_pWh-w5IhR_gHgX7U/s1600/btn_next.gif) no-repeat 0 0; 
} 
/*Slider Css Info @ http://www.mrblogger.ru*/

*Կատարում ենք փոփոխություններ-Դեղին գույնով նշված կոդերը սլայդի բարձրությունը և երկարությունն են: Բացի այդ որոշ փոփոխություններ անելուց հետո անհրաժեշտ կլինի փոխել նաև սլաքների հեռավորությունը, վերջինս նշված է կարմիր գույնով: Մնացածը կարող եք կռահել ինքներդ: Հարցեր առաջանալու դեպքում գրեք մեկնաբանություններ:

• Կոդը տեղադրելուց և փոփոխություններ անելուց հետո անցնում ենք հաջորդ քայլին: Այս քայլում տեղադրում ենք ՝ JQuery .CSS կոդի կրճատ տարբերակը: Վերջինիս ապահովում է սլայդի աշխատանքը: Նախքան կոդը տեղադրելը փնտրում ենք (Ctrl+F սեղմակների համադրման միջոցով կարող եք արագ գտնել կոդը) </head> կոդը և նրա ներքևում ավելացնում ենք այս HTML կոդը՝

</head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

<script src='http://suyb.googlecode.com/files/easySlider1.7.js-blogger.js'/>
<script>
$(document).ready(function(){
$(&quot;#slider&quot;).easySlider({
auto: true,
continuous: true
});
});
</script>

http://bloggerotblog.blogspot.com/

Կոդը տեղադրելուց հետո պահպանում ենք փոփոխությունները Պահպանել: և անցնում ենք հաջորդ քայլին:

• Այս քայլում արդեն պետք է տեղադրենք նյութերի հղումները և նրանց համար նախատեսված նկարները: Կատարում ենք այս՝Дизайн>Добавить гаджет>HTML/JavaScript քայլը և տեղադրում ենք ներքևում նշված կոդը 

<div id="slider"> <ul>

<li><a href="Նյութի URL հասցե"><img src="նկարի URL հասցե" width="320px" height="111px" /></a></li>

<li><a href="Նյութի հասցե"><img src="նկարի հասցե" width="320px" height="111px"/></a></li>

<li><a href="Նյութի հասցե"><img src="Նկարի հասցե" width="320px" height="111px" /></a></li>

<li><a href="Նյութի հասցե"><img src="Նկարի հասցե" width="320px" height="111px" /></a></li>

<li><a href="Նյութի հասցե"><img src="Նկարի հասցե" width="320px" height="111px" /></a></li>

</ul>
</div>

Ահա այսքանը: Միայն վերջում տեղեկացնեմ, որ եթե ցանկանում եք ավելացնել սլայդների քանակը, ապա վերևում նշված կոդի մեջ ավելացրեք

<li><a href="Նյութի հասցե"><img src="նկարի հասցե" width="320px" height="111px" /></a></li>

կոդերի թիվը:

Նյութի հեղինակ` Hayk, գլեվել է` 18:39. Պիտակ` Blogger, Նորություններ . Գրանցվեք և ստացեք նոր գրառումները էլ. փոստի միջոցով RSS 2.0