zinetx اضافات بلوجر سلايد سلايد شو سلايدر سلايد شو (2)

سلايد شو (2)

الثلاثاء, ديسمبر 30, 2014 اضافات بلوجر سلايد سلايد شو سلايدر

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

موضوع

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

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

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

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

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

<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ParallaxContentSlider/css/demo.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/ParallaxContentSlider/css/style.css" />
<script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/modernizr.custom.28468.js"></script>
<link href='http://fonts.googleapis.com/css?family=Economica:700,400italic' rel='stylesheet' type='text/css'>
<script type="text/javascript">
// Please don't use this code on your site
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>

خطوة 3 : ابحث عن <body> ضع الاكواد تحته :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="http://tympanus.net/Development/ParallaxContentSlider/js/jquery.cslider.js"></script>

<script type="text/javascript">

$(function() {

$('#da-slider').cslider();

});

</script>

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

<div id="da-slider" class="da-slider">
	<div class="da-slide">
	<h2>Warm welcome</h2>
	<p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
	<a href="#" class="da-link">Read more</a>
	<div class="da-img"><img src="http://tympanus.net/Development/ParallaxContentSlider/images/1.png" alt="image01" /></div>
	</div>
	<div class="da-slide">
	<h2>Easy management</h2>
	<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
	<a href="#" class="da-link">Read more</a>
	<div class="da-img"><img src="http://tympanus.net/Development/ParallaxContentSlider/images/2.png" alt="image01" /></div>
	</div>
	<div class="da-slide">
	<h2>Revolution</h2>
	<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
	<a href="#" class="da-link">Read more</a>
	<div class="da-img"><img src="http://tympanus.net/Development/ParallaxContentSlider/images/3.png" alt="image01" /></div>
	</div>
	<div class="da-slide">
	<h2>Quality Control</h2>
	<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
	<a href="#" class="da-link">Read more</a>
	<div class="da-img"><img src="http://tympanus.net/Development/ParallaxContentSlider/images/4.png" alt="image01" /></div>
	</div>
	<nav class="da-arrows">
	<span class="da-arrows-prev"></span>
	<span class="da-arrows-next"></span>
	</nav>
	</div>
	</div>

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

شاركه على Facebook

شاركه على Twitter

شاركه على Google+

شاركه على LinkedIn

Unknown