إضافة مواضيع ذات الصلة لمدونة بلوجر نمط حديث مع الصور المصغرة

السلام عليكم ورحمة الله وبركاته

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

مشاهدة مثال حي من هنا

كيفية تركيبها
أولا أذهب إلى لوحة التحكم في مدونتك >> القالب >> تحرير html
ثم بإستخدام مفتاح الاختصار ctrlوf قم بالبحث عن الرمز ]]>
شاهد هذه الصورة لمعرفة كيفية البحث عن الرموز في قالب مدونتك.
بعد العثور على الرمز ]]> أضف الكود التالي فوقه مباشرةً

/* مواضيع ذات الصلة
----------------------------------------------- */
#related_posts {
line-height:1.4em;
margin-bottom:25px;
}
#related_posts ul,
#related_posts li {
list-style:none;
padding:0;
margin:0;
}

#related_posts li {
width:175px;
float:right;
height:150px;
overflow:hidden;
}
#related_posts .inner {
padding:0 5px;
}
#related_posts h4,
.comments > h4 {
border-bottom:1px solid #D5D5D5;
}
#related_posts .gmbrrltd {
display:block;
overflow:hidden;
height:140px;
padding:4px;
border:1px solid #D5D5D5;
}
#related_posts .gmbrrltd,
#related_posts .date {
-webkit-transition:margin-top 0.7s ease;
-moz-transition:margin-top 0.7s ease;
-ms-transition:margin-top 0.7s ease;
-o-transition:margin-top 0.7s ease;
transition:margin-top 0.7s ease;
}
#related_posts .gmbrrltd img {
width:100%;
height:100%;
}
#related_posts .inner strong {
font-size:120%;
line-height:1.3em;
display:block;
overflow:hidden;
max-height:54px;
padding:0 4px;
}
#related_posts p {
margin:10px 0 0;
padding:0 4px;
position:static;
}
#related_posts a {
text-decoration:none;
}
#related_posts li:hover .gmbrrltd,
#related_posts li:hover .date {
margin-top:-150px;
}
#related_posts .jcarousel-container {
padding:10px 0;
}
#related_posts .jcarousel-prev,
#related_posts .jcarousel-next {
top:-34px;
}
#related_posts .jcarousel-prev {
right:40px;
}
#related_posts .jcarousel-next {
right:5px;
}
#related_posts .loadingxx {
width:100%;
}