Skroll To Top JQuery -Դեպի վեր բարձրացնող սեղմակ Blogger-ի համար

Վերջերս նկատել եմ, որ  «Blogger» հարթակի վրա պատրաստված մի շարք բլոգներում տեղադրված է ՝էջը վեր բարձրացնող սեղմակ: Բոլոր այդ սեղմակները, որոնք նկատել եմ ոչ այնքան գեղեցիկ տեսք են տալիս բլոգին, քանի որ էջը վեր բարձրանալուց հետո դրանք շարունակում են երևալ և որոշակի տեղ զբաղեցնել:
Եվ այսօր միասին կտեղադրենք այնպիսի սեղմակը, որը ավելի կատարելագործված է և կորչում է էջը վեր բարձրանալուց հետո: Նախ ասեմ, որ սեղմակը ստեղծվել է JQuery-կողմից, որը զբաղվում է նոր տիպի JavaScript-ների ստեղծմամբ:
Այսքանը պաշտոնական, իսկ հիմա անցնենք գործնական մասին:
Նախքան սկսելը անհրաժեշտ, որպեսզի ներբեռնեք «Blogger»-ի կրկնօրինակը, « делатьрезервную копию шаблона»:

• Քայլ 1-մուտք ենք գործում բլոգի կառավարման էջը, ապա Дизайн панели нажмите> Изменить HTML-«Click Design > Edit Html » :
• Քայլ 2. Այնուհետև սեղմում ենք «Расширить шаблоны виджета» թռչնակի վրա:

Սեղմելուց հետո փորձում ենք բացված պատուհանում փնտրե -]]></b:skin>(Հեշտ գտնելու համար կարող եք օգտվել Ctrl+F սեղմակների համադրումից)

• Քայլ 3-գտնելուց հետո պատճենեք ներքևում տեղադրված HTML կոդը և տեղադրեք հենց ]]></b:skin> կոդի առջև:

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNNRjQRpXuhjRMAmqDdpqzkVaUoi1DFOm0bL-ePmBeFyl6h5Lrjjow0oRie7MVGreuMFYNufVq5prNfgLE-UcKAywkJvJIQGvZ948PsCFaA5ySwDOupa6oc8xTCP6OAjlj2Nq_y4Mbhvw/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNNRjQRpXuhjRMAmqDdpqzkVaUoi1DFOm0bL-ePmBeFyl6h5Lrjjow0oRie7MVGreuMFYNufVq5prNfgLE-UcKAywkJvJIQGvZ948PsCFaA5ySwDOupa6oc8xTCP6OAjlj2Nq_y4Mbhvw/s1600/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}

Կարգավորումներ - սեղմակը աջ կամ ձախ տեղափոխելու համար կարող եք փոփոխել այս թվերը: 10px; ձախ: 10px;աջ.

• Քայլ 4-այս քայլում կատարում ենք վերջին գործողությունը, այն է ՝ բացված պատուհանում փնտրել </head> կոդը, այն գտնելուց հետո, նրանից առաջ կամ հետո տեղադրեք ներքևում նշված HTML կոդը: 

Զգուշացում- Եթե դուք ավելի վաղ ձեր բլոգում ավելացրել եք jQuery script, ապա կարող եք մուգ տառատեսակով գրված կոդը  չավելացնել:

<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript">

<script src='http://suyb.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

<script src='http://suyb.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function() {

/*

var defaults = {

containerID: &#39;moccaUItoTop&#39;, // fading element id

containerHoverClass: &#39;moccaUIhover&#39;, // fading element hover class

scrollSpeed: 1200,

easingType: &#39;linear&#39; 

};

*/

$().UItoTop({ easingType: &#39;easeOutQuart&#39; });

});

</script>

Բոլոր քայլերը կատարելուց հետո սեղում ենք պահպանել կամ Save your template և վայելում ենք :