الخميس، 23 فبراير 2012

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

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

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

طريقة رفع الصور في موقع العملاق : 

طبعا يا شباب هذا الرابط   http://siahdesign.com/archives/210  لموقع فيه عدة صور جميلة بامكانك ان تختار واحدة منهم ثم انقر بالزر الايمن على الصورة ثم اختر ( حفظ باسم ) واحفظها مثلا في سطح المكتب ، ثم انتقل الى موقع رفع الصور العملاق على الرابط  التالي :  http://www.0zz0.com/  ولمعرفة طريقة رفع الصور في موقع العملاق لاحظ الصورة التالية   :

طريقة اضافة صورة تفصل مواضيع مدونتك في الصفحة الرئيسية
اضغط على الصورة للتكبر

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

1 - ادخل على لوحة تحكم مدونتك .

2 - ثم انقر على قالب - ثم تحرير HTML - ثم متابعة .

3 - ابحث عن هذا الكود (   .post {    )  باستخدام مفتاح ( CTRL+F  ) .

4 - ثم قم بوضع الكود التالي بداخله قبل القوس } :

background: url(http://www6.0zz0.com/2012/02/23/15/427618559.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
* اللون الاحمر : رابط الصورة الفاصلة بين المواضيع . بامكانك ان تختار صورة اخرى تتناسب مع لون  مدونتك ثم تقوم برفعها في اي موقع لرفع الصور مثلاً موقع  http://www.0zz0.com  ثم ضع رابط صورتك مكان الرابط باللون الاحمر في الكود اعلاه  . 
لاحظ الصورة التالية توضح كيف واين تضع الكود في قالب المدونة :


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



5 - قم بمعاينة القالب ثم اعمل حفظ . وحظا سعيدا ،،،

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

الثلاثاء، 21 فبراير 2012

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

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
















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

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

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 الذي باللون الاصفر ) :




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

الأحد، 12 فبراير 2012

كيف تظيف صندوق اعجاب الفيسبوك في مدونتك بشكل انيق ؟

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

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

كيف تظيف صندوق اعجاب الفيسبوك بشكل انيق
مثال : صندوق اعجاب الفيسبوك


والان دعونا نبداء بخطوات : كيفية وضع صندوق اعجاب في المدونة ؟


1 - ادخل على لوحة تحكم المدونة .

2 - ومن لوحة تحكم المدونة انقر على - قالب - ثم تحرير HTML - و من ثم متابعة .

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

4 - قم بالبحث باستخدام المفتاح ( Ctrl + F ) عن الكود التالي :
]]></b:skin>


5 - ثم قم بلصق الكود التالي فوقة مباشرة :

/* ------ Custom Like Box ----- */ .fan_box a:hover{ text-decoration: none; } .fan_box .full_widget{ height: 200px; border: 0 !important; background: none !important; position: relative; } .fan_box .connect_top{ background: none !important; padding: 0 !important; } .fan_box .profileimage, .fan_box .name_block{ display: none; } .fan_box .connect_action{ padding: 0 !important; } .fan_box .connections{ padding: 4px !important; margin:3px 0px 5px 0px!important; border: 0 !important; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #666; } span.total{ color: #365899; font-weight: bold; background:#ECEEF5; padding:4px !important; margin:3px 0px 5px 0px!important; border:1px solid #E1E4ED; -moz-border-radius:3px; -webkit-border-radius:3px; } span.total:hover{ border:1px solid #6383C1; } .fan_box .connections .connections_grid { padding-top: 10px !important; } .fan_box .connections_grid .grid_item{ padding: 0 10px 10px 0 !important; } .fan_box .connections_grid .grid_item .name{ font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-weight: normal; color: #289728 !important; padding-top: 1px !important; } .fan_box .connect_widget{ position: absolute; bottom: 0; left: 0px; margin: 0 !important; } .fan_box .connect_widget .connect_widget_interactive_area { margin: 0 !important; } .fan_box .connect_widget td.connect_widget_vertical_center { padding: 0 !important; } /*--------------- Custom Like Box End--------------*/

* ملاحظة : في حالة اذا اردت ان تغير لون اسم البروفايل من اللون الاخضر الى لون آخر قم بتغيير الرقم الذي باللون الاحمر في الكود = 289728 .

6 - من قائمة التخطيط قم  بالنقر على اضافة اداة الموجودة في العمود الجانبي ( السايد بار ) مثلا ، ثم من قائمة الادوات اختر اداة  HTML / Java Script  .

7 - قم بنسخ الكود التالي باستخدام مفتاح ( Ctrl + F ) ولصقة في اداة  HTML / Java Script   .

<style> #mbtlikebox{ color: #365899; font: bold 11px arial; background:#ECEEF5; padding:3px !important; margin:5px 0px!important; border:1px solid #E1E4ED; -moz-border-radius:3px; -webkit-border-radius:3px; width:290px; } #mbtlikebox:hover{ border:1px solid #6383C1; } </style> <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script> <script type="text/javascript">FB.init("");</script> <fb:fan profile_id="128605887189860" stream="0" connections="8" width="300px" height="200px" header="0" logobar="0" css="https://sites.google.com/site/3alymni/css/3.css"></fb:fan> <div id="mbtlikebox"><a rel="nofollow" target="_blank" style="text-decoration:none; color:#365899;" href="http://arab-editors.blogspot.com/">Visit the Like Page »</a></div>


* اللون الاحمر : هو رقم ID الخاص بصفحتك على الفيسبوك قم باستبدالة برقم ID صفحتك . لاحظ الصورة التالية :

ككيف تعمل صندوق اعجاب الفيسبوك في المدونة

* اللون الازرق : هو عبارة عن عرض صندوق الفيسبوك قم بتغيره ليتناسب مع مدونتك .
* اللون البرتقالي : عبارة عن ارتفاع صندوق الفيسبوك  بامكانك تغييرة كما تشاء .
* اللون الوردي :  ظروري .... قم باستبدالة برابط مدونتك او موقعك .


8 - واخير قم بعمل حفظ للاداة ومبرووووووك على الاظافة الجديدة .

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

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

الأحد، 5 فبراير 2012

كيف تنسق محاذاة مواضيع المدونة في الصفحة الرئيسية ؟

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

قبل تنسيق المحاذاة 

كيف تنسق محاذاة نصوص الصفحة الرئيسية لمدونات بلوجر
الصورة قبل تنسيق المحاذاة

بعد تنسيق المحاذاة 

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





















اذاً بعد مشاهدة الصور اعلاة وتوضيح الفكرة دعونا نبداء بشرح الخطوات : 

1 - ادخل على لوحة تحكم المدونة .

2 - ومن لوحة التحكم قم باختيار : قالب - تحرير HTML - متابعة . ( بعد قيامك بحفظ نسخة احتياطية لقالب مدونتك )

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

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

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
ملاحظة : غالباً الكود الافتراضي في المدونة يكون كما هو موضح في الصورة التالية :




5 - قم بنسخ الكود التالي ولصقة في الاخير قبل القوس :
text-align:justify;
ليصبح الكود كالتالي :
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
text-align:justify;
}
ملاحظة : باختصار انسخ الكود الاخير هذا مباشرة وقم بلصقة في مدونتك بالكامل بين القوسين اي استبدلة مكان الكود الافتراضي الموجود في الصورة اعلاة ، بس انتبه تكرر القوسين .

6- ثم قم بمعاينة الصفحة للتاكد ثم اعمل حفظ . ومبروووووووك عليك وحظاً سعيداً ،،

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

الأربعاء، 1 فبراير 2012

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

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

'طريقة توسيع عرض ارشيف المدونة
الصورة رقم ( 1 ) توضح الاشكال الثلاثة للارشيف



















كيف توسع عرض ارشيف المدونة بنمط القائمة المنسدلة
الصورة رقم ( 2 ) توضح عرض الارشف قبل التوسيع (الافتراضي ) 



















طريقة توسيع عرض ارشيف المدونة بنمط القائمة المنسدلة
الصورة رقم (3 ) توضح عرض ارشيف المدونة بعد توسيعة




















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

والان اسمحولي ان ابدا بالخطوات :  ( قم بعمل حفظ نسخة احتياطية لقالب مدونتك  ) 

1 - ادخل على لوحة تحكم المدونة .

2 - من من لوحة التحكم انقر على ( قالب ) ثم ( تحرير HTML ) ثم متابعة .

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


4 - ابحث على الكود التالي وذلك بواسطة مفتاح البحث  ( Ctrl - F ) :

<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>

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

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


















5 - قم بمسح الكود اعلاه خطوة ( 4 ) ثم استبدلة بالكود التالي :

<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;' style='width:100%'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>

ليصبح كما في الصورة التالية :

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

















6 - اعمل معاينة ( Preview ) للمدونة للتأكد من تطبيق العملية ثم قم بعمل حفظ ( Save ) .

* طبعا في الحقيقة الكودين في الشرح اعلاة خطوة 4 + 5 متشابهان ، فقط غيرنا جزءبسط جدا وهو اظافة الكود الذي يشير باللون الاحمر style='width:100%'  في كود خطوة رقم 5 تغيير نسبة العرض الى 100% ....

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

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

كيف تربط مواضيع مدونتك او موقعك على الفيسبوك ؟ - ربط المدونة بالفيسبوك

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

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

طريقة انشاء صفحة على الفيسبوك
اضغط للتكبير

والان دعونا نبداء بشرح عملية ربط المدونة او الموقع والمنتدى بالفيسبوك على خطوة خطوة بالصور :

1 - قم بالدخول على صفحتك او حسابك في الفيسبوك او قم بانشاء صفحة جديدة باسم مدونتك ثم انقر على الرابط التالي :

http://apps.facebook.com/rssgraffiti/?ref=bookmarks&count=0

2 - بعد انقر على الرابط  اعلاه تظهر صفحة تطلب منك ترخيص الخدمة كما هو موضح في الصورة التالية :


كيف تربط خدمة تغذية المدونة على الفيسبوك
اضغط للتكبير























3 - تضهر صفحة اخرى تطلب السماح بطلب اذن لاحظ الصورة التالية :

كيف تربط مدونتك او موقع على الفيسبوك
اضغط لصورة للتكبير




















4 - في هذا الخطوة يطلب منك اضافة تغذية جديدة قم بالنقر على زر Add feed كما هو موضح في الصورة التالية :

طريقة ربط مواضيع المدونة او الموقع بموقع الفيسبوك














5 - في هذه الخطوة اولا هل انت مفعل خدمة التغذية في مدونتك او لا ؟ اذا انت مفعل خدمة RSS ( خدمة التغذية ) هنا يطلب منك وضع رابط تغذية مدونتك او موقع او منتداك ثم عنوان المدونة ثم رابط المدونة لاحظ الصورة التالية :


طريقة ربط خدمة تغذية الموقع بصفحة على الفيسبوك























6 - واخيرا قم بالنقر على زر حفظ ( Save )  . ثم قم بنشر مواضيع جديدة في مدونتك للتاكد من ربط المدونة لان المواضيع القديم لا تظهر على صفحتك في الفيسبوك  . ومبرووووووووووك عليك ربط المدونة .

وصلو على رسووووووول الله واي سؤال او استفسار نرجو التعليق ،،،

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

الثلاثاء، 17 يناير 2012

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

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



اذاً دعونا نبدا على خطوة خطوة - Step by step :

1 - ادخل على حسابك في بلوجر .

2 - من لوحة التحكم انقر من القائمة على ( قالب ) ثم ( تحرير HTML ) ثم متابعة .

3 - كاجراء احتياطي نرجو عمل نسخة احتياطية لقالب المدونة قبل اجراء اي عمل .

4 - قم بوضع علامة صح على توسيع قوالب عناصر صفحة المستخدم .

5 - قم بالبحث عن الكود التالي بواسطة مفتاح ( Ctrl + F ) . طبعا هذا الكود بعد <body> مباشرة .

<div id='outer-wrapper'>
لاحظ الصورة :

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


6 - انسخ الكود التالي وضعه تحته مباشرة .

<div id='topads-wrapper'>
<b:section class='topads' id='topads' preferred='yes'/>
</div>

لاحظ الصورة :

اضافة كود البنرات الاعلانية

7 - قم بالبحث عن الكود التالي :
]]></b:skin>
8 - ثم ضع هذا الكود فوقه مباشرة :

/* Top Ads
----------------------------------------------- */
#topads-wrapper {
margin: 0;
padding: 0;
position: relative;
text-align: center;
width: 100%;
}

#topads {margin: 0; padding: 0;}

#topads .widget {margin: 0; padding: 5px 0;}

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

لاحظ الصورة :

اضافة الكود نمرة 7










9 - قم بعمل حفظ للقالب ثم توجه او انقر على تخطيط .

10 - بعد النقر على تخطيط سنشاهد عنصر جديد اي مربع جديد باسم ( اضافة اداة ) انشئ فوق الهيدر وتحت Navbar مباشرة .
لاحظ الصورة :



النتيجة النهائية 



















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




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

ملاحــــــظة مهمة : بعض المدونات لا يوجد فيها نفس الكود خطوة رقم 5 بل يوجد بها كود مشابه له او بطريقة اخرى ولكن علشان تعرف مكان وجود كود خطوة رقم 5 او الكون المشابه له قم بالبحث عن هذا الكود  </head>  تلاقيه تحته مباشرة اي بعد البدي لاحظ صورة الكود في خطوة رقم 5  . طبعا لدي مدونة اخرى عندما بحثت لم اجد نفس كود نمرة5 تماماً، فبحثت عن الكود التالي  </head> ثم نظرت تحته فوجدت الكود كالصورة التالية  :













بعدها قمت باضافة الكود خطوة رقم 6 حتى اصبح مثل الصورة التالية :


















واخيرا نرحب بتعليقاتكم واي سؤال او استفسار نحن مستعدين للاجابة
...تابع القراءة

الخميس، 12 يناير 2012

تعلم كيف تظيف قائمة اخر مواضيع المدونة مع عرض صور مصغرة ؟

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

كيفية اظافة اخر مواضيع المدونة
قائمة آخر المواضيع

اذاً ، دعونا نبدا بشرح الخطوات :

1 - ادخل على حسابك في بلوجر . 


2 - من لوحة تحكم المدونة انقر من القائمة على ( تخطيط  ) ثم ( اضافة اداة ) كما هو موضح في الصورة التالية :

طريقة اخر مواضع المدونة مع صور مصغرة
لوحة تحكم المدونة

3 - قم باختيار اداة  HTML/Java Script كما هو موضح في الصورة التالي : 


قائمة الادوات 
4 - قم بنسخ ولصق الكود التالي  في الاداة : 




<div class="pipesContainer">
<script src="http://pipes.yahoo.com/js/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list","pipe_params":{"URL":"http://www.yourblog.blogspot.com/feeds/posts/default"},"hideHeader":"false","height":"auto","count": 8 }</script>
<div style="font-family: arial, trebuchet; font-size: 9px;">link <a href="http://arab-editors.blogspot.com">Recent Posts Thumbnails</a> by <a href=" http://arab-editors.blogspot.com/search/label/%D8%A7%D8%AF%D9%88%D8%A7%D8%AA%20%D9%88%D8%A7%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1 ">Blogger Widgets</a> </div> <noscript>Your browser does not support JavaScript!</noscript>
<style type=text/css>
.pipesContainer {
margin:10px 0 10px 0;
padding:0px;
background:none;
}
.pipesHolder {
padding: 0px!important;
margin:10px 0px!important;
}
.pipesTitle {
padding-top:0px!important;
line-height:14px;
font-weight:bold!important;
}
/*.pipesDescription,*/
.pipesSmallthumb {
display:none!important;
}
.pipesThumbnail img {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIhOitNP3qck5kI8W-N9rxxealxxPkWrOase6sxgGKu-8O94DKsFNP1n5ceOE2d3cmQmznCYkBLANjXV959y0npKw61P3djba6TgxCREF8mr2Awtx1HEwTrHOrWTovBdKMKIVUTxXF8uI/s400/bloggerlogo-4.png) no-repeat top center;
border: none!important;
height:auto!important;
width:72px!important;
}
.yba,.ybf {display:none!important;}
.ygt {margin-top:10px;margin-bottom:10px;font-size:9px;float:left;}
.ybr li {background-color: transparent!important; padding:0px!important;}
</style></div>

توضيح على الكود :

* قم بوضع رابط مدونتك او موقعك مكان اللون الاحمر في الكود اعلاه ،

* اللون الوردي : = 8 يشير الى عدد المواضيع ( العناوين ) الذي تريدهم يظهرون ، هنا عددهم الافتراضي في الكود  = 8 بامكانك تخفيض العدد الى 6 او 5 او اقل على رغبتك .

 5 - واخيرا قم بعمل حفظ للاداة . وصلى الله وسلم على رسولنا الكريم ،،،



تعليقاتكم تهمنا ،، وزيارتكم تسرنا 
...تابع القراءة

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

الطريقة الثانية : كيفية انشاء ووضع جدول في محتوى تدوينة بلوجر ؟

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

دعونا نبدا بالخطوات :

1 - افتح برنامج الورد (MS Word) وقم بعمل ادراج جدول فيه حسب رغبتك من ناحية عدد الصفوف والاعمدة وتنسيق الجدول من ناحية الحدود وحتى كتابة البيانات بداخلة واي شي آخر .

2 - اضغط على قائمة ( ملف Manual ) من نفس برنامج الورد ثم اختار ( حفظ باسم save as )  .

3 - بعد عملية ( حفظ باسم save as ) تظهر قائمة تحدد فيها مكان الحفظ واسم الملف ونوع الملف ، اختار حفظ بنوع ( Web Page ) كما هو موصح في الصورة التالية :



4 - بعد حفظ الملف كنوع ( Web Page ) قم بفتح الملف بواسطة برنامج محرر النص ( Notepad ) او برنامج ( Edit Plus ) فيظهر كود الجدول.

5 - قم بنسخ الكود بالكامل ومن ثم قم بلصقة في محرر نصوص مدونتك بداخل تبويب ( HTML ) . او انسخ  جزء من الكود الذي يبداء بوسم ( <table> ) وينتهي بـ  (  </table> ) .

6 -  واخيرا قم بعمل حفظ لجدولك ومبرووووووووك ،،،



تعليقاتكم تهمنــــــــــــا وزيارتكم تســــــــــرنا 


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