31‏/10‏/2014

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


الشكل الأول


الشكل الثاني



شرح طريقة التركيب
1. داخل القالب ابحث عن ]]></b:skin> وضع الشكل المختار فوقه أو ضعه بين <style> </style> فوق </head>
الشكل الأول
/* CSS Related Posts Ar1web */
#at-picture{background:#F9F9F9;padding:12px;margin:6px 0 0;border:1px solid #f2f2f2;overflow:hidden}
#at-picture h2{font-family:Electrolize,ge_ss_tvbold;font-weight:700;font-size:15px;color: #e74c3c;}
#at-picture a{background:#FFFFFF;font-family:Electrolize,ge_dinar_oneregular;color:#716F6F;box-shadow:0 2px 2px #f0f0f0;overflow:hidden;text-align:center;font-size:12px;font-weight:400;border:1px solid #f8f8f8;text-decoration:none;margin:0 7px 5px 0;padding:6px;float:right}
#at-picture a img{width:100px;height:98px}.box-related{width:100px;padding-left:3px;height:50px;border:0 none;margin:0 0 5px;padding:0;line-height:normal;font-stretch:normal}#at-picture a:last-child{margin-right:0}
#at-picture a:nth-child(1):hover{box-shadow:0 -3px 0 #E50700 inset}#at-picture a:nth-child(2):hover{box-shadow:0 -3px 0 #0084C5 inset}#at-picture a:nth-child(3):hover{box-shadow:0 -3px 0 #6CAC00 inset}#at-picture a:nth-child(4):hover{box-shadow:0 -3px 0 #00C3B7 inset}#at-picture a:nth-child(5):hover{box-shadow:0 -3px 0 #FF8168 inset}#at-picture a:hover{box-shadow:0 -3px 0 #FF8168 inset}#at-picture a:nth-child(1):hover,#at-picture a:nth-child(2):hover,#at-picture a:nth-child(3):hover,#at-picture a:nth-child(4):hover,#at-picture a:nth-child(5):hover,#at-picture a:hover{background:#fff}#at-picture img{width:100%;margin:0;padding:0}#posting{width:auto!important;max-width:100%;margin:15px 20px 15px 0}

الشكل الثاني
/* CSS Related Posts Ar1web */
.related-post{margin:10px 0;}
.titlehead{margin:0 4px 10px;font-size:15px;border-bottom:3px solid #ecf0f1;color:#E74C3C;font-weight:700;padding-bottom:2px;font-family:Electrolize,ge_ss_tvbold;}
.titlehead span{border-bottom:3px solid #E74C3C;padding-bottom:4px;}
.related-post{margin:1em auto 0;background: #F5F5F5;border: 1px solid #ddd;}
.related-post-style-3,.related-post-style-3 li{margin:0;padding:0;list-style:none;word-wrap:break-word;overflow:hidden;}
.related-post-style-3 .related-post-item{float:right;width:299px;height:auto;margin:0 3px;margin-bottom:-993px;padding-bottom:999px;outline:0;}
.related-post-style-3 .related-post-item:first-child{border-left:none;}
.related-post-style-3 .related-post-item-thumbnail{max-width:none;max-height:none;padding:0;float:right;margin-right:10px;}
.related-post-style-3 .related-post-item-title{font-weight:500;font-size:14px;margin-right: 10px;font-family: Electrolize,ge_dinar_oneregular;}
div.rel-item-post{background:#FFF9E2;padding:8px;border:1px solid #EEDFB2;}
div.rich-snippet{padding:7px 7px 20px;margin:10px 0;background:#eee;border-top:1px solid #DBDBDB;font-size:12px;color:#525252;line-height:1.6em;font-family: Electrolize,ge_ss_threeregular;border: 1px solid #DFDDDD;}
div.st_share{margin:10px 0;}
div.rich-snippet span{color:#727272;}
2. ابحث عن <data:post.body/> ضع بعده الشكل المختار
* ملاحظة قد تجد الكود متكرر مرتين أو أكثر الأخير هو المقصود .. بإمكانك الإستغناء عن البحث عنه إذا كان لديك أزرار المشاركة أو تعريف الكاتب إلى غير ذلك وتعرف مكان الأكواد ضع الكود بالمكان المناسب لك

الشكل الأول
<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>
الشكل الثاني
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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;<h3 class='titlehead'><span>تدوينات ذات صلة:</span></h3>&quot;,
numPosts: 6,
summaryLength: 0,
titleLength: &quot;auto&quot;,
thumbnailSize: 65,
noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
moreText: &quot;Read More&quot;,
widgetStyle: 3,
callBack: function() {}
};
</script>
<script src='https://ar1web-com.googlecode.com/svn/Hm/related%20posts.js' type='text/javascript'/>
</b:if>
أداة مواضيع ذات صلة من أهم الأدوات التى يجب على كل مدون أن يضيفها إلى المدونة خصوصًا إذا كانت تحتوى على مصغرات صور لما لها من أهمية كبيرة فى زيادة إحصائيات الموقع لأنها تمنح الزائر الذى يقرأ موضوع معين على موقعك فرصة لقراءة المزيد من الموضوعات عن نفس المجال التى ربما لم يلاحظها القارئ عند تصفح المدونة ولكن أداة مواضيع مشابهة ذات نفس التسمية تجعل الزائر يستفيد بأكبر قدر من المعلومات التى تعرضها فى موقعك


الشكل الأول


الشكل الثاني



شرح طريقة التركيب
1. داخل القالب ابحث عن ]]></b:skin> وضع الشكل المختار فوقه أو ضعه بين <style> </style> فوق </head>
الشكل الأول
/* CSS Related Posts Ar1web */
#at-picture{background:#F9F9F9;padding:12px;margin:6px 0 0;border:1px solid #f2f2f2;overflow:hidden}
#at-picture h2{font-family:Electrolize,ge_ss_tvbold;font-weight:700;font-size:15px;color: #e74c3c;}
#at-picture a{background:#FFFFFF;font-family:Electrolize,ge_dinar_oneregular;color:#716F6F;box-shadow:0 2px 2px #f0f0f0;overflow:hidden;text-align:center;font-size:12px;font-weight:400;border:1px solid #f8f8f8;text-decoration:none;margin:0 7px 5px 0;padding:6px;float:right}
#at-picture a img{width:100px;height:98px}.box-related{width:100px;padding-left:3px;height:50px;border:0 none;margin:0 0 5px;padding:0;line-height:normal;font-stretch:normal}#at-picture a:last-child{margin-right:0}
#at-picture a:nth-child(1):hover{box-shadow:0 -3px 0 #E50700 inset}#at-picture a:nth-child(2):hover{box-shadow:0 -3px 0 #0084C5 inset}#at-picture a:nth-child(3):hover{box-shadow:0 -3px 0 #6CAC00 inset}#at-picture a:nth-child(4):hover{box-shadow:0 -3px 0 #00C3B7 inset}#at-picture a:nth-child(5):hover{box-shadow:0 -3px 0 #FF8168 inset}#at-picture a:hover{box-shadow:0 -3px 0 #FF8168 inset}#at-picture a:nth-child(1):hover,#at-picture a:nth-child(2):hover,#at-picture a:nth-child(3):hover,#at-picture a:nth-child(4):hover,#at-picture a:nth-child(5):hover,#at-picture a:hover{background:#fff}#at-picture img{width:100%;margin:0;padding:0}#posting{width:auto!important;max-width:100%;margin:15px 20px 15px 0}

الشكل الثاني
/* CSS Related Posts Ar1web */
.related-post{margin:10px 0;}
.titlehead{margin:0 4px 10px;font-size:15px;border-bottom:3px solid #ecf0f1;color:#E74C3C;font-weight:700;padding-bottom:2px;font-family:Electrolize,ge_ss_tvbold;}
.titlehead span{border-bottom:3px solid #E74C3C;padding-bottom:4px;}
.related-post{margin:1em auto 0;background: #F5F5F5;border: 1px solid #ddd;}
.related-post-style-3,.related-post-style-3 li{margin:0;padding:0;list-style:none;word-wrap:break-word;overflow:hidden;}
.related-post-style-3 .related-post-item{float:right;width:299px;height:auto;margin:0 3px;margin-bottom:-993px;padding-bottom:999px;outline:0;}
.related-post-style-3 .related-post-item:first-child{border-left:none;}
.related-post-style-3 .related-post-item-thumbnail{max-width:none;max-height:none;padding:0;float:right;margin-right:10px;}
.related-post-style-3 .related-post-item-title{font-weight:500;font-size:14px;margin-right: 10px;font-family: Electrolize,ge_dinar_oneregular;}
div.rel-item-post{background:#FFF9E2;padding:8px;border:1px solid #EEDFB2;}
div.rich-snippet{padding:7px 7px 20px;margin:10px 0;background:#eee;border-top:1px solid #DBDBDB;font-size:12px;color:#525252;line-height:1.6em;font-family: Electrolize,ge_ss_threeregular;border: 1px solid #DFDDDD;}
div.st_share{margin:10px 0;}
div.rich-snippet span{color:#727272;}
2. ابحث عن <data:post.body/> ضع بعده الشكل المختار
* ملاحظة قد تجد الكود متكرر مرتين أو أكثر الأخير هو المقصود .. بإمكانك الإستغناء عن البحث عنه إذا كان لديك أزرار المشاركة أو تعريف الكاتب إلى غير ذلك وتعرف مكان الأكواد ضع الكود بالمكان المناسب لك

الشكل الأول
<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>
الشكل الثاني
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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;<h3 class='titlehead'><span>تدوينات ذات صلة:</span></h3>&quot;,
numPosts: 6,
summaryLength: 0,
titleLength: &quot;auto&quot;,
thumbnailSize: 65,
noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
moreText: &quot;Read More&quot;,
widgetStyle: 3,
callBack: function() {}
};
</script>
<script src='https://ar1web-com.googlecode.com/svn/Hm/related%20posts.js' type='text/javascript'/>
</b:if>
36 Blogger تعليقات
Disqus
36 التعليقات
أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

لا يمكن اخي فهي تلقائية

المشرف
avatar
المشرف
avatar
أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

وضعت الشكل الثاني
سنغير مكان أكواد Css ابحث عن .slidebox { فوقها ضع اكواد Css لشكل الثاني إذ لازال نفس المشكل اخبرني

أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

جرب وضع كود الجافاسكريبت فوق </head هو الكود الأخير في الشكل الثاني
script src='https://ar1webcom.googlecode.com/svn/Hm/related%20posts.js

أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

لقد عدلت اكواد Css انسخها من جديد .. بإذن الله ستشتغل

أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

ابحث عن .widget .post-body ul ثم احذف الكود التالي
padding: 0 2.5em;

أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

جربت الكود في عدة قوالب يشتغل تمام ، الكود الذي لم تجده هو مخفي عندك داخل اكواد جيكويري هو الذي يعطي الشكل بذلك المنظر متكرر .. تبقى تجربة أخرى هي إخفائه ضع الكود الأتي فوق ]]> أو ضمن أكواد المواضيع ذات صلة
.widget .post-body ul {display:none;}

أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

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

أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

تلك المسافة غير مدرجة ضمن الأكواد .. وجدت حل لمشكلتك السابقة اتمنى أن تنجع مع كل المواضيع طبق التالي ابحث عن
.related-post-style-3 .related-post-item
ضع هذا الكود بدل الموجود width: 269px عدلت فقط على المسافة جربها ورد علي

أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

لا لم احذف أي تعليق .. اظنه الكود الذي أضفته كنت اعدل على التعليقات غيرت الأكواد عندما كنت تعلق ، خطأ مطبعي :p

المشرف
avatar

=D شكرا لك اخي

المشرف
avatar

العفو اخي الكريم

المشرف
avatar
yasmine Ahmed 12/27/2014
delete

لو سمحت انا محتاجة اضافة الشكل بتاع مدونتك وجزاك الله خيرً

المشرف
avatar
ilyas_aouadi 3/21/2015
delete

http://tknielantrnat.blogspot.com/

المشرف
avatar

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

المشرف
avatar

أهلا وسهلاً بسيطة أخي أضف هذا الكود في أول الكود الثاني هكذا :




النتيجة ستكون هكذا



...............................


إذا للاحظت في الشكل الأول فهو محدد باللون البرتقالي
أتمنى أن تكون وصلتك الفكرة

المشرف
avatar

اشكرك على الرد يا طيب وفعلا نجحت العملية :)

لكن مازالت هناك مشكلة وهي ظهور المواضيع بصورة مخربطة احيانا كما في هذه الصورة

http://www6.0zz0.com/2015/04/23/15/935340732.jpg

وهذا رابط مدونتي للاطلاع عن كثب :)

http://overallappstore14.blogspot.com/



وهل توجد طريقة لتحدد عدد الحروف لكل موضوع يظهر في الاضافة ؟؟


اشكرك مجددا وتقبل احترامي

المشرف
avatar

دخلت ووجدتها مصلوحة قمت بإصلاحها؟ تمام ... قد عدلت على كود العنوان لكي يظهر بشكل متناسق ما عليك إلا البحث عن هذا المعرف : .titlehead وضع هذا الإعدادات بدل الموجودة :
margin: 10px 10px 10px;
padding-bottom: 9px;
بالنسبة للحروف فهي تقرأ تلقائياً لا يمكن التعديل عليها

بالتوفيق لك.

المشرف
avatar

اخي عذرا فاني اتعبتك
لكن اتمنى لو توضح اكثر لاني طبقت اللي فهمته لكن بقت المشكلة


شكرا على وقتك

المشرف
avatar

المشكل في طول العنوان لذلك يصبح صندوق بعيداً عن صندوق الحل سينجح بـ99% وسيبقى البعد بين الصناديق بمسافات قليلة تابع معي إبحث عن :
.related-post-style-3 .related-post-item-title
ستجد هذا الكود في السطر: margin-right: 10px
غيره بهذا : margin-left: 30px;

المشرف
avatar

اخي للاسف بقيت نفس المشكلة
حتى بعد التعديل

http://www9.0zz0.com/2015/04/28/18/996237518.jpg

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar
المشرف
avatar

لم يتركب لي، هل يمكنك تركيبها لي؟

المشرف
avatar

لم يتغير شئ بتاتا *-*
أين تكمن المشكلة ؟

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة