Dabour Phone

[name=محمد إبراهيم] [img=http://lh3.googleusercontent.com/-Ea4NJ91_ql0/AAAAAAAAAAI/AAAAAAAABQE/snk6h86Q3sI/s512-c/photo.jpg] [description=هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص.] (facebook=#) (youtube=#) (google-plus=#) (twitter=#) (linkedin=#) (instagram=#) (pinterest=#) (behance=#)
8/recent posts

اضافة تدوينات ذات الصلة مثل مطورون


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

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

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

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

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

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


 /*  CSS Related Post Dabour Phone */
#at-picture {
background: #FFF;
padding: 15px;
margin: 10px 0 20px;
border: 1px solid #f2f2f2;
overflow: hidden;
width: 720px;
}
#at-picture h2 {
background: url(http://1.bp.blogspot.com/-K9J4cSrMFmc/VAyfs8BHj_I/AAAAAAAAAdk/wDBzkFzK_84/s1600/dots_pat.png) repeat-x center;
}
#at-picture a {
background: #F7F7F7;
color: #716F6F;
box-shadow: 0 2px 2px #f0f0f0;
overflow: hidden;
text-align: center;
font-size: 17px;
font-weight: 400;
border: 1px solid #f8f8f8;
text-decoration: none;
margin: 0 7px 5px 0;
padding: 5px;
float: right;
width: 163px;
height: 200px;
}
.title-r {
font-size: 18px;
color: #0894D8;
margin-bottom: 12px;
background: #fff;
width: 125px;
}
#at-picture a img {
width: 151px;
height: 148px;
}
.box-related {
width: 131px;
height: 50px;
border: 0 none;
margin: 0 0 5px;
padding: 0;
line-height: normal;
font-stretch: normal;
}
#at-picture a:nth-child(1):hover {
box-shadow: 0 -3px 0 #0894D8 inset;
}
#at-picture a:nth-child(2):hover {
box-shadow: 0 -3px 0 #0894D8 inset;
}
#at-picture a:nth-child(3):hover {
box-shadow: 0 -3px 0 #0894D8 inset;
}
#at-picture a:nth-child(4):hover {
box-shadow: 0 -3px 0 #0894D8 inset;
}
#at-picture a:nth-child(5):hover {
box-shadow: 0 -3px 0 #0894D8 inset;
}
#at-picture a:hover {
box-shadow: 0 -3px 0 #0894D8 inset;
}
#at-picture img {
width: 100%;
margin: 0;
padding: 0;
}
5. ابحث عن <data:post.body/> ضع  بعده [ أسفل] الشكل المختار

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

6- ضع الكود التالى اسفله مباشرة 
<b:if cond='data:blog.pageType == &quot;item&quot;'><script> var defaultnoimage = &quot;http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s100/picture_not_available.png&quot;; var maxresults = 5; var splittercolor = &quot;#d3d3d3 &quot;; var relatedpoststitle = &quot;تدوينات ذات صلة :&quot;; </script>
<script src='https://ar1web-com.googlecode.com/svn/Hm/rehm.js' type='text/javascript'/>
<div id='at-picture'>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=999&quot;' type='text/javascript'/> </b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script>
</div>
</b:if>
فى امان الله
Share This
هناك 4 تعليقات:

نسعد ونتشرف بتعليقاتكم
لكن فى إطار الموضوع وليس خارجه حفاظاً على راحتك الشخصية
لوضع اى اكواد Html فى التعليقات يرجى تحوليها اولاً بمحول الأكواد من هنا
لذلك نرجو منك ان تستعمل كل شىء بطريقته الصحيحة شكراً لتفهمك 😊