إضافة مواضيع ذات صلة أسفل كل المواضيع لمدونات بوجر

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

- شرح طريقة التركيب

1- من لوحة التحكم >> قالب >> تحرير HTML

2- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير

3- قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F) من أجل إضهار شريط البحث..

4- قم بالبحث عن الكود ]]></b:skin>

5- واضف فوقه مباشراً الكود التالي :

__________________________________________

/* CSS Related Post Dabour Phone */

.related-post {margin:5px 5px 0 0; padding:5px 22px 15px; font:normal normal 11px/1.4 Arial,Sans-Serif; background:#FDFDFD; border-radius:1px;border:1px solid #F0F0F0;}.related-post h4:before {content: "\f0f3";font-family: fontawesome;margin-left: 10px;color: #BD2E1F;}

.related-post h4 {font-family: Electrolize,ge_ss_tvbold;font-weight: 700;color: #FDFDFD;margin: 0 0 .5em;display: inline-block;padding: 6px 10px 7px 8px;line-height: 16px;font-size: 13px;border: 1px solid #E8E4E4;border-radius: 3px;background: #E74C3C;}

.related-post-style-5,

.related-post-style-5 li {margin:0;padding:0;list-style:none;word-wrap:break-word;overflow:hidden;}

.related-post-style-5 .related-post-item {display:block;float:right;width:82px;height:auto;padding:0;padding-bottom:3px;margin-left:2px;}

.related-post-style-5 .related-post-item:first-child {border-left:none;}

.related-post-style-5 .related-post-item-wrapper {display:block;position:relative;overflow:hidden;}

.related-post-style-5 .related-post-item-thumbnail {display:block;margin:0;width:77px;height:77px;max-width:none;max-height:none;background-color:#fafafa;border:2px solid #E0E0E0;padding:0;-webkit-border-radius:-1px;-moz-border-radius:-1px;border-radius:-1px; }

.related-post-style-5 .related-post-item-tooltip {background-color: rgba(229, 40, 20, 0.73);position: absolute;top: 0;right: 0;bottom: 0;left: 0;padding: 10px;

line-height: normal;font-size: 10px;font-style: normal;color: #FFFFFF;overflow: hidden;display: none;font-family: Electrolize,ge_dinar_oneregular;}

.related-post-style-5 .related-post-item:focus .related-post-item-tooltip,

.related-post-style-5 .related-post-item:hover .related-post-item-tooltip { display:block;}

__________________________________________

6. ثم إبحث عن <data:post.body/> ثم ضع الكود التالى اسفله مباشرة

__________________________________________

<div class='related-post' id='related-post'/><script type='text/javascript'>var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];var relatedPostConfig = {homePage: "<data:blog.homepageUrl/>",widgetTitle: "<h4>تدوينات ذات صلة:</h4>",numPosts:6,summaryLength:370,titleLength: "auto",thumbnailSize: 72,noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId: "related-post",newTabLink: true,moreText: "Read More",widgetStyle: 5,callBack: function() {}};</script>

__________________________________________