كيف تضيف أكواد HTML إلى تدويناتك

بسم الله الرحمن الرحيم

 

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

 

 

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

 

كالعادة قم بالذهاب لتحرير القالب

ثم إبحث عن الوسم التالي عن طريق الزرين Ctrl+F

]]></b:skin> 

 

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

.rtcv {
margin : 15px 35px 15px 15px;
padding : 20px 10px 10px 35px;
background : #EEEEEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEcumo1PFJ-lH8Y1jdiWA89sG_Lg8At1rsA_dXY1k0qtCydv8l_DdZYOBnrTzbtbKMxJ1e8R2LPXY3uOe_D6COzwZHQS7yHTSFGRBGPrlZm7O8KOl2A_8LRhPDe8YlkS3YIPxDcdSgnbw/s1600/Html+code.gif) repeat-y top left;
border-top : 1px solid #AAAAAA;
border-right : 1px solid #AAAAAA;
border-bottom : 1px solid #AAAAAA;
border-left : 1px solid #AAAAAA;
}

 

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

<div class="rtcv">
HTML Code Here
</div>

 

و بهذا سيظهر الكود بشكل جميل على المدونة. أتمنى أن يفيدك الموضوع.

 

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

+

تعديل رسالة الإشتراك في خدمة RSS

بسم الله الرحمن الرحيم

 

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

فعادة تصل الرسالة باللغة الإنجليزية. لكن إذا كانت مدونتك باللغة العربية فمن الأفظل أن تصل الرسالة باللغة العربية لأن هذا ينعكس على لغة مدونتك.

 

  الرسالة الأصلية تكون بهذا الشكل

 

أما الرسالة المعدلة فتكون بهذا الشكل

 

إذا كيف أقوم بتعديل الرسالة؟

الأمر بسيط للغاية كل ما عليك فعله هو التوجه لموقع feedburner و اتبع الصورة بالأسفل.

 

بعد ذالك قم بالضغط على زر Save لحفظ التعديلات.

 

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

أتمنى أن يكون الموضوع قد نال إعجابك. تحياتي و إلى اللقاء في موضوع أخر.

+

زر Twitter جميل و أنيق

بسم الله الرحمن الرحيم

 

في هذه التدوينة السريعة ساقدم لك إضافة جميلة لزر Twitter تضفي جمالية على ندونتك.

 

 

 

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

 

لتركيب الإضافة إتبع التالي:

 

- توجه للوحة التحكم / قالب / تحرير القالب

 

- بعد ذالك إبحث عن الوسم التالي

</head>

- ثم أضف الكود فوقه مباشرة

<!--TWITTER-FOLLOW-ME-STARTS-->
<style type='text/css'>
.feedbacktw {
width: 31px;
height: 116px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjik6_MBeKLH_koj_VX-tmq3YiDPFYdX8zlOtor0MPN6Sfa7f6Xgh_pv4OfgZ2yFEdATSQnSg2zzOEwJ780FY_VjOX7IUcrHUrWWHknP8rle5YH-AfZvwVkn6CXb2Lt-N5wjiDWADYoh8TI/s1600/twitter.png);
position:fixed;
top:20%;
right:2px;
}
.feedbacktw:hover {
width: 31px;
height: 116px;
display: block;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjik6_MBeKLH_koj_VX-tmq3YiDPFYdX8zlOtor0MPN6Sfa7f6Xgh_pv4OfgZ2yFEdATSQnSg2zzOEwJ780FY_VjOX7IUcrHUrWWHknP8rle5YH-AfZvwVkn6CXb2Lt-N5wjiDWADYoh8TI/s1600/twitter.png);
position:fixed;
top:20%;
right:10px;
}
</style>
<!--TWITTER-FOLLOW-ME-STOPS-Widget-by-http://widget-blogs.blogspot.com—>

- الأن قم بحفظ القالب

- توجه الأن إلى تخطيط / إضافة أداة

 

- ثم قم بإضافة الكود التالي لتنهي المهمة

<!--FOLLOW-ME-STARTS--><a style="display:scroll;" href="http://twitter.com/your profile" class="feedbacktw"> </a><!--FOLLOW-ME-STOPS—>

قم بتغير ما هو باللون الأحمر بإسمك على موقع Twitter. 

 

أتمنى أن يكون الموضوع نال إعجابكم.

+

إضافة زر Back top Button

بسم الله الرحمن الرحيم

 

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

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

أتركك مع الشرح فهو جد بسيط

 

توجه إلى لوحة التحكم / تخطيط / إضافة أداة / Html/JavaScript

 

  

بعد ذالك قم بنسخ الكود بالأسفل و ضعه في المربع المخصص للكود

<!--BACK2TOP-STARTS-->
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJjEW5Ow2jqqaqyintOMgW-i-WBJLqEQqAwA8b4UNQC8lKv1K6CSquPwsQxyEUNLtK1lYBf83qCkwarFIsOV-NzcMLhY2prJ-4H_zAGj9Skhy91bCsrpIn9mSfX_7lcTHxvlUNuCYrkeA/s1600/up+b.png" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXre9GoaigpfLUo6OulTA1WXAIhowxA8Tg61l6RNG0L4Hh2JodI4a1FITaTOd-eXriRcmpW9q56ziEoSM2p8YCM3HRCfTqS2Yxw34BCjZovSOKMREdr0l3y1_cPSAG92BYL4HkjoJwhMc/s1600/up+s.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXre9GoaigpfLUo6OulTA1WXAIhowxA8Tg61l6RNG0L4Hh2JodI4a1FITaTOd-eXriRcmpW9q56ziEoSM2p8YCM3HRCfTqS2Yxw34BCjZovSOKMREdr0l3y1_cPSAG92BYL4HkjoJwhMc/s1600/up+s.png'"/></a>
<!--BACK2TOP-STOPS—>

 

ثم قم بحفظ الأداة ستجد الإضافة على أسفل اليمين في المدونة.

 

يمكنك تغير الصورة بالصورة التي تريد ما عليك سوى تغير الرابط بالأحمر برابط الصورة الأكبر ثم تغير الرابطين باللون الأزرق بصورة الأصغر.

 

أتمنى أن تكون الإضافة نالت إعجابك.

+

كيف تنسخ أيقونة Favicon من أي موقع

بسم الله الرحمن الرحيم

 

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

 

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

 

سنأخد مثال لمدونتي إن أردت نسخ ال Favicon الخاصة بي.

 

1- قم بنسخ عنوان المدونة اللتي هنا سيكون العنوان http://widget-blogs.blogspot.com

2- إذهب إلى هذا الموقع  getfavicon

3- أدخل رابط المدونة في الخانة الموضحة في الأسفل

4- الأن ستجد ال Favicon مع الرابط الخاص بها

5- قم الأن بنسخ الرابط عن طريق زر الماوس الأيمن و أضفها لمدونتك.

 

كيف تقوم بإضافة ال Favicon لمدونتك

 

الأن نريد أن نضع ال Favicon في المدونة فكيف ذالك؟ هناك عدة طرق لكننا سنشرح أسهلها.

 

1- توجه إلى لوحة التحكم / تصميم / تحرير HTML

2- إبحث عن الوسم التالي:

<head>

3- ألصق الكود أسفل الوسم مباشرة

<link href=' FAVICON IMAGE URL ' rel='shortcut icon'/>

4- أضف رابط ال Favicon مكان الكلام باللون الأحمر.

5- الأنقم بحفظ القالب

ما رأيك هل شاهدة Favicon من قبل و أعجبتك؟

إن قمت بتطبيق الدرس دعنى نعرف ذالك بإضافة ردك في الأسفل.

+

تكبير الصور بتقنية jQuery

بسم الله الرحمن الرحيم

 

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

 

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

 

و لتطبيق الإضافة في مدونتك إتبع الشرح.

 

1- توجه للوحة تحكم المدونة

 

2- إبحث عن الوسم التالي عن طريق الزرين Ctrl+F

]]></b:skin>

3- ألصق الكود بالأسفل فوقه تماما

#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:50%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

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

 

4- الأن إبحث عن الوسم

</head>

5- بعد ذالك قم بلصق الكود التالي فوقه

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://spiceupyourblogextras.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
$(&#39;a.zoom&#39;).each(function(i) {
$(this).easyZoom();
});
});
</script>

6- قم الأن بحفظ القالب، ثم إضافة أكواد CSS و jQuery  ما عليك الأن سوى إضافة الصور لذا تابع.

 

إضافة الصور لمواضيعك

 

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

 

أضف الكود التالي لتدويناتك و غير الرابط الملون برابط الصورة التي تريد تكبيرها.

<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" Your-Image-Url" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="Your-Image-Url" width="320" /></a></div>

بهذا نكون قد إنتهينا من هذه الإضافة أتمنى أن تنال إعجابك.

+

أنشئ خريطة للأماكن التي يقوم زوارك بالضغط فيها Create a Heatmap

بسم الله الرحمن الرحيم

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

مهمة اليوم الثالث عشر من خطة 31 يوم لإنشاء مدونة إحترافية و ناجحة هي إنشاء خريطة للأماكن التي يقوم زوار مدونتك بالضغط عليها heatmap.

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

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

كل ما عليك فعله هو وضع كود JavaScripts في الصفحة التي تريد أن تنشئ لها heatmap و الأداة ستقوم بباقي العمل عنك. و هذه صورة لموقع قام بعمل heatmap.

 

 

في الصورة يقوم بإظهار العديد من النقط في أعلى الصفحة على الجهة اليمنى و عدة أماكن أخرى، و من بين الأدوات التي يقدمها CrazyEgg أداة تسمى «Confetti» ( الصورة بالأسفل ) فهي تقوم بتحديد المكان اللذي يضغط عليه الزوار بالضبط و تقوم بتحليله من عدة أوجه. في الصورة التالية تحدد لنا الأداة عدد من الألوان و كل لون يحدد مصدر مختلف من مصادر الزوار.

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

 

 

إذا لماذا تريد هذا النوع من المعلومات؟

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

هذه بعض الطرق التي تمكنك من إستغلال هذه المعلومات.

تموضع الإعلانات – CrazyEgg يمكنك من تتبع إعلانات Adsense، تستطيع معرفة الإعلانات التي تحصل على أعلى نسبة من النقرات، أو الأماكن المناسبة لتضع بها إعلاناتك .

تجربة التصميم – يمكنك معرفة أي التصاميم مناسبة لمدونتك بان تقوم باختبار التصميم القديم مع الجديد و ترى الفرق بينهما و الأماكن التي تحصل على أعلى عدد من النقرات، و بهذا ستحدد إختيارك في تغير القالب أم لا.

تحليل القراء – أن تكون قادر على معرفة ما يفعله زوارك على اختلاف مصادرهم هو أمر جيد.

القائمة مازالت طويلة و عند إستخدامك ل CrazyEgg ستتعرف على المزيد من المزايا التي سيوفرها لك.

في انتظار ردك و إقتراحاتك ( أو إن كانت لديك طرق أخرى غير التي ذكرناها فيسرنا أن تشاركنا خبرتك و تجاربك) تقبل سلامي الحار.

+

فن التعامل مع المنتديات Art / Forums

بسم الله الرحمن الرحيم

 

 

كما و عدتك أخي أختي الكريمة في موضوع سابق من سلسلة النصائح الخاصة بإحتراف التدوين 31 يوم لإنشاء مدونة إحترافية.

 

و هو أننا سنقوم بوضع سلسلة جديدة مكونة من 27 درس لإحتراف فن التعامل مع المنتديات، و الجميع يعرف أهمية المنتديات في جلب زوار حقيقين للمواقع و المدونات، و هذا أمر يسعى ورائه المحترف قبل المبتدء.

 

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

 

و الدروس التي سنتطرق لها إن شاء الله هي:

 

1. لا تقم أبدا بالإعلان في المنتديات
2. إختر دائما المنتديات التي تسمح بوضع روابط
3. إختر المنتديات التي تسمح بوضع رابط في الإمضاء
4. إختر المنتديات التي بها أعضاء تفوق 2000
5. إختر دائما المنتديات المتخصصة و ليس العامة
6. لا تضيع وقتك في المنتديات الغير نشيطة
7. لا تضع رابط لمدونتك في الإمضاء إلا بعد كتابة 50 موضوع
8. لا تضع أكثر من رابط في إمضائك
9. إقراء عدد لابأس به من مواضيع المنتدى قبل أن تنشر موضوعك
10. ضع قائمة بال 10 أعضاء النشيطين في كل منتدى تزوره
11. إهتم بمتابعة مواقع أعضاء المنتدى
12. إختر إسم دخولك للمنتدى بعناية و لا تغيره من منتدى لأخر
13. ضع رابط مدونتك و بريدك في صفحتك التعريفية بالمنتدى
14. إختر صورة Avatar بعناية شديدة
15. قم بتنشيط خاصية الرد التلقائي عند الرد على مواضيعك
16. ضع لائحة بالأسماء المشترك بها في المنتديات
17. تعلم إستعمال خاصية “البحث” في المنتديات
18. إقتنص المواضيع التي تحتاج للإجابة عن سؤال
19. حافظ على وتيرة تابثة لنشر مواضيعك في المنتديات
20. ضع رد على مواضيع الأعضاء الجدد
21. تجنب تأجيج الجدل في المنتديات
22. كن دائما لطيف و مهذب في ردودك
23. ضع بعض الإبتسامات في موضوعك، لكن لا تكثر
24. لا تنشر المواضيع لنشر فقط أو لشيء لست متأكد منه
25. فكر في قراء مواضيعك
26. أكتب مواضيعك بطريقة صحيحة
27. إختر عنوان الموضوع بعناية

 

هذه هي النقاط التي سنتطرق لها إن شاء الله بالشرح و التطبيق، فالموضوع سيتكون من شقين الأول لشرح الدرس و الثاني لتطبيق الشرح أي سيكون نظري و عملي في نفس الوقت.

 

و بعد ذالك ستصبح من محترفي فن التعامل مع المنتديات و ستحصل على العدد اللذي تريده من الزوار، عشرات / مئات / ألاف / كل هذا حسب جهدك المبدول في فهم و تطبيق الدروس و النصائح.

 

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

 

 

تحياتي لك و وفقك الله لما يرضاه.

+

إضافة صورة تهنئة بحلول شهر رمضان الكريم floating image

بسم الله الرحمن الرحيم

 

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

 

 

 

و هي هدية بمناسبة قرب حلول شهر رمضان الكريم أعاده الله علينا بالخير إن شاء الله. يمكنك معاينة الإضافة من هنا.

 

لكي لا أطيل عليك أتركك مع طريقة تركيب الإضافة.

 

توجه إلى تحرير HTML و ابحث عن الكون عن طريق الزرين Ctrl+F (لمعرفة المزيد عن طريقة البحث)

 

 

 

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

 

</head>

بعد ذالك قم بلصق الكود التالي فوقه مباشرة

 

<script type='text/javascript'>
//<![CDATA[
var ftr_arr = new Array();
var ftr_clear = new Array();
function ftrFloat(ftr) {
ftr_arr[ftr_arr.length] = this;
var ftrpointer = eval(ftr_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.ftrsrc = document.all? document.all[ftr] : document.getElementById(ftr);
this.ftrsrc.height = this.ftrsrc.offsetHeight;
this.ftrheight = this.cmode.clientHeight;
this.ftroffset = ftrGetOffsetY(ftr_arr[ftrpointer]);
var ftrbar = 'ftr_clear['+ftrpointer+'] = setInterval("ftrFloatInit(ftr_arr['+ftrpointer+'])",1);';
ftrbar = ftrbar;
eval(ftrbar);
}
function ftrGetOffsetY(ftr) {
var ftrTotOffset = parseInt(ftr.mtasrc.offsetTop);
var parentOffset = ftr.ftrsrc.offsetParent;
while ( parentOffset != null ) {
ftrTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return ftrTotOffset;
}
function ftrFloatInit(ftr) {
ftr.pagetop = ftr.cmode.scrollTop;
ftr.ftrsrc.style.top = ftr.pagetop - ftr.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("ftr_imagen").style.visibility = "hidden";
}
//]]>
</script>

 

الأن قم بالبحث عن الوسم التالي:

 

</body>

بعد ذالك قم بلصق الكود الثاني فوقه مباشرة

 

<div id='ftr_imagen'>
<img border='0' class='close' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfZ39AI4CacPh7OedBfzhC5HfVQB_tV2nu8VjfnnCR_YDgVPKfBq8CZNGTwpgSRAGwnuZRkGT57WfejU4W9bLIDZM7_E8yO6SZkjnq2o2vkl6-Giuh4_yuUvzRlIjJ43n5PE4yG5kO0Gg/s200/iconClose.gif'/>
</div>

 

بعد ذالك قم بالبحث عن الوسم الأخير

 

]]></b:skin>

الأن قم بلصق الكود الأخير قبله مباشرة

 

#ftr_imagen {
background: url(URL YOUR IMAGE) no-repeat;
bottom: 0px;
right: 0px;
width: 128px;
height: 128px;
position: fixed;
}
.close {
float: right;
padding-right: 10px;
cursor: hand;
cursor: pointer;
}

 

أضف رابط الصورة في مكان URL YOUR IMAGE يجب أن تكون الصورة بنفس المقاس الموجود بالكود لكي تظهر كاملة كما يمكنك التغير في قيم الطول و العرض كما تشاء.

 

تحياتي لك

+

ضع المواضيع الأكثر زيارة في الصفحة الرئيسية Popular Posts

بسم الله الرحمن الرحيم

 

مهمة اليوم الثالث عشر من خطة 31 يوم لإنشاء مدونة إحترافية و ناجحة هي وضع المواضيع الأكثر زيارة في صفحتك الرئيسية.

 

 

 

 

 

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

 

فهي تساعدك من عدة نواحي :

 

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

 

و لكي تضيف هذه الإضافات يمكنك زيارة لمواضيع التالية:

إضافة المواضيع الأكثر مشاهدة تجدها ضمن إضافات بلوغر الموجودة في مدونتك
إضافة مواضيع عشوائية لمدونتك
إضافة جديد المواضيع بطريقة متحركة

 

  في انتظار ردك و إقتراحاتك ( أو إن كانت لديك طرق أخرى غير التي ذكرناها فيسرنا أن تشاركنا خبرتك و تجاربك) تقبل سلامي الحار.

+

إضافة المواضيع الأكثر قراءة Popular Posts

بسم الله الرحمن الرحيم

 

 

اليوم سنقوم بشرح إضافة مهمة لكل مدون، و هي إضافة المواضيع الأكثر قراءة Popular Posts. كنا سابقا قد أدرجنا إضافة مواضيع عشوائية و هي شبيهة لحد ما من إضافة Popular Posts، فهي تظهر مواضيع المدونة بشكل عشوائي أما إضافة اليوم تظهر المواضيع الأكثر قراءة في المدونة.

 

 

 

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

 

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

 

لإضافة Popular Posts لن نحتاج لأكواد أو غير ذالك فالإضافة موجودة في موقع Blogger و لإضافتها تابع الشرح.

 

 

توجه إلى لوحة تحكم المدونة / تخطيط / تصميم / إضافة أداة.

 

 

 

 

الأن قم بحفظ الإضافة و يمكنك معاينة الإضافة هنا في المدونة بالأسفل.

 

سلام

+

حلل المدونات المنافسة لمدونتك Analyze Competition

بسم الله الرحمن الرحيم

 

مهمة اليوم الثالث عشر من خطة 31 يوم لإنشاء مدونة إحترافية و ناجحة هي عمل تحليل للمدونات المنافسة.

 

 

 

 

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

 

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

 

أسمعك تقول و لما كل هذا الإهتمام بالتحليل؟ معك حق تابع الموضوع لتعرف هذه الأهمية و التي ستفيدك أيما إستفادة.

 

1. أنشئ لائحة ب 10 مدونات تكتب في نفس تخصص مدونتك.
2. شارك في خدمة القوائم البريدية لهذه المدونات و إلتزم بمتابعة جديدها باستمرار.
3. قم بعمل تحليل لكل مدونة على حدة و ذالك بطرح الأسئلة التالية :

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

 

 

 لماذا عليك طرح كل هذه الأسئلة؟

 

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

 

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

 

في انتظار ردك و إقتراحاتك ( أو إن كانت لديك طرق أخرى غير التي ذكرناها فيسرنا أن تشاركنا خبرتك و تجاربك) تقبل سلامي الحار.

+

صندوق عائم للإشتراك في خدمة RSS

 

بسم الله الرحمن الرحيم

 

 

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

 

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

 

 

و لكي لا أطيل عليك أتركك مع معاينة الإضافة و طريقة تركيب الإضافة.

 

 

لتركيب الإضافة يجب عليك التوجه لموقع feedburner و تفعيل خدمة الإشتراك البريدي إن لم تكن قد فعلتها من قبل، و لفعل ذالك يمكنك تتبع الصورة بالأسفل.

 

 

بعد ذالك توجه للوحة تحكم المدونة / تصميم / تحرير HTML / ثم Ctrl+F للبحث عن الكود التالي (لمعرفة المزيد)

 

</head>

بعد أن تجد الوسم قم بإلصاق الكود التالي فوقه مباشرة

 

<style type='text/css'>
#anuncio {
position:absolute;
padding: 2px;
padding-top: 15px;
width: 280px; /* عرض الإضافة*/
visibility: hidden;
z-index: 200;
top: 30px;
left: 30px;
}
#rss-mail {
/* لون الخلفية و الصورة*/
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDp3UVqiVwSLibyihLg8EG3qZW5pYvLfpFIZVaUZwFRpFFyJouFhhff3QH-0gW0vI_kJcvWZulaKz18WKDrTPGA8vXcNC8X4pTyzn6n7MDzbUUy9XP_z9-n-NiBYol3aRD9TXScvLQQ7A/s320/pattern_blk_point.png);
border:2px solid #FF8000; /* الحواف */
height:70px; /* إرتفاع الإضافة*/
}
#rss-mail span {
color:#FFFFFF; /* لون النص */
font-size:12px;
font-weight:bold;
line-height:30px;
}
#rss-submit {
background:#FF8000; /* لون الزر*/
border:0px;
}
.rss-box {
height:13px;
margin-top:10px;
color:#6E6E6E;
font-size:12px;
width:135px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 15 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("anuncio").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("anuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>

 

 

بعد ذالك إبحث عن الوسم

 

</body>

 

بعد ذالك ألصق الكود التالي قبله

 

<div id='anuncio'>
<div id='rss-mail'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvZlBzXkcpoJnvz2K63X4-q1D1rrjdw9dMka0tmTD8a9VQMeQq2r4BXUB3M0XNXeeGTIPzLulQ5u4EKWRJGtxI7htamdCCZlsPaFUFDfBv2lpOJlNatytmIAP0EuLO04l6RKQl6ohurS0/s320/cerrar.png'/></a>
<span>أحصل على جديد المدونة مباشرة على بريدك الإلكتروني</span><br/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt7DdsOQfbBRAgSjUZgKHEa8qU-CCBKg9Z84iCTZ_lQ4G1-xw1gpjMB7vh8zIk6_hh509ZkEMmPojlLZ8F__OQD5Gc-5RLbZwhUkhrP2o-A2aBWWU96agQAtQgDGNNDxGdMX4p3eiw484/s1600/rss-icono.png' style='padding:5px; float:left;'/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=myblog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='email' type='text/'/>
<input name='uri' type='hidden' value='myblog'/><input name='loc' type='hidden' value='es_ES'/><input id='rss-submit' type='submit' value='إشترك الأن'/></form></div></div>

 

 

الأن قم بتغير ما هو باللون الأحمر بإسم خلاصتك RSS و هو يكون في أخر رابط الخلاصة RSS مثال لذالك:

http://feeds.feedburner.com/myblog

 

قم فقط بأخد أخر الكلام في الرابط و ليس الرابط ككل ثم ألصقه في المكان المشار إليه باللون الأحمر.

 

يمكنك تغير الكلام الموجود في الكود بالكلام اللذي تريده.

 

الأن إحفظ الإضافة و تمتع بزيادة المشتركين في خدمة قوائم RSS الخاصة بمدونتك و يمكن غلق الصندوق بالضغط على علامة x الخاصة بالإغلاق.

+

إبحث عن Affiliate Program مناسب لمدونتك

 

 

بسم الله الرحمن الرحيم

 

مهمة اليوم الثالث عشر من خطة 31 يوم لإنشاء مدونة إحترافية و ناجحة هي البحث عن برنامج أفيليات Affiliate Program يتناسب مع مدونتك.

 

 

 

 

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

 

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

 

تظهر على شبكة الإنترنت يوميا الكثير من مواقع البيع بالعملة لكن الكثير منها غير موثوق منه أو يواجه مشاكل مع برامجه و معلنيه. لذالك عليك توخي الحذر في تعاملك مع هذه المواقع. و لتجد البرنامج المناسب لمدونتك ما عليك سوى التوجه لمحرك البحث Google و تقوم بكتابة نوع البرنامج المناسب لمدونتك. أو أن تستثمر بعضا من وقتك في البحث عبر المواقع التالية : Clickbanc / Commission Junction / Linkshare .

 

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

 

في انتظار ردك و إقتراحاتك ( أو إن كانت لديك طرق أخرى غير التي ذكرناها فيسرنا أن تشاركنا خبراتك و تجاربك) تقبل سلامي الحار.

+