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

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

فباستطاعتك وضع هاته الأداة إلى مدونتك عبر نسخ هذا الكود:

<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: 300px;

text-align: center;

border-bottom: solid 1px #c4c4c4;

}

.accordion h3 {

background: #e9e7e7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCiaVb9ZHiuxZAl7XNANMuKB68p8siNxaxaJ51u9rm225CCrbFDlwDLZ7dC_tnfIkAgEHaESwdFZHNRT-kSIA0vI2os1S2j-11iV9Av7Bf0M5Z3jr1xYH_i5BGCDesqqllL9dJW4eurZ0a/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/AVvXsEh73GJ7ZH1lKXjc8l9pAPGRPD0oCC4kBpvVic1k6FeabEgQ_SWhqtD2YQ5Y980dVyrgSKDnxd7GW9gNS5sYKAkLeqf7HcSXuoMW_d__hpFz2cEETuPPwmhv7X-dkruyjGl4TniBm5wG8tU/s128/no-image.blogspacetech.jpeg";

showRandomImg = true;

jimgwidth = 80;

jimgheight = 80;

jfntsize = 12;

jacolor = "#D12709";

jaBold = true;

jtext = "التعليقات";

jshowPostDate = true;

jsummaryPost = 200;

summaryFontsize = 12;

summaryColor = "#000";

numposts =4;

label = "حلقات حوحو";

home_page = "http://www.igli5.com/";

</script>

<div class="accordion">

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

</div>

--------------------------------------------------------

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

ثم بعد ذلك تقوم بالضغط على إضافة أداة كما هو موضح في الصورة التالية

ثم تضغط على اختيار html /java script 

وتقوم بإضافة الكود الذي هو موجود أعلاه داخل هذا المربع كما هو موضح في الصورة التالية :

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

أتمنى أن الدرس قد أفادكم وانتظروا الجديد.