إضافة قائمة افقية منزلقة بتقنية jQuery

 بسم الله الرحمن الرحيم مرحبا بكم اخواني الكرام
 متابعي مدونة عربي كاش2 ,في قسم الطلبات
 لتي أتلقها من زواري الاعزاءسأقوم بشرح كيفية اضافة
 داة اخر المواضيع بتقنية jQuery لكن لقسم معين ومحدد

هكدا كان طلب الاخت التي طلبت هده الاداة ,طبعا الاداة رائعة حيث

 عند تمرير الماوس عليه تنزلق وهي اداة من ادوات الجوكري

 يمكنك وضعها اينما اردتي في مدونتك اتمنى ان تعجبك ,اختي

 الاداة  انتقيته من الكثير من الادوات وهده الاضافة قليلا ما ستجدين

 مثيلا لها في المدونات العربية ,لقد قمت بالاستعانة بهدا الموقع للحصول

 على الاداة ,لأضافة الاداة لمدونتك

توجهي الى لوحة تحكم مدونتك ^_^ تصميم ^_^ اضافة اداة جديدة

قومي بنسخ هدا الرمز ثم قومي بلصقه في المكان المناسب لمدونتك

 في انتظار ارائكم واستفسارتكم اسفل الموضوع وشكرا.
بعد نسخ الرمز ماعليك سوى تعديل هده الاحداثيات

تحميل (Download)مثال (Demo)

home_page  "رابط مودنتك/"

label = "هنا ضع القسم الدي تريده"

 اما numposts = 6 فله علاقة مع عدد المواضيع


<script type="text/javascript" src="http://blogspacetech.googlecode.com/files/jquery.js"></script>



<script type="text/javascript">

$(document).ready(function(){



$(".accordion h3:first").addClass("active");

$(".accordion p:not(:first)").hide();



$(".accordion h3").click(function(){

$(this).next("p").slideToggle("slow")

.siblings("p:visible").slideUp("slow");

$(this).toggleClass("active");

$(this).siblings("h3").removeClass("active");

});



});

</script>



<style type="text/css">

.accordion {

width: 480px;

text-align: center;

border-bottom: solid 1px #c4c4c4;

}

.accordion h3 {

background: #e9e7e7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU7j-FmWfXGuYd-UHijjESreBjJ0QAIf2p7ydWMvXbu7HCJnWaU8-Dwi0RzTkiTFcuBO2VNacJHWepkao0C_O-vs8olDRjyWbxY6GJgoco9cziXnPdWMwWjlayGr3H1J3Tc1ODqDMDW2i4/s320/arrow-square.gif) no-repeat right -51px;

padding: 7px 15px;

margin: 0;

font: bold 120%/100% Arial, Helvetica, sans-serif;

border: solid 1px #c4c4c4;

border-bottom: none;

cursor: pointer;

}

.accordion h3:hover {

background-color: #e3e2e2;

}

.accordion h3.active {

background-position: right 5px;

}

.accordion p {

background: #f7f7f7;

margin: 0;

padding: 10px 15px 20px;

border-left: solid 1px #c4c4c4;

border-right: solid 1px #c4c4c4;

}

</style>







<script language="JavaScript">

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMQZaWjnGrC8X9GJzyWaXxUtXcK9QT54727EiLx7ASKkbSYA8zU5dw3YuixkaW9t13vUYtivZDvK3ff5036Rhx8v7Gj56WJje3V8GHBn2L7LkzMU4RBc_Gb-ZiLICWf3_XcZCngCEzqbQ/s128/no-image.blogspacetech.jpeg";



showRandomImg = true;



jimgwidth = 80;

jimgheight = 80;

jfntsize = 12;

jacolor = "#E67C15";

jaBold = true;



jtext = "التعليقات";

jshowPostDate = true;



jsummaryPost = 200;

summaryFontsize = 12;

summaryColor = "#000";



numposts = 6;

label = "blogger";

home_page = "http://arabicash2.blogspot.com/";



</script>



<div class="accordion">

<script src="http://blogspacetech.googlecode.com/files/new.recent-posts.js" type="text/javascript"></script>

</div>

الرمز من مدونة  blogspacetech

)إن أعجبتك المدونة قم بالضغط هنا حتى تنضم لقائمة متابعينا ويصلك كل جديد !!!