تقنيات الويب: اضافة المقالات المقترحة اسفل مواضيع بلوجر

المواضيع المقترحة اسفل كل مقالة

من اهم الاضافات التي تحتاجها فهي تجعل شكل الصفحة الرئيسية رائع واحترافي وتمكنك من عرض اكبر قدر من المواضيع في الصفحة الرئيسية ..

وهنا نقدم لك افضل كود لعرض الاضافة وبشكل جزاب جداً وبطريقة سهلة ..

اولاً : هذه صورة لمعاينة الاضافة

طريقة تفعيل الاضافة كالتالي :....

1. بعد الذهاب الى بلوجر قم بفتح اعدادت القالب ثم تحرير كود html كما الصور التالية ...

2. بعد ذلك قم بالبحث عن الكود التالي (البحث يكون باستخدام مفتاحي ctrl+f ) كما بالصورة التالية

3. ابحث عن الكود التالي ::

</head>

4. وفوق الكود مباشرة قم بلصق الكود التالي ..

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>

ملاحظة ..

1. لتعديل مقاس العرض للاضافة يمكنك تعديل 100px الموجود بالكود باللون الاحمر .

2. للتحكم في اللون وحجم كلمة المواضيع المقترحة قم بتعديل الجزء باللون الازرق .

3. قم بازالة الجزء باللون الاخضر اذا كنت تريد ظهور الاضافة في الصفحة الرئيسية ايضاً .

5. الان قم بالبحث عن الكود التالي ..

<div class='post-footer'>

** اذا وجدت الكود مرتين قم باختيار الكود الظاهر في المرة الثانية

5. فوق الكود السابق مباشرة قم بنسخ الكود التالي ...

<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=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>المواضيع المقترحة</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>