السبت، 22 سبتمبر 2012

اضافة مواضيع ذات صلة لمدونة blogger

شرح تركيب اضافة مواضيع ذات صلة لمدونة blogger

مواضيع ذات صلةتظهر الاضافة اسفل كل المشاركات وعبارة عن روابط  لمشاركات من نفس اقسام المشاركة او نفس التسميات , الاداة متوافقة مع قالب بلوجر واللغة العربية ويمكن التعديل عليها بسهولة لتتناسب تصميم قالب المدونة  بلوجر ....
فائدة اضافة مواضيع / مشاركات ذات صلة  : تساعد الاداة الزائر ليقضى فترة اطول بالمدونة وكما توفر سهولة التنقل بين التدوينات ,

شرح تركيب اداة مواضيع ذات صلة فى قالب مدونة بلوجر

     ضع علامة امام توسيع قوالب عناصر واجهة المستخدم

 ابحث عن الكود التالى

</head>
ضع الكود التالى مباشرة قبل الكود السابق
<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Arial ; 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 {font-size : 24px;  text-decoration : none; text-shadow: 2px 2px 3px #0058cd;#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/AVvXsEgJAcaLgRZq6BEX7YtEo50ONVdHPB-cKhyphenhyphen7eat0hyllL7SzskocssH-lstuC4jPp81FFP7uj0HvUnm0aKzmw3HC7LBPcbsFWP95Wih29mJQDZeSPAU1pHvA5rZbvDasB5FtrBXv4kYp7Zs/") 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>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
document.write('<a rel="dofollow" href="http://cod-b.blogspot.com/2012/07/blogger-related-posts-widget.html">ادوات بلوجر</a></font>');
}
//]]>
</script>

الخطوة الثانية لوضع الكود HTML بالمكان الذى تظهر بة الاداة  : 

ابحث عن الكود التالى 

 


<data:post.body/>

ضع كود HTML التالى مباشرة اسفل الكود السابق


<b:if cond='data:blog.pageType == "item"'><div id="related-posts"><font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5 &quot;' type='text/javascript'/></b:if></b:loop> </font><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if>

 


احفظ القالب .. 

يبقى الان التعديل على كود HTML , كود CSS
 

      HTML

كود HTML هو الجزء الذى تضعة فى مكان ظهور الاداة " اسفل المشاركات " وياتى الكود كالتالى كما الكود السابق مباشرة

لتغيير عدد الروابط للاداة  max-results=5
تحديد عدد روابط المشاركات بالاداة  ,,  يمكنك تغيير الرقم فى الكود التالى السابق
CSS  

<style>

 
"هنا كود CSS" كود CSS لاداة مواضيع متشابهة ذات صلة  هو ستايل الاداة و تجدة بين الوسمين  
</style> 

 
لتحديد عدد روابط المشاركات بالاداة  ,,  يمكنك تغيير الرقم فى الكود التالى 
max-results=5

<b:if cond='data:blog.pageType == "item"'>
هنا كود HTML
</div></b:if>

 <style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Arial ; 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 {font-size : 24px;  text-decoration : none; text-shadow: 2px 2px 3px #0058cd;} #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/AVvXsEiZH73MR-svepFAqzd5qRSijY2yQ5Kf0HXYbxD4Rl53wRoO-vDx5sIk8cqpu-oEuiQtfzqeRr4ZO0xxkpc_hs8oSeigfUdu-GHiYIce0FFQ76OSTZ5doV8hL7SGeGOGsc2OzjP9kyleG8Jk/s800/right_arrow-blogger.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>


لضبط اعدادات  CSS  لتتناسب تصميم قالب المدونة  بلوجر .. قم بتغيير القيم الافتراضية كالتالى بالترتيب

         لتغيير حجم عرض الاداة 540px 
         لتغيير نوع الخط Arial     
         لتغيير حجم خط الروابط 20px    
         لتغيير لون وتاثير الظل عند المرور فوق الرابط * تاثيرات CSS
 

text-shadow: 2px 2px 3px #0058cd;

 

5- لتغيير الصورة بجانب روابط المشاركات 


 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJAcaLgRZq6BEX7YtEo50ONVdHPB-cKhyphenhyphen7eat0hyllL7SzskocssH-lstuC4jPp81FFP7uj0HvUnm0aKzmw3HC7LBPcbsFWP95Wih29mJQDZeSPAU1pHvA5rZbvDasB5FtrBXv4kYp7Zs/

6- لتغيير ستايل الفواصل واللون

dotted #cccccc;

abda3design ابداع ديزاين
ومبروك عليك الاضافة الرائعة
لا تقرأ وترحل شارك معنا بتعليق فنحن تكبدنا عناء البحث لنجلب لك الافضل والاجمل




ضع تعليقك

0 التعليقات:

البحــث

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

المتابعون

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