سلايد شو تلقائي أحترافي الإصدار 2


نواصل معكم اصدقائي مع الاصدار الثاني من السلايدرات التلقائية مع هذه السلايدر الجميل والبسيط الذي سيجعل موقعك ينبض بالحياة 💖 يتميز بمرونته وسهولته وتوافقه مع اي قالب وكذالك عرضه للمواضيع تلقائيا، هنالك من لم يعجبه السلايدر الاصدار الاول بسبب حجمه وطريقة عرضه للمواضيع لذا هذه السلايدر سوف يفي بالغرض ويلبي المطلوب وسيعجب الجميع بأذن الله ،لا حاجة لأن اطيل عليكم سوف ادع السلايدر يتكلم عني بالمعاينة
شرح طريقة التركيب
1. ابحث بإستعمال CTRL+F عن ]]></b:skin> ثم ضع كود التالي

#featuredpost{margin-top: 8px;}
#slides{width: 1000px;
    margin: auto;}
/* CSS Responsive Slider Recent Post qaisi1web.blogspot.com */
#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){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {    overflow: hidden;
    font-size: 23px;
    bottom: 0;
    color: #FFFFFF;
    width: 100%;
    padding: 17px 10px 10px 134px;
    text-align: left;
    text-transform: uppercase;
    background: rgba(51, 51, 51, 0.93);
    height: 67px;
    font-family: Electrolize,ge_ss_threeregular;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
    line-height: 32px;
    left: 0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display: block;
    font-size: 32px;
    padding: 6px 21px;
    background: #1BBC9B;
    font-family: lolblogger;
    margin: 0;}
#slides li:nth-child(1) span.dm {    display: block;
    font-size: 16px;
    font-family: lolblogger;
    background: #333;
    color: #fff;
    padding: 6px 23px;
    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://im43.gulfup.com/iPsNWL.png);
    background-position: 50% 40%;
    background-repeat: repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:Electrolize,ge_ss_threeregular;
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:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:Electrolize,ge_ss_threeregular;
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%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}
#slides {
    width: 1000px;
    margin: auto;
}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
2. الكود التالي ضعه فوق </body>
<script src='//cdn.rawgit.com/assadalqaisi/qaisi1web/master/slider-post.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
  blogURL:"http://qaisi1web.blogspot.com/",
MaxPost:5,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false

});
});
//]]>
</script>
* قم بتغير http://qaisi1web.blogspot.com/ برابط مدونتك
3. الكود التالي هو الذي يستعدي السلايدر يمكنك وضع بحرية في اي مكان ، ويفضل ان يكون تحت القائمة او فوق المواضيع
<div id='featuredpost'/>
اذا كنت ترغب في اضافه هذه السلايدر في اداة HTML/JavaScript من صفحة التخطيط قم بنسخ الكود التالي كاملا وضعه داخل الاداة
<style>
#featuredpost{margin-top: 8px;}
#slides{width: 1000px;
    margin: auto;}
/* CSS Responsive Slider Recent Post qaisi1web.blogspot.com */
#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){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {    overflow: hidden;
    font-size: 23px;
    bottom: 0;
    color: #FFFFFF;
    width: 100%;
    padding: 17px 10px 10px 134px;
    text-align: left;
    text-transform: uppercase;
    background: rgba(51, 51, 51, 0.93);
    height: 67px;
    font-family: Electrolize,ge_ss_threeregular;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
    line-height: 32px;
    left: 0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display: block;
    font-size: 32px;
    padding: 6px 21px;
    background: #1BBC9B;
    font-family: lolblogger;
    margin: 0;}
#slides li:nth-child(1) span.dm {    display: block;
    font-size: 16px;
    font-family: lolblogger;
    background: #333;
    color: #fff;
    padding: 6px 23px;
    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://im43.gulfup.com/iPsNWL.png);
    background-position: 50% 40%;
    background-repeat: repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:Electrolize,ge_ss_threeregular;
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:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:Electrolize,ge_ss_threeregular;
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%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}
#slides {
    width: 1000px;
    margin: auto;
}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id='featuredpost'/>
<script src='//cdn.rawgit.com/assadalqaisi/qaisi1web/master/slider-post.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://qaisi1web.blogspot.com/",
MaxPost:5,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false

});
});
//]]>
</script>

نواصل معكم اصدقائي مع الاصدار الثاني من السلايدرات التلقائية مع هذه السلايدر الجميل والبسيط الذي ...

روابط الموضوع للنسخ

رابط
HTML
BBCode
يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي
6 التعليقات
avatar

الكود الاول اين يكون فوق ام تحت

avatar

روعه لكن لو سمحت اريد حذف سلايد شو كيف؟

avatar

اي سلايد شو تريد حذفه صديقي

avatar

عندما عملت القالب يطلع لي سلايد تبع موقعك انظر الى موقعي http://www.adnanzzzz3.ml/

avatar

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

كيف تعلق ؟

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

الاسم

بريد إلكتروني *

رسالة *