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

السلام عليكم احبائي في الله اليوم حبيت اقدملكم اضافة رائعة ومميزة وتزيد من جمال مدونتك ومن ارشفة مدونتك ايضا وتقوي السيو وهي اضافة مواضيع ذات صلة تحت كل تدوينة في مدونتك وهي  تشبه كثيرا التي بمدونة عرب ويب الشهيرة وهي اضافة جميلة حقا وبتاثير هوفر اكثر من رائع ومميزات كثيرة ورائعة انصح باضافتها 

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

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

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

3-  قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم  (CTRL+F) 

4-  قم بالبحث عن الكود ]]></b:skin>  واضف فوقه مباشراً الكود التالي 

/*  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;}

5. ابحث عن <data:post.body/> ضع  بعده [ أسفل] الشكل المختار


6- ضع الكود التالى اسفله مباشرة 

<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'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];var relatedPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,widgetTitle: &quot;<h4>تدوينات ذات صلة:</h4>&quot;,numPosts:6,summaryLength:370,titleLength: &quot;auto&quot;,thumbnailSize: 72,noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId: &quot;related-post&quot;,newTabLink: true,moreText: &quot;Read More&quot;,widgetStyle: 5,callBack: function() {}};</script>
            <script  src='//ar1web-com.googlecode.com/svn/Hm/relatedar1web.js' type='text/javascript'/>

المصدر مدونة دبور فون

ارجو ان تكون الاضافة قد اعجبتكم وللمزيد من الاضافت الرائعة ارجو متابعتنا على مدونة تقني الانترنت باستمرار