الموضوع
اقرأ ايضًا
التعليقات
عن الكاتب
تعليمات
أداة مواضيع ذات صلة من أهم الأدوات التى يجب على كل مدون أن يضيفها إلى المدونة خصوصًا إذا كانت تحتوى على مصغرات صور لما لها من أهمية كبيرة فى زيادة إحصائيات الموقع لأنها تمنح الزائر الذى يقرأ موضوع معين على موقعك فرصة لقراءة المزيد من الموضوعات عن نفس المجال التى ربما لم يلاحظها القارئ عند تصفح المدونة ولكن أداة مواضيع مشابهة ذات نفس التسمية تجعل الزائر يستفيد بأكبر قدر من المعلومات التى تعرضها فى موقعك
الشكل الأول
الشكل الثاني
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. ابحث عن * ملاحظة قد تجد الكود متكرر مرتين أو أكثر الأخير هو المقصود .. بإمكانك الإستغناء عن البحث عنه إذا كان لديك أزرار المشاركة أو تعريف الكاتب إلى غير ذلك وتعرف مكان الأكواد ضع الكود بالمكان المناسب لك
الشكل الأول
<b:if cond='data:blog.pageType == "item"'>
<script> var defaultnoimage = "http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s100/picture_not_available.png"; var maxresults = 5; var splittercolor = "#d3d3d3 "; var relatedpoststitle = "تدوينات ذات صلة :"; </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 != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=999"' type='text/javascript'/> </b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script>
</div>
</b:if>
الشكل الثاني
<b:if cond='data:blog.pageType == "item"'>
<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: "<h3 class='titlehead'><span>تدوينات ذات صلة:</span></h3>",
numPosts: 6,
summaryLength: 0,
titleLength: "auto",
thumbnailSize: 65,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 3,
callBack: function() {}
};
</script>
<script src='https://ar1web-com.googlecode.com/svn/Hm/related%20posts.js' type='text/javascript'/>
</b:if>
ملحوظة:
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻
إرشادات
- موقع : Mediafire
- موقع :file-upload
- باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
- تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
- كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
- إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
تحميل الملفات
أين تجدنا؟
كلمة الختام
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم
أزال المؤلف هذا التعليق.
ردحذفلا يمكن اخي فهي تلقائية
حذفشكرا لك
ردحذفعلى واجب
حذفأزال المؤلف هذا التعليق.
ردحذفوضعت الشكل الثاني
حذفسنغير مكان أكواد Css ابحث عن .slidebox { فوقها ضع اكواد Css لشكل الثاني إذ لازال نفس المشكل اخبرني
أزال المؤلف هذا التعليق.
حذفجرب وضع كود الجافاسكريبت فوق </head هو الكود الأخير في الشكل الثاني
حذفscript src='https://ar1webcom.googlecode.com/svn/Hm/related%20posts.js
أزال المؤلف هذا التعليق.
حذفلقد عدلت اكواد Css انسخها من جديد .. بإذن الله ستشتغل
حذفأزال المؤلف هذا التعليق.
حذفابحث عن .widget .post-body ul ثم احذف الكود التالي
حذفpadding: 0 2.5em;
أزال المؤلف هذا التعليق.
ردحذفجربت الكود في عدة قوالب يشتغل تمام ، الكود الذي لم تجده هو مخفي عندك داخل اكواد جيكويري هو الذي يعطي الشكل بذلك المنظر متكرر .. تبقى تجربة أخرى هي إخفائه ضع الكود الأتي فوق ]]> أو ضمن أكواد المواضيع ذات صلة
حذف.widget .post-body ul {display:none;}
أزال المؤلف هذا التعليق.
حذف:) تأكد من ان الأداةتعمل بقالب اخ ضعها بقالب اخر .. الكود الذي لم أجده هو الذي فيه المشكل .. سأقوم بالببحث عن المشكل سأراسلك إذا كان أي جديد .
حذفأزال المؤلف هذا التعليق.
حذفتلك المسافة غير مدرجة ضمن الأكواد .. وجدت حل لمشكلتك السابقة اتمنى أن تنجع مع كل المواضيع طبق التالي ابحث عن
حذف.related-post-style-3 .related-post-item
ضع هذا الكود بدل الموجود width: 269px عدلت فقط على المسافة جربها ورد علي
أزال المؤلف هذا التعليق.
حذفلا لم احذف أي تعليق .. اظنه الكود الذي أضفته كنت اعدل على التعليقات غيرت الأكواد عندما كنت تعلق ، خطأ مطبعي :p
حذف=D شكرا لك اخي
ردحذفالعفو اخي الكريم
حذفلو سمحت انا محتاجة اضافة الشكل بتاع مدونتك وجزاك الله خيرً
ردحذفhttp://tknielantrnat.blogspot.com/
ردحذفمرحبا اخي
ردحذفانا اضفت هذه الإضافة لمدونتي .. طبعا اضفت الشكل الثاني
لكن حصلت معي مشكلة
وهي ان المواضيع ذات الصلة اضافة الى ظهورها اسفل التدوينة
فهي تظهر ايضا في الصفحة الرئيسية اسفل عناوين التدوينات وايضا تظهر بشكل غير مرتب في الحالتين
فما الحل لطفا
أهلا وسهلاً بسيطة أخي أضف هذا الكود في أول الكود الثاني هكذا :
ردحذفالنتيجة ستكون هكذا
...............................
إذا للاحظت في الشكل الأول فهو محدد باللون البرتقالي
أتمنى أن تكون وصلتك الفكرة
اشكرك على الرد يا طيب وفعلا نجحت العملية :)
ردحذفلكن مازالت هناك مشكلة وهي ظهور المواضيع بصورة مخربطة احيانا كما في هذه الصورة
http://www6.0zz0.com/2015/04/23/15/935340732.jpg
وهذا رابط مدونتي للاطلاع عن كثب :)
http://overallappstore14.blogspot.com/
وهل توجد طريقة لتحدد عدد الحروف لكل موضوع يظهر في الاضافة ؟؟
اشكرك مجددا وتقبل احترامي
دخلت ووجدتها مصلوحة قمت بإصلاحها؟ تمام ... قد عدلت على كود العنوان لكي يظهر بشكل متناسق ما عليك إلا البحث عن هذا المعرف : .titlehead وضع هذا الإعدادات بدل الموجودة :
ردحذفmargin: 10px 10px 10px;
padding-bottom: 9px;
بالنسبة للحروف فهي تقرأ تلقائياً لا يمكن التعديل عليها
بالتوفيق لك.
اخي عذرا فاني اتعبتك
ردحذفلكن اتمنى لو توضح اكثر لاني طبقت اللي فهمته لكن بقت المشكلة
شكرا على وقتك
المشكل في طول العنوان لذلك يصبح صندوق بعيداً عن صندوق الحل سينجح بـ99% وسيبقى البعد بين الصناديق بمسافات قليلة تابع معي إبحث عن :
ردحذف.related-post-style-3 .related-post-item-title
ستجد هذا الكود في السطر: margin-right: 10px
غيره بهذا : margin-left: 30px;
اخي للاسف بقيت نفس المشكلة
ردحذفحتى بعد التعديل
http://www9.0zz0.com/2015/04/28/18/996237518.jpg
أخى لدى مشكلة فى نوع الخط و حجمه عند الظهور و عند السطر الثانى يكون الكلام ملتصق بالصورة
ردحذفاخى ريد اضافة نجوم فى الرئيسية تعرض مع التطبيق متل متجر قوقل بلاى وكلمة تحميل ايضا ممكن شرح
ردحذفلم يشتغل
ردحذفلم يتركب لي، هل يمكنك تركيبها لي؟
ردحذفلم يتغير شئ بتاتا *-*
ردحذفأين تكمن المشكلة ؟
للأسف أخي لم تشتغل معي
ردحذفالمشكلة في الكود المخزن سحابيا . . . غيره أخي
ردحذف