U3F1ZWV6ZTMzNzExNzU0MTIwX0FjdGl2YXRpb24zODE5MDc2NjIzOTU=
recent
أخبار ساخنة

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

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

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

 

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


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

 طريقة تريكب السلايدر شو على المدونة :

- في البداية أدخل على  إعدادت المدونة ثم المظهر ثم إذهب الى html ثم إضغط على ctrl +f وإبحث عن الوسم   ]]></b:skin>  وبعد ذلك ضع فوقه الكود التالي:

/* ============= slidermohiTech ============= */
#sliderwebponto h2.title{display:none}
.recent-slider{position:relative;float:right;width:25%;margin-left:10px;margin-bottom:10px;box-shadow:0 0 5px 0 rgba(0,0,0,0.294);background:#fff;border:3px solid #fff}
.recent-slider:first-child{float:right;width:48%;margin-left:10px;margin-bottom:0}
.recent-slider:nth-child(3),.recent-slider:nth-child(5){margin-left:0}
.recent-slider:first-child .slidep-img{height:435px}
.recent-slider .slidep-img{display:block;background-size:cover;width:100%;height:210px}
.recent-slider .slider-bottom{position:absolute;bottom:5%;padding:0 15px}
.recent-slider .slider-bottom .slider-title a{color:#fff;tex-decoration:none;line-height:29px;font-size:20px}
.recent-slider .slider-bottom .slider-title{display:block;margin-bottom:5px}
.recent-slider .slider-bottom .ssummary{font-size:13px;color:#c7c7c7}
.recent-slider .slider-bottom .tagslider{border-radius:20px;background:#fff;padding:0 10px;text-decoration:none;font-size:12px;margin-bottom:5px;color:#0b0b0a;display:inline-block}
.recent-slider:first-child .slider-bottom{bottom:3%}
.recent-slider:first-child .slider-thumb a:before{content:'';width:100%;height:100%;position:absolute;right:0;top:0;background:rgba(19,106,138,0.67);background:-webkit-linear-gradient(to right,#267871,#136a8a);background:linear-gradient(to right,#267871,#136a8a)}
.recent-slider:nth-child(2) .slider-thumb a:before{content:'';width:100%;height:100%;position:absolute;right:0;top:0;background:#4776E6;background:-webkit-linear-gradient(to right,#8E54E9,#4776E6);background:linear-gradient(to right,#8E54E9,#4776E6)}
.recent-slider:nth-child(3) .slider-thumb a:before{content:'';width:100%;height:100%;position:absolute;right:0;top:0;background:#FF8008;background:-webkit-linear-gradient(to right,#FFC837,#FF8008);background:linear-gradient(to right,#FFC837,#FF8008)}
.recent-slider:nth-child(4) .slider-thumb a:before{content:'';width:100%;height:100%;position:absolute;right:0;top:0;background:#1D976C;background:-webkit-linear-gradient(to right,#93F9B9,#1D976C);background:linear-gradient(to right,#93F9B9,#1D976C)}
.recent-slider:nth-child(5) .slider-thumb a:before{content:'';width:100%;height:100%;position:absolute;right:0;top:0;background:#ee0979;background:-webkit-linear-gradient(to right,#ff6a00,#ee0979);background:linear-gradient(to right,#ff6a00,#ee0979)}
.recent-slider .slider-thumb a:before{opacity:.77}
@media screen and (max-width : 1024px) {
/* CSS CODE HERE FOR TABLETS ---*/
.recent-slider:first-child{width:45%}
.recent-slider{width:26.4%}
@media (min-width: 992px) and (max-width: 1199px){
.recent-slider{width:24.9%}
}
}
@media screen and (max-width : 768px) {
/* CSS CODE HERE FOR SMALL TABLETS ---*/
.recent-slider{width:49%}
.recent-slider:first-child .slidep-img{height:400px}
.recent-slider .slidep-img{height:220px}
.recent-slider .slider-bottom .tagslider,.list-post .recent-list:first-child .list-content .psummary{font-size:11px}
.recent-slider .slider-bottom .slider-title a{font-size:15px}
.recent-slider .slider-bottom .ssummary{font-size:12px}
.recent-slider:first-child{width:100%;margin-bottom:10px}
}
@media screen and (max-width : 640px) {
/* CSS CODE HERE FOR IPHONE ---*/
.recent-slider{width:49%}
}
@media screen and (max-width : 480px) {
/* CSS CODE HERE FOR SMARTPHONES ---*/
.recent-slider{width:100%}
}
@media screen and (max-width : 320px) {
/* CSS CODE HERE FOR SMALL MOBILES ---*/
.recent-slider:first-child .slidep-img{height:280px}
}
 
رابط تحميل الكود
والأن قم بالبحث عن الوسم  </body> و وضع فوقه الكود التالي:
<script type='text/javascript'>
//<![CDATA[
$("#sliderwebponto .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="<ul class='webponto-post'>",l="",i=0;i<e.feed.entry.length;i++){for(var r=e.feed.entry[i],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,170)+"...",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","w280-h220-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:"http://3.bp.blogspot.com/-qnLm52EsvBE/VDkrZ46TWXI/AAAAAAAAAsM/tiJ36WiboU4/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" src="'+p+'" title="'+n+'" alt="'+n+'"/></a></div>',l+='<div class="slider-bottom">',l+='<a class="tagslider" href="/search/label/'+v+'">'+v+"</a>",l+='<div class="slider-title"><a class="slider-titlea" href='+f+">"+n+"</a></div>",0==i&&(l+='<p class="ssummary">'+m+"</p>"),l+="</div>",l+="</div></div></li>"}l+="</ul>",t+=l,$("#HTML418 .widget-content").html(t)}})});
//]]>
</script>

 

رابط تحميل الكود
  والأن قم بإختيار المكان الذي تريد وضع السلايد شو فيه وقم بفتح التخطيط ثم إختر html/javascript  وضع هذا الكود :


 <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='container'>
<div class='fw-widget'>
<b:section class='sliderwebponto' id='sliderwebponto' maxwidgets='1'>
<b:widget id='HTML418' locked='true' title='سلايدر' type='HTML'>
<b:widget-settings>
<b:widget-setting name='content'>5/فنون</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</b:if>

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