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

بسم الله الرحمان الرحيم

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

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

صورة الإضافة

شرح الإضافة :

بعد الدخول علي تحرير html ، أضغط علي الخاصة بتوسيع قوالب عناصر واجهة المستخدم ،

أبحث عن الكود التالي ، "إذا وجدت إثنين فالثاني هو المقصود "

<data:post.body/>

 ضع بعده الكود التالي :

<b:if cond='data:blog.pageType == "item"'>

<script language='JavaScript'>

imgr = new Array();

imgr[0] = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv_UPb6sv-7FV88tjc5Y8XasTkNLN7QTTamuA7oA8JtIKOnIa9EGqSVcCe81X5Yki8t7eBKZQnuKfGr_i-2iCVxiCjzW4v3P816XRV2l1Gb6gTzQmr9P_p8QPVDoGu4DOlaHzgThObrbM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht-15NxWE1QBMYDSegdvzB30hZNvjeELNONX8MIfp_cW5f90vbNDQ6b153euaKIIbldSY1mw7vtoRqzAnXHB2QqufSVVFbU2nAWNQH5gNyEHfRbpmEuxj-Xz9aK9-JB4IzZFY3eXZXm4Wi/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJCJaUcqWeT-c56WLQ86JxfZYA1c7Paq3g_Falhq8ATx_p_AbRNTLUTJXdX-8njv65kxL7AH0TofYhSyoZTuVcGwF4-ssPTkEglPQgGkP1mwItV89mhVvHD-hPsrK1g-h6L3V__x6JBQ4/) ;

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>

 و أخيرا أنتهينا ...........
 أي إستفسار أنا هنا ...

By glok

Similiar tagsإضافات بلوجردروس بلوجر