كيف تعمل قائمة - مواضيع ذات صلة او مواضيع مشابهة - اسفل كل موضوع او مقالة في مدونتك او موقعك؟

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

* ملاحظة :  لكن قبل ان نبدا بخطوات  تركيب  هذه  الاضافة تذكر انك عامل اقسام لمدونتك اي كل المواضيع المنشورة في مدونتك موزعة في اقسام ( اقسام المدونة ) ولمعرفة التفاصيل عن كيفية عمل او انشاء اقسام لمدونتك   قم بزيارة الدرس هذا ،،،،

واي موقع او مدونة لا يوجد بها اقسام فالطريقة هذا غير صالحة لها .... 

والان اسحمولي بشرح خطوات : كيفية اضافة او وضع مواضيع ذات صلة في مدونة بلوجر ؟ 

1 - اذهب الى لوحة تحكم المدونة .
2 - من لوحة تحكم مدونتك اختر قالب - ثم تحرير HTML - ثم متابعة . ( لا تنسى حفظ نسخة احتياطية لقالب مدونتك من اي خطاء قد يقع  )
3 - قم بتوسيع قوالب عناصر واجهة المستخدم اي بوضع علامة صح في المربع .

4 - ابحث عن الكود التالي باستخدام مفتاح ( CTRL+F ) :

</head>

5 - قم بنسخ الكود التالي ثم ضعه او انسخة فوق كود خطوة4 .

<!--RelatedPostsStarts-->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
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://www.gigaimage.com/images/brrl1rtaziisu0yj6kj6.gif&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>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/relatedposts_forblogger.js' type='text/javascript'/><!--RelatedPostsStops-->

6 - ابحث عن الكود التالي في مدونتك بواسطة المفتاح ( CTRL+F ) :

<data:post.body/>

7 - قم بنسخ الكود التالي ثم الصقة بعد كود خطوة رقم6 :

<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>مواضيع ذات صلة: </b></font><font color='#FFFFFF'><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!--RELATED-POSTS-STOPS-->

8 - قم بعمل حفظ للقالب . ومبرووووك ،،،،

ملاحظة مهمة : قد تجد كود خطوة رقم 6 ( <data:post.body/> ) مكرر مرتين ، قم بوضع كود خطوة رقم7 بعد كود خطوة 6 المكررالثاني . كما هو موضح في الصورة التالي ( كود خطوة رقم 7 بعد كود خطوة رقم6 الذي باللون الاصفر ) :

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

المصدر | مدونة المحررون العرب

...تابع القراءة

كيف تظيف بنرات اعلانانية بتأثيرات JQuery على مدونة بلوجر ؟

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة صح في خانة توسيع قوالب عناصر واجهة المستخدم.

قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F) :

]]></b:skin>

ثم قم بإضافة هذا الكود قبله مباشرة :

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://sites.google.com/site/lightbox007/photo/borderblogger.png) no-repeat center center;
border: none;
}

بعد ذلك إبحث عن هذا الكود :

</head>

ثم ألصق الكود التالي قبله :

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;)
.stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;)
.stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });

});

});
</script>

والآن قم بحفظ القالب انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم " إضافة أداة"  ثم اختر اداة  HTML/Javascript والآن الصق الكود التالي:

<ul class="thumb">
<li><a href=" رابط المعلن هنا "><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
<li><a href="رابط المعلن هنا"><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
<li><a href="رابط المعلن هنا "><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
<li><a href="رابط المعلن هنا"><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
</ul>

مع إدخال رابط المعلن مكان اللون الاحمر ورابط البنر الخاص به مكان الرابط الأزرق في إنتظار تعليقاتكم أتمنى أن تنال إعجابكم وإلى اللقاء في درس اخر مع تحياتي للاخ ابو اياد  ،،،

المصدر | مدونة المحررون العرب

...تابع القراءة

طريقة اضافة زر 1+ لجوجل على مدونة بلوجر

أصدر موقع جوجل حديثا الزر 1+ ،حيث يسمح لك باقتراح أي موقع معين أو أي شيء أعجبك وذلك عند النقر على الزر 1+ ،فإنك تقوم بإخبار أصدقائك والعالم أن هناك شيء ما يجب الإطلاع عليه ،وبالتالي فإن مقترحاتك سوف تظهر عندما يقومون بالبحث في جوجل ، فهذه الميزة جديدة حيث تسعى جوجل في تطوير محركها بشكل جديد ، ،لذلك ،إذا رأيت هذا الزر في موقع وتريد من أصدقائك إيجاده بسهولة عند بحثهم فقط أنقر الزر1 +

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

قم بالبحث عن الكود التالي بواسطة لوحة التحكم ( ctrl +f ) : -

</body>

ثم قم بلصق الكود التالي قبلة : -

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

والان قم بالبحث عن الكود التالي : -

<data:post.body/>

ثم قم بلصق الكود التالي بعده ليكون الزر1+ اسفل التدوينة ، او قم بلصق الكود قبله ليكون الزر1+ تحت عنوان التدوينة :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<g:plusone expr:href='data:post.url' size='tall'/>
</b:if>

ملاحظة : يتوفر زر1+ على 4 قياسات حيث يمكنك إختيار القياس المناسب لك وذلك بإستبدال الكلمة tall من الكود بأحد القياسات الموجودة في الصورة أسفله .

وإذا أردت إظهار الزر 1+ كذلك على الصفحة الرئيسية ما عليك سوى حذف السطر الأول والأخير من الكود السابق

تعليقاتكم مرحبا بها ،،،

المصدر : مدونة ابو اياد 

المصدر | مدونة المحررون العرب

...تابع القراءة

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

شرح مفصل لطريقة اضافة رزنامة calendar الى مدونتك :

01

اذهب الى التخطيط من لوحة التحكم :

02

اختر اضافة أداة :

03

من نافذة اضافة أداة اختر المزيد من الأدوات كما في الصورة التالية :


04

اختر Daily Calendar:

05

اختر أي اسم للرزمامة بالعربي أو الإنجليزي أو الفرنسي كما يمكنك التحكم في حجم الرزنامة حسب ما يناسب مدونتك :

06

قم بحفظ العمل وعرض المدونة لمشاهدة الرزنامة :

07

مشاهدة الرزنامة على المدونة :

لا تنسونا من دعائكم الخالص بظهر الغيب وترك تعليق أو نصيحة أو استفسار أو بريد الكتروني أو روابط مدوناتكم .

المصدر | مدونة المحررون العرب

...تابع القراءة

كيفية اظافة شريط آخر مواضيع المدونة - لمدونات بلوجر ؟

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

مثال للشريط انظر الصورة :

اضغط لتتكبر الصورة












خطوات الشرح :

أولا : قم بالدخول الى حسابك على بلوجر ومن اللوحة التحكم اختر التبويب :تخطيط - عناصر الصفحة وانقر على إضافة أداة في منطقة جزء التخطيط (layout) - منطقة الوسط - ثم اختر من القائمة إضافة HTML/JAVASCRIPT.

وانسخ الكود الأتي :

<script src="http://sites.google.com/site/taliblogsite/file/Headlines-ar-widget.txt"> </script><script style=""> var nMaxPosts = 10; var sBgColor; var nWidth; var nScrollDelay = 170; var sDirection="right"; var sOpenLinkLocation="N"; var sBulletChar="»»"; </script> <script style="" src="http://arab-editors.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"> </script><scriqt>
<ul><span style=";" >
<a href="http://arab-editors.blogspot.com/2009/12/blog-post_23.html" title="اضف "> اضف هذه الاداة </a><a href="http://arab-editors.blogspot.com/" title="مدونة المحررون العرب">شريط آخر المواضيع</a></span></ul>
<!--NoEdit--></scriqt>

* قم بتغيير عنوان المدونة الذي باللون الاحمر في الكود الى عنوان مدونتك ...

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





ملاحظــــــــــــــــات على الكود اعلاه :

var nMaxPosts = 10; -يحدد عدد المواضيع التي تظهر في الشريط

var sBgColor; - var sBgColor= grey; :اذا كنت تريد تغيير لون الخلفية

var nWidth; - لتحديد العرض

var nScrollDelay = 185; - لتحديد السرعة كلما قلت القيمة زادت السرعة

var sDirection="left"; - لتحديد جهة الحركة. left = Right to left; Right = Left to right; Up = Down to up; Down = Up to down

var sBulletChar="»»"; هذا هو الرمز الذي يظهر قبل عنوان اي موضوع على الشريط ويمكنك تغييرة

ومبروووووووووووووك عليكم الاظافة ،،،،،،،

تعليقاتكم واستفساراتكم على الموضوع مرحبا بها

المصدر | مدونة المحررون العرب

...تابع القراءة

شرح اضافة زر العودة الى اعلى الصفحة لمدونات بلوجر

السلام عليكم اخواني الكرام تحية طيبة اليكم موضوع بسيط وهو كيفية اضافة رز العودة الى الأعلى بقدر ماهو بسيط فهو مهم ولابد منه نبدأ

الشرح على بركة الله .

01 -من لوحة التحكم اختر التخطيط وبالإنجليزية layout :

02 - من صفحة التخطيط اختر اضافة أداة :

03 - سوف تظهر لك نافذة بها عدة أدوات اختر منها الأداة HTML/JavaScript الموضحة في الصورة التالية :

04 - والأن نقوم بلصق الكود كما في الصورة التالية كما يمكنك اختيار اسم وليكن العودة الى أعلى الصفحة أو العودة الى الأعلى أو أعلى فقط ثم اضغط على حفظ .

.....................................................................................................................................................................

<a href="#">
<img src="http://i41.tinypic.com/yo66p.jpg"
alt="Back to Top"
title="Back to Top"
style=" display: scroll;
position: fixed;
bottom: 5px;
right: 5px;" />
</a>

.........................................................................................................................................................................


05 -مشاهدة الزر على المدونة :

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

المصدر | مدونة المحررون العرب

...تابع القراءة

اضافة شريط آخر الاخبار لقناة الجزيرة او العربية .

إخواني الكرام السلام عليكم ورحمة الله

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

أولاً :

اذهب إلى التخطيط من لوحة التحكم بمدونتك .

ثانياً :

اذهب إلي اضافة أداة :

ثالثاً :

ثم قم باختيار ألأداة هذه ( HTML/JavaScript

رابعاً :

قم بنسخ الكود كاملا التالي :

<script language="JavaScript"><!--
var g=new Date(); g=g.getTime()%1000;
document.writeln('<iframe width=100% height=18 scrolling=no marginwidth=0 marginheight=0 frameborder=0 src=http://www.faisal1.com/News_Grab/jazeera.php>');
// --></script>
<noscript><!--webbot bot="HTMLMarkup" startspan --><iframe scrolling="no" frameborder="0" width="0" marginheight="0"
height="0" marginwidth="0"><!--webbot bot="HTMLMarkup" endspan --><!--webbot bot="HTMLMarkup" startspan --></iframe><!--webbot bot="HTMLMarkup" endspan --></noscript>

خامساً :

قم بلصق الكود في هذه الخانة ثم اضغط حفظ كما هو موضح في الصورة التالية :

بعد عملية الحفظ تظهر أو تضاف الأداة مباشرة في العمود الجانبي ثم قم بسحب الأداة بواسطة الماوس من العمود الجانبي ( side bar ) الى تحت او اسفل شريط عنوان مدونتك الموجود في صفحة عناصر المدونة .

سادساً :

اذهب إلى حفظ ثم قم بعرض المدونة الإلكترونية لتشاهد النتيجة :

سابعاً :

نهاية العملية ورؤية شريط الأخبار :

ثامناً :

ولإضافة شريط الأخبار الخاص بقناة العربية قم بنسخ الكود التالي عوضا عن الكود السابق :

<div width="600"><script src="http://www.alarabiya.net/ara_v_ticker.html"></script></div>

أرجوا من الإخوة الكرم الذين استفادوا من الموضوع الدعاء

الصالح وترك تعليق وبارك الله فيكم .

المصدر | مدونة المحررون العرب

...تابع القراءة

كيف تضع او تظيف اداة استطلاع الرأي في مدونة بلوجر ؟

بسم الله الرحمن الرحيم ، إخواني الكرام هذه أداة جميلة جدا ورائعة ومفيدة وهي أداة استطلاع الرأي حيث أن هذه الأداة تمكنك من اختيار أي سؤال في أي موضوع شئت وعرضه على زوار مدونتك لمعرفة أرائهم حول موضوع ما .
إذاً تابعوا معي شرح خطوات إضافة هذه ألأده وهي كالتالي :

اولاً :

من لوحة التحكم بمدونتك اذهب إلى التخطيط :

ثانياً :

اختر إضافة أداة :

ثالثاً :

ثم اضغط على أداة استطلاع الرأي الموضحة في الصورة :

رابعاً :

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

خامساً :

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

سادساً :

ظهور الأداة على المدونة وهذا مثال لإستطلاع الرأي حول نيل لقب كأس افريقيا للأمم 2010 :

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

المصدر | مدونة المحررون العرب

...تابع القراءة

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

بسم الله الرحمن الرحيم ، والصلاة والسلام على اشرف الخلق محمد بن عبدالله .
اخواني الكرام ، هذه الإضافة ترتكز بالإساس على تصنيفات المدونة و تعرضها على شكل ركام تختلف فيه أحجام النصوص حسب قوة التداول داخل المدونة ، و تجدر الإشارة إلى أن هذه الإضافة تساهم في رفع تلاؤم المدونة و محركات البحث SEO .عد الآن لن يضطر مستخدمو بلوجر إلى تعديل القالب لعرض سحب الأوسمة كما في الطريقة القديمة ، الخاصية أصبحت متاحة من خلال إضافة التسميات التي درجنا على وضعها بالقائمة الجانبية للمدونة. ما عليك سوى إضافة أداة تسميات أخرى مع تنشيط خاصية عرضها كسحابة أوسمة ، هذا ليس كل شيئ نفس الأداة أضحت تتيح لك خيار انتقاء التسميات (التصنيفات) التي تريد إظهارها، و هذه بعض الصور الموضحة.

ملاحظة : اقبل الشرح احب ان انوه انه لازم من وجود اداة ( التصنيفات ) او مايسمونه ( اقسام المدونة ) مفعله في مدونتك يعني مواضيع المدونة تظاف او تنشر في اقسام للمدونة ، مثلا ( دروس بلوجر ، اضافات بلوجر ، منوعات ، اسئلة الزوار وهكذا ...الخ ) بعدها نقوم باضافة هذه الاداة .


طريقة وشرح تركيب الأداة :

من ( لوحة التحكم المدونة ) نذهب الى ( اضافة اداة ) تظهر لنا قائمة (قائمة ادوات بلوجر ) نختار منها اداة ( التسميات ) كما هو موضح في الصورة ادناه :

اضغط على الصورة لتكبر

ثم نعمل التالي علشان تكون على شكل سحابة . انظر الصورة التالية :

اضغط على الصورة لتكبر

1 - خيار عرض كل التصنيفات أو بعضها فقط ، عند تحديد الثاني يظهر خيار التعديل في أسفله.
2 - عند ضغط "تعديل" تظهر النافذة الصغيرة كما في الصورة و منها يمكنك اختيار التصنيفات التي تريد إظهارها.
3 - هذه لاختيار شكل عرض الأداة، إما لائحة بشكلها العادي أو سحابة أوسمة. يفضل وضع أداتين ، واحدة بشكل لائحة و الأخرى سحابة أوسمة.
4 - تفعيل أو تعطيل عرض الأرقام التي تظهر بجانب التصنيفات و التي تدل على عدد التدوينات المصنفة تحتها.

ودمتم في رعاية الله وحفظة
تعليقاتكم مرحبا بها

المصدر | مدونة المحررون العرب

...تابع القراءة

شرح كيفية إضافة زر مواقع النشر الإجتماعية (المفضلة) إلى مدونتك.

بسم الله الرحمن الرحيم ، اليوم نبداء بتعلم إضافة مفيدة وهي كما تلاحظون موجودة في مدونتي في الصفحة الرئيسية فاصلة بين كل موضوع او تحت كل موضوع منشور الا وهي ( مواقع النشر الاجتماعية - المفضلة ) .




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

1 - وضعها في القائمة الجانبية.
و هذه أسهل الطرق و لا تتطلب منا إلا الذهاب إلى موقع الخدمة ثم اختيار الأيقونات المراد عرضها و ضغط زر توليد الكود ، فننسخه إلى مربع في القائمة الجانبية بالنسبة لووردبريس أو بلوك لباقي برامج إدارة المحتوى أما في بلوجر فنختار إضافة أداة جديدة من نوع Html/Javascript و نضع الكود فيها و نحفظها .

2 - وضعها أسفل كل موضوع أو تدوينة.
بالنسبة لووردبريس هناك إضافة ممتازة قد تغنيك عن نسخ الأكواد و هي Sociable ، يمكن تحميلها من هنـــــــا ، بعد فك الضغط عن الملف يرفع مجلد الإضافة إلى مجلد Plugins الموجود داخل wp-content وتفعل الإضافة من لوحة التحكم حيث يمكن تعديلها من خلال قائمة الإعدادات.

1* اضافة بطريقة بسيطة وسهلة من AddThis وبها جميع مواقع النشر المفضلة .


أدخل الى لوحة التحكم لمدونتك ومن ثم توجه الى التبويب : التخطيط |تحرير ال HTML و اختر 'توسيع قوالب عناصر الاستخدام ' :


ابحث عن الجزء :

<div class='post-footer'>

وضف مباشرة تحتها هذا الكود :

<!-- AddThis Button BEGIN -->
<div><a expr:name='data:post.title' expr:id='data:post.url' onmouseover='return addthis_open(this, "", this.id, this.name);' onmouseout='addthis_close()' onclick='return addthis_sendto()'><img src="http://s7.addthis.com/static/btn/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a2504334d304afb"></script></div>
<!-- AddThis Button END -->

2* إضافة من ShareThis و تحتاج الى التسجيل :

- بعد التسجيل انقر فوق 'Enable Sharing 'get the button ومن ثم تتوجه الى صفحة اعداد الاضافة الخاصة بك وفيها خطوتين :

الأولى : فيها يمكنك اختيار اي مواقع النشر التي تريد اضافتها، كيفية ظهورها مع كيفية ظهور الزر .
الثانية : اختيار الخدمة الخاصة بك :
ملاحظة : في الخطوة 2 اختر Any WebSite .

- الآن أضغط على Get Share This Code
* أخيرا:
ستظهر لك صفحة بها الكود الخاص بك قم بإضافته كما أسلفنا في الشرح السابق للإضافة AddThis.

المصدر | مدونة المحررون العرب

...تابع القراءة

طريقة وضع او اضافة عداد للزوار في مدونة بلوجر - زوار المدونة ، المتواجدون الان ، زوار اليوم

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

طبعاً العداد الذي سوف نشرح طريقة تركيبة يتكون من اربع مكونات كالتالي :

1 - اجمالي عدد صفحات التي تم زيارتها - total page visits

2 - اجمالي عدد الزوار الذين زارو مدونتك من تاريخ اضافة العداد - total visitors

3 - اجمالي عدد الزوار هذا اليوم - visitors today

4 - عدد الزوار المتواجدون الان - online visitors


مثال عن العداد انظر الصورة التالية :











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

الخطوة الاولى : قم بزيارة هذا الموقع ( www.histats.com ) ثم قم بالضغط على تسجيل Register من قائمة الموقع فوق ، بعدها ستفتح لك صفحة قم بتعبئة الحقول التي فيها . انظر الصورة رقم 1 :

اضغط على الصورة لتكبر

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

اضغط على الصورة لتكبر

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

اضغط على الصورة لتكبر

الخطوة الرابعة : بعد اختيارك شكل العداد المناسب والضغط على استمرار تفتح صفحة اخرى تريد منك ترتيب عناصر مكونات عدادك في خمسة حقول ولكن هنا نتحدث عن عداد ذو اربعة حقول ، اذاً رتب الحقول الاربعة فقط واضغط على زر استمرار continues والخامس دعه على ماهو عليه . كما هو موضح في الصورة التالية :

اضغط على الصورة لتكبر

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

اضغط على الصورة لتكبر

طريقة وضع اواضافة كود العداد او اي كود آخر في العمود الجانبي للمدونة ( sidebar ) :

1 - افتح لوحة تحكم مدونتك ثم اذهب الى ( تخطيط ) ثم الى ( عناصر الصفحة ) ثم اضغط ( اضافة اداة ) . كما هو موضح في الصورة التالية :

اضغط على الصورة لتكبر

2 - بعد الضغط على اضافة اداة من لوحة التحكم تظهر لنا قائمة صغيرة ( قائمة ادوات بلوجر ) نختار من هذه القائمة الاداة هذه ( HTML /javascript ) نضغط عليها بعدها تفتح لنا تهيئة هذه الاداة نقوم بوضع عنوان لهذا النموذج ليكن مثلا ( احصائيات المدونة ) ثم نقوم بنسخ الكود من الموقع الذي اشتركنا فيه ولصقة في مربع النص الموجود تحت ( اسم النموذج ) ثم نضغط على زر حفظ . واليكم الصورة تغنيك عن الشرح بالخالص :

اضغط على الصورة لتكبر ( قائمة ادوات بلوجر )

اضغط على الصورة لتكبر ( تهيئة html/javascript )

اضغط على الصورة لتكبر ( لوحة التحكم بعد اضافة اداة العداد )

واخيراً نقوم بالضغط على زر حفظ الموجود فوق في لوحة التحكم .



نتيجة شرحنا للموضوع هذا هي انظر للصورة التالية :

اضغط على الصورة لتكبر ( النتيجة بعد الاضافة واظهار العداد في المدونة )

والى اللقاء اخواني الكرام زوار مدونة المحررون العرب في موضوع آخر من مواضيع اضافات وتحسينات مدونات بلوجر
وما عليكم فقط سوى الدعاء لي فيما هو خير ، وتعليقاتكم على الموضوع ،،

المصدر | مدونة المحررون العرب

...تابع القراءة

عداد المواضيع والتعليقات لمدونة بلوجر !!!

بسم الله و الصلاة و السلام على خير خلق الله محمد رسول الله .

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

قم بنسخ الكود :

<script style="text/javascript">
function numberOfPosts(json) {
document.write('عدد المواضيع: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('عدد التعليقات: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<font color="black"><script src="http://arab-editors.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>

<script src="http://arab-editors.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></font>

* اللون لاحمر في الكود : عنوان المدونة المحررون العرب قم بتغييره إلى عنوان مدونتك .

نتمنى لكم التوفيق والنجاح في مدوناتكم
نرجو التعليق على هذا الموضوع

المصدر | مدونة المحررون العرب

...تابع القراءة

كيف تقوم باضافة اداة ( المواضيع الاكثرة قراءة او زيارة ) في مدونة بلوقر ؟

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

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

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

<script language="JavaScript">
aBold = true;
numposts=200;
maxshowresult=5;
home_page = "http://arab-editors.blogspot.com/";
</script>
<script src="http://sites.google.com/site/taliblogsite/file/popularpostblogger-min.txt" type="text/javascript"></script>

يمكنك التعديل على السكريبت واليك بعض الشرح :

numposts= عدد المواضيع التي يقوم باحصائيها والبحث فيها
maxshowresult= اكبر عدد من النتائج المراد ضهورها
home-page = "عنوان مدونتك" وبعده علامة /

ملاحظة : أثناء إضافتك عنوان المدونة لا تنسى إضافة '/' آخر العنوان .

استفساراتكم وتعليقاتكم مرحباً بها ،،،،

مصدر : مدونة الطالب

المصدر | مدونة المحررون العرب

...تابع القراءة

هاك و اضافة "اقرأ المزيد" و عرض المصغرات لمدونات بلوجر Blogger

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

طبعاً هناك العديد و الكثير من المدونين يتساءلون عن طريقة تلقائية لعرض مقتطفات تدويناتهم بشكل تلقائي على الصفحة الرئيسية و تحتها مباشرة رابط "تابع القراءة" أو "اقرأ المزيد" لمتابعة التدوينة كاملة. و لهم نقدم هذه الإضافة المفيدة التي تحسن مظهر المدونة و تجعلها صديقة لمحركات البحث . و تجدر الإشارة أن النسخة المقدمة هنا (و هي نفسها المقدمة في بعض المواقع كـ ـvietwebguide.com ) تمكنك من الحصول على محاذات ميامنة للمصغرات كما هو موضح في الصورة التالية :

(اضغط على الصورة لتكبر بشكل واضح )

--» قبل تحرير القالب يجب حفظ نسخة احتياطية منه لاستعادتها عند الضرورة.

1 - الخطوة الأولى: من باب او قائمة " التخطيط" نختار "تحرير Html" و نوسع القالب عبر وضع علامة صح في المربع الصغير أعلى صندوق التحرير و نبحث عن

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

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 450;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://sites.google.com/site/simoxisite/Home/read-moreotomatis.js' type='text/javascript'/>

او نبحث عن الكود التالي :

<head>

ومباشرة بعدها إي تحتها نضع الكود الموجود أعلاه . ( طبعا هذا للتوضيح يعني إما ( head / ) الثانية او ( head ) الاولى ) في صفحة HTML .

» شرح الألوان:
- الأحمر:  لتعديل طول مقتطف التدوينة التي لا تضم صورا.
- الأزرق : لطول مقتطف التدوينات التي بها صور.
- الأخضر: لتعديل أبعاد المصغرات ( الصور الصغيرة التي تبدو في الرئيسية ).
- البرتقالي: هو رابط ملف الجافاسكريبت يمكن إعادة رفعه و تحرير رابطه.

2 - الخطوة الثانية : نعمل بحث يعني ( Ctrl+F ) عن الكود التالي :
<data:post.body/>


ثم نحدده أي نضلل عليه ثم نستبدله بالكود التالي :

<p><b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> تابع القراءة ....</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>

لجعل الصورة إلى جهة اليسار استبدل right ب left في الكود أعلاه .
و أخيرا احفظ القالب و مبروك عليك اضافة ( اقراء المزيد ) !

أتمني من الله العلي القدير أن الدرس سيفيدكم ويرشدكم عن ضالتكم التي تبحثون عليها ، والى اللقاء في موضوع آخر ،،
استفساراتكم وتعليقاتكم مرحبا بها ،،،

المصدر مدونة ذؤيب

المصدر | مدونة المحررون العرب

...تابع القراءة