بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اليوم لدي أضافة رائعة جدا وهي سلايدشو منزلق لمدونات البلوجر لعرض الصور كما أني طرحت سابقا مجموعة من السلايدات المميزة وجميلة
وللاطلاع عليها قبل أن تتابع الموضوع فقد تجدها تناسبك
الثاني
صورة توضيحية للشكل عارض الصور
طريقة التركيب سهلة جدا (نسخ الكود ولصق) بعدما تقوم بتعديل على العناوين وروابط الصورة
توجه للوحة التحكم الخاصة بمدونتك
تصميم
أضافة أداة
وأضف الكود التالي بعدما تقوم بتعديلات
<style>
#slider {
position:absolute !important;
top:50%;
right:50%;
width:650px;
height:350px;
margin-top:-175px;
margin-right:-325px;
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
}
.nivoSlider img {
position:absolute;
top:0;
right:0;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
.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:75px;
bottom:29px;
width:498px;
padding-top:13px;
padding-bottom:13px;
z-index:8;
border:1px solid #000;
border-right-color:rgba(0,0,0,.5);
border-left-color:rgba(0,0,0,.5);
-webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
-moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.nivo-caption p {
margin:0;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size:15px;
font-weight:bold;
color:#fff;
text-align:center;
text-shadow:0px -1px 0px #000;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
.nivo-directionNav a {
position:absolute;
bottom:30px;
z-index:9;
cursor:pointer;
text-indent:-9999px;
width:45px;
height:39px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-A2pLQazuT9jS36zyAVGoUTEL3-0i_pMvOiK4MfGtjerqGf8Uv5QDJ4WCM0uwAszUhtCSs3UqLcPX5lU5_jD3EiGzYxPyr39bghPZDrkhhsg0nBoTUYpP5fUalNbaNGlmS8Q2rEJd1rs/s1600/helperblogger.com-arrows.png);
background-repeat:no-repeat;
}
.nivo-prevNav {
left:75px;
background-position:0 0;
box-shadow: 1px 0px 0px rgba(255,255,255,.2), 2px 0px 0px rgba(0,0,0,.4);
}
.nivo-nextNav {
right:77px;
background-position:-45px 0px;
box-shadow: -1px 0px 0px rgba(255,255,255,.2), -2px 0px 0px rgba(0,0,0,.4);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.code.helperblogger.com/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('.nivoSlider').nivoSlider({
effect: 'sliceDown',
directionNavHide: false,
captionOpacity: 1,
controlNav: false
});
});
</script>
<div id="slider" class="nivoSlider">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYeYf2zBpFgQFssC6HmQ9VDDaZFnl_d3k0w0RNpQ6i76t-GhiKTMxwtjzy_H9XSasarpvRQyHe73zN3atA2k3yIuMoDn4YS0cGJ5n3-p087Ovztw8Xvd7oDMXRqQAI-gDq3vYhMAmyD6s/s1600/helperblogger.com-5.png"
alt="Slider Image 1" title="وصف للصورة" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicFWXbnXr0JU9iQcZp6lzkeK5u4od3iLO7ALwgX-fD9l7MNbiwMwCOO7M0ECmpdMFY7SbCs0puJSdJf6hovD_xUcW09nrpEH-rRPlAfAi9uIQJOnshjLu1m9F9nM0FgcHPyF9c6wOdg9A/s1600/helperblogger.com-4.png"
alt="Slider Image 2" title="وصف للصورة" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6KIZ9ILdCg6xewfv5lL6wf6TVX01Js6u1aD-FsUHMDhST7E8kXvVpRxBmRP6JEsUcaVPt7SaDIuISUs0lnbQx6CzRirZQNzZDzqC3kF6PIDaxBFFmqk56hibmuNEnYz5O-dvaYDKANLk/s1600/helperblogger.com-3.png"
alt="Slider Image 2" title="وصف للصورة" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh90YKkAPR-_Db38YAIx9Ur8T5_CdNlGxrmj8wuZb4PBFkooahTq0Nc-XB_q-NQFyrsz6CvMc8ZIEDws0mqGm3J2ImT8hkjayUJBL60MkpZ6KECbSHpS9SDC46sx-m40_yC9unCzwlJ9_s/s1600/helperblogger.com-2.png"
alt="Slider Image 2" title="وصف للصورة" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrzxpA2cQ02Gld0H-9wnFsF4OA2M2GkJW4RWeGIME_iUMNQWrqwl8kpt18aQtdvY_9ZV-GySk2IlKmPOVYgTdV9echITQ0uFITshe1xuWdsTaAUN0lzcXcbQag7-SPKCXbTArTzGCIZrg/s1600/helperblogger.com-1.png"
alt="Slider Image 2" title="سلايد مقدم من مدونتي نت" />
</div>
الكود المشار له بلون الأزرق يمكنك منه تعديل عرض وأرتفاع السلايد
الكود المشار له بلون الأخضر هي jQuery المكتبة أذا كانت مضاف في مدونتك من قبل قم بحذفه
أما الأكواد المشار لها بلون الأحمر هي روابط الصورة المعروضة
العبارة الموجودة في الكود (وصف الصورة) هي العبارة التي تظهر في السلايد أعمل على تعديلها بي أوصاف الصور التي تضيفها
وأخيرا أعمل حفظ للأداة وضعها في المكان التي تناسب مدونتك
No comments:
Post a Comment