بسم الله الرحمن الرحيم
السلام عليكم اعضاءنا الكرام
اما بعد :
في هدا الموضوع سنتعلم طريقتين ناجحتين ومضمونتين ان شاء الله لاضافة ادات تعتبر من الادوات الازمة
لابقاء الزائر اطول مدة ممكنة في مدونتك
وهي ادات " مواضيع دات صلة "
ادات كثر الحديث فيها وكثرت المواضيع عنها, وبعد تجربتي الشخصية اقدم لكم اسهل طريقة لاضافة هاته اللمسة لمدوناتكم
فلنبدا على بركة الله ,,,, :لدي المدونة بالانجليزية لدا سيتم الشرح بالانجليزية :
الطريقة الاولى :
1, من لوحة تحكم بلوجر ندهب الى : Layout >Edit HTML
2, قم بعمل حفظ لقالب المدونة
3, ضع علامة صح على " Expand Widget Templates " من اعلى صندوق كود قالب المدونة
4, على f3 او ctrl+f وابحث عن </head>
5, اضف قبله مباشرة الكود :
[HTML]<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> < src='http://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>[/HTML]
6, نضغط f3 ونبحث عن الكود
[HTML]<dataost.body/>[/HTML]
ملاحظة : هدا الكود يعتمد على القالب اللدى تستعمله ويمكن ان يكون
[HTML]<div class='post-body>[/HTML]
او
[HTML]<div class='post-body>[/HTML]
بعد ان نجد الكود نضيف تحته مباشرتا الكود النالي :
[HTML]<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b"مواضيع دات صلة : </b></font><font color='#FFFFFF'><b:loop values='dataost.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
< expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
< type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</>
</div></b:if>[/HTML]
يمكنك تغيير " مواضيع دات صلة في الكود بالعبارة اللتي تريد ان تظهر
7, نقوم بحث ما قمنا به وندهب لمعاينة المدونة وان شاء الله تكون الطريقة ناجحة
الطريقة الثانية : وهي طريقة اجمل بحث تعرض المواضع دات صلة على شكل صور وتحتها عنوان الموضوع وهو عبارة عن كود مقدم من شركة مجاني فلنتبع الشرح :
لمعاينة النتيجة ادخل هــــــنـــــا
1, ندخل الى عنوان الموقع من هــــــنـــــــــا
2, نقوم بملئ البيانات كما في :
بعدها سيقوم باعطائك كود قم بنسخه وتوجه الى المدونة وبعدها
- تصميم > اضافة اداة > HTML/JavaScript إضافة
وقم بنسخ الكود بداخل المربع واعمل بعدها حفظ
وبعد هدا سيتم اضافة المواضع دات صلة اوتوكاتيكيا اسفل المواضيع
اتمنى ان تكونوا قد استفدتم ,,, والى اللقاء في دروس اخرى ,,,
تحياتي للجميع ,,,,,
السلام عليكم اعضاءنا الكرام
اما بعد :
في هدا الموضوع سنتعلم طريقتين ناجحتين ومضمونتين ان شاء الله لاضافة ادات تعتبر من الادوات الازمة
لابقاء الزائر اطول مدة ممكنة في مدونتك
وهي ادات " مواضيع دات صلة "
ادات كثر الحديث فيها وكثرت المواضيع عنها, وبعد تجربتي الشخصية اقدم لكم اسهل طريقة لاضافة هاته اللمسة لمدوناتكم
فلنبدا على بركة الله ,,,, :لدي المدونة بالانجليزية لدا سيتم الشرح بالانجليزية :
الطريقة الاولى :
1, من لوحة تحكم بلوجر ندهب الى : Layout >Edit HTML
2, قم بعمل حفظ لقالب المدونة
3, ضع علامة صح على " Expand Widget Templates " من اعلى صندوق كود قالب المدونة
4, على f3 او ctrl+f وابحث عن </head>
5, اضف قبله مباشرة الكود :
[HTML]<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> < src='http://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>[/HTML]
6, نضغط f3 ونبحث عن الكود
[HTML]<dataost.body/>[/HTML]
ملاحظة : هدا الكود يعتمد على القالب اللدى تستعمله ويمكن ان يكون
[HTML]<div class='post-body>[/HTML]
او
[HTML]<div class='post-body>[/HTML]
بعد ان نجد الكود نضيف تحته مباشرتا الكود النالي :
[HTML]<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b"مواضيع دات صلة : </b></font><font color='#FFFFFF'><b:loop values='dataost.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
< expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
< type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</>
</div></b:if>[/HTML]
يمكنك تغيير " مواضيع دات صلة في الكود بالعبارة اللتي تريد ان تظهر
7, نقوم بحث ما قمنا به وندهب لمعاينة المدونة وان شاء الله تكون الطريقة ناجحة
الطريقة الثانية : وهي طريقة اجمل بحث تعرض المواضع دات صلة على شكل صور وتحتها عنوان الموضوع وهو عبارة عن كود مقدم من شركة مجاني فلنتبع الشرح :
لمعاينة النتيجة ادخل هــــــنـــــا
1, ندخل الى عنوان الموقع من هــــــنـــــــــا
2, نقوم بملئ البيانات كما في :
بعدها سيقوم باعطائك كود قم بنسخه وتوجه الى المدونة وبعدها
- تصميم > اضافة اداة > HTML/JavaScript إضافة
وقم بنسخ الكود بداخل المربع واعمل بعدها حفظ
وبعد هدا سيتم اضافة المواضع دات صلة اوتوكاتيكيا اسفل المواضيع
اتمنى ان تكونوا قد استفدتم ,,, والى اللقاء في دروس اخرى ,,,
تحياتي للجميع ,,,,,