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

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

    سلايد شو تلقائي أحترافي الإصدار 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 بتاريخ : 3/08/2016 ، للإبلاغ عن رابط معطوب اضغط هنا
    سلايد شو تلقائي أحترافي الإصدار 2

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

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

    6 تعليقات
    كيف تعلق ؟

    1. Unknown3/10/2016

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

      ردحذف
    2. ‫شاهد الفيديو4/15/2016

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

      ردحذف
      الردود
      1. اسعد القيسي4/15/2016

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

        حذف
      2. ‫شاهد الفيديو4/16/2016

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

        حذف
      3. اسعد القيسي4/16/2016

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

        حذف

    contact-us

    الاسم

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

    رسالة *

    القيسي ويب : الموقع العربي للقوالب والأعمال الفنية

    القيسي ويب | الأفضل لكم 2024/2014