jqueryعرض مواضيع المدونةبترقيم الاسهم

معاينة الاداة

ولعمل ذلك

اذهب الى عناصر الصفحة - ثم اختر اضف اداة  - اختر  HTML/JavaScript - ثم انسخ الكود التالي والصقه داخله :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

<style>
#slider {
position:relative;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}

.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCqWdGw-5i-0Y-xCsOwCDm8ngmQrG41L60MLHMSAhG8tMS0m_WMnTCKr_VLtIje1mynnf1lTtemwjbiefeBpvxwHyoGcAhIgY9Jq_QDBXJOfT-P5bdxYj27ubPQaMBrKisamhXah_194M/s400/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}

.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcL12ldXVPXqyPq_ECuOmXyMbQ-Se4l3hUciG1SRxaHzxP2Pk9xEL9kEjzhMJSgNF6ye3ogDiAy8vdEbpoQw3KSCxVziVloYsj6TgXRAtdHzg1KlcqfHmoNy9t8hbNKAQ8ajaTIENBhl8/s400/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}

.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
font-size:16px;
padding: 10px 0px;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}

.clear {
clear:both;
}

.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}

.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.7; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}

.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
</style>

<div id="slider">


<a href="ضع رابط الموضوع هنا"> <img src="ضع رابط الصورة هنا" alt="" title="الوصف الخاص بالرابط" /></a>

<a href="ضع رابط الموضوع هنا"> <img src="ضع رابط الصورة هنا" alt="" title="الوصف الخاص بالرابط" /></a>

<a href="ضع رابط الموضوع هنا"> <img src="ضع رابط الصورة هنا" alt="" title="الوصف الخاص بالرابط" /></a>

<a href="ضع رابط الموضوع هنا"> <img src="ضع رابط الصورة هنا" alt="" title="الوصف الخاص بالرابط" /></a>

<a href="ضع رابط الموضوع هنا"> <img src="ضع رابط الصورة هنا" alt="" title="الوصف الخاص بالرابط" /></a>

</div>
<br/>
<br/>

احفظ العنصر
 وقم بتصميم الصور الخاصة بك بنفس مقاس العرض والارتفاع الخاص  بالاضافة وهو 618   270x

وارفعها على احد مواقع استضافة الصور واضف رابطها الى مكانه المخصص

ومبروك عليك الاضافة .