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

1- قم بذهاب إلى تحكم مدونتك انتقل إلى صفحة تصميم ثم اضافة اداة HTML ثم تضغط على HTML/JavaScript ثم قم بنسخ و لصق الكود التالي:

<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/AVvXsEjH4NGgKMkw9s54_QM5aws5ekTTLl2C-ELZfC-rvGXC77y9nnYsKd33Wj1swxcUuFoZkR4-0xHawawlQ4i3sTL0ZDTTPi62ogyE3oEMyDFu4r-lYJ2u_kTrTa3oiZuLUqNPr7bGYkCTSvEI/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/AVvXsEiT5XadUlRFPWgwYJbcOA4PAogloWHRg84gxpcUuILfj9YXMraq_N7It0sgEBN9qJbXU1wE4n4E58sjF73BzmRxWUn6g_3CXXPdxr5tBEYXD3lDPk_TtunZMKli29KGqBlGsQmOcit2Jjg/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 = 5;

label = "حلقات";

home_page = "http://www.netpf.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 = 5  "عدد المواضيع لا ص تظهر على قائمة "
بهذا أكون إنتهيت من الدرس ..أتمنى أن أكون قد أفادكم