مدونة ماي تكنولوجي M T B

<<{ كل ما هو جديد في عالم تكنولوجيا تجده هنا مجاناً }>>

Banner 468


Browse my-tech1.blogspot.com now in many languages

.

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

0 التعليقات
-
zakaria mohamed

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

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




اذهب إلى تحرير HTML وعلم على توسيع قوالب عناصر واجهة المستخدم وابحث عن :




</head>

أضف قبلها مباشرة :




<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>');
}
//]]>
</script>
<style>

#related-posts {
float : right;
width : 600px;
margin-top:20px;
margin-right: 0px;
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 {
background:#EEEEEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwzaM0QZye6p58NiCaQpSh7DX09Vtq3WzyIoJOiER05ORMuv9I8lHZfQQLS0NDBu3qH6sEioFg3H53T0Hw0hLmNen5snVj4C3gFnjbAa5f0ET9jrgM4nSTXONDR6FNx_ZGAKPEA7VPpmw/s0/widget-title-bg.png) right top repeat-y;
color : #222222;
font-size:16px;line-height:16px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold;margin:0 0 10px 0;padding:10px;text-transform:uppercase;text-shadow:0 1px 0 #fff;
}
#related-posts a {
color : #054474;
font-weight:bold;
font-family: Arial;
font-size : 14px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;http://i263.photobucket.com/albums/ii150/mohamedrias/newconcept_bullet.png&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>


الآن ابحث عن :



                                                               <data:post.body/>



(إذا وجدت كودين فالثاني هو المقصود) وأضف بعده :



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<h2>قد يهمك أيضا :<div style='display:none;'> <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=3&quot;' type='text/javascript'/></b:if></b:loop></div> </h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
</b:if>

الكود الأحمر لإظهار الأداة في صفحات المواضيع فقط
max-results=3 لتحديد عدد المواضيع ذات الصلة المراد عرضها بالأداة


لإضافة خلفية عبارة عن صورة فقط :
غير الكود التالي :
كود:
background:#EEEEEE  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwzaM0QZye6p58NiCaQpSh7DX09Vtq3WzyIoJOiER05ORMuv9I8lHZfQQLS0NDBu3qH6sEioFg3H53T0Hw0hLmNen5snVj4C3gFnjbAa5f0ET9jrgM4nSTXONDR6FNx_ZGAKPEA7VPpmw/s0/widget-title-bg.png)  right top repeat-y;
إلى :
كود:
background:url("رابط الخلفية") ;
مع تغيير ما يلزم تغييره

لتغيير صورة السهم بصورة أخرى :
غير الرابط التالي :
كود:
http://i263.photobucket.com/albums/ii150/mohamedrias/newconcept_bullet.png
برابط الصورة المراد عرضها





روابط هذه التدوينة قابلة للنسخ واللصق
URL
HTML
BBCode
هل أعجبك الموضوع ...؟

اشترك معنا و تابع جديد المدونة :)

كن من متابعينا

Categories:

اترك تعليقك . تعليقاتـكم تهـمونا أرجو الإدلاء برأيكم في التعليقات

.
_______________________________________________________
_______________________________________________________