إضافة افضل سلايد شو احترافي لمدونة بلوجر Slidershow

0 16 5 دقائق

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

إضافة افضل سلايد شو احترافي لمدونة بلوجر Slidershow

بسم الله والصلاة والسلام على رسول الله اما بعد ، احبتي ومتابعي مدونة هشام هاشم للمعلوميات والتقنيات والربح من الانترنت ، اليوم في قسم دروس بلوجر سوف نقدم لكم من بين افضل سلايد شو كلاسيك إحترافي لمدونة بلوجر متجاوب مع جميع قوالب بلوجر العربية والاجنبية . كما اننا سوف نوفر لكم اضافة تشتغل على معظم القوالب بلوجر القديمة والجديدة ، ايضا الطريقة التي سوف نشرح تتوفر على ثلاث خطوات بسيطة وغير معقدة وكما تعتمد على نسخ لصق وتغير رابط الصورة ، ايضا الاضافة ستكون كلاسيكية متجاوبة مع جميع القوالب مع اختيار الحجم المناسب لظهور السلايدر .

العديد من المدونين سواء محترفين او مبتدئين دائما تبحث عن اضافة سلايد شو لمدونة بطريقة مناسبة ومتطابقة ، ولكن هناك العديد من الاضافات الخاصة بالسلايدر الغير متجاوب مع القوالب وخصوصا على الهواتف الذكية ، ولكن في هذه التدوينة سوف نقدم لكم اضافة متاجوبة مع الهواتف الذكية بجميع المقاسات ، وكما تعلمون ان السلايدر يعطي جمالية الصفحة الرئيسية بطريقة مقبولة ، مع العلم انه سوف يكون شبيه 100 في المئة بقياس اي قالب بلوجر ، نعم سوف يصبح بنفس القياس الطولي والعرضي.

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

كيفيه إضافة سلايد شو Slideshow إحترافي لمدونات بلوجر

أذا كنت مهتم باضافة السلايدر في المدونة بطريقة احترافية ومنظمة ، فانا انصحك باستعمال هذه الاضافة التي سوف اقدم لك في هذه المدونة المباركة ، كما انك سوف تقوم بنسخ الاضافة متجاوبة مع الهواتف الذكية دون الخروج من السطر ، ايضا سوف اقدم لك شرح في كيفية تغير .

1. القالب >> تحرير HTML

2. CTRL+F من اجل استخراج محرك البحث

3. قم بالبحث عن ]]></b:skin>

4. اضف فوقه مباشرة الكود

.featuredpost.box_skitter.box_skitter_home.maxxiz-theme { padding:4px; background-color:#FDFDFD; box-shadow:0 1px 5px #BDBDBD; -moz-box-shadow:0 1px 5px #BDBDBD; -webkit-box-shadow:0 1px 5px #BDBDBD; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; position:relative; z-index:88; margin-bottom:15px;height: 250px; } .box_skitter_home.maxxiz-theme .prev_button, .box_skitter_home.maxxiz-theme .next_button, .box_skitter_home.maxxiz-theme .info_slide_dots { background-color:#F3F3F3; background:-moz-linear-gradient(top,#FFFFFF 0%,#F3F3F3 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFFFFF),color-stop(100%,#F3F3F3)); background:-webkit-linear-gradient(top,#FFFFFF 0%,#F3F3F3 100%); background:-o-linear-gradient(top,#FFFFFF 0%,#F3F3F3 100%); background:-ms-linear-gradient(top,#FFFFFF 0%,#F3F3F3 100%); background:linear-gradient(top,#FFFFFF 0%,#F3F3F3 100%); transition:background-color linear .3s; -moz-transition:background-color linear .3s; -webkit-transition:background-color linear .3s; -o-transition:background-color linear .3s; outline:0; } #autorslidertop { padding:4px; border:1px solid #DDD; background-color:white; box-shadow:0 1px 5px rgba(0,0,0,.15); -moz-box-shadow:0 1px 5px rgba(0,0,0,.15); -webkit-box-shadow:0 1px 5px rgba(0,0,0,.15); -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } .box_skitter ul { display:none; } .box_skitter .container_skitter { overflow:hidden; position:relative; width:100% !important; height:100% !important; max-width:100%; } .box_skitter .image { overflow:hidden; max-width:100%; max-height:100%; height:250px; } .box_skitter .image > a { display:block; height:250px; } .box_skitter .image img { display:none; width:100%; height:100%; max-height:100%; } .box_skitter .box_clone { position:absolute; top:0; left:0; width:100px; overflow:hidden; display:none; z-index:20; } .box_skitter img { max-width:none; } .box_skitter .box_clone img { position:absolute; top:0; width:780px; height:250px; max-width:780px; left:0; z-index:19; } .box_skitter .prev_button { position:absolute; top:50%; left:35px; z-index:100; width:42px; height:42px; overflow:hidden; text-indent:-9999em; margin-top:-25px; } .box_skitter .next_button { position:absolute; top:50%; right:35px; z-index:100; width:42px; height:42px; overflow:hidden; text-indent:-9999em; margin-top:-25px; } .box_skitter .info_slide { position:absolute; top:15px; left:15px; z-index:100; background:#000; color:#FFFFFF; font:padding:5px 0 5px 5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; opacity:0.75; } .box_skitter .info_slide .image_number { background:#333; float:left; padding:2px 10px; margin:0 5px 0 0; cursor:pointer; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } .box_skitter .info_slide .image_number_select { background:#c00; float:left; padding:2px 10px; margin:0 5px 0 0; } .box_skitter .container_thumbs { position:relative; overflow:hidden; height:50px; } .box_skitter .info_slide_thumb { -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; overflow:hidden; height:45px; top:auto; bottom:-5px; left:-5px; padding:5px; opacity:1.0; } .box_skitter .info_slide_thumb .image_number { overflow:hidden; width:70px; height:40px; position:relative; } .box_skitter .info_slide_thumb .image_number img { position:absolute; top:-50px; left:-50px; } .box_skitter .box_scroll_thumbs { padding:0 10px; } .box_skitter .box_scroll_thumbs .scroll_thumbs { position:absolute; bottom:60px; left:50px; background:#ccc; background:-moz-linear-gradient(-90deg,#555,#fff); background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#fff)); width:200px; height:10px; overflow:hidden; text-indent:-9999em; z-index:101; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; cursor:pointer; border:1px solid #333; } .box_skitter .info_slide_dots { position:absolute; bottom:-40px; z-index:151; padding:5px 0 5px 5px; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; } .box_skitter .info_slide_dots .image_number { background:#333; float:left; margin:0 5px 0 0; cursor:pointer; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; width:18px; height:18px; text-indent:-9999em; outline:0; overflow:hidden; } .box_skitter .info_slide_dots .image_number_select { background:#c00; float:left; margin:0 5px 0 0; } .box_skitter .label_skitter { z-index:80; position:absolute; bottom:0; left:0; display:none; } .loading { position:absolute; top:50%; right:50%; z-index:10000; margin:-16px -16px; color:#FFFFFF; text-indent:-9999em; overflow:hidden; background:#FFFFFF no-repeat left top; width:32px; height:32px; } .label_skitter { z-index:150; position:absolute; bottom:0; left:0; color:#FFFFFF; display:none; opacity:0.9; } .label_skitter p { padding:5px; margin:0; } .info_slide * {} .box_skitter .progressbar { background:#000; position:absolute; bottom:5px; left:10px; height:5px; width:940px; z-index:99; border-radius:20px; } .preview_slide { display:none; position:absolute; z-index:999; bottom:40px; left:-40px; width:100px; height:50px; border:3px solid #FFFFFF; background:rgba(0,0,0,.5); -moz-box-shadow:rgba(0,0,0,0.7) 0 0 10px; -webkit-box-shadow:rgba(0,0,0,0.7) 0 0 10px; box-shadow:rgba(0,0,0,0.7) 0 0 10px; overflow:hidden; } .preview_slide ul { width:100px; height:50px; padding:0; overflow:hidden; margin:0; list-style:none; display:block; position:absolute; top:0; left:0; } .preview_slide ul li { width:100px; height:55px; overflow:hidden; float:left; margin:0; padding:0; position:relative; display:block; } .preview_slide ul li img { position:absolute; top:0; left:0; height:55px; width:100px; } #overlay_skitter { position:absolute; top:0; left:0; width:100%; z-index:9998; opacity:1; background:#000; } .box_skitter_home { background-image:url(http://2.bp.blogspot.com/-DCmjx6RoZr4/USE6_AtfkoI/AAAAAAAAIew/Kymik1Hv4sY/s1600/anim_loading_sm_082208.gif); background-position:center center; background-repeat:no-repeat; } .box_skitter_home.maxxiz-theme .prev_button, .box_skitter_home.maxxiz-theme .next_button, .box_skitter_home.maxxiz-theme .info_slide_dots { border:1px solid #FFFFFF; box-shadow:0 1px 3px #BDBDBD; -moz-box-shadow:0 1px 3px #BDBDBD; -webkit-box-shadow:0 1px 3px #BDBDBD; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; } .box_skitter_home.maxxiz-theme .info_slide {} .box_skitter_home.maxxiz-theme .info_slide_dots { bottom:-14px; height:30px; padding:0 4px; z-index:99; left:43% !important; margin-left:-59px; } .box_skitter_home.maxxiz-theme .info_slide_dots span { transition:background linear .3s; -webkit-transition:background linear .3s; -moz-transition:background linear .3s; background-image:url(http://2.bp.blogspot.com/-wlQ0ByipI94/USJMy6cTt4I/AAAAAAAAIhI/0ZQk2Nw-F-Y/s1600/light-overlay.png); background-repeat:repeat-x; background-position:left -13px; background-color:#d1d1d1; color:#777777; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; border-bottom:1px solid #FFFFFF; display:block; width:10px; height:10px; text-indent:-9999px; float:left; margin:10px 6px 0 6px; } .box_skitter_home.maxxiz-theme .info_slide_dots span:hover { background-color:#777777; } .box_skitter_home.maxxiz-theme .info_slide_dots span.image_number_select { background-color:#F0BF4A; border:none; width:14px; height:14px; margin:8px 3px 0 3px; box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1); -webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1); -moz-box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1); } .box_skitter_home.maxxiz-theme .prev_button, .box_skitter_home.maxxiz-theme .next_button { display:block; width:75px; height:22px; line-height:30px; text-decoration:none; font-size:10px; text-transform:uppercase; transition:none; -webkit-transition:none; -o-transition:none; -moz-transition:none; text-indent:0; bottom:-11px; top:auto; color:#777777; z-index:98; cursor:pointer; } .box_skitter_home.maxxiz-theme .prev_button:hover, .box_skitter_home.maxxiz-theme .next_button:hover, .box_skitter_home.maxxiz-theme .prev_button:active, .box_skitter_home.maxxiz-theme .next_button:active { opacity:1 !important; } .box_skitter_home.maxxiz-theme .next_button { right:22.5%; padding-right:5px; text-align:right; line-height:22px; opacity:1 !important; } .box_skitter_home.maxxiz-theme .next_button span { padding-right:20px; background:url(http://3.bp.blogspot.com/-0sdXIJ1gg7E/USJMx9yN_NI/AAAAAAAAIg8/_c5LEVNSzyU/s1600/nav-next.png) no-repeat left top; background-position:right center; padding-bottom:1px; display:block; } .box_skitter_home.maxxiz-theme .prev_button { left:22.5%; padding-left:5px; text-align:left; line-height:22px; opacity:1 !important; } .box_skitter_home.maxxiz-theme .prev_button span { padding-left:20px; background:url(http://4.bp.blogspot.com/-z8Ap4NNJRac/USJMxgHGlDI/AAAAAAAAIg4/wblKthAlpyQ/s1600/nav-prev.png) no-repeat left top; background-position:left center; padding-bottom:1px; display:block; } .box_skitter_home.maxxiz-theme .label_skitter { width:90%; padding:0; left:50%; margin-left:-45%; bottom:10%; text-align:right; height:auto; color:white; } .box_skitter_home.maxxiz-theme .label_skitter .inner { padding:5px 8px 5px; background:#F0BF4A; border-right:5px solid white; border-left:5px solid white; } .box_skitter_home.maxxiz-theme .label_skitter p { padding:0; margin-top:5px; margin-bottom:5px; font-size: 11px; text-shadow:0 1px 0 rgba(0,0,0,0.3); } .box_skitter_home.maxxiz-theme .label_skitter strong { margin-top:0; line-height:20px !important; font-size:15px; text-shadow:0 1px 0 rgba(0,0,0,.3); color:white; } .box_skitter_home.maxxiz-theme .label_skitter a { color: #333; text-decoration: none; font-family: arial,tahoma; font-size: 17px; text-shadow: 1px 1px #E2D6A7; } .box_skitter_home.maxxiz-theme .label_skitter a:hover { color:#555; } .box_skitter_home.maxxiz-theme .info_slide_thumb { background-color:#FFFFFF; } .box_skitter.maxxiz-theme .info_slide_thumb .image_number { margin:5px; } .box_skitter .container_skitter .date, .box_skitter .container_skitter .cm { font-size:8px; } .box_skitter .container_skitter .date span { margin-right:3px; } #autoslidenya .widget-content, #manualslidenya1 .featuredarea { margin:0; padding:2px; } #manualslidenya1 .featuredarea { margin:0 0 15px; }

العملية الثانية البحث عن </head>

نقوم باضافة الكود اسفل </head> مباشرة .

)<[^<]*)*</script>/gi;newdowm=a(" <div> </div> ").append(t.replace(r,""));imgb=newdowm.find("img");if("media$thumbnail" in u[q]){w=u[q].media$thumbnail.url.replace(//s[0-9]+-c/g,"/s"+d.options.ImageSize);if(u[q].media$thumbnail.url.indexOf("img.youtube.com")!=-1){w=u[q].media$thumbnail.url.replace("default","0")}}else{if(imgb.length!=0){w=imgb[0].src}else{w=d.options.pBlank}}t=t.replace(/<S[^>]*>/g,"");if(t.length>d.options.Summarylength){t=t.substring(0,d.options.Summarylength)+"..."}m=u[q].title.$t;n+=' <li><a title="'+m+'" class="feathumb" href="'+s+'"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" class="random" data-src="'+w+'" alt="'+w+'"></a> <div class="label_text"> <div class="inner"> <a href="'+s+'">'+m+"</a> "+t+" </div> </div> </li> "}d.$el.find("ul.featpost").append(n);d.$el.find(".box_skitter_home.maxxiz-theme").skitter({label:true,numbers:true,auto_play:true,numbers_align:"center",dots:true,preview:true,structure:'<a href="#" class="prev_button">السابق</a><a href="#" class="next_button">التالي</a> <div class="container_skitter"> <div class="image"> <a href=""><img class="image_main" /></a> <div class="label_skitter"> </div> </div> </div> ',width_label:"90%",opacity_elements:1});var h=function(){d.$el.find(".container_skitter").removeAttr("style")};a(window).resize(h);d.$el.removeClass(d.options.loadingClass)};var e=function(i,h){return Math.floor(Math.random()*(h-i+1))+i};if(d.options.RandompostActive===true){a.get((d.options.blogURL===""?window.location.protocol+"//"+window.location.host:d.options.blogURL)+"/feeds/posts/default"+(d.options.tagName===false?"":"/-/"+d.options.tagName)+"?max-results=0&orderby=published&alt=json-in-script",function(h){var i=(d.options.MaxPost>h.feed.openSearch$totalResults.$t)?1:e(1,(h.feed.openSearch$totalResults.$t-d.options.MaxPost));a.get((d.options.blogURL===""?window.location.protocol+"//"+window.location.host:d.options.blogURL)+"/feeds/posts/default"+(d.options.tagName===false?"":"/-/"+d.options.tagName)+"?max-results="+d.options.MaxPost+"&orderby=published&start-index="+i+"&alt=json-in-script",g,"jsonp")},"jsonp")}else{a.get((d.options.blogURL===""?window.location.protocol+"//"+window.location.host:d.options.blogURL)+"/feeds/posts/default"+(d.options.tagName===false?"":"/-/"+d.options.tagName)+"?max-results="+d.options.MaxPost+"&orderby=published&alt=json-in-script",g,"jsonp")}};d.init()};a.AutofeaturedPost.defaultOptions={blogURL:"",MaxPost:5,ImageSize:650,Summarylength:100,RandompostActive:true,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif",tagName:false};a.fn.AutofeaturedPost=function(b){return this.each(function(){(new a.AutofeaturedPost(this,b))})}})(jQuery); //]]> </script>