إضافة قائمة منزلقة لاخر مواضيعك

21‏/10‏/2010



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

سبق و اعطينا تعريفا كاملا لمكتبة الjquery في مواضيعنا السابقة

و قلنا أنها  تقدم حلول تختصر على مطور الويب
و تعطيه فرصة لتقديم عمل مبني على مكتبة رائعة 
يمكن أن ستفيد منه مطورين ومصممين آخرين لكي يجدوا ضالتهم.

كما و سبق اني انشات موضوعا حول كيفية اضافة اروع الاضافات

طبعا الاختصار لم يكن من برمجتي webdesignerwall

اليوم يمكنك القول أني وجدت ضالتي في احد المكتبات 

و أنشأت أروع اضافة لمدونات بلوجر



و هو عبارة عن اخر مواضيعك و مبداه هو خلاصات RSS

مع وضع عدد التعليقات و تاريخ اضافة الموضوع 

و الأروع هو اضافة صورة مصغرة لكل موضوع

فكرة برمجة السكريبت التابع للاضافة هو ان العديد يجد صعوبة في التعامل معHTML

بحيث لو تأملت الموضوع السابق ستجد اختلاف واضح ...

في السابق كنت قد طلبت منك هو اضافة الكلاس



 




لكن الان  فقط وضع رابط مدونتك يكفي..



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




أولا : من لوح تحكم مدونتك انتقل إلى صفحة تصميم    ثم    " اضافة اداة HTML "
 
ثانيا :قم بنسخ و لصق الكود التالي




<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/AVvXsEj-JqWJcGT1kxWYFq5nLhwtX8cKI8Bn_IRb9x3GFwGIMnT0LHlbFnMWq4AKU91qFmtEFEW405i8bEKh8CX2e87aWdY_3pX-AZ13jZyYE8p4GP0iL-eYhMvEhDEbZWoGnf30iuyqP9_cilh5/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/AVvXsEjawys3PHoQCneRyqYW47ct_zMkoOL9-3mbdooz-J9Dnd2s7H7zdGB7bN0KDSQd4ohzTJeN0CCkEGtuVLM25r-XP4ntugsuxZzF1PYsYQmvuhPMgp_VcHaRhDCUCa3WHrmsremHjwDWczg/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://blogspacetech.blogspot.com/";



</script>



<div class="accordion">

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

</div>


الان بقي لك فقط تعديل بسيط وهو وضع رابط مدونتك


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

و اختيار احد اقسامها

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

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




بهذا أكون إنتهيت من الدرس ..أتمنى أن يكون قد أفادكم