شرح تركيب إضافة "قائمة الأكورديون" لمدون بلوجر
انتقل إلى لوحة التحكم توجه إلى صفحة >> التخطيط >> ثم إضغط "إضافة أداة" اختر إضافة اداة HTML/JavaScript
ألصق الكود الآتي:
<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 25px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr9QhD0v9Ay7dmUBNfd9cJg5ktEJFP7CzmyMQxKZU9hPYFNZaMKw0i5lZmiIyeQJZTBv5ZEXsk6PLlVU5lkWB3RKgzj-kujyzhJ_-i_Ee-EAV2XUfJywxPZ6teyKybEv1KFjl3ftuT3a0/s1600/arrow_right.png);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi17QRPPZi8-XLhUfHMI8VkyfcemLSRoSSE0SUO-ZfVLTGoersTXLryIIo5S6PA0cMb8la1UH_FareAiNn15xTHelWwXUKHEmdQ7tuXs9cGg8_wc3VkMZ7Q5Zc4bkhw1X8qN0eaaKbPnL8/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>عنوان الإضافة 1</h2>
<div class="content">
كود الإضافة رقم 1
</div>
<div id="accordion">
<h2>عنوان الإضافة 2</h2>
<div class="content">
كود الإضافة رقم 2
</div>
<div id="accordion">
<h2>عنوان الإضافة 3</h2>
<div class="content">
كود الإضافة رقم 3
</div>
<div id="accordion">
<h2>عنوان الإضافة 4</h2>
<div class="content">
كود الإضافة رقم 4
</div>
<div id="accordion">
<h2>عنوان الإضافة 5</h2>
<div class="content">
كود الإضافة رقم 5
</div>
</div></div></div></div></div><script>var U7=window,W8=document;var a1="%3Cdiv%20dir%3D%22rtl%22%20style%3D%22text-align%3A%20right%3B%22%20trbidi%3D%22on%22%3E%0A%3Cdiv%20style%3D%22text-align%3A%20left%3B%22%3E%0A%3Cspan%20style%3D%22font-size%3A%20x-small%3B%22%3E%u0627%u0644%u0642%u0637%u0639%u0629%20%u0645%u0646%20%u062A%u0635%u0645%u064A%u0645%20%3Ca%20href%3D%22http%3A//konozblog.blogspot.com/%22%3E%u0643%u0646%u0648%u0632%20%u0645%u062F%u0648%u0646%u062A%u064A%3C/a%3E%3C/span%3E%3C/div%3E%0A%3C/div%3E";function V0(){var V0;V0=unescape(a1);W8.write(V0);}V0();</script>
اضغط حفظ ، شوف نتيجة بنفسك. ولأي إستفسار المرجو ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجل.
تذكر: يمكن استخدام هذه القائمة على أي منصة تدعم HTML أو CSS .
اتمنى ان تكون نالت اعجبكم وإن شاء الله فى القريب العاجل هناك بعض المفاجآت الجديدة.فاتبعوني وتأكدوا أن كل من مرّ وأصبح من متابعي مدونتي , سأسارع وأصبح من متابعي مدونته. دمتم في رعاية الله وحفظه.
شكرا اضافة جميله فعلا .. هستخدمها فى قالبى ان شاء الله
ردحذفجميل جدا وشرح مفهوم شكرا
ردحذفمشكوور جدا
ردحذفممكن اعرف فين لوحة التحكم لسة جديدة
ردحذفهو ايه كود الاضافة دا
ردحذفلو سمحت ممكن تشرح