سلايدشو (7)

بسم الله الرحمن الرحيم

موضوع

طريقة اضافة سلايدشو احترافي رقم 7

للمعاينة : اضـــغط هنا

وهذه صورة للسلايدر

حطوة 1 : اذهب للمدونة - قالب - تحرير html

خطوة 2 : ابحث عن <head> ضع الروابط تحته (اسفله) :

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-7243260-2']);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

</script>

<style>

a.back{

background:transparent url(back.png) no-repeat top left;

position:fixed;

width:150px;

height:27px;

outline:none;

bottom:0px;

left:0px;

}

#content{

margin:150px auto 10px auto;

}

.reference{

clear:both;

width:800px;

margin:30px auto;

}

.reference p a{

text-transform:uppercase;

text-shadow:1px 1px 1px #fff;

color:#666;

text-decoration:none;

font-size:10px;

}

.reference p a:hover{

color:#333;

}

</style>

خطوة 3 : ابحث عن <body/> الصق الاكواد التالية فوقه ( اعلاه ) :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://tympanus.net/Tutorials/PrettySimpleContentSlider/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
var current = 1;

var iterate = function(){
var i = parseInt(current+1);
var lis = $('#rotmenu').children('li').size();
if(i>lis) i = 1;
display($('#rotmenu li:nth-child('+i+')'));
}
display($('#rotmenu li:first'));
var slidetime = setInterval(iterate,3000);

$('#rotmenu li').bind('click',function(e){
clearTimeout(slidetime);
display($(this));
e.preventDefault();
});

function display(elem){
var $this = elem;
var repeat = false;
if(current == parseInt($this.index() + 1))
repeat = true;

if(!repeat)
$this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
$(this).animate({'opacity':'0.7'},700);
});

current = parseInt($this.index() + 1);

var elem = $('a',$this);

elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);

var info_elem = elem.next();
$('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){

$('h1',$(this)).html(info_elem.find('.info_heading').html());
$(this).animate({'left':'0px'},400,'easeInOutQuad');
});

$('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
$('p',$(this)).html(info_elem.find('.info_description').html());
$(this).animate({'bottom':'0px'},400,'easeInOutQuad');
})
$('#rot1').prepend(
$('<img/>',{
style : 'opacity:0',
className : 'bg'
}).load(
function(){
$(this).animate({'opacity':'1'},600);
$('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
$(this).remove();
});
}
).attr('src',''+info_elem.find('.info_image').html()).attr('width','800').attr('height','300')
);
}
});

</script>

خطوة 4 : اذهب الى تخطيط ثم اضافة اداة ثم اختر html/javascript ثم ضع الاكواد داخل مربع النص الكبير :

<div id="content">
<a class="back" href=""></a>

<div class="rotator">
<ul id="rotmenu">
<li>
<a href="rot1">Portfolio</a>
<div style="display:none;">
<div class="info_image">http://tympanus.net/Tutorials/PrettySimpleContentSlider/images/1.jpg
</div>
<div class="info_heading">Our Works</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot2">Services</a>
<div style="display:none;">
<div class="info_image">http://tympanus.net/Tutorials/PrettySimpleContentSlider/images/2.jpg
</div>
<div class="info_heading">We serve</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot3">Contact</a>
<div style="display:none;">
<div class="info_image">http://tympanus.net/Tutorials/PrettySimpleContentSlider/images/3.jpg
</div>
<div class="info_heading">Get in touch</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot4">Experiments</a>
<div style="display:none;">
<div class="info_image">http://tympanus.net/Tutorials/PrettySimpleContentSlider/images/4.jpg
</div>
<div class="info_heading">We do crazy stuff</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
<li>
<a href="rot5">Applications</a>
<div style="display:none;">
<div class="info_image">http://tympanus.net/Tutorials/PrettySimpleContentSlider/images/5.jpg
</div>
<div class="info_heading">Working things</div>
<div class="info_description">
At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et
quas molestias excepturi sint occaecati cupiditate
non provident...
<a href="#" class="more">Read more</a>
</div>
</div>
</li>
</ul>
<div id="rot1">
<img src="" width="800" height="300" class="bg" alt=""/>
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>

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

غير اللون الاصفر برابط الصورة و اللون الاسود برابط التدوينة واللون السماوي هو العنوان في القائمة على اليمين واللون الازرق هو العنوان فوق الوصف واللون الاحمر الوصف الخاص بالتدوينة

ثم بعدها اسحب هذه الاداة( بعد ضغط حفظ ) اسحبها الى فوق رسائل المدونة الالكترونية اي سؤال اتركه في تعليق .