بسم الله الرحمن الرحيم
موضوع
طريقة اضافة سلايدشو احترافي رقم 6
حطوة 1 : اذهب للمدونة - قالب - تحرير html
خطوة 2 : ابحث عن <head> ضع الروابط تحته (اسفله) :
<link rel="stylesheet" href="http://nicinabox.com/superslides/stylesheets/normalize.css">
<link rel="stylesheet" href="http://nicinabox.com/superslides/dist/stylesheets/superslides.css">
<link rel="stylesheet" href="http://nicinabox.com/superslides/stylesheets/layout.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://nicinabox.com/superslides/javascripts/jquery.easing.1.3.js"></script>
<script src="http://nicinabox.com/superslides/javascripts/jquery.animate-enhanced.min.js"></script>
<script src="http://nicinabox.com/superslides/javascripts/jquery.hammer.min.js"></script>
<script src="http://nicinabox.com/superslides/dist/jquery.superslides.js" type="text/javascript" charset="utf-8"></script>
<script src="http://nicinabox.com/superslides/javascripts/application.js"></script>
<link rel="stylesheet" href="http://nicinabox.com/superslides/dist/stylesheets/superslides.css">
<link rel="stylesheet" href="http://nicinabox.com/superslides/stylesheets/layout.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://nicinabox.com/superslides/javascripts/jquery.easing.1.3.js"></script>
<script src="http://nicinabox.com/superslides/javascripts/jquery.animate-enhanced.min.js"></script>
<script src="http://nicinabox.com/superslides/javascripts/jquery.hammer.min.js"></script>
<script src="http://nicinabox.com/superslides/dist/jquery.superslides.js" type="text/javascript" charset="utf-8"></script>
<script src="http://nicinabox.com/superslides/javascripts/application.js"></script>
خطوة 3 : ابحث عن <body/> الصق الاكواد التالية فوقه ( اعلاه ) :
<script type="text/javascript">
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4f6957cb613f5d746f000004');
t.src = 'http://secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
خطوة 4 : اذهب الى تخطيط ثم اضافة اداة ثم اختر html/javascript ثم ضع الاكواد داخل مربع النص الكبير :
<div id="slides">
<ul class="slides-container">
<li>
<img src="http://nicinabox.com/superslides/images/building.jpg" alt="">
<div class="container">
<a href="#linkhere"><h1>It's responsive.</h1></a>
<div class="contrast">
<p>
Images are smartly centered in the viewport. Use your own media queries to control the layout of your content.
</p>
</div>
</div>
</li>
<li>
<img src="http://nicinabox.com/superslides/images/girl.jpg" alt="">
<div class="container">
<a href="#linkhere"><h1>It's hardware accelerated.</h1></a>
<div class="contrast">
<p>
For browsers that support CSS hardware acceleration, tasks, such as animation, are processed by the GPU giving massive performance gains.
</p>
</div>
</div>
</li>
<li>
<img src="http://nicinabox.com/superslides/images/dog.jpg" alt="">
<div class="container">
<a href="#linkhere"><h1>It's got a pretty sweet API.</h1></a>
<div class="contrast">
<p>
The control API lets you start, stop, animate, and destroy instances of the slider. You can get the current, next, and previous slides programmatically. In fact, the slider uses the same API internally.
</p>
</div>
</div>
</li>
<li>
<
img src="http://nicinabox.com/superslides/images/hill-climb.jpg" alt="">
<div class="container">
<h1>It's tested with QUnit.</h1>
<div class="contrast">
<p>
Version 0.5 was a ground up, TDD rebuild, fixing many quirky bugs and standardizing the event and control APIs.
</p>
</div>
</div>
</li>
<li>
<img src="http://nicinabox.com/superslides/images/kids.jpg" alt="">
<div class="container">
<a href="#linkhere"><h1>It's got popular buzzwords.</h1></a>
<div class="contrast">
<p>
Thanks for viewing! Read the docs, create an issue,
</p>
<p>
made this. All these photos are by the amazing
</p>
</div>
</div>
</li>
</ul>
<nav class="slides-navigation">
<a href="#" class="next">
<i class="icon-chevron-right"></i>
</a>
<a href="#" class="prev">
<i class="icon-chevron-left"></i>
</a>
</nav>
</div>
غير اللون الاصفر برابط الصورة و اللون الاسود برابط التدوينة واللون الوردي هو العنوان واللون الاحمر الوصف الخاص بالتدوينة
<ul class="slides-container">
<li>
<img src="http://nicinabox.com/superslides/images/building.jpg" alt="">
<div class="container">
<a href="#linkhere"><h1>It's responsive.</h1></a>
<div class="contrast">
<p>
Images are smartly centered in the viewport. Use your own media queries to control the layout of your content.
</p>
</div>
</div>
</li>
<li>
<img src="http://nicinabox.com/superslides/images/girl.jpg" alt="">
<div class="container">
<a href="#linkhere"><h1>It's hardware accelerated.</h1></a>
<div class="contrast">
<p>
For browsers that support CSS hardware acceleration, tasks, such as animation, are processed by the GPU giving massive performance gains.
</p>
</div>
</div>
</li>
<li>
<img src="http://nicinabox.com/superslides/images/dog.jpg" alt="">
<div class="container">
<a href="#linkhere"><h1>It's got a pretty sweet API.</h1></a>
<div class="contrast">
<p>
The control API lets you start, stop, animate, and destroy instances of the slider. You can get the current, next, and previous slides programmatically. In fact, the slider uses the same API internally.
</p>
</div>
</div>
</li>
<li>
<
img src="http://nicinabox.com/superslides/images/hill-climb.jpg" alt="">
<div class="container">
<h1>It's tested with QUnit.</h1>
<div class="contrast">
<p>
Version 0.5 was a ground up, TDD rebuild, fixing many quirky bugs and standardizing the event and control APIs.
</p>
</div>
</div>
</li>
<li>
<img src="http://nicinabox.com/superslides/images/kids.jpg" alt="">
<div class="container">
<a href="#linkhere"><h1>It's got popular buzzwords.</h1></a>
<div class="contrast">
<p>
Thanks for viewing! Read the docs, create an issue,
</p>
<p>
made this. All these photos are by the amazing
</p>
</div>
</div>
</li>
</ul>
<nav class="slides-navigation">
<a href="#" class="next">
<i class="icon-chevron-right"></i>
</a>
<a href="#" class="prev">
<i class="icon-chevron-left"></i>
</a>
</nav>
</div>
غير اللون الاصفر برابط الصورة و اللون الاسود برابط التدوينة واللون الوردي هو العنوان واللون الاحمر الوصف الخاص بالتدوينة
ثم بعدها اسحب هذه الاداة( بعد ضغط حفظ ) اسحبها الى فوق رسائل المدونة الالكترونية اي سؤال اتركه في تعليق .