جاري التحميل
المواضيع الأخيرة
أفضل 10 أعضاء في هذا الأسبوع
JoryAbdallah
 
omarpop23
 
عبدالله الوكيل
 
dyadoura
 
medoman2020
 

المتواجدون الآن ؟
ككل هناك 12 عُضو متصل حالياً :: 0 عضو مُسجل, 0 عُضو مُختفي و 12 زائر :: 1 روبوت الفهرسة في محركات البحث

لا أحد

[ مُعاينة اللائحة بأكملها ]


أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 141 بتاريخ 19/07/16, 08:08 am
احصائيات
هذا المنتدى يتوفر على 486 عُضو.
آخر عُضو مُسجل هو khairanynabil فمرحباً به.

أعضاؤنا قدموا 9737 مساهمة في هذا المنتدى في 1842 موضوع

منتديات تقنيات :: جاليري استايلات التومبلايت والقوالب والاكواد :: 

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

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

https://i.servimg.com/u/f58/19/61/68/63/screen37.png
طريقة التركيب نضع اوﻻ الكود جافا اللي بالمرفقات من خلال لوحة الادارة. عناصر اضافية. HTML و JAVASCRIPT. اكواد javascript تفعيل اكواد javascript اختار نعم وسجل
ثم انشاء كود الاسم اي شئ اختار جميع صفحات وضع الكود الاتي الذي بالمرفقات

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


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

 <div style="width: 903px;margin: 0px auto;height: 190px;overflow: hidden;">
                                                                              
 <div class="image_carousel">
                                                                                  
 <div id="foo1">
                                                                              
 <!--                                       المجموعة الأولى                                       -->            
                             <a href="رابط الموضوع">  
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>      
                          <a href="رابط الموضوع">  
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>      
                          <a href="رابط الموضوع">  
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>                                                                                                                        
                          <a href="http://www.theb3st.com/t57994-topic">  
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>                                                                                                                                                                                
   <a href="رابط الموضوع">  
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>      
                          <a href="رابط الموضوع">  
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>      
                          <a href="رابط الموضوع">  
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>                                                                                                                              
                          <a href="رابط الموضوع">  
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>                                                                                                                                                                                
                          <a href="رابط الموضوع">  
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>      
                          <a href="رابط الموضوع">  
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>      
                          <a href="رابط الموضوع">  
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>                                                                                                                                
                          <a href="رابط الموضوع">    
                            <img src="https://i.imgur.com/pZby46i.png" alt="إعلانك هنا" style="width: 200px; height: 145px;" /></a>                                                                                                                                                                                
 <!--                                       نهاية المجموعة الأولى                                       -->                                            
 </div>
                                                                                  
 <div class="clearfix">
</div>
                                             <a class="prev" id="foo1_prev" href="#"><span>prev</span></a>        <a class="next" id="foo1_next" href="#"><span>next</span></a>                                            
 <div class="pagination" id="foo1_pag">
                                                                        
 </div>
                                                                              
 </div>
                                                                        
 </div>
  
<script type="text/javascript">
$(document).ready(function() {  
$('#foo1').carouFredSel({
               auto: {pauseDuration: 5000, delay: 375},
               prev: '#foo1_prev',
               next: '#foo1_next',
               pagination: "#foo1_pag",

            });
$('#foo2').carouFredSel({
               auto: {pauseDuration: 5000, delay: 375},
               prev: '#foo2_prev',
               next: '#foo2_next',
               pagination: "#foo2_pag",

            });
 

});
</script>
 <script type="text/javascript" language="javascript">
         $(function() {

        
            $('#foo2').carouFredSel({
               auto: true,
               prev: '#prev2',
               next: '#next2',
               pagination: false,
               mousewheel: true,
               swipe: {
                  onMouse: true,
                  onTouch: true
               }
            });

            

         });
      </script>                   

وكدة خلصنا الكود عبارة عن كود جافا وكود css وقالب في قالب overall_header
دمتم بخير
المرفقات
Sla33333.txt لا تتوفر على صلاحيات كافية لتحميل هذه المرفقات.(54 Ko) عدد مرات التنزيل 5


m13
avatar
شكرا جزيلا لك

هل يمكن إضافة الكود في الإعلانات الخاصة بدلا من التومبيلات ؟
avatar
جرب الامر ﻻني لم اجرب واعتقد ﻻ يعمل سوى تومبلايت


m13
avatar
جربت في الإعلانات الخاصة و للأسف لم يعمل ^^

شكرا لك في كل الاحوال =)
avatar
اهلا فيك منورة


m13
avatar
بارك الله فيك دوما تبدعين 
فيما تضعين من مواضيع متميزة 
يعطيك العافية 
avatar
شكرا جزيلا لك

سجل دخولك أو انشئ حساب لترك رد

تحتاج إلى أن تكون عضوا من أجل ترك الرد.

انشئ حساب

الانضمام إلى مجتمعنا من خلال إنشاء حساب جديد. من السهل


انشئ حساب جديد

تسجل دخول

هل لديك حساب بالفعل؟ لا توجد مشكلة، قم بتسجيل الدخول هنا.


تسجيل دخول