اقدم لكم سلايدر شو رائع جدا لمدونات البلوجر يوضع بالسيد بار
يظهر بشكل بشكل عامودي الحركة عامودية
السلايدر متجاوب
طريقة التركيب
قم ابحث عن الوسم ]]></b:skin> و ضع الكود التالي فوقه
/*=====================================
= Slick Slider widget css
=====================================*/
.isw-DySlider {
position: relative;
overflow: hidden;
padding: 0;
}
.slider-thumb img {
width: 100%;
}
.slider-content p.ssummary {
display: none;
}
.slider-thumb {
height: 200px;
overflow: hidden;
position: relative;
}
.slider-bottom {
position: absolute;
bottom: 0;
width: 100%;
text-align: right;
color: #fff;
padding:5%;
box-sizing: border-box;
}
.slider-thumb a:before {
content: no-close-quote;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: url(//3.bp.blogspot.com/-LnvazGBvKh8/VskckSkmzxI/AAAAAAAAC4s/erEgI6A_ih4/s1600-r/metabg.png) repeat-x;
background-size: 100% 100%;
height: 100%;
}
a.tagslider {
background: #c71212;
padding: 0 8px;
border-radius: 10px;
display: inline-block;
}
.slider-title {
font-size: 1.3rem;
font-weight: 800;
margin-top: 8px;
}
.slider-content .date {
color: #aba7a7;
font-family: sans-serif;
font-size: 12px;
}
.date:before {
content: "\f017";
font-family: fontawesome;
float: right;
padding-left: 5px;
}
.slider-content .postAuthor:before {
content: "\f007";
font-family: fontawesome;
float: right;
padding-left: 5px;
font-size: 10px;
color: #aba1a1;
margin-top: 4px;
}
.slider-content .postAuthor {
float: right;
font-size: 14px;
}
/*=====================================
= Slick Slider css
=====================================*/
/* Slider */
button.slick-arrow {
border: none;
background: #d62424;
color: #fff;
width: 13%;
padding: 12px 0;
margin-right: 2%;
}
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
position:relative;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
ثم ابحث عن الوسم </body> و ضع الكود التالي فوقه
<script type='text/javascript'>
//<![CDATA[
$("#IsweebSlider .widget").each(function(){
var e=$(this),
t=e.find(".widget-content").text(),
l=t.split("/"),
i=l[0],r=l[1],
n=Math.floor(Math.random()*i+1);
if(t.match("recentpost"))
var o="/feeds/posts/default?alt=json-in-script&max-results="+i;
else if(t.match("randompost"))
var o="/feeds/posts/default?alt=json-in-script&orderby=updated&start-index="+n+"&max-results="+i;
else var o="/feeds/posts/default/-/"+r+"?alt=json-in-script&max-results="+i;
$.ajax({
type:"GET",
url:o,
dataType:"jsonp",
success:function(e){
for(var t="<button type='button' class='top-arrow' style='display: inline-block;'><i class='fa fa-chevron-up'></i></button><button type='button' data-role='none' class='bottom-arrow' aria-label='Next' role='button' style='display: inline-block;' aria-disabled='false'><i class='fa fa-chevron-down'></i></button><ul class='isw-DySlider isw-carousel'>",l="",i=0;i<e.feed.entry.length;i++){
for(var r=e.feed.entry[i],
postAuthor=r.author[0].name.$t,
uriauthor=r.author[0].uri.$t,
date=r.published.$t.substring(0,10),
n=r.title.$t,
o=0;o<r.link.length;o++){
if("replies"==r.link[o].rel&&"text/html"==r.link[o].type){r.link[o].title,r.link[o].href}if("alternate"==r.link[o].rel){
var f=r.link[o].href;break}}
var p,h=r.content.$t,u=$("<p>").html(h).text(),m=u.substring(0,180)+"...",
v=r.category[0].term;
try{p=0==i?r.media$thumbnail.url.replace("s72-c","w550-h420-c").replace("default","hqdefault"):r.media$thumbnail.url.replace("s72-c","w550-h420-c").replace("default","hqdefault")}catch(g){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),p=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://3.bp.blogspot.com/-qnLm52EsvBE/VDkrZ46TWXI/AAAAAAAAAsM/tiJ36WiboU4/s1600/90.jpg"}
l+='<li class="recent-slider"><div class="slideto">',
l+='<div class="slider-content">',
l+='<div class="slider-thumb"><a href='+f+'><img class="slidep-img traslider" src="'+p+'" title="'+n+'" alt="'+n+'"/></a></div>',
l+='<div class="slider-bottom">',
l+='<div class="slider-tag"><a class="tagslider" href="/search/label/'+v+'">'+v+"</a></div>",
l+='<div class="slider-title"><a class="slider-titlea" href='+f+">"+n+"</a></div>",
l+='<div class="slider-faq traslider">',
l+='<p class="ssummary">'+m+"</p>", //|
//0==i&&(l+='<p class="ssummary">'+m+"</p>"), //|
//|
l+='<div class="date">'+date+"</div>",
l+='<a class="postAuthor" href='+uriauthor+' target="_blank" rel="nofollow">'+postAuthor+"</a>",
l+="</div>",
l+="</div>",
l+="</div></div></li>"}
l+="</ul>",
t+=l,
$("#IsweebSlider .widget-content").html(t);
/*==============*/
//OwlCarousel-js
/*==============*/
$('.isw-DySlider.isw-carousel').slick({
infinite: true,
autoplay: true,
vertical:true,
verticalSwiping:true,
slidesToShow: 3,
slidesToScroll: 1,
prevArrow: $('.top-arrow'),
nextArrow: $('.bottom-arrow')
});
}})
});
//]]>
</script>
<script src='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js' type='text/javascript'/>
- slidesToShow يقصد بها عدد التدوينات المراد عرضها
- slidesToScroll يقصد بها عدد التدوينات المراد تمريرها
قم بوضع الاكواد التالية
في المكان الذي يناسبك ويفض وضعها فوق السايدبار أو أسفله
<div class='DySliderstyle-material' id='IsweebSlider'>
<b:section class='Isweeb-slickSlider' id='Isweeb-slickSlider' maxwidgets='1'>
<b:widget id='HTML748' locked='true' title='سلايدر أفقي' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>10/قوالب</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- script title btn more -->
<script>
document.write('<div class="aftertitle"><h2><data:title/></h2> <div class="getmorre"><a href="/search/label/?max-results=4">المزيد<i class="fa fa-plus"></i></a></div></div>');
</script>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
ان أردت أن يعمل السلايدر بتسمية فقم بتغيير قوالب بتسمية لديك وان أردت أن يظهر مواضيع عشوائية ضع مكان التسمية randompost ولعرض اخر المواضيع ضع مكانها recentpost
عصام ويب
إرسال تعليق