بسم الله الرحمن الرحيم
موضوع
طريقة اضافة سلايدشو احترافي رقم 5
حطوة 1 : اذهب للمدونة - قالب - تحرير html
خطوة 2 : ابحث عن <head> ضع الروابط تحته (اسفله) :
<link rel="stylesheet" href="http://unslider.com/style.css">
<script src="http://use.typekit.net/vgf3zbf.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<script src="http://use.typekit.net/vgf3zbf.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
خطوة 3 : ابحث عن <body/> الصق الاكواد التالية فوقه ( اعلاه ) :
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://stephband.info/jquery.event.move/js/jquery.event.move.js"></script>
<script src="http://stephband.info/jquery.event.swipe/js/jquery.event.swipe.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>
<script>
if(window.chrome) {
$('.banner li').css('background-size', '100% 100%');
}
$('.banner').unslider({
fluid: true,
dots: true,
speed: 500
});
// Find any element starting with a # in the URL
// And listen to any click events it fires
$('a[href^="#"]').click(function() {
// Find the target element
var target = $($(this).attr('href'));
// And get its position
var pos = target.offset(); // fallback to scrolling to top || {left: 0, top: 0};
// jQuery will return false if there's no element
// and your code will throw errors if it tries to do .offset().left;
if(pos) {
// Scroll the page
$('html, body').animate({
scrollTop: pos.top,
scrollLeft: pos.left
}, 1000);
}
// Don't let them visit the url, we'll scroll you there
return false;
});
var GoSquared = {acct: 'GSN-396664-U'};
</script>
خطوة 4 : اذهب الى تخطيط ثم اضافة اداة ثم اختر html/javascript ثم ضع الاكواد داخل مربع النص الكبير :
<div class="banner">
<ul>
<li style="background-image: url('http://unslider.com/img/sunset.jpg');">
<h1>The jQuery slider that just slides.</h1>
<p>No fancy effects or unnecessary markup, and it’s less than 3kb.</p>
<a class="btn" href="#download">Download</a>
</li>
<li style="background-image: url('http://unslider.com/img/wood.jpg');">
<h1>Fluid, flexible, fantastically minimal.</h1>
<p>Use any HTML in your slides, extend with CSS. You have full control.</p>
<a class="btn" href="#download">Download</a>
</li>
<li style="background-image: url('http://unslider.com/img/subway.jpg');">
<h1>Open-source.</h1>
<p>Everything to do with Unslider is hosted on GitHub.</p>
<a class="btn" href="//github.com/idiot/unslider">Contribute</a>
</li>
<li style="background-image: url('http://unslider.com/img/shop.jpg');">
<h1>Uh, that’s about it.</h1>
<p>I just wanted to show you another slide.</p>
<a class="btn" href="#download">Download</a>
</li>
</ul>
</div>
غير اللون الاصفر برابط الصورة و اللون الاسود برابط التدوينة او الرابط الخاص بالصورة واللون البنفسجي بدل النص في المربع - شاهد المعاينة .
<ul>
<li style="background-image: url('http://unslider.com/img/sunset.jpg');">
<h1>The jQuery slider that just slides.</h1>
<p>No fancy effects or unnecessary markup, and it’s less than 3kb.</p>
<a class="btn" href="#download">Download</a>
</li>
<li style="background-image: url('http://unslider.com/img/wood.jpg');">
<h1>Fluid, flexible, fantastically minimal.</h1>
<p>Use any HTML in your slides, extend with CSS. You have full control.</p>
<a class="btn" href="#download">Download</a>
</li>
<li style="background-image: url('http://unslider.com/img/subway.jpg');">
<h1>Open-source.</h1>
<p>Everything to do with Unslider is hosted on GitHub.</p>
<a class="btn" href="//github.com/idiot/unslider">Contribute</a>
</li>
<li style="background-image: url('http://unslider.com/img/shop.jpg');">
<h1>Uh, that’s about it.</h1>
<p>I just wanted to show you another slide.</p>
<a class="btn" href="#download">Download</a>
</li>
</ul>
</div>
غير اللون الاصفر برابط الصورة و اللون الاسود برابط التدوينة او الرابط الخاص بالصورة واللون البنفسجي بدل النص في المربع - شاهد المعاينة .
ثم بعدها اسحب هذه الاداة( بعد ضغط حفظ ) اسحبها الى فوق رسائل المدونة الالكترونية اي سؤال اتركه في تعليق .