الجمعة 25 أكتوبر 2013 - الساعة الآن 00:03:39 صباحاً

السبت، 14 سبتمبر 2013

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

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

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

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

الشكل الاول

اضافة مواضيع ذات صله مصحوبه بصور الموضوع على شكل قائمه افقيه متحركه

كيفية اضافة هذه الاداه الى مدوناتكم

1- من  لوحة التحكم -> قالب -> تحرير HTML

     2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 
     3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
 </head>
 ** والصق الكود التالي قبله تمامآ (فوقه)

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.3em;
font-weight: bold;
color: black;
font-family: Tahoma, Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sma-blogger.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->


http://ebda3atouna.blogspot.com
<div class='post-footer-line post-footer-line-1'>

 اذا لم تجده قم بالبحث عن


<p class='post-footer-line post-footer-line-1'>


** والصق الكود التالي بعده  مباشره (تحته)

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="مواضيع ذات صلة";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://alb33dani.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://alb33dani.blogspot.com' style='display:none;'>EfadaBlog</a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

وبالاخير قم بحفظ القالب والمعاينه ومبروك عليك الاضافه


الشكل الثاني

اضافة مواضيع ذات صله  بشكل نصي

كيفية اضافة هذه الاداه الى مدوناتكم

1- من  لوحة التحكم -> قالب -> تحرير HTML

     2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 
     3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
 </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://lh6.googleusercontent.com/-B7Vkw9_qc8Y/TkAfDi4z6DI/AAAAAAAAAoU/s0oPtRH3Vok/s000/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=4&quot;' type='text/javascript'/></b:if></b:loop></div> </h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>
</b:if>
جميع الحقوق محفوظة مدونة الإبداع 2016
حقوق النشر محفوظة لـ : مدونة الإبداع ©