السلام عليكم ورحمة الله وبركاته
سلايدر مطور اكثر من رائع من 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-_L1w2tv1-GqOzUNMlg1yk1QoGcPFb1i1RQgr6NVb-oVKqAwqUWMptq-AAJY2zDevZT9Oqp54xLHG-JaOTeZWpdH7eDyQTE3zYxybsJHVowQs12FXzWVntVTeaxlJbgcGT9YcyYfxHcr6/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPlFHnrVhfnW41IcjZ9gW_Hqtr_tMUlu8qtrzCd_Hs21V4xRrkt1kkHIzIWle1XElt-A6CXWp-v7B1C0QT3Wk99Bvw_w0mItZl5IBmZq039S9azbj_mPfrWXJreW8uUYcNwsJFqEWa3D-W/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXQ5rGB3Q4OxR1WY61drFPxtsU3STkcllOfEr1wlz8wyu_u4AtZ_u9HmKZ8LaNjCxoHtu1qZaO2zg891nqVcez19ddINb68c1ZQ8UKBSPT2X9R73SRjq7fXfzOKgozsA5e6iJx7NCXeHY7/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 العنوان الذي سيظهر
أحفظ الأداة ومبروك عليك الاضافة الجديدة
ليست هناك تعليقات:
إرسال تعليق