مـدونــة مـصطفى عبدالعزيز

عبير عبد العظيم

السلام عليكم إخواني أخواتي الكرام ، متتبعي مدونة رانديفو ،في هذه الفقرة سوف نتعلم كيفية إضافة عارضه صور على مدونات بلوجر بتأثيرات jQuery الجميلة ، اضافه جميله يمكنك تعديل طولها و عرضها و استخدامها فى اغراض عده كعارضه صور او اعلانات او كاريكاتير , نبدأ بشرح طريقه وضع الاضافه ..

ضع كود الـ css اعلى كلمه ]]></b:skin>

#slider-bg {
margin: 0;
width : 960px;
background:#fff;
}
#slider-wrapper {
height: 324px;
margin: 0;
padding: 0;
position : relative;
width : 960px;
z-index: 1;
}
#slider {
position :relative;
width : 960px;
height:324px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEQJ08KBhKhrTRM7zi-6an4tTT3aLZRLWgm0xR3NAgnQaEK1nloAQnCmpMA1WcY-rt4tJIM6z8uMApI8Asv3ix7SmoIOwojwMTjigQ6jrqhOcokJe4z1m-dMtZdoCilq4D2vO8VEo95Pw/s1600/loading.gif) no-repeat 50% 50%;
}
#slider img {
position :absolute;
top:0px;
right:0px;
display :none;
}
#slider a {
border:0;
display :block;
}
.nivo-controlNav {
position :absolute;
right:260px;
bottom:-42px;
display :none;
}
.nivo-controlNav a {
display :block;
width : 22px;
height:22px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTqlPEftPpXCyrLGuuxhwiIa6VdTdaUUmZjC-BRccjpI4y-yRsp4BieP0TwISSG8AsWYtV9xWlhXFZIDcvrvvdKafmolFHgI0C9jBGrgsIt9tELOTd8kxHbfAP40hNg8HuJSMahvIEXC8/s1600/l-slider-bullet-normal.png) no-repeat;
text-indent:-9999px;
border:0;
margin-left:3px;
float :right;
}
.nivo-controlNav a.active {
background-position :0 -22px;
}
.nivo-directionNav a {
display :block;
width : 50px;
height:61px;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
left:-18px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFl9rfjC6C6r5QiqKuUK6p6XygIpR7jObJ6kIXb4aZsfLoHYFQpinHpHHSlZAxenCXGblBSm0Wv-Hm6k6nnLJ8lTTofwFVav3b7AOFo-FWsyzPlOPPbaRhFCWIxhSUfVG-EbZThFOLZXs/s1600/l-slidernav-right.png') no-repeat;
}
a.nivo-nextNav:hover{
background-position :0 -61px;
}
a.nivo-prevNav {
right:-18px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdkPw3BHT1kYs2kFOmjJ-iKLvdSVqneguzuvOA6_lw6dfvJHxD-WcGGfWtXvng35H-WQ5widgmWevnVEOYILWGZ8ElSiFuSxym5R_5Vtfqf_kvam_URalpL14cL5hQ1hk5ew7WtE0-fOI/s1600/l-slidernav-left.png') no-repeat;
}
a.nivo-prevNav:hover{
background-position :0 -61px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
#sliderContent {
margin:50px 50px 0 0;
position : absolute;
text-align:center;
background-color:#FFFFCC;
color:#333333;
font-weight:bold;
padding: 10px;
}
#openCloseWrap a {
display : block;
font-size: 13px;
font-weight: bold;
height: 22px;
margin: 0;
position : absolute;
left: 22px;
text-indent: -10000px;
top: 59px;
width : 26px;
}
.nivoSlider {
position :relative;
}
.nivoSlider img {
position :absolute;
top:0px;
right:0px;
}
.nivoSlider a.nivo-imageLink {
position :absolute;
top:0px;
right:0px;
width : 100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display :none;
}
.nivo-slice {
display :block;
position :absolute;
z-index:5;
height:100%;
}
.nivo-box {
display :block;
position :absolute;
z-index:5;
}
.nivo-caption {
position :absolute;
right:0px;
bottom:0px;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width : 100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
text-align:center;
font:italic 29px/32px Georgia;
color:#fff;
font-weight:bold;
}
.nivo-caption p h3{
font-size:22px;
font-style:italic;
color:#f23a66;
font-weight:bold;
line-height:30px;
}
.nivo-caption a {
display :inline !important;
}
.nivo-html-caption {
display :none;
}
.nivo-directionNav a {
position :absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
right:0px;
}
.nivo-nextNav {
left:0px;
}
.nivo-controlNav a {
position :relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}

كود الجافا سكربت اسفل <body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://jquerywallbase.googlecode.com/files/jquery.tools.min-liquid.js'/>
<script src='http://jquerywallbase.googlecode.com/files/jquery.nivo.slider.pack-Liquid.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'boxRandom,boxRain,boxRainGrow', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: false, // Only show on hover
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: false, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0, // Universal caption opacity
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
//]]>
</script>

ضع هذا الكود فى اضافه Html الموجوده فى الهيدر ان اردت لتكون بانر متحرك , او يمكنك اضافتها مباشره من تحرير القالب بعد كلاس الهيدر

تضع الكود هنا <div class="header"><div>

<div id='slider-bg'>
<div id='slider-wrapper'>
<div class='nivoSlider' id='slider'>
<a href='#Link'>
<img height='324' src='http://www.dresshealthytoday.com/wp-content/uploads/2010/11/2-960x360.jpg' width='960'/>
</a>
<a href='#Link'>
<img height='324' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-kjrq6G1Bq14SmMC8pywy1fyW9u051-ctjtC6_L8sm30ZnEtbaefJ_f_PJ18kowKhRxN3DXmoXlCDnDIGN1m4-1HcECD5CaOR9PoN7HsZqttx8cmtQ7yQIb7xjs6XmqiJSM8iL65s1r8/s1600/nivo-960-340-2.jpg' width='960'/>
</a>
<a href='#Link'>
<img height='324' src='http://www.whartonmedia.com/images/960x360_rocksunset.jpg' width='960'/>
</a>
<a href='#Link'>
<img height='324' src='http://www.shdwi.com/wp-content/uploads/Greens-1155-21-960x360.jpg' width='960'/>
</a>
</div>
</div>
</div>

المشاهده التحميل

سلايد شو Nivo Slider تصلح كبانر متحرك

بقلم اسم الكاتب

ليست هناك تعليقات:

إرسال تعليق

التسميات

المواضيع النشطة

إجمالي مرات مشاهدة الصفحة

المساهمون