Free File Hosting

سلايد شو جديد لمدونات بلوجر jQuery Image Slider(wow slider) with Thumbnails





من مميزات السلايد شو أنه يقوم بعمل حركات إنتقالية رائعة بين الصور مع إظهار عنوان التدوينة بشكل جميل

طريقة إضافة السلايد شو :
إذهب إلى > بلوجر < ثم > التخطيط < ثم > إظافة أداة جديدة (في المكان الذي تريده) < ثم  إختر> HTML/JavaScript <
بعد ذلك أضف فيه هذا الكود 
<style type="text/css">
.slider-box {
background: none repeat scroll 0 0 #FAFAFA;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 3px #333333;
margin: 0 auto;
width: 675px;
overflow: hidden;
}
#slider-wrapper {
margin: 0 auto;
padding: 10px;
float:left;
}
#jslider-container {
border: 2px solid #FFFFFF;
max-width: 550px;
position: relative;
text-align: left;
z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
<div class="jslider_images">
<ul>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVZAsuRzAhyphenhyphenErX-SESW8Wa4SkLy70xrDJ7KBB2TIr8ERd2NbbJUDkP0lNQiS4xPzXl7saD4_VuRlO68dOXIbcvDORsz3n971pm-Rq8larZC6YqU0PnFFgXrg23teES2PoLPvI99xjluFu5/s550/sample1.jpg" title="Sunset"/>
</a>A boat with beautiful sunset.</li>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLIRe1B0svXwyP2JGRbv56wtDKB10ZXsZc3FstcpaDeYwPFku0eg-ctyfYGPNIFSSfJY9LHc4apzeWYRy-T751EVESLqjdEhXAIzCF0uySN8l1Ro2TYAJLB531lUso-Vlc43dWvK5b0NBQ/s550/sample2.jpg" title="Rainbow"/>
</a></li>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPg73toGtabfk_nVkociV-bHFsxGPFSSP-buV9YSLRHerZsCxHgcR8UqGu-XUlGT6N0y_cDNQRRpEw8EALPAU3e9UELp1Pi3QuvGb1vq0_J5Nbyd6wT7zBo0j0jxhdHNW1_ozRDNro2AoT/s550/sample3.jpg" title="True Nature"/>
</a>Tree in field with blue sky.</li>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvQg49lOeMZ4HZdMMDEqvi7dcUuJ0vBbQ_TX2fv6D18U0rNbY_rq9hP45MW_xyqKRHfJHMW_N5cjsHVuAUh9Mjn2VTmP7XYoNFG-l0t3kEXaOzSK1NfSQCcsVA9NZeNRaUPpFjdX91NAoM/s550/sample4.jpg" title="Sunrise""/>
</a>Amaizing sunrise moment</li>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbvRTXDelXquc3q_5VJoDRwEp1ZS1G2HA_oftu8-7uWEVL7tpDIE-0DIseLwSzNai41841qvKiULfEH6jaArGrTD8g0kWHzl9LliBrcZ_OCTz3JL2JsG1j4KeykEJ2Y2aVRmJ9doPK-Qxy/s550/sample5.jpg" title="CAR in HDR Nature"/>
</a></li>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKV2PsnNtVQeDGB4KkXPLKor7Wjl4J7jdYPo-jQG5rTZz_dRK6ksZHuyCFFPFe13JMmPgIhJR_zCdknxH86-UcYuDpsD1OgPOd038dYRoqc53Tws3nVWZ9i8Sp6BnE3mD8x3d3aJ1JvzCa/s550/sample6.jpg" title="Sunshine"/>
</a></li>
</ul>
</div>
<div class="jslider_thumbs">
<div>
<a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgawSYRBQggaiamm4szzBPrt4b6sEUeOtvT4dP9lO8fPzaKWCLk_zhdhV1AQZTlgP9S06PsfOuqgbZP2NoSj3WS0P5O7wzDEGdCLhFqOOt4xSkQfBmyrU7wxYLRSkewH-HK2mMoKorFIJjQ/s85/sample1.jpg"/></a>
<a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM8wuP8IHFGaYTz4EL2__5J-MzTyT_2YuqaG2W134Ui2xd4liLtTeMpOS6lnUoDLVc7dfGZ-Jd1F7_f9Ja_5ysAaJR2b-Cdo6lPg5dcdaAgCfyj-pZeFStyCBmATKF-LA4V7HudtVqUITc/s85/sample2.jpg"/></a>
<a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrOu3CvueJs0egyo9WTwf9sc0L91vjtZSQ7a918Nmgdedp_1O8yJ0MlnASEFL2p8NpNcIygq6OeStT2TQh1vrl-65E6jyViW65ick7oSK0gx-7eIo94Cykk3fWjhCyk5Vb6jKjBrPZ8AxB/s85/sample3.jpg"/></a>
<a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpv7L7tiQC1NuxP6Y73CkHkm0FBNxpRWStHPyK1MwnSY4vrwnnzzrWRRkCNNlc9bGvKZVmpDj28ZKfQYkkMDn36CAnx-OwaAfrWBe05u7O8_34hMT76SFMNx4NSLoQtDTJoOGFglokKCkL/s85/sample4.jpg"/></a>
<a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgowFNVTfWNcS5Z_4DlKJ8A2p4j_2v5i6Pc8xOc3Hpah_sRF53tX3VoRJ22Fn1gWhCFVTilb3LoijB-tfaSsWGTuB261Q7yxzVtDmn9GPz7cM1uAG0nN5MXzILNCF3DRw1KcV0DLSTsZKm2/s85/sample5.jpg"/></a>
<a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0L84ND3xQXXiz3dCO_SQ1iIcey0Rv3wkVG4diqmaA8u-S8cX3os0RqJbLcZKVusuoyesepdVqLHGmFzVuYrqqSytRaWFXM1GftJrC7xpDozS5CscZBMuLZ_PpLBkOClzDnptI5F-7EmiP/s85/sample6.jpg"/></a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>





*******************************

إرسال تعليق

CodeNirvana
Newer Posts Older Posts
© Copyright webs-tools
Back To Top