السبت، 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 != "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=5 "' 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
CSS
<style>
"هنا كود CSS" كود CSS لاداة مواضيع متشابهة ذات صلة هو ستايل
الاداة و تجدة بين الوسمين
</style>
</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 لتتناسب تصميم قالب المدونة بلوجر .. قم بتغيير القيم الافتراضية كالتالى بالترتيب
لتغيير نوع الخط Arial
لتغيير حجم خط الروابط 20px
لتغيير لون وتاثير الظل عند المرور فوق الرابط * تاثيرات CSS
text-shadow: 2px 2px 3px #0058cd;
5- لتغيير الصورة بجانب روابط المشاركات
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJAcaLgRZq6BEX7YtEo50ONVdHPB-cKhyphenhyphen7eat0hyllL7SzskocssH-lstuC4jPp81FFP7uj0HvUnm0aKzmw3HC7LBPcbsFWP95Wih29mJQDZeSPAU1pHvA5rZbvDasB5FtrBXv4kYp7Zs/
بقلم : Abda3Design
لخدمات التصميم والبرمجة
إدارة تتبنى عمل المواقع الخدمية المتنوعة للأفراد والهيئات والمؤسسات الكبرى. كما يمكنها عمل مواقع للتجارة الإلكترونية كما تتميز مؤسسة "ابداع ديزاين" . بأقوى فريق عمل متواصل مع العملاء 24 ساعة على مدار الأسبوع وتمتاز أيضا بكفاءة الدقة والسرعة
ضع تعليقك
0 التعليقات:
إرسال تعليق