12:33 متحميل لعبة Watch Dogs الاصلية مجاناً لفترة محدودة

سكريبت سلايد شو رأسي "بتمرير عمودي" : هذا ما سنقدم لكم في تدوينة اليوم وهي إضافة إحترافية لمدونات البلوجر يمكنك إضافتها في السيدبار.

سلايد شو: اضافة مميزة ليحصل موقعك على مظهر انيق و جداب, يجعل من مدونتك تبدو احترافية بعد خطوات بسيطة لتركيب هذا سلايد شو فقط تابع شرح ادناه خطوة بخطوة و ستحضى بمظهر انيق و احترافي لمدونتك.

خطوات إضافة السلايد شو:

1 - قم بتسجيل الدخول إلى بلوجر> ثم المظر > ثم تحرير HTML.
2- قم بالبحث عن الكود التالي ]]> بالإستعانة بلوحة التحكم بظغط على (CTRL+F)  واضف فوقه الكود التالي:

= 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/AVvXsEiNW3fZYYCe8nb4PWhPp7vrgQHBJc0OaL64_O0hsbh0JKA_eLv7JCQm05D97lhOs2nA0WZ-vAlVozSDtNpukUTcTL09njcbZBU_bud5dbWTY5N4I8B0Gi28zjxbhybFXyhwj5Plt0Iv8I0/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; }

3- ثم ابحث عن الوسم وضع الأكواد التالية فوقه.

<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/AVvXsEjwERusNatsKmYlsfB53nML-9oikVWBnVn31v9iWHu2IHJyxpXMSWe4cwiMk_fzT0gz7zJUfehMY-92uyhIGzfGiUZ9zYsJN7BJiZy5H_htujAhyphenhyphenCDCh6Exf9x3LCIYThhyphenhyphenqKzcQBfLZXc/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'/>

4- الان قم بنسخ الأكواد التالية وضعها في المكان الذي يناسبك ويجب وضعها فوق السايدبار أو أسفله.

<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.

معاينة الإضافة