شرح تركيب إضافة "قائمة الأكورديون" لمدون بلوجر

اخيرا بعد جهد في البحث وجدت قائمة Accordion ومن اهم هذه الميزة انها لا تأخذ في القالب. ولا حاجة للذهاب الى تحرير HTML، فقط اداة HTML/JavaScript.

انتقل إلى لوحة التحكم توجه إلى صفحة >> التخطيط >> ثم إضغط "إضافة أداة" اختر إضافة اداة 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/AVvXsEjsVMtpOi9hJmMklPQp_Lpq2J2TYKoNWrBjycKDHhlevQTxqGsZmYB2aYrb1fMbZFfFvLhWgqU8gWH09cgw5cX-CQ5WyJ4AXCO6ChUy6WAbpsv8iY_2y84zc9Y-zkOG28sNDdXqUdpmWJM/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;}

n .content li {background-image: url(); background-repeat: no-repeat
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordi
o;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}

(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/AAAAAAAABrQ/Xl
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: ur
lCiTeVqtq0/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>

avascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active')
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
<script type='text/
j.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 .

اتمنى ان تكون نالت اعجبكم وإن شاء الله فى القريب العاجل هناك بعض المفاجآت الجديدة.فاتبعوني وتأكدوا أن كل من مرّ وأصبح من متابعي مدونتي , سأسارع وأصبح من متابعي مدونته. دمتم في رعاية الله وحفظه.

المصدر: مدونة كيف اتعلم التصميم في بلوجر http://blogtasmim.blogspot.com/2013/07/blog-post_1914.html#ixzz2ce0s13Xv

هشام ابرشى

اسمي هشام : من المملكة المغربية , اهتم بتقنيات الموقع ومواكبة كل ماهو جديد في عالم التقنيه , انقل قالبا ما اراه مفيد ومناسب للزوار , وايضا اطرح المواضيع الحصريه والمفيده للكل بأذن الله ..