إضافة مقالات ذات صلة أو مواضيع مشابهة لمدونات بلوجر

إضافة مواضيع مشابهة على بلوجر

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

إضافة مواضيع مشابهة على بلوجر

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

فإذا كان يروق لك ان تضيف هذه الإضافة إلى مجموعة إضافات بلوجر الخاصة بمدونتك فتفضل بالمتابعة معنا.

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

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

طرق إضافة مواضيع ذات صلة على بلوجر

1 - إضافة مواضيع ذات صلة بشكل عناوين نصية كل عنوان في سطر.

2 - مواضيع ذات صلة بشكل صور مصغرة وأسفلها العنوان في صف واحد.

3 - إضافة تدوينات ذات صلة بشكل عمودين بصور مصغرة وعناوين المواضيع.

4 - إضافة شاهد أيضاً بشكل صفين بصور مصغرة وعناوين المواضيع.

الطريقة الأولى: مواضيع ذات صلة بشكل عناوين نصية

إضافة شاهد أيضاً بلوجر

قم بالدخول إلى قالب مدونتك Template ومنه إلى تحرير القالب ومن ثم قم بالبحث عن </head> وأضف بأعلاه الكود التالي مباشرة:

<style> #related-posts { float : left; width : 600px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 14px DroidKufi-regular; 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 : 11px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; padding-right:2px;} #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwQpok3ps90usiNwST1grN6lRXoF6hm7Zjx7YF_tVT_UF9nrQIeZznDxy8vs4o4OoQGDFNHjkNXrdN_HuJdmUKAgrwkkYkTyZLa5sw-OOud6gPbtUVel_uPFGlWVS93n594FS6Qx933bY/") 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 #000000; } </style> <script src='http://yourjavascript.com/250120301911/related.js' type='text/javascript'/>

ثم إبحث أيضاً عن <div class='post-body> أو <data:post.body/>

وضع الكود التالي أسفلها مباشرة

<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://add-b.blogspot.com/2013/08/related-posts-for-blogger-widget.html'><img alt='Related Posts Widget for Blogger' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a> <br/> <br/> <h2 style='color: #fff; font: 20px droidkufi-bold; padding: 5px 8px; background: #1D94C8 ; display: inline-block; border: none;'>شـــاهـــد أيـــضـــا</h2> <script type='text/javascript'> var maxresults=10; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> </b:if>

وبالطبع يمكنك تغيير كلمة شاهد أيضاً لأي كلمة ترغب بها من الكود .. وفي هذا الكود تم وضع عدد المواضيع المشابهة 10 مواضيع ويمكنك تغييره بعدد المواضيع الذي يناسبك بتغيير رقم 10 المتاح بجانب الكود Maxresults=.

وقم بحفظ القالب ومعاينته.

الطريقة الثانية: مواضيع ذات صلة بشكل صور مصغرة وأسفلها العنوان في صف واحد

تدوينات ذات صلة لبلوجر

قم بالدخول إلى مدونتك وإبحث في قالبها عن الكود ]]></b:skin> وضع الكود التالي أعلاه مباشرة:

/* 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}

والأن إبحث عن الكود <data:post.body/> وضع أسفله مباشرة الكود التالي:

<b:if cond='data:blog.pageType == "item"'>
<script> var defaultnoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqE_4AY5Xn4LNdtuuzuYR9lwBXeB-8Tv_qB6mOQY5xpjW8RrPbZmG5x6ZOivfAgkXTEwjFNVy56g_r9jvv_DJJhM5-x0MsVjYlxxa7-RlhmYY51annpL5E1sSbnOBA1Cu78C66SrVkBSk/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:skin> وضع الكود التالي أعلاه مباشرة:

/* 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;}

والأن إبحث عن الكود <data:post.body/> وضع أسفله مباشرة الكود التالي:

<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>

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

ولا تنسى حفظ القالب والمعاينة

الطريقة الرابعة: إضافة شاهد أيضاً بشكل صفين بصور مصغرة وعناوين المواضيع

إضافة شاهد أيضاً إلى بلوجر

قم بالدخول لقالب مدونتك وإبحث فيه عن الكود </head> ومن ثم قم بوضع الكود التالي أعلاه مباشرة:

<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/AVvXsEh3DVs8-psn-lokso44McD8BxcPluka2Gn5ZJ6UgdJeCNlTWhP8GGoII8Cn36LzBcPHLaBz0hupJxtb9pgVUa8QGWbbBtuSclrzK-KrH3GfPfcoxY8q_zQe8DDJ4c9RIcn2Kzl-CHkMjuI/s400/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle="مواضيع ذات صلة "; </script> <script src='http://sites.google.com/site/lightbox007/abuiyad/related-posts-with-thumbnails-for-blogger-pro.js.txt' type='text/javascript'/> </b:if>

وإبحث أيضاً عن الكود <div class='post-footer-line post-footer-line-1'> وقد يكون متغيراً طبقاً لبرمجة قالب مدونتك .. فإن لم تجده ستجد الكود <p class='post-footer-line post-footer-line-1'> فضع أسفله مباشرة الكود التالي:

<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'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href="http://www.condaianllkhir.com/" rel="nofollow" target="_blank"><img alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" style="border: 0;" /></a> </b:if></b:if>

في نهاية الموضوع نشكر العديد من مصادر هذا الموضوع مثل مدونة عرب ويب ومدونة كن داعياً للخير والكثير من المدونات العربية والأجنبية وخبراء التدوين في بلوجر.

مع أطيب أمنياتنا للجميع بالتوفيق

By glok

Similiar tagsإضافات بلوجر بلوجر تصميم المواقع