شرح تركيب إضافة "قائمة الأكورديون" لمدون بلوجر
انتقل إلى لوحة التحكم توجه إلى صفحة >> التخطيط >> ثم إضغط "إضافة أداة" اختر إضافة اداة 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/AVvXsEjBTW14UY-I7-oASAO12Ak8BceYxi-RUgeNfo_tloULujS-RBtQB7CztPmX31Ux8jN2QGjhHPanr2MsxTasnnwvZq5RoLS5_O409grC0R-4OxfvA-qbJtSM8NHHorAnleyfzrvdNY4K06I/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/AVvXsEjYVyNcdS9eCQ4VeEAtfcvFNaNAc7ogAYG_2oGiJWPewdKxUGKokik1N_EPJ5kHqohurFLxwqDp5lNLa_L_30X9HdpGDikdyNX_CUnNHAiosxLSveZ1suHRkiZE2lwbmPgJHbIR0naVn2I/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 .
اتمنى ان تكون نالت اعجبكم وإن شاء الله
فى القريب العاجل هناك بعض المفاجآت الجديدة.فاتبعوني وتأكدوا أن كل من مرّ
وأصبح من متابعي مدونتي , سأسارع وأصبح من متابعي مدونته. دمتم في رعاية
الله وحفظه.
ليست هناك تعليقات:
إرسال تعليق