طريقة إضافة أداة مواضيع ذات صلة في مدونات بلوجر
بسم الله الرحمن الرحيم
إن شاء الله سنتعلم كيف تضيف خاصية "مواضيع ذات صلة" أو "مواضيع متشابهه" تحت كل موضوع تقوم بكتابته ،وهذه الخاصية تعتمد على الأقسام أو فهرس المدونة ،فأي موضوع تكتبه يظهر أسفل الموضوع قائمة افقية مصورة للمواضيع التي تندرج تحت نفس القسم أي لابد أولاً أن تقوم بعمل أقسام للمدونة ،أو التصنيفات ،أو فهرس للمدونة .
وإذا كنت لم تقم بعمل فهرس لمدونتك بعد يمكنك عمله بسهولة وفي أقل من دقيقة ولتتعلم كيف تفعل ذلك اذهب إلى هذا الموضوع .
أهمية اضافة هاك مواضيع ذات صلة :
تكمن أهمية تلك الإضافة في التالي :
1- بالنسبة لما تستفيده أنت :قضاء الزائر وقتاً أطول في مدونتك عن طريق تصفح الزائر مواضيع أكثر .
2- بالنسبة للزائر : تصفح المواضيع بسهولة وبسرعة ،وتصفح مواضيع ربما كان يبحث عنها فيجدها أمامه .
كيفية اضافة خاصية "مواضيع ذات صلة" بالصور بعد كل تدوينة :
ملحوظة هامة جداً : هذه الأكواد مجربه على مدونتي وهي سليمة ،ولكن أنصحك أن تأخذ نسخة من قالبك أولاً قبل التعديل، للتتفادى أي خطاً يحدث منك .
اتبع الخطوات معي فهي خطوتان بسيطتان جداً :
الخطوة الأولى : اذهب إلى لوحة تحكم مدونتك > تصميم > قالب > تحرير HTML ،ثم ابحث عن الكود التالي بإستخدام ctrl+f
</head>
- ثم ضع الكود التالي قبلها :
<!--Related Posts with thumbnails Scripts and Styles Start--><!-- remove --><b:if cond='data:blog.pageType == "item"'><style type="text/css">#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}#related-posts h2{font-size: 1.6em;font-weight: bold;color: black;font-family: Georgia, “Times New Roman”, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{color:black;}#related-posts a:hover{color:black;}#related-posts a:hover {background-color:#d4eaf2;}</style><script type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRCQlJrXTsKuR8FYIYXghCLTIKMbf3GpvnwVBSjC_HcgAa2i7m1ic4auYdoqSXf-b5PVeXxlQq0OBN5mHAvgWwT_cZIvlnoR_bNa9OoW9iwxxBbtaqP7cM5YU8OMNezjTsDOwFDcfds74/s400/noimage.png";var maxresults=5;var splittercolor="#d4eaf2";var relatedpoststitle="مـواضـيـع ذات صـلـة";</script><script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/><!-- remove --></b:if><!--Related Posts with thumbnails Scripts and Styles End-->
الخطوة الثانية : ابحث عن الكود التالي ،ولاحظ أنه قد يحتوي قالبك على أكثر من واحدة في أغلب الأحيان اختر الثانية ،وفي بعض الأحيان في قوالب اخرى اختر الثانية .
<data:post.body/>
ثم ضع الكود التالي بعدها :
<data:post.body/>
ثم ضع الكود التالي بعدها :
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<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=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<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=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
ملحوظة هامة :
في بعض المدونات يكون صاحب المدونة مهتم بمدونته فيضيف لها أكواد مثل "زر أعجبني" ،و"زر تويت" ،"زر جوجل +1" ،وزر صدى جوجل ،...إلخ .
فيتراكم مجموعة أكواد خلف الكود الذي بحثنا عنه سابقاً وهو :
<data:post.body/>
في بعض المدونات يكون صاحب المدونة مهتم بمدونته فيضيف لها أكواد مثل "زر أعجبني" ،و"زر تويت" ،"زر جوجل +1" ،وزر صدى جوجل ،...إلخ .
فيتراكم مجموعة أكواد خلف الكود الذي بحثنا عنه سابقاً وهو :
<data:post.body/>
إذا أردت أن تحمل الأكواد على جهازك في ملف :
اضغط هنا للتحميل
وختاماً : تستطيع أن تعدل في الكود مثل تغيير عبارة "مواضيع ذات صلة " ،واستبداها بما تشاء ، أيضاً يمكنك تغيير عدد المواضيع المقترحة من هذه الأداه فتغير رقم "5" المشار إلية بالون الأحمر .
أيضاً يمكنك تغيير خلفية الأداة وألون الكتابة عبر أكواد الألوان .
ارجوا أن تكونوا قد استفدتم من الموضوع ، ومن أعجبه الموضوع يشارك برأيه ، والسلام عليكم ورحمة الله وبركاته .
ليست هناك تعليقات:
إرسال تعليق