Ամենաշատ դիտված նյութերը Blogger-ում+Easy Slider

Հեղինակ Hayk գրվել է понедельник, 31 октября 2011 г. | 12:14

Easy Slider-սա JQuery-ի կողմից պատրաստած հերթական հետաքրքիր հավելումներից մեկն է: Հավելումը ավելացնելուց հետո ձեր բլոգում ամենաշատ դիտված նյութերը կսկսեն ցուցադրվել հետաքրքիր սլայդի տեսքով:
Իսկ թե ինչպես է այն աշխատում, կարող եք դիտել ինքներդ:

Փորձնական

Նշեմ, որ այս հավելումը շատ հեշտ է տեղադրվում բլոգում : Իսկ այժմ ներկայացնեմ տեղադրման ձևը:

Մտնում ենք բլոգի կառավարման է, ապա՝ Design – Page Elements
Սեղմում ենք “Add Gadget” և ավելացնում ենք “Popular Posts” գադջիթը:(Եթե բլոգում այն առկա է, ապա բաց թողեք այս քայլը)
Այս ամենը անելուց հետո, կրկին սեղմում ենք “Add Gadget” և ընտրում ենք՝ “HTML/Javascript”
Որից հետո բացված գադջիթում ավելացնում ենք ներքևում գրված կոդը՝

<style type="text/css" media="screen">
<!--
#PopularPosts1{
height:263px;
}
.item-content {
height:263px;
position:relative;
width:560px;
}
.slider {
height:263px;
margin-left:25px;
width:560px;
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:263px;
}
.item-snippet {
background:transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color:#FFFFFF;
padding:5px 5px 10px 5px;
position:absolute;
bottom:0;
text-align:left;
width:560px;
font-size:9px;
font-style:italic;
}
.item-title{
color:#FFFFFF;
font-size:10px;
font-weight:bold;
font-style:normal;
margin-bottom:5px;
}
.item-title a:link,.item-title a:visited{
color:#FFFFFF;
text-decoration:none;
border:none !important;
padding:0 !important;
}
.item-thumbnail img{
padding:0 !important;
}
.item-thumbnail a{
padding:0 !important;
}
.crosscol .widget-content {position:relative;}
.slider ul, .slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
.slider li, #slider2 li{
width:560px;
height:263px;
overflow:hidden;
}
.item-thumbnail img{width:560px;height:263px}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:582px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:100px;
width:30px;
z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
.test{
margin:30px;
}

-->
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-for-blogger.googlecode.com/svn/trunk/easysliderpopular.js' type='text/javascript'></script>

Վերջում ստացված գադջիթները տեղադրում ենք այնպես, ինչպես պատկերված է նկարում:

Հավանեցի՞ք: Տեղեկացրեք ընկերներին :

MRBlogger