طريقة رائعة لدمج خمس أدوات بلوجر في أداة واحدة بشكل منزلق

السلام عليكم ورحمة الله وبركاته.

درس اليوم هو عن طريقة رائعة لدمج خمس أدوات بلوجر في أداة واحدة بشكل منزلق,بحيث يمكنك دمج خمس أدوات من إختيارك في أداة واحدة فتظهر أداة واحدة من بين الخمسة و لإظهار باقي الأدوات يكفي الضغط على باقي الأدوات كل على حدى لتظهر الأداة بشكل منزلق .

أقل ما يمكن أن يقال على هثه الأداة أنها رائعة دون أن ننسى أنها تغنيك عن الحيز الذي يتطلبه وضع كل أداة على حدى.و أيضا لا تأخذ وقت في التحميل.

معاينة الأداة

نمر لشرح الطريقة:


1.اذهب للوحة التحكم الخاصة بمدونك
2. تخطيط.
3.عناصر الصفحة.
3.إضافة أداة.
4.اختار  Html/Javascript.
5.أضف الكود التالي:

<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/AVvXsEj-ikxzrWEROGQYMdeT2_itMBQ4jXXlNSpbHralv5u1DSl4aEe91qEMsHUJ0xQw1Z_4u-bQw_ZCRIMQuVq40iJgJNHx6VAsfKoBqXE12XwsykTT6EPP-hnleJsti-hziHQTtLR3oRJeLdw/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/AVvXsEgMXq-G6Wz74qZPMsyw6jGX_zn1imyXZswDcf8kCzVAg-v14tEUk2l0DBrmrgTXL90MRb0VZRPS9T1ln_d6wfmqhyhIHOxqXNk9B-Se8c2JCkiIdDKla_e5RV43SRpaaKSjipBextWJjCU/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>

6.قم بتغير ما كتب بالأحمر بأكواد الأدوات وعناوين الأدوات حسب الترتيب.
7.قم بحفظ الأداة و مبروك عليك.


أتمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق.

المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم.