شبكة UpNet
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا
او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي
سنتشرف بتسجيلك

شكرا



 
الرئيسيةالرئيسية  س .و .جس .و .ج  بحـثبحـث  الأعضاءالأعضاء  المجموعاتالمجموعات  الأوسمة  التسجيلالتسجيل  دخولدخول  

شاطر | 
 

 سلايد شو متحرك احترافي جديد للمنتديات احلى منتدى

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
LE9END
عضو متألق
عضو متألق
avatar

عدد المساهمات : 180
النشاط : 782
السٌّمعَة : 6

مُساهمةموضوع: سلايد شو متحرك احترافي جديد للمنتديات احلى منتدى   الجمعة سبتمبر 07, 2018 10:52 am

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

طريقة التركيب 
نضع اوﻻ الكود جافا من خلال لوحة الادارة. عناصر اضافية. HTML و JAVASCRIPT. اكواد javascript تفعيل اكواد javascript اختار نعم وسجل
ثم انشاء كود الاسم اي شئ اختار جميع صفحات وضع الكود الاتي الذي بالمرفقات
رابطة تحميل كود الجافا

من هنا

ثم ضع كود css الاتي من خلال لوحة الادارة. مظهر المنتدى. صور والوان. الوان. ورقة css وضع الكود الاتي


الكود:
[size=14][/size]
.titel-slide {[size=14][/size]
    background: #222 none repeat scroll 0 0;[size=14][/size]
    display: block;[size=14][/size]
    height: 28px;[size=14][/size]
    margin: 0 auto;[size=14][/size]
    padding-top: 12px;[size=14][/size]
    text-align: center;[size=14][/size]
    width: auto;[size=14][/size]
}[size=14][/size]
.titel-slide strong {[size=14][/size]
    color: #fff;[size=14][/size]
    font-family: arial,sans-serif;[size=14][/size]
    font-size: 16px;[size=14][/size]
    line-height: 1;[size=14][/size]
    margin-right: -55px;[size=14][/size]
}[size=14][/size]
.titel-slide i {[size=14][/size]
    color: #fff;[size=14][/size]
    display: inline-block;[size=14][/size]
    float: right;[size=14][/size]
    font-family: "Batch";[size=14][/size]
    font-size: 21px;[size=14][/size]
    font-style: normal;[size=14][/size]
    font-weight: bolder;[size=14][/size]
    height: 28px;[size=14][/size]
    line-height: 0.7;[size=14][/size]
    margin-top: -12px;[size=14][/size]
    padding-top: 12px;[size=14][/size]
    text-align: center;[size=14][/size]
    width: 40px;[size=14][/size]
}[size=14][/size]
    [size=14][/size]
.image_carousel {[size=14][/size]
    padding-right: 3px;[size=14][/size]
    position: relative;[size=14][/size]
}[size=14][/size]
.image_carousel a {[size=14][/size]
    display: block;[size=14][/size]
    float: left;[size=14][/size]
}[size=14][/size]
.image_carousel img {[size=14][/size]
    background-color: #fff;[size=14][/size]
    border: 1px solid #ccc;[size=14][/size]
    display: block;[size=14][/size]
    float: left;[size=14][/size]
    margin: 5px;[size=14][/size]
    padding: 6px;[size=14][/size]
}[size=14][/size]
.image_carousel img:hover {[size=14][/size]
    border: 1px solid #ddd;[size=14][/size]
    box-shadow: 0 1px 5px #555;[size=14][/size]
}[size=14][/size]
.image_carousel:hover > a.prev {[size=14][/size]
    left: 20px;[size=14][/size]
    opacity: 1;[size=14][/size]
    overflow: visible;[size=14][/size]
}[size=14][/size]
.image_carousel:hover > a.next {[size=14][/size]
    opacity: 1;[size=14][/size]
    overflow: visible;[size=14][/size]
    right: 20px;[size=14][/size]
}[size=14][/size]
a.prev, a.next {[size=14][/size]
    cursor: pointer;[size=14][/size]
    opacity: 0;[size=14][/size]
    overflow: hidden;[size=14][/size]
    transition: all 0.5s ease 0s;[size=14][/size]
}[size=14][/size]
a.prev {[size=14][/size]
    background-image: url("https://i.servimg.com/u/f37/16/46/77/76/left10.png");[size=14][/size]
    background-repeat: no-repeat;[size=14][/size]
    display: block;[size=14][/size]
    height: 40px;[size=14][/size]
    left: -32px;[size=14][/size]
    position: absolute;[size=14][/size]
    top: 90px;[size=14][/size]
    width: 40px;[size=14][/size]
}[size=14][/size]
a.next {[size=14][/size]
    background-image: url("https://i.servimg.com/u/f37/16/46/77/76/right10.png");[size=14][/size]
    background-repeat: no-repeat;[size=14][/size]
    display: block;[size=14][/size]
    height: 40px;[size=14][/size]
    position: absolute;[size=14][/size]
    right: -32px;[size=14][/size]
    top: 90px;[size=14][/size]
    width: 40px;[size=14][/size]
}[size=14][/size]
a.prev:hover, a.next:hover {[size=14][/size]
    opacity: 0.7 !important;[size=14][/size]
}[size=14][/size]
a.prev span, a.next span {[size=14][/size]
    display: none;[size=14][/size]
}[size=14][/size]
.pagination {[size=14][/size]
    text-align: center;[size=14][/size]
}[size=14][/size]
.pagination a {[size=14][/size]
    display: inline-block;[size=14][/size]
    float: none;[size=14][/size]
    height: 15px;[size=14][/size]
    margin: 0 5px 0 0;[size=14][/size]
    width: 15px;[size=14][/size]
}[size=14][/size]
.pagination a.selected {[size=14][/size]
    background-color: #5490cc;[size=14][/size]
    background-position: -25px -300px;[size=14][/size]
    cursor: default;[size=14][/size]
}[size=14][/size]
.pagination a span {[size=14][/size]
    display: none;[size=14][/size]
}[size=14][/size]
    .titel-slide, .pagination a, a.prev, a.next, .nav-tab {[size=14][/size]
    background-color: #444;[size=14][/size]
}[size=14][/size]
.slider-sh {[size=14][/size]
    background: #222 none repeat scroll 0 0;[size=14][/size]
    border: 1px solid #222;[size=14][/size]
    margin: auto;[size=14][/size]
   }

وسجل 
ثم ضع القالب الاتي من خلال لوحة الادارة .مظهر المنتدى. قوالب التومبلايت. ادارة عامة. قالب overall_header



الكود:
[size=14][/size]
 <div style="width: 903px;margin: 0px auto;height: 190px;overflow: hidden;"> [size=14][/size]
                                                                              [size=14][/size]
 <div class="image_carousel">[size=14][/size]
                                                                                  [size=14][/size]
 <div id="foo1">[size=14][/size]
                                                                               [size=14][/size]
 <!--                                       المجموعة الأولى                                       -->             [size=14][/size]
                             <a href="رابط الموضوع">   [size=14][/size]
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>      [size=14][/size]
                          <a href="رابط الموضوع">   [size=14][/size]
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>       [size=14][/size]
                          <a href="رابط الموضوع">  [size=14][/size]
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>                                                                                                                        [size=14][/size]
                          <a href="http://www.theb3st.com/t57994-topic">   [size=14][/size]
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>                                                                                                                                                                                [size=14][/size]
   <a href="رابط الموضوع">   [size=14][/size]
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>      [size=14][/size]
                          <a href="رابط الموضوع">   [size=14][/size]
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>       [size=14][/size]
                          <a href="رابط الموضوع">  [size=14][/size]
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>                                                                                                                               [size=14][/size]
                          <a href="رابط الموضوع">   [size=14][/size]
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>                                                                                                                                                                                [size=14][/size]
                          <a href="رابط الموضوع">   [size=14][/size]
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>      [size=14][/size]
                          <a href="رابط الموضوع">   [size=14][/size]
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>       [size=14][/size]
                          <a href="رابط الموضوع">  [size=14][/size]
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>                                                                                                                                 [size=14][/size]
                          <a href="رابط الموضوع">    [size=14][/size]
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>                                                                                                                                                                                [size=14][/size]
 <!--                                       نهاية المجموعة الأولى                                       -->                                             [size=14][/size]
 </div>[size=14][/size]
                                                                                  [size=14][/size]
 <div class="clearfix">[size=14][/size]
</div> [size=14][/size]
                                             <a class="prev" id="foo1_prev" href="#"><span>prev</span></a>        <a class="next" id="foo1_next" href="#"><span>next</span></a>                                             [size=14][/size]
 <div class="pagination" id="foo1_pag">[size=14][/size]
                                                                         [size=14][/size]
 </div>[size=14][/size]
                                                                              [size=14][/size]
 </div>[size=14][/size]
                                                                         [size=14][/size]
 </div>[size=14][/size]
   [size=14][/size]
<script type="text/javascript">[size=14][/size]
$(document).ready(function() {  [size=14][/size]
$('#foo1').carouFredSel({[size=14][/size]
               auto: {pauseDuration: 5000, delay: 375},[size=14][/size]
               prev: '#foo1_prev',[size=14][/size]
               next: '#foo1_next',[size=14][/size]
               pagination: "#foo1_pag",[size=14][/size]
[size=14][/size]
            });[size=14][/size]
$('#foo2').carouFredSel({[size=14][/size]
               auto: {pauseDuration: 5000, delay: 375},[size=14][/size]
               prev: '#foo2_prev',[size=14][/size]
               next: '#foo2_next',[size=14][/size]
               pagination: "#foo2_pag",[size=14][/size]
[size=14][/size]
            });[size=14][/size]
 [size=14][/size]
[size=14][/size]
});[size=14][/size]
</script>[size=14][/size]
 <script type="text/javascript" language="javascript">[size=14][/size]
         $(function() {[size=14][/size]
[size=14][/size]
         [size=14][/size]
            $('#foo2').carouFredSel({[size=14][/size]
               auto: true,[size=14][/size]
               prev: '#prev2',[size=14][/size]
               next: '#next2',[size=14][/size]
               pagination: false,[size=14][/size]
               mousewheel: true,[size=14][/size]
               swipe: {[size=14][/size]
                  onMouse: true,[size=14][/size]
                  onTouch: true[size=14][/size]
               }[size=14][/size]
            });[size=14][/size]
[size=14][/size]
            [size=14][/size]
[size=14][/size]
         });[size=14][/size]
      </script>                    
وكدة خلصنا الكود عبارة عن كود جافا وكود css وقالب في قالب overall_header
دمتم بخير
توقيع : LE9END




الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://up-net.yoo7.com
 
سلايد شو متحرك احترافي جديد للمنتديات احلى منتدى
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
شبكة UpNet :: تطوير المواقع :: تطوير منتديات أحلى منتدى :: أكواد احلى منتدى :: أكواد التومبيلايت-
انتقل الى: