الخطة - بلوجر

أفضل الطرق لأرشفة مدونة بلوجر وعمل "meta tags"

الاثنين، 2 ديسمبر 2013 / No Comments

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

التدوينات تظهر على محركات البحث بعد نشرها مباشرة
ظهور الوصف المقدم من الكاتب بطريقة احترافية تحت العنوان

لن نطيل الحديث عن هذا , سوف نذهب في جولة للتعرف على هذا التحديث ومحاولة تطبيقه لكي نجد الفائدة المرجاة لمدونات بلوجر وحسب منصتها الجديدة .

دعنا نلقي نظرة على ملفات html القديمة لبلوجر , ستجد الملف بين الوسم

<head>

والوسم

<b:skin><![CDATA[/*

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

مثلا لو نظرنا الى تعريف اسم المدونة ! ستجده مرفق مسبقا في تعريفات المدونة , كذلك الوصف . ملفات تعريف الزاحف والفهرسة ... إذا ما جدوى تكرار هذه الوسوم ؟؟؟ دعنا نكمل الطريقة المناسبة لتعريف المدونات لبرامج الزحف والطرق الامثل للارشفة.

أولا اذهب الى تحرير القالب واحذف كافة السطور الموجودة بين الوسم <head> و <b:skin><![CDATA[/* والصق الكود التالي مكانها ثم احفظ القالب:

    <b:include data='blog' name='all-head-content'/>

    <b:if cond='data:blog.metaDescription != &quot;&quot;'>

    <meta expr:content='data:blog.metaDescription' name='description'/>

    </b:if>

    <b:if cond='data:blog.pageName == &quot;&quot;'>

    <title><data:blog.title/></title>

    <b:else/>

    <title><data:blog.pageName/> | <data:blog.title/></title>

    </b:if>

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

الخطوة الثالثة وهي مهمة جدا , فقط شاهد الصورة وطبق الموجود بها :

هذه الخيارات ستكون كفيلة بأرشفة مدونتك بعد ايام قليلة وذلك بعد قراءة برامج الزحف لمدونتك ... بعد ذلك سيتم ارشفة المقالات مباشرة بعد النشر .

بقي خطوة اخيرة عليك القيام بها .... وهي ادارج هذه التعليمات البرمجية في الدالة "ملف robots.txt مخصص"

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: http://blogger-plans.blogspot.com/feeds/posts/default?orderby=updated

فقط غير رابط مدونتي لرابط المدونة الخاصة بك لضمان ارشفتها بالشكل الصحيح .

مبروك عليك الارشفة الجديدة وبالتوفيق لكم جميعا .

اضافة ثلاث أقسام لمدونة بلوجر بشكل تبويبات

الأحد، 1 ديسمبر 2013 / No Comments

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

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

الخطوة 1. من لوحة معلومات بلوجر، انتقل إلى قالب وانقر على زر تحرير HTML
الخطوة 2. البحث باستخدام CTRL + F عن العلامة التالية :

]]></b:skin>

الخطوة 3. قم بأضافة الكود التالي قبلها :

/* Tabview for Blogger
----------------------------------------------- */
.tabviewcont{
margin:15px 0;
padding:0;
clear:both;
}
.tabviewnav {
margin: 0 0 0 14px;
padding:3px 0;
font-size:12px; 
font-weight:bold;
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px;
margin-right:1px;
background:#F6F6F6; 
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
text-decoration:none;
color:#222222;
}
.tabviewnav li a:hover {
color:#222222;
background:#EBEBEB; 
text-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:#EBEBEB; 
color:#222222;
}
.tabviewcont .tabviewtab {
padding:5px;
border:1px solid #EEEEEE; 
background:#fff;
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;
}

الخطوة 4 . ابحث عن الرمز التالي

</head>

وقبله مباشرة نضع هذا الكود :

<script type='text/javascript'>
// Tabview for grouping gadgets
//<![CDATA[
document.write('<style type="text/css">.tabview{display:none;}<\/style>');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabviewid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg]}this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null}}tabviewObj.prototype.init=function(e){var childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false}if(e.id){this.id=e.id}this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1}}}DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title=''}if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"")}break}}}if(!t.headingText){t.headingText=i+1}DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabviewid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId}DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li)}e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}
//]]>
</script>

الخطوة 6 . تحت اي من هذين الرمزين , الصق الكود التالي:

<div class='tabview'>
<b:section class='tabviewtab' id=''Tab1' maxwidgets='1'/>
<b:section class='tabviewtab' id=''Tab2' maxwidgets='1'/>
<b:section class='tabviewtab' id=''Tab3' maxwidgets='1'/>
</div>

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

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

<b:section class='tabviewtab' id='Tab4' maxwidgets='1'/>

وفي الختام نتقدم بالشكر إلى مطوري بلوجر الذين لا يقفون عند حد من الابداع وتقديم كل ما ينمي المدونات لتبدو اكثر احترافية

اضافة للمواضيع الاخيرة بشكل منزلق لمدونات بلوجر

/ No Comments

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

بقي عليك شيئ واحد وهو تغيير رابط المدونة برابط مدونتك, وللتسهيل تمت الاشارة اليه باللون الاحمر .

كود الاضافة :

اربع طرق مختلفة للحصول على وظيفة "المشاركات الشائعة" لمدونات بلوجر

السبت، 30 نوفمبر 2013 / No Comments

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

الاضافة بسيطة وسهاة ويمكنك فعل هذا بالذهاب الى ادارة المدونة الخاصة بك >>> قالب >>> تخصيص >>> والذهاب الى فئة " متقدم ومنها سيكون بمقدورك إضافة CSS مخصص .

الاضافة الاولى للمشاركات الاكثر شيوعا :

#PopularPosts1 h2{ padding:8px 10px 3px 0; width:105%; margin:-10; font-size:16px; position:relative; Right:5px; display:block; border-bottom:2px solid #ccc; } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:20px; width:100%; } #PopularPosts1 li{ width:100%; position:relative; Right:0; margin:0 0 5px 5px; padding:1px 12px; } #PopularPosts1 ul li:before{ content:counter(li); counter-increment:li;
position:absolute; top:9px; Right:-30px; font-size:17px; width:22px; height:22px; border-radius: 100%;
color:#777; border: 2px solid #ddd; padding:0; text-indent:8px; } #PopularPosts1 ul li a{ display:block; position:relative; Right:-10px; width:100%; margin:0; min-height:16px; padding: 5px 3px 3px 19px; color:#333; text-decoration:none; font-size:12px; font-style: italic; } #PopularPosts1 ul li a:hover{ color:#3366ff; margin-Right:10px; }

الاضافة الثانية :

#PopularPosts1 h2{ position:relative; right:-2px; padding:8px 43px 9px 19px; width:100%; margin:0; font-size:14px; background:#C00000; color:#f2f2f2; text-align:Right; text-indent:18px; } #PopularPosts1 h2:before{ position:absolute; content:""; top:0px; right:0px; width: 0px; height: 0px; border-bottom:12px outset transparent; border-Right:12px solid #800000; } #PopularPosts1 h2:after{ position:absolute; content:""; top:0px; left:0px; width:0px; height:0px; border-bottom:20px outset transparent; border-top:20px outset transparent; border-Right:25px solid #fff; } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:10px; Right:-8px; width:100%; } #PopularPosts1 li{ width:100%; position:relative; Right:0; margin:7px 0 16px 12px; padding:10px 4px 0 5px; } #PopularPosts1 ul li:before{ content:counter(li); counter-increment:li; position:absolute; top:9px; Right:-20px; font-size:23px; width:20px; color:#888888; } #PopularPosts1 ul li a{ display:block; font-size:14px; color: #666; text-decoration:none; transition: all .1s ease-in-out; } #PopularPosts1 ul li a:hover{ color:#3366FF; margin-Right:3px; }

الاضافة الثالثة :

#PopularPosts1 h2{ position:relative; padding:8px 10px 6px 10px; width:100%; margin:0; font-size:16px; background: #bada55; color:#222; text-align:center; } #PopularPosts1 h2:before{ position:absolute; content:""; top:0px; right:0px; width: 0px; height: 0px; border-bottom:20px outset transparent; border-top:20px outset transparent; border-right:49px solid #fff; }

#PopularPosts1 h2:after{ position:absolute; content:""; top:0px; left:0px; width: 0px; height: 0px; border-bottom:20px outset transparent; border-top:20px outset transparent; border-left:49px solid #fff; }

#PopularPosts1 ul{ list-style:none; counter-reset:li; padding:10px; left:-8px; width:100%; }

#PopularPosts1 li{ width:100%; position:relative; Right:0; margin:0 0 1px 12px; padding:4px 5px; }

#PopularPosts1 ul li:before{ content:counter(li); counter-increment:li; position:absolute; top:19px;
Right:-5px; font-size:15px; /* Font size of the numbers */ width:10px;
color:#1a5759; }

#PopularPosts1 ul li a{ display:block; position:relative; Right:10px; width:100%; margin:0; padding: 9px 3px 10px 29px; font-size:15px; font-style: italic; color:#0b25e3; text-decoration:none; transition: all .1s ease-in-out; }
#PopularPosts1 ul li a:hover{ color:#3366dd; margin-left:3px; }

الأضافة الرابعة:

#PopularPosts1 h2{ padding:3px 0 3px 0; width:100%; margin:0; font-size:1.1em; text-indent:12px; font-size:17px; text-align:center; color: #000;}

#PopularPosts1 ul{ list-style:none; counter-reset:li; padding:5px 0px 1px; Right:-5px; width:295px; }
#PopularPosts1 li{ position:relative; margin:0 0 10px 0; padding: 0px 2px 0 7px; Right:0px; width:290px; border:1px solid #ccc;}

#PopularPosts1 ul li:before{ content:counter(li);counter-increment:li;position:absolute;
display:block;top:2px; Right:2.5px; font-size:14px; width:12px; margin:0 0 20px 0;padding:4px 4px 4px 3px;color:#333; text-align:Right; background:#E8E8E8; text-indent:2px;}
#PopularPosts1 ul li:after{content:""; position:absolute; top:-2px; Right:10px; width: -2px;
height: 8px; border-top:3px outset transparent; border-Right:2px solid #aeaeae;}

#PopularPosts1 ul li a{font-size:16px;color:#444; font-style: italic; margin-Right:19px; display:block; min-height:15px;text-decoration:none;padding:0 4px 3px 0;}
#PopularPosts1 ul li:hover{ background:#f9f9f9;border:1px solid #aaa; }
#PopularPosts1 ul li a:hover{color:#0174DF;}

انتهت الاضافة للمشاركات الاكثر شيوعا . اتمنى ان تنال اعجابكم , مع العلم ان الخلفيات لكافة الاضافة شفافة , اي انها ستتناسب مع كافة الالوان .

طريقة إضافة اداة اجبارية للضغط على زر أعجبني

الخميس، 28 نوفمبر 2013 / No Comments

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

طريقة اضافة اعلانات ادسنس في منتصف المقال تلقائيا لمدونات بلوجر

الأربعاء، 27 نوفمبر 2013 / No Comments

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

طريقة اضافة اعلانات ادسنس في منتصف المقال تلقائيا لمدونات بلوجر

هذه الاضافة لا تتناسب مع اصحاب المدونات الكبيرة , أو تلك التي تمتلك الكثير من المواضيع لأنك سوف تجد صعوبة بالغة في تعديل التدوينات . ولذلك نحن ننوه الى ان اداة اضافة الاعلانات في منتصف المواضيع تلقائيا هي افضل لأصحاب المدونات الجديدة نوعا ما , والامر عائد لكم اعزائي القراء .

اضافة هذه التعليمات البرمجية لا يحتاج الى كثير من الاجراء كل ما عليك فعله هو الذهاب الى مدونات بلوجر | تحديدا تذهب الى ادارة المدونة الخاصة والتي ترغب في تركيب هذه الاضافة عليها . من ثم تحرير والبحث عن الرمز التالي :

<body>

بعد ان تجد هذا الرمز كل ما عليك فعله هو وضع التعليمات البرمجية التالي قبله :

<b:if cond='data:blog.pageType == "item"'>
<script src='https://java-ammer.googlecode.com/files/jquery.js' type='text/javascript'></script>
<div style="display: none; float:center;">
<div id="MBL-Ads">
<br/><center>
<script type='text/javascript'>
      google_ad_client="pub-xxxxxxxxxxxxxxxx";
      google_ad_slot="xxxxxxxxxx";
      google_ad_width=468;
      google_ad_height=60;
</script>
<script src='https://java-ammer.googlecode.com/files/show_ads.js.js' type='text/javascript'></script>
<br/></center>
</div>
</div>
<script>
$(document).ready(function(){
jQuery('#MBL-Ads').appendTo(jQuery('a[name="more"]'));
    });
</script>
<a href='http://goo.gl/AtRVLI' style='display:none;'></a>
</b:if>

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

طريقة إضافة أداة مواضيع ذات صلة للبلوجر

/ No Comments

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

وهي طريقة جيدة للتنقل بين المواد المكتوبة في مدونات بلوجر , بحيث تعطي الزائر فكرة اوسع عن المواضيع المكتوبة مما يزيد من فرص التجول في تدويناتك .

وهذا نموذج لما يمكن ان يشاهده الزائر في اسفل التدوينات ويمثل المواضيع التي تحمل نفس الوسم "ذات صلة" بالموضوع المقروء :

مقتطف-مقالة

والان دعونا نكمل الاجراءات لثبيت الاداة في مدونات بلوجر. بداية نذهب الى قالب | تحرير | ثم البحث عن الكود التالي :

</head>

ونستبدله بهذه التعليمات البرمجية :

<b:if cond='data:blog.pageType == "item"'>

#related-posts {

float:center;

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>

var defaultnoimage="https://lh3.googleusercontent.com/-w-uRzvcZQjc/UpXKajZntfI/AAAAAAAAAag/MfKdJh0CkEE/s72/noimage.png.jpg";

var maxresults=5;

var splittercolor="#d4eaf2";

var relatedpoststitle="مواضيع ذات صلة";

</b:if>

</head>

الخطوة التالية نبحث عن الرمز التالي :

اذا لم نجد هذا الرمز سوف نبحث عن هذا :

الان وتحت اي رمز تجده , ضع الكود التالي :

<b:if cond='data:blog.pageType == "item"'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != "true"'>

</b:if>

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'>

</b:if></b:if>

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

لضبط وتغيير الوظائف ذات الصلة ابحث عن الرمز التالي وعدل عدد الوظائف المراد عرضها :

max-results=6

لتغيير جملة مواضيع ذات صلة ابحث عن هذا الكود :

var relatedpoststitle="مواضيع ذات صلة";

تغييير الصورة للمواضيع التي لا تحتوي على صور :

https://lh3.googleusercontent.com/-w-uRzvcZQjc/UpXKajZntfI/AAAAAAAAAag/MfKdJh0CkEE/s72/noimage.png.jpg

لتغيير لون الخطوط الفاصلة بين المواضيع المعروضة :

var splittercolor="#d4eaf2";

هذا تقريبا كل شيء . شكرا لكم والله المستعان

الاشتراك في: التعليقات ( Atom )

News Ticker

الخطة - بلوجر

Latest Post

Entertainment

Business

Technology

Recent Gallery

Lifestyle

Sports

Gallery

Recent Posts

أفضل الطرق لأرشفة مدونة بلوجر وعمل "meta tags"

اضافة ثلاث أقسام لمدونة بلوجر بشكل تبويبات

اضافة للمواضيع الاخيرة بشكل منزلق لمدونات بلوجر

اربع طرق مختلفة للحصول على وظيفة "المشاركات الشائعة" لمدونات بلوجر

طريقة إضافة اداة اجبارية للضغط على زر أعجبني

طريقة اضافة اعلانات ادسنس في منتصف المقال تلقائيا لمدونات بلوجر

طريقة إضافة أداة مواضيع ذات صلة للبلوجر