سلايدر مطور اكثر من رائع من Nivo

السلام عليكم ورحمة الله وبركاته

سلايدر مطور اكثر من رائع من  Nivo 

تركيب سلايد للمدونة

سلايد مدونة بلوجر

طريقة تركيب سلايد لمدونة بلوجر 

The world's most awesome jQuery slider

The Nivo Slider is world renowned as the most beautiful and easy to use slider on the market. Completely free and totally open source, there literally is no better way to make your website look totally stunning. If you don't believe us, check out the list of features below and you soon will.

سلايد مميز لمدونات بلوجر بتقنية   jQuery  لمدونات بلوجر من تطوير Nivo

قبل البدأ قم باخذ نسخة احتياطية من القالب 

لنبدا شرح التركيب

لوحة التحكم

قالب

تحرير html 

ابحث عن الكود التالي :

]]></b:skin>

أضف فوقه مباشرة الكود التالي : 

/*Start Nivo Slider Css http:/tedom.blogspot.com*/
/*
* Copyright 2011, Gilbert Pellegrom,
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* Modified By - Rida SAIL @ ridasail.blogspot.com For blogger by - Rahul Ippar @ helperblogger.com
*
* August 2012
*/

/* The Nivo Slider styles */
#slider {
width: 618px;
height: 246px;
}
.nivoSlider {
position: relative;
}
.nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
z-index: 6;
display: none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display: block;
position: absolute;
z-index: 5;
height: 100%;
}
.nivo-box {
display: block;
position: absolute;
z-index: 5;
}
/* Caption styles */
.nivo-caption {
position: absolute;
left: 0px;
bottom: 0px;
background: #000;
color: #fff;
opacity: 0.8;
/* Overridden by captionOpacity setting */
width: 100%;
z-index: 8;
}
.nivo-caption p {
padding: 5px;
margin: 0;
}
.nivo-caption a {
display: inline !important;
}
.nivo-html-caption {
display: none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position: absolute;
top: 45%;
z-index: 9;
cursor: pointer;
}
.nivo-prevNav {
left: 0px;
}
.nivo-nextNav {
right: 0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position: relative;
z-index: 9;
cursor: pointer;
}
.nivo-controlNav a.active {
font-weight: bold;
}
/*
Skin Name: Pascal Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: fixed
Description: A nice, light skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom & Pascal Gartner
Author URI: http://dev7studios.com
*/
.theme-pascal.slider-wrapper {
width: 668px;
height: 299px;
margin: 0 auto;
padding-top: 17px;
position: relative;
}
.theme-pascal .nivoSlider {
position: relative;
width: 630px;
height: 235px;
margin-left: 19px;
background: url(http://3.bp.blogspot.com/-8_SdXQgExvc/T6jU_3y_AZI/AAAAAAAABns/o_t44IAT8oM/s1600/helperblogger-loading.gif) no-repeat 50% 50%;
}
.theme-pascal .nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
display: none;
width: 630px;
/* Make sure your images are the same size */
height: 235px;
/* Make sure your images are the same size */
}
.theme-pascal .nivoSlider a {
border: 0;
display: block;
}
.theme-pascal .nivo-controlNav {
background: url(http://3.bp.blogspot.com/-eENGcnLAvuQ/T6jU_Olkn_I/AAAAAAAABng/iVakuF1qQ_s/s1600/helperblogger-controlnav.png) no-repeat;
width: 251px;
height: 40px;
position: absolute;
left: 200px;
/* Tweak this to center bullets */
bottom: -42px;
padding: 8px 0 0 82px;
z-index: 20;
}
.theme-pascal .nivo-controlNav a {
display: block;
width: 22px;
height: 22px;
background: url(http://2.bp.blogspot.com/-iqnXNTLjVhQ/T6jU-X50mVI/AAAAAAAABnc/SIQefpBfgyQ/s1600/helperblogger-bullets.png) no-repeat;
text-indent: -9999px;
border: 0;
margin-right: 3px;
float: left;
}
.theme-pascal .nivo-controlNav a.active {
background-position: 0 -22px;
}
.theme-pascal .nivo-directionNav a {
display: none;
}
.theme-pascal .nivo-caption {
bottom: 40%;
left: auto;
right: 0px;
width: auto;
max-width: 630px;
overflow: hidden;
background: #fff;
text-shadow: none;
font-family: arial, serif;
color: #4c4b4b;
}
.theme-pascal .nivo-caption p {
padding: 5px 15px;
color: #333;
font-weight: bold;
font-size: 27px;
text-transform: uppercase;
}
.theme-pascal .nivo-caption a {
color: #333;
font-weight: bold;
font-size: 27px;
text-transform: uppercase;
}
.theme-pascal .ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -8px;
left: -8px;
z-index: 300;
}
/*End Nivo Slider Css http://tedom.blogspot.com*/

الان أبحث عن الكود التالي

</head>

قبله مباشره ضع الكود التالي : 

<!-- Nivo Slider Scripts Starts--><script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/><script src='http://helperblogger.x10.mx/scripts/jquery.nivo.slider.pack.js' type='text/javascript'/><script type='text/javascript'>$(window).load(function() {$('#slider').nivoSlider();});</script><!-- Nivo Slider Script Ends-->

الان احفظ القالب وتوجه الي :

تخطيط 

اضافة اداة  HTML/JavaScript

قم باضافة هذا الكود

<div class="slider-wrapper theme-pascal"><div class="ribbon"></div><div id="slider" class="nivoSlider"><a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a><a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a><a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a><a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a></div><div id="htmlcaption" class="nivo-html-caption"></div></div>

قم بوضع الأدة بالمكان الذي يناسبك .. وكما نعلم طبعا أن مكان السلايد يكون فوق الرسائل الإلكترونية والقائمة الجانبية " تحت الهيدر " 

قم بتغيير الآتي : 

YOUR LINK HERE  رابط الموضوع 

YOUR IMAGE HERE رابط صورة الموضوع 

ADD CAPTION HERE العنوان الذي سيظهر 

أحفظ الأداة ومبروك عليك الاضافة الجديدة