أداة مواضيع ذات صلة من أهم الأدوات التى يجب على كل مدون يضيفها إلى المدونة خصوصًا إذا كانت تحتوى على مصغرات صور لما لها من أهمية كبيرة فى زيادة إحصائيات الموقع لأنها تمنح الزائر الذى يقرأ موضوع معين على موقعك فرصة لقراءة المزيد من الموضوعات عن نفس المجال التى ربما لم يلاحظها القارئ عند تصفح المدونة ولكن أداة مواضيع مشابهة ذات نفس التسمية تجعل الزائر يستفيد بأكبر قدر من المعلومات التى تعرضها فى موقعك . وبما اني سأقدم لكم شكلين فبإمكانكم معاينة الشكل الأول كالذي بالمدونة بالنزول قليلا اما الشكل الثاني فسنتعرف عليه بالصور
- الشكل الأول
- الشكل الثاني
كيفية التركيب
الشكل التاني
/* CSS Related Posts ProYounessBlogg */.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;}
4. ابحث عن <data:post.body/> ضع بعده [ أسفل] الشكل المختار
* ملاحظة قد تجد الكود متكرر مرتين أو أكثر الأخير هو المقصود .. بإمكانك الإستغناء عن البحث عنه إذا كان لديك أزرار المشاركة أو تعريف الكاتب إلى غير ذلك وتعرف مكان الأكواد ضع الكود بالمكان المناسب لك.
الشكل الاول
<b:if cond='data:blog.pageType == "item"'><script> var defaultnoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyfVJ2LPFuOdaSwlwP-c9xYZ_6JkFMu38TwGZtoCchNJdO8VuIDRCPfbfb1JXuoKCIpqy1UJgx54uQgaUc6YjFQZAv1XeAPn6NrP692osiHGJyRqQxFvsOvjz7OE05OX4gO-3pU3nSdU8/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>
الشكل التاني
<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'/>
0 التعليقات Blogger 0 Facebook