سلايدشو مدونة جزائري ويب V2



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

كيفية اضافة هذا السلايدر شو الى مدوناتكم
    1. من لوحة التحكم  > قالب > تحرير "HTML"
    2. خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات
    3. ابحث عن الوسم  ]]></b:skin> و اضف الكود التالي فوقه:
/*----------alwansd----------*/#alwansd { height: 276px; margin: auto; padding: 20px; background: #fff; width: 957px; margin-top: 20px; border-radius: 0px; border: 1px solid #D6D3D3; }.alwanw { height: 241px; width: 100%; margin: auto; } .alwanw .contentdiv { visibility: hidden; opacity: 1; position: absolute; height: 240px; } .alwan-ps { text-align: right; float: left; width: 490px; height: 13px; margin: 0 auto; } .alwan-ps .toc { float: right; font-size: 0; width: 73px; height: 20px; background: #34495e; border-radius: 2px; margin-left: 8px; } .alwan-ps .toc:focus { transform: rotate(180deg); transition-duration: 1s; } .alwan-ps .selected { background: #F74047;} .alwan-ps .prev ,.alwan-ps .next { display:none; } .alwan-ps .next:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinedS9rxy8Q72koXSfYpoIEyzItS3Q36s7EGaDTSnn7DeGUl27rGDEz2PzgPaG05wUUxMIvrsVPVZ6O2ujY3O3D6sv9_gn4vz39TlbcdJBhncEA_5KhkUIsysMSWy0ogq_OrAz9r-xnJPK/w27-h128-no/next-h.png); } .alwanip { width: 486px; float: left !important; padding: 0 37px 0 0; margin: 0 auto; } .alwanip h6 { margin-bottom: 10px; } .alwanip a { color: #34495e; font: 23px normal 'GESSTwoLight'; margin: 0 auto; line-height: 37px; } .alwanip .alwand { color: #F74047; } .alwanip p { margin: 0 auto; color: #5E5D5D; font-family: 'GESSTwoLight'; } .alwansf { float: right !important; margin: 0 auto; } .alwansf a img { width: 435px; height: 275px; } .alwansf a img:hover { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); -webkit-transition: -webkit-transform 0.8s; -moz-transition: -moz-transform 0.8s; transition: transform 0.8s; }
ضع الكود في المكان الدي تريد اضافة السلايدشو
<div id='alwansd'><div class='alwanw' id='slider1'><script>//<![CDATA[document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");//]]></script></div><div class='alwan-ps' id='paginate-slider1'></div></div>

ثم اضف الكود التالي فوق الوسم <head/>
<script>//<![CDATA[/* Script from:www.jazairiweb.blogspot.com/ */ imgr = new Array(); imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg"; showRandomImg = true; aBold = true; summaryPost = 300; numposts1 = 6; label1 = "ok2"; function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s} function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}} if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; postdate = entry.published.$t; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d; var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break; }} var daystr = day+ ' ' + m + ' ' + y ; var trtd = '<div class="contentdiv"><div class="alwansf"><a href="'+posturl+'"><img width="617" height="385" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="alwanip"><h6><a href="'+posturl+'">'+posttitle+'</a></h6><div class="alwand" >'+daystr+'</div><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>'; document.write(trtd); j++; }}//]]></script>
غير "ok2" باحد اقسام مدونتك
شاهد الدرس

حصريا سلايدشو يدوي جميل جدا



السلام عليكم اولا تدوينة اليوم حصريا سلايدشو يدوي سلايدشو يديوي
 و سريع خيالي اكثر من رائع ,تم وضع سلايدشو من قبل ولاكن هدا اكثر جمال


    1. فوق هذا الوسم  <head/>  نضع الكود التالي
    2. او فوق  <b:skin/>  مع حدف الكود   <style>  و  <style/>  
<style> .blog_featured_posts {display: inline-block;width: 1173px; margin: 3px;} .blog_featured_post {display: block;position: relative;float: right;overflow: hidden;height:334px;} .blog_featured_post.first {width: 43%;margin-left: 9px;} .blog_featured_post.second {width: 20.79%;margin-left: 9px;} .blog_featured_post.third, .blog_featured_post.fourth {width: 34.126%;height:163px;} .blog_featured_post.third {margin-bottom: 9px;} .blog_featured_post a {display: block;color: rgb(255, 255, 255);text-shadow: rgba(0, 0, 0, 0.498039) 0px 1px 1px;position: relative;vertical-align: bottom;z-index: 1;height:100%;} .blog_featured_post a:hover:before {opacity: 0.6;box-shadow: inset 0px -3px 200px 5px #000;} .blog_featured_post a:before {display: block;position: absolute;content: &#39;&#39;;right: 0px;top: 0px;width: 100%;height: 100%;box-shadow: inset 0px -3px 37px 5px #000;opacity: 0.5;-webkit-transition: all 0.2s;transition: all 0.2s;} .blog_featured_post a .blog_contents {display: block;position: absolute;z-index: 5;bottom: 30px;right: 30px;left: 30px;font-weight:bold;text-transform: uppercase;line-height: 120%;-webkit-transition: all 0.2s;transition: all 0.2s;font-family: droid arabic kufi, sans-serif;} .blog_contents span {font-style: normal;display: block;position: absolute;bottom: 100%;padding: 5px 10px;letter-spacing: 0px;font-size: 15px;font-family: Lobster,ge_dinar_tworegular;line-height: 1;text-shadow: none;margin-bottom: 10px;background: #F74047;} .blog_contents span:after {content: &quot;&quot;;border-style: solid;border-width: 21px 7px 21px;border-color: transparent;border-bottom-color: #F74047;left: -7px;bottom: 0;position: absolute;} .blog_contents span:before {content: &quot;&quot;;border-style: solid;border-width: 21px 7px 21px;border-color: transparent;border-top-color: #F74047;right: -7px;top: 0;position: absolute;} .blog_featured_post a .blog_contents h3 {text-shadow: 2px 2px 4px black;padding: 8px 10px 9px;text-align: right;float: right;display: inline-block;background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;width:114%;opacity: 0.9;font-size:16px;font-family: Lobster,ge_dinar_tworegular; font-weight: normal;margin-right: -30px;} .blog_featured_post.first a .blog_contents h3 {text-shadow:2px 2px 4px black;padding: 8px 10px 9px;text-align:right;float:right;display:inline-block;background:rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;width:100%;opacity: 0.9;font-weight: normal;font-family: Lobster,ge_dinar_tworegular;margin-right:-30px;} .blog_featured_post .feat-img{width:100%;height:100%;background-size:cover;background-position:50%;}</style>

    1. معاينة سلايدشو : من هنا
    2. ضع الكود التالي داخل ادات جديدة   "html"  او اي مكان تريد
<div class="blog_featured_posts" id="blog_featured_posts"> <div class="ct-wrapper"> <div class="blog_featured_posts"> <div class="blog_featured_post first"><a href="http://jazairiweb.blogspot.com/2016/05/header-item.html"><div class="blog_contents"><span>اضافات بلوجر</span><h3>اضافة هيدر يضهر على التدوينات فقط مع ازرار المشاركة و صورة الموضوع</h3></div><div class="feat-img" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-gmHkiZES5r4DLasaYFoQMWRVrtNq86oVoEiCf3cdY0pUzgSbKGNBvcMXNL0t9__WqY7loxlYayP0nyUOsxudh8Ys2PHRuEOWoQ0SXmc8ZP4UIeTdoCV7axRAUWZ8kPDDM-7fhxSlX3d/s1600/header.jpg);"></div></a></div> <div class="blog_featured_post second"><a href="http://jazairiweb.blogspot.com/2016/05/redirect-old-url-new-url-blogger.html"><div class="blog_contents"><span>اضافات بلوجر</span><h3>الطريقة الصحيحة والفعالة من اجل اعادة توجيه المواقع تلقائيا</h3></div><div class="feat-img" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH1N1XHgTK-ZIT8rTqViiKmJZYrL_0dg105qwbLVI6SvH_b_NhnOHcXsTi10WKJJAGrqYnlM4c_WaeorTaRUx8hwRFQvaVyyx41LW9eP_9h2Zrs6VKCbWuKhH4MbF8poPNgXq8Q59MLkm1/s400/useful-links.jpg);"></div></a></div><div class="blog_featured_post third"><a href="http://jazairiweb.blogspot.com/2016/05/Template-jazairiweb-V5.html"><div class="blog_contents"><span>قوالب الموقع</span><h3>حصريا قالب موقع جزائري ويب النسخة V5 مجانا </h3></div><div class="feat-img" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtv060s2V4pAfqmNSaIdSjAbPT0xT_uJz4ILD-FmMShaNQ_-A7CBDRacGjvmWqe4MfDyekFQ6sGdG9Siuyt85tH50mgxTa5a9PPcFl8y27EaBREwtwam_kaww3sIl4HUVo9FMT8I3b9vo/s640/TEMPLATE-JAZAIRIWEB-V5.jpg);"></div></a></div> <div class="blog_featured_post fourth"><a href="http://jazairiweb.blogspot.com/2016/05/Winner-Protect-your-Templates-With-Non-Removable.html"><div class="blog_contents"><span>مسابقات</span><h3>مسابقة ربح حماية حقوق قالب مدونتك مع عدم حدفه ( انتهت )</h3></div><div class="feat-img" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwppN9QnJpi07L3Siegrq8DP9qpYpIIIcSAf7DzvmP53lKj0QTYbGUF6PE9uzHUgy4ldmAD0KqDR2Hz2MQUVTgfy5vfYan604lALqioY9CItTRxgGzB3COLt-UG_8psOPDglN7ipPP4TlE/s1600/protect-ur-template.png);"></div></a></div> </div></div></div>
شاهد الدرس

سلايدشو يدوي من تصميم جزائري ويب



في هذه التدوينة سوف اقدم لكم سلايدشو يدوي من تصميم جزائري ويب
لعرض المواضيع او خدمات او اضافات وذلك حسب رغبتك.
جميع الحقوق محفوظة لموقع جزائري ويب | JAZAIRIWEB

شرح و كيفية تركيب الاضافة :
    1.  ضعه الكود بين   <style> و <style/>  فوق  <head/>  
.recherche { height: 16px; width: 320px; margin: 0 auto;margin-bottom: 50px; } .shea { margin-top: -64px; } #b-query { width: 276px;border-radius: 0px 2px 2px 0px; padding: 0px 4px 0px; margin: 0; background: rgba(255, 255, 255, 0.86); font-family:Electrolize,GESSTwoLight, sans-serif;border: none; float: right; text-align: right; color: #34495e; height: 48px; } #b-searchbtn { float: left;border-radius: 2px 0px 0px 2px; width: 36px; height: 48px; font: 13px Electrolize,GESSTwoLight, sans-serif; background: rgba(8, 148, 216, 0.91) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcSGUlrDrmwknXVrrerG4hnrA-bILrgjLQdR8KOR6bycbKpqg0K9wq0dc8d6u5gC13Ec81QWekCBMYtrlYSKVGAZz84-6YpbMMB78ur9380nZc0sHAdA_Yk-m8m3ZS8pKRvoo9DVKDebc/s1600/srch.png) center no-repeat; cursor: pointer; border: none; margin: 0; padding: 0; } #b-searchbtn:hover { backgccround: rgba(252, 84, 0, c0.9) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcSGUlrDrmwknXVrrerG4hnrA-bILrgjLQdR8KOR6bycbKpqg0K9wq0dc8d6u5gC13Ec81QWekCBMYtrlYSKVGAZz84-6YpbMMB78ur9380nZc0sHAdA_Yk-m8m3ZS8pKRvoo9DVKDebc/s1600/srch.png) center no-repeat; }


    1. ضع الكود التالي في المكان الدي يناسك
<center><div class='blog_featured_posts'><div class='blog_featured_post first'><a href='#'><div class='blog_contents'><span>افضل موقع جزائري</span><h3>أتريد قالب جزائري ويب أن ينشر&#1567;</h3></div><div class='feat-img' style='background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2uUQ78-FaL_2JA9a6AeaGaF3h4D3e7CcQd-0BvYsjk-MjPMjyJDJOH4J3XGz8LbrTR-Ab0qEFnOg5J0_XfEoLdbrhO46Qi30jCNzUH5vA1lYSwWqrtkBII1PK9QMQCQLt4IwD0ZOi3Fw/s400/3D-Wall-Logo-MockUp-2.jpg);'/></a></div><div class='blog_featured_post second'><a href='#'><div class='blog_contents'><span>افضل موقع جزائري</span><h3>أتريد قالب جزائري ويب أن ينشر&#1567;</h3></div><div class='feat-img' style='background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2uUQ78-FaL_2JA9a6AeaGaF3h4D3e7CcQd-0BvYsjk-MjPMjyJDJOH4J3XGz8LbrTR-Ab0qEFnOg5J0_XfEoLdbrhO46Qi30jCNzUH5vA1lYSwWqrtkBII1PK9QMQCQLt4IwD0ZOi3Fw/s400/3D-Wall-Logo-MockUp-2.jpg);'/></a></div><div class='blog_featured_post third'><a href='#'><div class='blog_contents'><span>افضل موقع جزائري</span><h3>أتريد قالب جزائري ويب أن ينشر&#1567;</h3></div><div class='feat-img' style='background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2uUQ78-FaL_2JA9a6AeaGaF3h4D3e7CcQd-0BvYsjk-MjPMjyJDJOH4J3XGz8LbrTR-Ab0qEFnOg5J0_XfEoLdbrhO46Qi30jCNzUH5vA1lYSwWqrtkBII1PK9QMQCQLt4IwD0ZOi3Fw/s400/3D-Wall-Logo-MockUp-2.jpg);'/></a></div><div class='blog_featured_post fourth'><a href='#'><div class='blog_contents'><span>افضل موقع جزائري</span><h3>أتريد قالب جزائري ويب أن ينشر&#1567;</h3></div><div class='feat-img' style='background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2uUQ78-FaL_2JA9a6AeaGaF3h4D3e7CcQd-0BvYsjk-MjPMjyJDJOH4J3XGz8LbrTR-Ab0qEFnOg5J0_XfEoLdbrhO46Qi30jCNzUH5vA1lYSwWqrtkBII1PK9QMQCQLt4IwD0ZOi3Fw/s400/3D-Wall-Logo-MockUp-2.jpg);'/></a> </div></div></center>
شاهد الدرس

سلايدشو جزائري ويب بمناسبة السنة الجديدة [ تم التحديث ]



تدوينة اليوم هدية لمتابعي الموقع بمناسبة السنة الجديدة [ تم التحديث ]
سلايدشو مدونة جزائري ويب V3 مجانا و سريع خيالي اكثر من رائع
ملاحظة: تم وضع السلايدشو V2 من قبل فقط اضغط هنا
جميع الحقوق محفوظة لموقع جزائري ويب | JAZAIRIWEB 


    1. فوق هذا الوسم  <head/>  نضع الكود التالي
    2. او فوق  <b:skin/>  مع حدف الكود   <style>  و  <style/>  
<style>#w2bSlide{position: relative;display: block;} #w2bNivoSlider {position:relative;width:1170px !important;height:253px !important;min-height:211px !important; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfatMi8Y7BeVevKeeDf0bdnu6LjPw800qIwUuWqUXKzk2OwtiyIe2DQ0wLS5m0L5UC3_Jw-nVIJsM_T2j2aM15mB3Fi9y0No9dQHmDtQJ3xK53CxNCrvAQG9VlsSxYCkMHKWgWLw8bpBUG/s48-no/) no-repeat 50% 50%; margin: 20px auto 15px;border:5px solid #fff} #w2bNivoSlider img {position:absolute;top:0;left:0;display:none} .nivoSlider {position:relative;width:1170px;height:auto;} .nivoSlider img {position:absolute;top:0;left:0} .nivo-main-image {display:block!important;position:relative!important;width:100%!important} .nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none} .nivo-slice {display:block;position:absolute;z-index:5;height:100%;top:0} .nivo-box {display:block;position:absolute;z-index:5;overflow:hidden} .nivo-box img {display:block} .nivo-caption {padding:10px;font-family:Electrolize,GESSTwoLight;position:absolute;left:0px;bottom:0px;right:0px;background:#34495e;color:#fff;text-align:center;-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width:auto;z-index:8;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .nivo-caption p {padding:0px;margin:0} .nivo-caption a {display:inline!important} .nivo-html-caption {display:none} .nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTetzI8-OXwFr0qFXFRtKGC9GPcQfvkbIkKc6RmHiIaexFeHQRYnEiVJ9RbX3TGwzXP1RXv8xXnV3A-zSvJ2UvZjkG3AngoBAO10wLDFBBH4inWCYEsXikkjqoosGrhTuh7_auX47iQiVA/s1600/w2bArrows.png") no-repeat;text-indent:-9999px;border:0} .nivo-prevNav {left:10px} .nivo-nextNav {background-position:-30px 0!important;right:10px}</style>

    1. معاينة سلايدشو جزائري ويب : من هنا
    2. فوق هذا الوسم  <body/>  نضع الكود التالي
<script type='text/javascript'> /* <![CDATA[ */ jQuery(document).ready(function($) { $('#w2bNivoSlider').nivoSlider({ effect : 'random', slices : 15, boxCols : 8, boxRows : 4, animSpeed : 500, pauseTime : 3000, startSlide : 0, directionNav : true, directionNavHide : true, controlNav : false, keyboardNav : false, pauseOnHover : true, captionOpacity : 0.6 }); }); /* ]]> */ </script>


    1. فوق هذا الوسم  <b:skin/>  نضع الاكواد التالية
<script src='https://googledrive.com/host/0B2v7cH8soLJrV2plNzMxRm5icnM' type='text/javascript'></script><script src='https://googledrive.com/host/0B2v7cH8soLJralV3STNxbUgwQkE' type='text/javascript'></script>

    1. ضع الكود التالي في المكان الدي يناسبك
<div id='w2bSlideContainer'><div id='w2bNivoSlider'><a href='http://jazairiweb.blogspot.com/p/android.html'>
<img alt='' src='https://goo.gl/ZwEwJl' title='يرجى من زوارنا الكرام التفاعل و التعليق على المواضيع لدفعنا للتقدم بالمحتوى و الشكر مسبوق'/></a><a href='http://jazairiweb.blogspot.com/p/broken-link.html'><img alt='' src='https://goo.gl/SGMYUp' title='يرجى من زوارنا الكرام التفاعل و التعليق على المواضيع لدفعنا للتقدم بالمحتوى و الشكر مسبوق'/></a></div></div>
شاهد الدرس
الاشتراك في: الرسائل (Atom)

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

برمجة: ماهرسافوح "
مدونة جزائري ويب © جميع الحقوق محفوظة 2023