Nivo slider هو واحد من أفضل شريط التمرير المتاحة على شبكة الإنترنت. تقاسمت أنا نسخ من شريط التمرير Nivo على Stupcomp حتى الآن،إضافة ثيم الافتراضي شريط التمرير jQuery /Nivo Slider إلى Blogger, ولكن اليوم أنا أشارك نسخة مخصصة من المنزلق Nivo. في هذا الإصدار المخصص يتم تخصيصها لشرح و لجعلها أكثر جمالا أيضا كما هو الحال دائما أنا أحفظ على تركيب سهلة قدر الإمكان يجب عليك نسخ ولصق الكود البرمجية فقط . الآن يتيح معرفة كيفية إضافته إلى مدونتك بلوجر .
كيفية إضافة هذا Slider إلى Blogger؟
1- تحديد الصور التي تريد إضافتها في شريط التمرير 'Slider'
2- تغيير حجمها إلى حجم نفسه.
3- تحميله والحصول على رابط.
4- انتقل الآن إلى لوحة التحكم الرئيسية Blogger > تخطيط
5- انقر على إضافة أداة (تحت من header)
6- اختر HTML/JavaScript
7- لصق كود أدناه في داخله،
<style>
#slider {
position:absolute !important;
top:50%;
left:50%;
width:650px;
height:350px;
margin-top:-175px;
margin-left:-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;
left: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;
left:75px;
bottom:29px;
width:498px;
padding-top:13px;
padding-bottom:13px;
z-index:8;
border:1px solid #000;
border-left-color:rgba(0,0,0,.5);
border-right-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:14px;
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/AVvXsEgO0xZxjrkSCwrzkkT2pV3Pux_k3lGWg6vre28KYCvkIc6OYBtdYCexm8Qi2MK8-f4KpQGz9-aNj7WwK28wqCz-BjShyphenhyphenIfh4jAe6AIQjFeMSDIv_DUmoc0O6uT0q-GOo3PiBxVwiaZJNXs/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/AVvXsEgyj9Ap5_KDmoFBnOTEK2HSGV3YEoquEvSsx_zWQBoRsHjfC5m-WQvjE4Kue2nTicF8Tt5nWyCB_KYQaI0JFh0d3P7nRN1HS5Ue6eSrwKpdU-_qiBY5XPn1vzT6xgooBmZeijLxMQj_iUo/s1600/helperblogger.com-5.png"
alt="Slider Image 1" title="This Is An Example Of A Caption">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2CRa5Y1xRMJuRE53822u5DA3QPAUwhCdIIUluf-o9PIpMDjo-ueWuc-UbDp6JHXaMzB5B0bIec5Oimmz1oAB28lpW1vcN8M9lRLDvOV6iY6W_yHhsv6WlDQQaAN3uaa8LroGlHJ-YjVg/s1600/helperblogger.com-4.png"
alt="Slider Image 2" title="You Can Add Anything Here">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsJXlNtevNonIstgE0RSF1IeLmL1wQ777-IJxOmfGK8fcle2wGzTgh4jikOPC87IXpLwJo7HdxG7JtOr8j8T9SVT49V2Zeg6OQnXBU0dye3RKJ-ekd0a5ZqDMS-Rwb8lEt3xJ1ixdFuCc/s1600/helperblogger.com-3.png"
alt="Slider Image 2" title="Like Image Description">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVbJP1eyl_cqNR9ocW_1UkV-4h9SojTRetUPRzb7pCe6R0hxDPNZ-_JISgAeHC_ZggKWI1WdZn5AmFATljriSWFwyXLnij2bsDsKHWDeEOSFT2yzVSBjsQhWcXenlpnXTitjffqoxrMfQ/s1600/helperblogger.com-2.png"
alt="Slider Image 2" title="Image Info">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVv4rxSFGob0WbMRdK-oIRtkZpcj8lPWyDw1crGuI4S_nt01aIqDB7pTOlZPJkj6-qA1tAF6Gm4vpO96-6YLombEM9AlXolTyzrBWviQs_AMHXsuxD6sZwdqzm1NVnlSR2mzFTk4hyphenhyphenJfg/s1600/helperblogger.com-1.png"
alt="Slider Image 2" title="And Other Things">
</div>- العرض والارتفاع Slider
ضبط العرض والارتفاع من شريط التمرير'Slider' وفقا للعرض صورك وارتفاع
- رابط الصورة URL
استبدال كافة العناوين URL صورة المشير له بلون مع رابط صورك الخاصة.
- توضيحية صورة
هنا يمكنك ان تضيف شرح صورتك
- jQuery Library
إذا كنت قد قمت بالفعل بإضافة jQuery Library لمدونتك بلوجر قم بإزالة الكود الموجود في لون .
أخيرا حفظ القطعة الخاصة بك فتكون قد أنهيت العملية .
أبقيت تثبيت في الخطوة 1 وسهلة قدر الإمكان. إذا كنت لا تزال تحصل على مشكلة واحدة ثم لا تتردد في أن تسألنى في تعليق عن المشكل . وسوف أحاول أن أعطي الرد بأسرع ما سمح الوقت.
و أتمنى أن تعجبكم الإضافة و شكرا :)