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

كيفية إضافة وتركيب "سلايد شو Slide show" متجاوب وحترافي لمدونات بلوجر: في تدوينة اليوم إن شاء الله سنتطرق لكيفية أو طريقة إضافة سكريبت سلايدر شو لمدونات بلوجر بطريقة صحيحة وسهلة تابع معى.

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

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

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

/* CSS Responsive Slider Recent Post Mosaique */ #featuredpost { padding: 10px; } #slides * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box } #slides ul, #slides li { padding: 0; margin: 0; list-style: none; position: relative } #slides ul { height: 440px } #slides li { width: 50%; height: 100%; position: absolute; display: none } #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5) { display: block } #slides li:nth-child(1) { right: 0; width: 49.7%; top: 0; border-right: 10px solid #fff; } #slides li:nth-child(2) { right: 50%; width: 25%; height: 50%; border-left: 3px solid #fff; border-bottom: 3px solid #fff; } #slides li:nth-child(3) { right: 75%; width: 24.1%; height: 50%; border-bottom: 3px solid #fff; } #slides li:nth-child(4) { right: 50%; top: 50%; width: 25%; height: 50%; border-left: 3px solid #fff; } #slides li:nth-child(5) { right: 75%; top: 50%; width: 24.1%; height: 50% } #slides li:nth-child(1) h4 { overflow: hidden; font-size: 21px; bottom: 0; color: #fafafa; width: 100%; padding: 10px 10px 10px 90px; text-align: right; text-transform: uppercase; background: linear-gradient(45deg,#0088ff,#9e44c9); height: 90px; font-family: 'Cairo', sans-serif; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2); line-height: 32px; right: 0; } #slides li:nth-child(1) .label_text { font-size: 30px; display: block; bottom: 10px; left: 10px; padding: 0; box-shadow: 5px 3px 0 rgba(0, 0, 0, 0.2); } #slides li:nth-child(1) span.dd { display: block; font-size: 20px; padding: 10px 10px; background: linear-gradient(45deg,#0088ff,#9e44c9); margin: 0; text-align: center; } #slides li:nth-child(1) span.tag { font-size: 0px; background: linear-gradient(45deg,#0088ff,#9e44c9); color: #ffffff; text-align: center; z-index: 4; position: absolute; left: 10px; top: 9px; border-radius: 3px; } #slides li:nth-child(2) span.tag { display: none; } #slides li:nth-child(3) span.tag { display: none; } #slides li:nth-child(4) span.tag { display: none; } #slides li:nth-child(5) span.tag { display: none; } #slides li:nth-child(1) span.dm { display: block; font-size: 14px; background: #fff; color: #374e6d; padding: 5px 21px; text-transform: uppercase; margin: 0; } #slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname { display: none; } #slides a { display: block; width: 100%; height: 100%; overflow: hidden } #slides img { display: block; width: 100%; height: 100%; border: 0; padding: 0; background-color: #333; -moz-transform: scale(1.0) rotate(0); -webkit-transform: scale(1.0) rotate(0); -ms-transform: scale(1.0) rotate(0); transform: scale(1.0) rotate(0); transition: all 0.6s linear; } #slides li a:hover img { -moz-transform: scale(1.1) rotate(1deg); -webkit-transform: scale(1.1) rotate(1deg); -ms-transform: scale(1.1) rotate(1deg); transform: scale(1.1) rotate(1deg); transition: all 0.3s linear; } #slides .overlayx { width: 100%; height: 100%; position: absolute; z-index: 0; background-image: url(https://i.imgur.com/OQfiMPf.png); background-position: 50% 40%; background-repeat: repeat-x; } #slides h4 { position: absolute; bottom: 0px; margin: 0; font-size: 13px; font-family: 'Cairo', sans-serif; font-weight: 600; left: 0px; padding: 7px 7px; color: #f9f9f9; z-index: 3; font-weight: inherit; background: linear-gradient(to bottom, #0088ff85 0%, #9e44c96b 100%); text-align: center; width: 100%; } #slides .label_text { font-size: 12px; color: #fff; bottom: 10px; z-index: 3; left: 10px; position: absolute; background: linear-gradient(to bottom, #243750 0%, #466184 100%); padding: 3px 6px; text-transform: uppercase; display: none; } #slides li:nth-child(2) .autname, #slides li:nth-child(3) .autname, #slides li:nth-child(4) .autname, #slides li:nth-child(5) .autname { display: none; } #slides li { transition: all .4s ease-in-out; border-left: 0px solid #fff; border-bottom: 0px solid #fff; } #slides .overlayx { transition: all .4s ease-in-out; border-left: 0px solid #fff; border-bottom: 0px solid #fff; } #slides li:nth-child(1) .overlayx { display: none; } #slides li:hover .overlayx { opacity: 0.1 } @media only screen and (max-width:800px) { #slides li:nth-child(1) h4 { font-size: 18px; line-height: 24px; } } @media only screen and (max-width:600px) { #slides ul { height: 600px } #slides li:nth-child(1) { width: 100%; height: 50%; border: none; border-bottom: 2px solid #fff; } #slides li:nth-child(2) { top: 50%; height: 25%; right: 0; width: 50% } #slides li:nth-child(3) { right: 50%; top: 50%; width: 50%; height: 25% } #slides li:nth-child(4) { right: 0; top: 75%; height: 25%; width: 100%; border: none; } #slides li:nth-child(5) { display: none; } } @media only screen and (max-width:480px) { #slides li:nth-child(1) h4 { font-size: 13px; line-height: 16px; } } /* Fin CSS Responsive Slider Recent */

3- ابحث في القالب على وضع الكود التالي فوقه مباشرة:

<script type='text/javascript'> //<![CDATA[ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 19(a){!6(g){q v={B:"",C:5,M:"#1a",D:1b,N:1c,O:!1,E:"1d",P:"1e://3.1f.1g.1h/-1i-1j/1k/1l/1m/1n/1o.1p",Q:["يناير","فبراير","مارس","أبريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],x:!1};v=g.1q({},v,a);q m=g(v.M),t=v.B,e=1r*v.C;""===v.B&&(t=R.S.1s+"//"+R.S.1t),m.1u(\'<h y="1v"><a z="#" y="T" w="1w"></a><a z="#" y="F" w="1x"></a></h><h y="j"><g b="1y"></G></h>\').1z(v.E);6 s(a){U(q t,e,s,l,i,n,r,o,d,c="",u=a.1A.1B,p=0;p<u.V;p++){U(q f=0;f<u[p].H.V;f++)W("1C"==u[p].H[f].1D){t=u[p].H[f].z;1E}l="X$Y"Z u[p]?u[p].X$Y.11.12(/\\/s[0-9]+\\-c/g,"/s"+v.D+"-a"):v.P.12(/\\/s[0-9]+(\\-c|\\/)/,"/s"+v.D+"$1"),e=u[p].w.$t,d=u[p].13.$t.A(0,10),s=u[p].1F[0].1G.$t,i=d.A(0,4),n=d.A(5,7),r=d.A(8,10),o=v.Q[1H(n,10)-1],c+=\'<k><2 b="1I">\'+v.x+\'</2><a 1J="1K" z="\'+t+\'" w="\'+e+\'"><h b="1L"></h><1m b="1N" 1O="\'+l+\'" w="\'+e+\'"><14>\'+e+\'</14></a><h b="1P"><2 b="1Q"><2 b="1R">\'+r+\'</2> <2 b="1S">\'+o+\'</2> <2 b="1T">\'+i+\'</2></2> <2 b="1U">\'+s+"</2></h></k>"}g("G",m).1V(c)}g(15).1W(6(){q a="/-/"+v.x;!1===v.x&&(a=""),g.1X({11:t+"/1Y/1Z/20"+a+"?21-22="+v.C+"&23=13&24=25-Z-26",27:s,28:"29",2a:!0}),2b(6(){W(g("#T").I(6(){16 g("#j k:J").17(g("#j k:K")),!1}),g("#F").I(6(){16 g("#j k:K").2c(g("#j k:J")),!1}),v.O){q a=v.N,t=18("L()",a);g("#j k:J").17(g("#j k:K")),g("#j").2d(6(){2e(t)},6(){t=18("L()",a)})}m.2f(v.E)},e)})}(2g)}6 L(){$("#F").I()}15.2h("");',62,142,'||span||||function|||||class||||||div||slides|li||||||var||||||title|tagName|id|href|substring|blogURL|MaxPost|ImageSize|loadingClass|nextx|ul|link|click|first|last|rotate|idcontaint|interval|autoplay|pBlank|MonthNames|window|location|prevx|for|length|if|media|thumbnail|in||url|replace|published|h4|document|return|before|setInterval|FeaturedPost|featuredpost|500|1e4|loadingxx|https|bp|blogspot|com|v45kaX|IHKo|VDgZxWv0xUI|AAAAAAAAHAo|QJQf8Dlh3xc|s1600|grey|gif|extend|200|protocol|host|html|buttons|prev|next|randomnya|addClass|feed|entry|alternate|rel|break|author|name|parseInt|tag|target|_blank|overlayx|img|random|src|label_text|date|dd|dm|dy|autname|append|ready|ajax|feeds|posts|default|max|results|orderby|alt|json|script|success|dataType|jsonp|cache|setTimeout|after|hover|clearInterval|removeClass|jQuery|write'.split('|'),0,{})) //]]></script><b:if cond='data:blog.pageType == "item"'><script type='text/javascript'>//<![CDATA[ $('#related-posts ul').owlCarousel({ rtl:true, loop:true, margin:1, navText:["",""], nav:true, autoplay:true, autoplayHoverPause:true, navSpeed:400, responsive:{0:{items:1}, 480:{items:2},1024:{items:3}} }); //]]></script>

4- الان لاضهار السلايد شو ضع الكود التالي في المكان الذي تريده والمكان المناسب تحت القائمة الرئيسية:

<b:if cond='data:blog.canonicalUrl == data:blog.canonicalHomepageUrl'><b:section class='Slideshow' id='Slideshow' maxwidgets='1' name='سلايدر شو' preferred='no' showaddelement='no'> <b:widget id='HTML11' locked='true' title='' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'><![CDATA[<div id="featuredpost"></div>]]></b:widget-setting> </b:widget-settings> <b:includable id='main'><script type='text/javascript'> //<![CDATA[ $(document).ready(function() { FeaturedPost({ blogURL: "", MaxPost: 20, idcontaint: "#featuredpost", ImageSize: 500, interval: 10000, autoplay: true, /* True */ tagName: false, }); }); //]]></script> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2></b:if> <div class='widget-content'> <data:content/> </div><b:include name='quickedit'/></b:includable> </b:widget></b:section> </b:if>

5- مبروك عليك الإضافة

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

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