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

السلام عليكم

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

قم بالبحث عن الكود التالي :

]]></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/AVvXsEjIVszbzgdt-adDuKCAIoYUuMHjPRxL2KTZmhlsdPc4HK92KhMy7DZ134palgs9TeTdTCYBm2tw0gASfjJljW5rg_cjjgi5PUGdMUxWtTdy37k4QxkthnIz08nIPxhxqvVsCDmplLrAwoAC/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/AVvXsEiqVKXXlx-HGjJWOKLNMN2frz8qkcop1dwUIzNXyBVikjSax9aTiOZ63Qkt9jJ8FmgOkKOwYmwLjffD0eeCnU7pySgf-BPM7arceR3FgCaBWkTowZMJYkr8J91fBoB0sMrgVD5gRbj0RnY/) ;

margin: 0;

padding: 10px 15px 20px;

border-left: solid 1px #c4c4c4;

border-right: solid 1px #c4c4c4;}

قم بالبحث عن الكود التالي :

</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>

قم بالبحث عن الكود التالي (إذا وجدت إثنين فالكود الثاني هو المقصود) :

<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/AVvXsEj678522gtY6Kbej1JZBW3cKlDex8ZK52K_tguRiVy_OKIZ5JtaBwm_ya8N5hDd1L-Y17ypY2QkhQZgtEp5ZNu3mAM_SFNKg_d0L6vfQnOxMXyVd87OBpAliRYgpvcvVGRk9RgqSP-tsMU/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://www.chahidna.com/&quot;;

</script>

<div class='accordion'>

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

</div>

</b:if>

• width: 620px قم تغيير هذه القيمة على حسب عرض الإضافة التي تريد
• إضافات بلوجر : قم تغيير هذه التسمية بأحد التسميات الخاصة بمدونتك
• قم بتغيير رابط المدونة برابط مدونتك www.chahidna.com
• وأخير قم بحفظ القالب