سلايد مميز لعرض الصور والفيديو

السلام عليكم

ارفع لكم في هذه التدوينه سلايد مميز لعرض الصور والفيديو

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

هذه الاضافه ليست مجانيه وقيمتها 10 دولار .. ولكن تهديها لكم مدونة طيف مجانا

هذة صورة الاضافة

الطريقة

قم بتحرير القالب وابحث عن

الصق الاكواد التاليه فوقه مباشره

<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/50688218/sliding-image-gallery/sliding-image-gallery-v2.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://dl.dropbox.com/u/50688218/sliding-image-gallery/jquery.sliding-image-gallery-v2.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.banner').slidingImageGalleryV2({ width:960, height:328, selectRollOver:false, buttonPosition:"right", buttonWidth:300, buttonHeight:82, showThumb:true, thumbWidth:52, thumbHeight:52, shadowType:1, shadowHeight:30, transition:"random", easing:"", showTimer:true, timerAlign:"bottom", pauseRollOver:true, scrollType:"mouse_move" }); }); </script>

احفظ القالب

اذهب الى التخطيط >  اضافة اداة الجافاسكريبت

الصق الكود التالي

<div class="banner"> <div class="screen"> <noscript> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwUrpKHU-dwZTF2_2-SKI8uz5s0dbHS5cV859Pp6eMjSSGcsgm316l7nfVQ123ML1z-y60Vz1WYr46qzvpHzJDYxOeJLkLsI8xWtuWpu7ywkspNbs42kv3HvDzOtOKQmRMc4sUPtdfWKyX/s1600/1.jpg" alt="" /> </noscript> </div> <div class="items"> <ul> <li data-delay="8000"><div class="button"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwUrpKHU-dwZTF2_2-SKI8uz5s0dbHS5cV859Pp6eMjSSGcsgm316l7nfVQ123ML1z-y60Vz1WYr46qzvpHzJDYxOeJLkLsI8xWtuWpu7ywkspNbs42kv3HvDzOtOKQmRMc4sUPtdfWKyX/s1600/1.jpg" /><p> <span class="title">Summer Pool Party</span>Perfect for Summer and Spring pool parties or themed club event.</p> </div> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwUrpKHU-dwZTF2_2-SKI8uz5s0dbHS5cV859Pp6eMjSSGcsgm316l7nfVQ123ML1z-y60Vz1WYr46qzvpHzJDYxOeJLkLsI8xWtuWpu7ywkspNbs42kv3HvDzOtOKQmRMc4sUPtdfWKyX/s1600/1.jpg"></a> <a href="http://megtrb.blogspot.com" target="_blank"></a> <div class="content" style="left:50px; top:100px;"data-direction="left" data-offset="150" data-time="1000" data-delay="500"> <span class="bg" style="background-color:#1a7ec1; background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#39A6FF),color-stop(100%,#036093)); background-image:-webkit-linear-gradient(#39A6FF,#036093); background-image:-moz-linear-gradient(#39A6FF,#036093); background-image:-o-linear gradient(#39A6FF,#036093); background-image:linear-gradient(#39A6FF,#036093); -moz-box-shadow:0 1px 0 0 rgba(255,255,255,0.7) inset, 3px 3px 5px rgba(0,0,0,0.3); -webkit-box-shadow:0 1px 0 0 rgba(255,255,255,0.7) inset, 3px 3px 5px rgba(0,0,0,0.3); -o-box-shadow:0 1px 0 0 rgba(255,255,255,0.7) inset, 3px 3px 5px rgba(0,0,0,0.3); box-shadow:0 1px 0 0 rgba(255,255,255,0.7) inset, 3px 3px 5px rgba(0,0,0,0.3);"></span><span class="text" style="padding:8px 15px 3px; color:#FFF; font-size:50px; -moz-text-shadow:0px -1px rgba(10,60,109,0.8); text-shadow:0px -1px rgba(10,60,109,0.8);">Loungelux Party</span> </div> <div class="content" style="right:24px; top:195px;"data-direction="right" data-offset="60" data-time="1000" data-delay="1700"> <span class="bg" style="background-color:#FFF;"></span><span class="text" style="padding:8px 15px 3px; color:#000; font-size:22px;">SUNDAY <a href="http://megtrb.blogspot.com" target="_blank">MAY 23</a></span> </div> <div class="content" style="right:120px; top:10px;"data-direction="right" data-offset="100" data-time="700" data-delay="1200"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwcZoWXfjnZ2jlNqmI5p656hfclEAb31Oows_odss_TynEyLVVw-jnWRGAE8uIPzjY4-1Zw58_iPQvlh9ZPbzYhLwbtW0bwZXL4yMEdIRrASOY2cXvcFVrBjOGJXKIN2ohlN10Wh2aw8Fm/s1600/dude.png" /> </div> <div class="content" style="right:98px; top:10px;"data-direction="right" data-offset="100" data-time="700" data-delay="1500"> <img src=".../images/content/boy.png" /> </div> </li> <li data-delay="6000"><div class="button"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6LARGanTaVhs_r4RMpOKDBeO_vu-0pQC3DvAUBd-rjeSFO6sEPmcCXVegW-s0q-uhs8ZwLXytxHBL8s59d2jMd6kgQox28VLWwEjV_o0PH3-t0I2jLyO3oaZygAkd-yG5tSsPhqIj9Krf/s1600/images-2.png" /><p> <span class="title">Skier in Mountains</span>Backcountry skier under Mount Abbott in Little Lakes Valley.</p> </div> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6LARGanTaVhs_r4RMpOKDBeO_vu-0pQC3DvAUBd-rjeSFO6sEPmcCXVegW-s0q-uhs8ZwLXytxHBL8s59d2jMd6kgQox28VLWwEjV_o0PH3-t0I2jLyO3oaZygAkd-yG5tSsPhqIj9Krf/s1600/images-2.png"></a> <a href="http://megtrb.blogspot.com/" target="_blank"></a> <div class="content" style="width:100%;bottom:0;"data-time="600"> <span class="border border-black"></span><span class="bg bg-opacity" style="border-top:1px solid #404040;"></span><span class="text" style="padding:15px 20px;"> <p class="title" style="font-size:28px;"> Cross Country Skier</p> <p class="field" style="color:#EEE;"> There was 8 foot of snow, and for two single people - the irony of the trip wasn't wasted on us. It was a great trip - we took the train to the top, then <a href="http://megtrb.blogspot.com" target="_blank">hiked down</a> in almost 8 foot of snow.</p> </span> </div> </li> <li data-delay="7000"><div class="button"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy_JmGk0ynUBclwf-9MiTkUsjoIsAirHoXoMdmw0qaJfa4epua5ghds-BllvnmV2pTSUZkcdPl2WpNTw9p7ARYH57hi8YT2IU3kChnnx4gAOsZdbqVI5tYHg20TsEEHYpVJ_2G3aXE6lnJ/s1600/images-3.jpg"/><p> <span class="title">European Mountains</span>The highest mountain in the Alps is Mont Blanc, at 4,808 metres.</p> </div> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy_JmGk0ynUBclwf-9MiTkUsjoIsAirHoXoMdmw0qaJfa4epua5ghds-BllvnmV2pTSUZkcdPl2WpNTw9p7ARYH57hi8YT2IU3kChnnx4gAOsZdbqVI5tYHg20TsEEHYpVJ_2G3aXE6lnJ/s1600/images-3.jpg"></a> <a href="http://megtrb.blogspot.com" target="_blank"></a><div class="content" style="width:300px; height:360px; top:0px; right:50px;"data-direction="bottom" data-offset="50" data-time="1000" data-delay="500" data-easing="easeOutSine"> <span class="bg bg-opacity"></span> <span class="text" style="padding:15px 30px;"><p class="title" style="color:#DDD; font-size:24px; -moz-text-shadow:0px 1px #000; text-shadow:0px 1px #000;"> European Mountains</p> <p class="field" style="color:#999; -moz-text-shadow:0px 1px #000; text-shadow:0px 1px #000;"> European Mountains</span>The highest mountain in the Alps is Mont Blanc, at 4,808 metres.European Mountains</span>The highest mountain in the Alps is Mont Blanc, at 4,808 metres.European Mountains</span>The highest mountain in the Alps is Mont Blanc, at 4,808 metres. <a href="http://megtrb.blogspot.com/" role="buttons">Read More ›</a> </p> </span></div> </li> <li><div class="button"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVkftq8TJPW9VryIb-dEs69Ba0xIjFZU9GCsBCbayNsh8CKX3kPP2qTgZmkZI1W6f1OluO2O8eZQi66Pu0v0snVwP0wG90aMGM6x7tnTsOT8AitNPJ7IOJoYscgDI9X74WjcMYbKrbtR3i/s1600/img.jpg" /><p> <span class="title">Video Support</span>You can embed YouTube - Vimeo videos easily.</p> </div> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVkftq8TJPW9VryIb-dEs69Ba0xIjFZU9GCsBCbayNsh8CKX3kPP2qTgZmkZI1W6f1OluO2O8eZQi66Pu0v0snVwP0wG90aMGM6x7tnTsOT8AitNPJ7IOJoYscgDI9X74WjcMYbKrbtR3i/s1600/img.jpg"></a> <a href="http://megtrb.blogspot.com" target="_blank"></a><div class="content" data-time="800" data-delay="500"> <iframe width="660" height="328" src="http://www.youtube.com/embed/r4eFKK9LQLE?hd=1&wmode=opaque&controls=1&showinfo=0"></iframe></div> </li> <li data-delay="4000"><div class="button"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK_2ciV9AiUx7GQKihCm3L6E5gPlHZ17o68yGFAOElDeZXoQumR_a41M9SsnOXL7Bh0iWA5JQv6cuJrNS41KZ8cTO7cIXfXi1MwhPJSUqaByaUs3lvsd3r6IGIPJNQwt9qJKZ0KEjIP7hk/s1600/images-5.jpg" /><p> <span class="title">Soccer Striker</span>Football player</p> </div> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK_2ciV9AiUx7GQKihCm3L6E5gPlHZ17o68yGFAOElDeZXoQumR_a41M9SsnOXL7Bh0iWA5JQv6cuJrNS41KZ8cTO7cIXfXi1MwhPJSUqaByaUs3lvsd3r6IGIPJNQwt9qJKZ0KEjIP7hk/s1600/images-5.jpg"></a> <a href="http://megtrb.blogspot.com" target="_blank"></a> <div class="content" style="left:80px; bottom:179px;"data-direction="right" data-offset="60" data-time="1000" data-delay="1200"> <span class="bg" style="background-color:#990000; -webkit-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; -khtml-border-radius:5px; border-radius:5px;"></span> <span class="text" style="padding:8px 15px 4px; color:#FFF; font-size:28px;"> FULLY CUSTOMIZABLE</span> </div> <div class="content" style="left:80px; bottom:146px; -moz-border-radius:4px;"data-direction="right" data-offset="60" data-time="1000" data-delay="1700"> <span class="bg" style="background-color:#FFF; -webkit-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; -khtml-border-radius:5px; border-radius:5px;"></span><span class="text" style="padding:8px 15px 3px; color:#354160;font-size:18px;">INCLUDES <a href="http://megtrb.blogspot.com" target="_blank">42 DIFFERENT</a> TRANSITIONS WITH A LOT OF OPTIONS</span> </div> <div class="content" style="left:80px; bottom:113px;"data-direction="right" data-offset="60" data-time="1000" data-delay="2200"> <span class="bg" style="background-color:#FFF; -moz-opacity:0.8; opacity:0.8; -webkit-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; -khtml-border-radius:5px; border-radius:5px;"></span><span class="text" style="padding:8px 15px 3px; color:#354160; font-size:18px;"> <font color="#990033">CONTENT BOX</font> FONT, ANIMATION, BACKGROUND CAN BE CHANGED FROM HTML STYLE</span> </div> <div class="content" style="left:80px; bottom:80px;"data-direction="right" data-offset="60" data-time="1000" data-delay="2700"> <span class="bg" style="background-color:#FFF; -moz-opacity:0.5; opacity:0.5; -webkit-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; -khtml-border-radius:5px; border-radius:5px;"></span><span class="text" style="padding:8px 15px 3px; color:#354160;font-size:18px;">RANDOMIZE ITEM ORDER</span></div> </li> <li><div class="button"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFF6_IhXJ6ElDvuZRNLz0MPpLF58eU9fPFdrfloGVSmqCP2tRaNsKKxzrvJMFjKue3ROkI4HD1xMqelCSng7YZpzOHA_8EK24nQx8MCkYyQL5Pjtz_ZrWmc_QM93f8Y2NdW3749zvT5edh/s1600/images-6.jpg" /><p> <span class="title">Autumn Leaf Way</span></p> </div> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFF6_IhXJ6ElDvuZRNLz0MPpLF58eU9fPFdrfloGVSmqCP2tRaNsKKxzrvJMFjKue3ROkI4HD1xMqelCSng7YZpzOHA_8EK24nQx8MCkYyQL5Pjtz_ZrWmc_QM93f8Y2NdW3749zvT5edh/s1600/images-6.jpg"></a> <a href="http://megtrb.blogspot.com/" target="_blank"></a></li> </ul> </div>

غير مايلزم تغييره من روابط الفيديو والصور الخاصة بك في داخل الكود

اذا اردت عرض الاضافه في صفحه خاصه الصق جميع اكواد الصندوق الاول والاخير  

في صفحة html للرسائل 

الى اللقاء.......بو هشام .