شرح تركيب سلايدر شو لمدونات البلوجر بالسيد بار

اقدم لكم سلايدرشو لقالب البلوجر يوضع بالسيد بار

يظهر بشكل بشكل عامودي الحركة عامودية
السلايدر متجاوب

طريقة التركيب

قم ابحث عن الوسم ]]></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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIGkDhO_wFz5T5eyfGT2MzPdvumnsMSCUFNO471Ghrq6zBuOzsqi6ztWFp_bWjImCn0IzrOF0QJAIfrl-_5BZfXfzUZvpU006zJEkX13c17UpiAIUPfhTTWFKESt4C_7YunDZHtqiCTiw/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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjWmSCL1ByyCN_pAJRjH-oBvjX1hljvSDnNSHOPxmDvEFn7Vqm5tj8UEV5R0EiGYeulXM4eXgWDIMohSYqz4oKRZpJ6ISPt94xi5H0KAlP2pnesxUstxiQcdiSHsH4eSShOepUGhq8NhE/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>
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

عصام ويب

للبحـث بداخـل المدونــة . . .

شرح تركيب سلايدر شو لمدونات البلوجر بالسيد بار

اقدم لكم سلايدرشو لقالب البلوجر يوضع بالسيد بار

طريقة التركيب

إرسال تعليق

أشتـرك في المدونـة ليصـلك جديدنـا

تركيب اضافة احدث التعليقات متحركة بشكل عمودي بالسيد بار

تركيب أضافة عرض المواضيع بشكل شبكة

احتفالات العيد الوطني بشكل علم بلدك

تغير شكل التنقيط و شكل ترقيم الأسطر في قالب بلوجر

اضافة شريط الأخبـــار لقوالب البلوجر الشكل الثالث

مواضيع مهمة