يوما بعد يوم يزداد عدد المدونين العرب، الشيء الذي يغني المحتوى العربي على الويب، لكن المشكلة هو عدم قدرة الجميع على برمجة بعد الكودات لتنسيق مدونتهم بطريقة احترافية.
في موضوعنا لليوم سنتطرق لكيفية اضافة سلايد شو متجاوب لمدونات بلوجر بسهولة، هذا الاخير هو عبارة عن كود بسيط يتم وضعه في المكان الذي تريد السلايد شو ان يظهر به، فمن الممكن وضعه قبل المواضيع، كما يمكنك وضعه في اسفل الموقع، حسب تصميم مدونتك و الغاية من اضافته.
الآن وبدون ان اطيل عليكم نمر لشرح كيفية اضافة السلايد شو لمدونات بلوجر.
الخطوة الأولى:
نقوم بنسخ ولصق الكود التالي في منطقة الهيد، اي اسفل وسم <head>.
الخطوة الثانية:
<!--boostrap css-->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"></link>
<link href="//cdn.rawgit.com/morteza/bootstrap-rtl/master/dist/cdnjs/3.3.1-rc2/css/bootstrap-rtl.min.css" rel="stylesheet"></link>
<!--JQ, boostrap js-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
<script src='//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js'/>
الخطوة الثانية:
نقوم بنسخ الكود التالي ولصقه في المكان الذي نود ان يظهر به السلايد شو، وعلى سبيل المثال سنضعه فوق المواضيع.
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a alt="" href="#" target="_blank">
<img src="#" alt="..." />
<div class="carousel-caption">
<h3>عنوان الموضوع</h3>
<p>نبذة من جسم الموضوع</p>
</div>
</a>
</div>
<div class="item">
<a alt="" href="#" target="_blank">
<img src="#" alt="..." />
<div class="carousel-caption">
<h3>عنوان الموضوع</h3>
<p>نبذة من جسم الموضوع</p>
</div>
</a>
</div>
<div class="item">
<a alt="" href="#" target="_blank">
<img src="#" alt="..." />
<div class="carousel-caption">
<h3>عنوان الموضوع</h3>
<p>نبذة من جسم الموضوع</p>
</div>
</a>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
نختار تخطيط ثم نضغط على اضافة اداة ثم نختار اداة HTML/JavaScript ونقوم بلصق الكود ثم نضغط على حفظ.
الخطوة الثالثة:
الآن وبعد اضافة السلايد شو يتبقى لنا فقط التعديل على المحتوى، فنضع مكان "عنوان الموضوع" عنوان الموضوع الخاص بنا، وكذلك مكان "نبذة من جسم الموضوع" نضع نبذة من الموضوع الخاص بنا، ثم نضع رابط الصورة التي نود ان تظهر داخل السلايد شو مكان # اي بين علامتي " "، واخيرا نضغ رابط الموضوع.
ملاحظة:
السلايد شو الخاص بنا يحتوي على 3 مواضيع فقط، وان اردت زيادة عدد المواضيع، فيمكنك نسخ الكود المبين في الصورة اعلاه ولصقه عدد المرات التي تريد.
كان هذا شرحنا لكيفية اضافة سلايد شو متجاوب مع جميع الهواتف و الاجهزة بطريقة سهلة، وإن واجهتك اي مشاكل في اضافة السلايد شو، فيمكنك ترك تعليق و سنقوم بمساعدتك.
