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

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

(أولآ) : الشكل الثابت
كما تعلمنا من لوحة التحكم توجه إلى التخطيط + تحرير HTML
ثم في خانة نسخ احتياطي / استعادة القالب اضغط على ( تنزيل قالب كامل ) ، ثم قم بتحميل الملف على جهازك الخاص ، هذه الخطوه مهمه جدآ في حاله حدوث خطأ ما ، حيث يمكنك بعد ذلك استرجاع قالبك ببساطة ، ويرجى تطبيق هذه الخطوه عند أي تغيير تحدثه في أكواد القالب ..

من تصميم + تحرير HTML
اضغط على ( توسيع قوالب عناصر واجهة المستخدم )
وللبحث السريع يتم الضغط على ctrl+f ثم نسخ الكود ولصقه في مربع البحث وسيظهر لك مكانه في القالب ..
ابحث عن هذا الكود </head>
ثم قم بلصق هذا الكود أعلاه مباشرة

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:right;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, 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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8MNl5am4AAluGtp9fWp-VbV1t6odrwJOrHfcEjxm7UeAifusHJio5ZrKFRto8iH80cK8n7vBUrAS72w4S7GFKoEQOZ9bh74pvzlOB2gMreP1GtJnjhpVYIiBorGVAzqwqtb0pbf01NCs/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="مواضيع ذات صلة ::";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>

ويمكنك تغيير جملة "مواضيع ذات صلة" بأي جملة تريد
كما يمكنك تغيير الرقم (6) بأي رقم تريد .. وهو يشير إلى عدد المواضيع التي سيتم عرضها

ثم ابحث عن هذا الكود <div class='post-footer-line post-footer-line-1'>
أو هذا الكود <p class='post-footer-line post-footer-line-1'>
ثم قم بوضع هذا الكود مباشرة أسفل ما وجدت من الكودين السابقين

<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=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</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://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img alt='Related Posts Widget For Blogger with Thumbnails' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='http://www.bloggerplugins.org/'><img alt='Blogger Widgets' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a>
</b:if></b:if>

قم بحفظ القالب ثم اعرض مدونتك بعد التغييرات واستمتع بالإضافة ..

(ثانيآ) : الشكل المتحرك
من لوحة التحكم توجه إلى التخطيط + تحرير HTML
ثم في خانة نسخ احتياطي / استعادة القالب اضغط على ( تنزيل قالب كامل ) ، ثم قم بتحميل الملف على جهازك الخاص ، هذه الخطوه مهمه جدآ في حاله حدوث خطأ ما ، حيث يمكنك بعد ذلك استرجاع قالبك ببساطة ، ويرجى تطبيق هذه الخطوه عند أي تغيير تحدثه في أكواد القالب ..

من تصميم + تحرير HTML
اضغط على ( توسيع قوالب عناصر واجهة المستخدم )
وللبحث السريع يتم الضغط على ctrl+f ثم نسخ الكود ولصقه في مربع البحث وسيظهر لك مكانه في القالب ..
ابحث عن هذا الكود </head>
ثم قم بلصق هذا الكود أعلاه مباشرة

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
width:100%
min-height:100%;
padding-top:5px;
padding-right:5px;
}
#related-posts h2{
background: #FFF!important;
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, 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://balitraveltips.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'en'}
</script>

<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>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=7"' type='text/javascript'/></b:if></b:loop>
<h3><b>مواضيع ذات صلة</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<div style='float:bottom-right'><a href=''></a></div></div>
</b:if>

قم بحفظ القالب
اعرض مدونتك بعد التغييرات واستمتع بالإضافة ..
أرجو أن تنال تقدريكم ^_^

الجمعة، 27 يناير 2012

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

Unknown -

لمتابعتي عبر مواقع التواصل الاجتماعي

اشتركي بقناتي على اليوتيوب 😍

اشترك معنا عبر بريدك الالكتروني

المشاركات الشائعة

التسميات

Advertisement

أتصل بنا