بسم الله الرحمن الرحيم
موضوع
طريقة اضافة سلايدشو احترافي رقم 8
حطوة 1 : اذهب للمدونة - قالب - تحرير html
خطوة 2 : ابحث عن <head> ضع الروابط تحته (اسفله) :
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/3DGallery/css/style.css" />
<script type="text/javascript" src="http://tympanus.net/Development/3DGallery/js/modernizr.custom.53451.js"></script>
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/3DGallery/css/style.css" />
خطوة 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/3DGallery/js/jquery.gallery.js"></script>
<script type="text/javascript">
$(function() {
$('#dg-container').gallery();
});
</script/>
خطوة 4 : اذهب الى تخطيط ثم اضافة اداة ثم اختر html/javascript ثم ضع الاكواد داخل مربع النص الكبير
:
:
<section id="dg-container" class="dg-container">
<div class="dg-wrapper">
<a href="#"><img src="http://tympanus.net/Development/3DGallery/images/1.jpg" alt="image01"><div>http://www.colazionedamichy.it/</div></a>
<a href="#"><img src="http://tympanus.net/Development/3DGallery/images/2.jpg" alt="image02"><div>http://www.percivalclo.com/</div></a>
<a href="#"><img src="http://tympanus.net/Development/3DGallery/images/3.jpg" alt="image03"><div>http://www.wanda.net/fr</div></a>
<a href="#"><img src="http://tympanus.net/Development/3DGallery/images/4.jpg" alt="image04"><div>http://lifeingreenville.com/</div></a>
<a href="#"><img src="http://tympanus.net/Development/3DGallery/images/5.jpg" alt="image05"><div>http://circlemeetups.com/</div></a>
<a href="#"><img src="http://tympanus.net/Development/3DGallery/images/6.jpg" alt="image06"><div>http://www.castirondesign.com/</div></a>
<a href="#"><img src="http://tympanus.net/Development/3DGallery/images/7.jpg" alt="image07"><div>http://www.foundrycollective.com/</div></a>
<a href="#"><img src="http://tympanus.net/Development/3DGallery/images/8.jpg" alt="image08"><div>http://www.mathiassterner.com/home</div></a>
<a href="#"><img src="http://tympanus.net/Development/3DGallery/images/9.jpg" alt="image09"><div>http://learnlakenona.com/</div></a>
<a href="#"><img src="http://tympanus.net/Development/3DGallery/images/10.jpg" alt="image10"><div>http://www.neighborhood-studio.com/</div></a>
<a href="#"><img src="http://tympanus.net/Development/3DGallery/images/11.jpg" alt="image11"><div>http://www.beckindesign.com/</div></a>
<a href="#"><img src="http://tympanus.net/Development/3DGallery/images/12.jpg" alt="image12"><div>http://kicksend.com/</div></a>
</div>
<nav>
<span class="dg-prev"><</span>
<span class="dg-next">></span>
</nav>
</section>
</div>
غير اللون الاصفر برابط الصورة واللون الوردي هو العنوان واللون الاسود هو لون الرابط فعند النقر على الصورة ستتحول الى هذا الرابط
ثم بعدها اسحب هذه الاداة( بعد ضغط حفظ ) اسحبها الى فوق رسائل المدونة الالكترونية .