اضافة سلايد شو احترافي يقوم بعرض مواضيع المدونه تلقائيا لمدونات بلوجر html

اضافة سلايد شو احترافي يقوم بعرض مواضيع المدونه تلقائيا لمدونات بلوجر html 
 اضافة سلايد شو احترافي يقوم بعرض مواضيع المدونه تلقائيا لمدونات بلوجر

شرح طريقة التركيب سلاد شو تلقائي و احترافي لمدونات بلوجر 2017 :

1- توجه لوحة تحكم بلوجر
2- تخطيط ثم اختر مكان الدي تريد ان يضهر فيه سلايد من افضل في بانر 
3- اضافة اداة html/javascript  ( مكان اسفل القائمة مكان البانر )
4- قم بنسخ كود سلايد شو احترافى التالي و ضعه في الاداة الجديدة ثم غير رابط الاصفر برابط مدونتك ثم  حفض 


<style>
/* CSS Responsive Slider Recent Post www.ar-pro-ar.blogspot.com */
#featuredpost {margin: 10px 0;}
#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:320px}
#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;top:0}
#slides li:nth-child(2){right:50%;width:25%;height:50%}
#slides li:nth-child(3){right:75%;width:25%;height:50%}
#slides li:nth-child(4){right:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){right:75%;top:50%;width:25%;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:rgba(0,0,0,0.3);
height:90px;font-family:droid arabic kufi;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;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#0a7cd2;margin:0;text-align: center;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
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:auto;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:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:droid arabic kufi;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:right;text-transform:uppercase;margin-left:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgb(10, 124, 210);padding:3px 6px;font-family:tahoma;
text-transform:uppercase;}
#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 .overlayx,#slides li{transition:all .4s ease-in-out}
#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%}
  #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%}
  #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;}}.overlayx{display:none; }
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://cdn.rawgit.com/proarabic/tharabic/04ca699e/slider.js">
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://ar-pro-ar.blogspot.com",
MaxPost:10,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

الان توجه الى القالب ثم تحرر html
ابحث عن  </head> و اضف الكود التالي فوقه :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
$ تـبـرع لـنـا
مثلما يعود النهر إلى البحر هكذا يعود عطاؤك إليك
إذا كانت خدماتنا تنال رضاك وترى أن علينا الإستمرار يرجى التبرع لنا لتقديم المزيد لغيرنا

تعليقات

الأرشيف

نموذج الاتصال

إرسال