طريقة إضافة قائمة متطورة في آخر التدوينة لمدونات بلوجر

بسم الله الرحمان الرحيم
اليوم أحضرت لكم إضافة لبلوجر و هي عبارة عن قائمة لآخر مواضيع المدونة تطبق في آخر التدوينات ، 
و قد رأيتها عند الأخ خالد صاحب مدونة الفضاء التكنولوجي و الذي أشكره علي تطويرها فقررت أن أنقلها لكم ،

صورة الإضافة

شرح الإضافة :


بعد الدخول علي تحرير html ، أضغط علي الخاصة بتوسيع قوالب عناصر واجهة المستخدم ،
أبحث عن الكود التالي ، "إذا وجدت إثنين فالثاني هو المقصود "
<data:post.body/>
 ضع بعده الكود التالي :
<b:if cond='data:blog.pageType == "item"'>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = &quot;http://lh5.ggpht.com/_ZXEvc1YiIko/TLzMljzSYFI/AAAAAAAAA4g/FW2VlpJHWfE/s128/no-image.blogspacetech.jpeg&quot;;
showRandomImg = true;
jimgwidth = 80;
jimgheight = 80;
jfntsize = 12;
jacolor = &quot;#E67C15&quot;;
jaBold = true;
jtext = &quot;التعليقات&quot;;
jshowPostDate = true;
jsummaryPost = 200;
summaryFontsize = 12;
summaryColor = &quot;#000&quot;;
numposts = 10;
label = &quot;إضافات بلوجر&quot;;
home_page = &quot;http://esrare.blogspot.com/&quot;;
</script>
<div class='accordion'>
<script src='http://blogspacetech.googlecode.com/files/new.recent-posts.js' type='text/javascript'/>
</div>
</b:if>
لا تنس وضع رابط مدونتك مكان رابطي و غير التسمية بالتسمية التي تريدها ، أما بالنسبة للرقم 10 باللون الأحمر فهو عدد المواضيع التي تريدها أن تظهر في القائمة .

أبحث عن الكود التالي :
]]></b:skin>
ضع الكود التالي قبله
.accordion {
width: 620px;
text-align: center;
border-bottom: solid 1px #c4c4c4;}
.accordion h3 {
background: #e9e7e7 url(http://2.bp.blogspot.com/_jFIsHl5gfpM/TFytEJ5rLTI/AAAAAAAAAf0/ogdrOF9AZ7U/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:url(http://lh6.ggpht.com/_4_wf1DKMvX4/TMWm472NmPI/AAAAAAAABmw/aioU52gp7Zw/box-bgr.gif) ;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;}
 الرقم 620 يمثل عرض القئمة يمكنك تغييرها بما يناسبك ،

و أخيرا أبحث عن الكود التالي :
</head>
ألصق فوقه مباشرة هذا الكود :
 <script src='http://blogspacetech.googlecode.com/files/jquery.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.accordion h3:first&quot;).addClass(&quot;active&quot;);
$(&quot;.accordion p:not(:first)&quot;).hide();
$(&quot;.accordion h3&quot;).click(function(){
$(this).next(&quot;p&quot;).slideToggle(&quot;slow&quot;)
.siblings(&quot;p:visible&quot;).slideUp(&quot;slow&quot;);
$(this).toggleClass(&quot;active&quot;);
$(this).siblings(&quot;h3&quot;).removeClass(&quot;active&quot;);
});
});
</script><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>
 و أخيرا أنتهينا ...........
 أي إستفسار أنا هنا ...
بسم الله الرحمان الرحيم
اليوم أحضرت لكم إضافة لبلوجر و هي عبارة عن قائمة لآخر مواضيع المدونة تطبق في آخر التدوينات ، 
و قد رأيتها عند الأخ خالد صاحب مدونة الفضاء التكنولوجي و الذي أشكره علي تطويرها فقررت أن أنقلها لكم ،

صورة الإضافة

شرح الإضافة :


بعد الدخول علي تحرير html ، أضغط علي الخاصة بتوسيع قوالب عناصر واجهة المستخدم ،
أبحث عن الكود التالي ، "إذا وجدت إثنين فالثاني هو المقصود "
<data:post.body/>
 ضع بعده الكود التالي :
<b:if cond='data:blog.pageType == "item"'>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = &quot;http://lh5.ggpht.com/_ZXEvc1YiIko/TLzMljzSYFI/AAAAAAAAA4g/FW2VlpJHWfE/s128/no-image.blogspacetech.jpeg&quot;;
showRandomImg = true;
jimgwidth = 80;
jimgheight = 80;
jfntsize = 12;
jacolor = &quot;#E67C15&quot;;
jaBold = true;
jtext = &quot;التعليقات&quot;;
jshowPostDate = true;
jsummaryPost = 200;
summaryFontsize = 12;
summaryColor = &quot;#000&quot;;
numposts = 10;
label = &quot;إضافات بلوجر&quot;;
home_page = &quot;http://esrare.blogspot.com/&quot;;
</script>
<div class='accordion'>
<script src='http://blogspacetech.googlecode.com/files/new.recent-posts.js' type='text/javascript'/>
</div>
</b:if>
لا تنس وضع رابط مدونتك مكان رابطي و غير التسمية بالتسمية التي تريدها ، أما بالنسبة للرقم 10 باللون الأحمر فهو عدد المواضيع التي تريدها أن تظهر في القائمة .

أبحث عن الكود التالي :
]]></b:skin>
ضع الكود التالي قبله
.accordion {
width: 620px;
text-align: center;
border-bottom: solid 1px #c4c4c4;}
.accordion h3 {
background: #e9e7e7 url(http://2.bp.blogspot.com/_jFIsHl5gfpM/TFytEJ5rLTI/AAAAAAAAAf0/ogdrOF9AZ7U/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:url(http://lh6.ggpht.com/_4_wf1DKMvX4/TMWm472NmPI/AAAAAAAABmw/aioU52gp7Zw/box-bgr.gif) ;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;}
 الرقم 620 يمثل عرض القئمة يمكنك تغييرها بما يناسبك ،

و أخيرا أبحث عن الكود التالي :
</head>
ألصق فوقه مباشرة هذا الكود :
 <script src='http://blogspacetech.googlecode.com/files/jquery.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.accordion h3:first&quot;).addClass(&quot;active&quot;);
$(&quot;.accordion p:not(:first)&quot;).hide();
$(&quot;.accordion h3&quot;).click(function(){
$(this).next(&quot;p&quot;).slideToggle(&quot;slow&quot;)
.siblings(&quot;p:visible&quot;).slideUp(&quot;slow&quot;);
$(this).toggleClass(&quot;active&quot;);
$(this).siblings(&quot;h3&quot;).removeClass(&quot;active&quot;);
});
});
</script><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>
 و أخيرا أنتهينا ...........
 أي إستفسار أنا هنا ...
تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
abuiyad