جرب..ولن تندم

الاثنين، 11 نوفمبر 2013

تعلم قص الصور على فوتوشوب – الجزء 2

- ليست هناك تعليقات

قص وتقطيع الصور على فوتوشوب


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



تعلم قص الصور على فوتوشوب – الجزء 1

- ليست هناك تعليقات



تقطيع وقص الصور على فوتوشوب

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




الجزء 2

الثلاثاء، 5 نوفمبر 2013

برنامج مجاني لتحويل وتقطيع جميع صيغ الفيديو بجودة عالية

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



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




الأحد، 3 نوفمبر 2013

إزالة القوائم من مدونة بلوجر

- ليست هناك تعليقات

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

-    حذف القوائم الذاتية لبلوجر:
إذا كانت قوائم المدونة ذاتية، أي تستعمل أداة بلوجر. فيكفي الدخول لواجهة المدونة ثم التخطيط ثم نبحث عن أداة القوائم:
نقوم بفتحها وبعد ذلك يمكن حذف الأداة بالكامل:


أو إ فراغ خانات الإظهار لإخفاء القوائم الغير مرغوب فيها:

 







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




-  حذف  القوائم الملحقة:
نقصد بها قوائم الHTML التي يتم إضافتها انطلاقا من تغيير كود القالب. لحذفها سنفتح أداة تغيير قالب بلوجر. ومن لوحة المفاتيح Ctrl+F ثم نبحت عن اي عنصر من القائمة. مثلا "الرئيسية" :
سنجد القوائم كاملة ثم نقوم بتحديدها  ثم حذف.

نحفظ القالب لمشاهدة التغيير.. تمت العملية..

السبت، 19 أكتوبر 2013

شريط قوائم CSS رائعة منسدلة لمدونة بلوجر

- ليست هناك تعليقات

1- لماذا أصبح ضروريا توفر أي مدونة بلوجر على قوائم CSS:

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

2 - مميزات قوائم CSS:

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

3 - إضافة  شريط قوائم CSS لمدونة بلوجر: 

لإضافة هذه القوائم لمدونتكم، المرجو اتباع الخطوات التالية:

 ** الخطوة 1:
من واجهة التحكم في المدونة اختاروا القالب ثم تحرير HTML
 ** الخطوة 2:
من لوحة المفاتيح Ctrl+F  للبحث داخل كود القالب عن هذا الكود:
]]></b:skin>
وفوقه مباشرة  قوموا بلصق هذا الكود بعد نسخه:
/* قوائم CSS متدلية */
#contact-links {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
margin: auto;
position: relative;
width: 100%;
}
#contact-links a {
color: #4C9FEB;
}
#contact-links a:hover {
color: #3D85C6;
}
#my-links {
float: left;
font-size: 12px;
margin: 4px 10px;
overflow: hidden;
text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
margin-left: 7px;
padding-left: 8px;
text-decoration: none;
}
#my-links a:first-child {
border-width: 0;
}
#menu-container {
background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
border-radius: 0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
clear: both;
height: 46px;
padding-top: 1px;
}
#neat-menu {
float: right;
}
#neat-menu a {
text-decoration: none;
}
#neat-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#neat-menu > ul > li {
float: right;
padding-bottom: 4px;
}
#neat-menu ul li a {
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
border-color: #D1D1D1;
border-image: none;
border-style: solid;
border-width: 0 1px 0 0;
color: #333333;
display: block;
font-size: 12px;
height: 18px;
line-height: 25px;
padding: 11px 15px 10px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#neat-menu > ul > li.active > a {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-bottom: 1px solid #2D81CC;
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
margin: -1px 0 -1px -1px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a:hover {
background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#neat-menu > ul > li:first-child > a {
border-radius: 0 0 0 5px;
}
#neat-menu ul ul {
background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
border-radius: 5px 5px 5px 5px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 #FFFFFF inset;
height: 0;
margin-top: 1px;
opacity: 0;
overflow: hidden;
width: 240px;
padding: 0;
position: absolute;
visibility: hidden;
z-index: 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#neat-menu ul li:hover ul {
margin-top: 0\2;
height: auto;
opacity: 1;
visibility: visible;
}
#neat-menu ul ul a {
border-right-width: 0;
border-top: 1px solid #D1D1D1;
box-shadow: 0 1px 0 #FFFFFF inset;
color: #444444;
height: 24px;
line-height: 24px;
padding: 7px 12px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a {
border-top-width: 0;
}
/* قوائم CSS متدلية */

قوموا بحفظ التغييرات وأغلقوا أداة تحرير القالب. 
  ** الخطوة 3:
سنعود لواجهة المدونة وننقر على التخطيط ثم إضافة أداة  بعد اختياركم ل HTML/JavaScript 
 قوموا بنسخ هذا الكود داخل إطار الأداة:
<div id='contact-links'>
<div id='my-links'>
<a href='#'>من نكون؟</a>
<a href='#'>للإتصال بنا</a>
<a href='#'><img height='18px' src='http://3.bp.blogspot.com/-bsoTf8EpVbE/Uw_W2HmlPOI/AAAAAAAAGXQ/RS57fNXl1tE/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
<a href='#'><img height='18px' src='http://2.bp.blogspot.com/-9OXxCWCilgM/Uw_WNEqUShI/AAAAAAAAGXI/2T6Dc8zVrxA/s1600/twitter.png' title='Twitter' width='18px'/></a>
<a href='#'><img height='18px' src='http://3.bp.blogspot.com/-LQABZjrBgiY/Uw_X4zGqixI/AAAAAAAAGXo/jlR7r1blHso/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
<a href='#'><img height='18px' src='http://1.bp.blogspot.com/-NsPs8DRJfP4/Uw_XnNMAHTI/AAAAAAAAGXg/qC2kA_T-BdY/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
</div>
<div id='menu-container'>
<nav id='neat-menu'>
<ul>
<li class='active'><a href='/'>الأولى</a></li>
<li><a href='#'>قائمة متدلية 1</a>
<ul>
<li><a href='#'>قائمة ثانوية 1</a></li>
<li><a href='#'> 2 قائمة ثانوية</a></li>
<li><a href='#'>قائمة ثانوية 3</a></li>

</ul>
</li>
<li><a href='#'> قائمة متدلية 2</a>
<ul>
<li><a href='#'>قائمة ثانوية 1</a></li>
<li><a href='#'> 2 قائمة ثانوية</a></li>
<li><a href='#'>قائمة ثانوية 3</a></li>
</ul>
</li>

<li><a href='#'>قائمة منفردة 1</a></li>
<li><a href='#'>قائمة منفردة 2</a></li>
<li><a href='#'>قائمة منفردة 3</a></li>

</ul>
</nav>
</div></div>


تم الأمر ويكفي الآن حفظ التغييرات وشاهدة الإضافة الجديدة والمتميزة.

4 - تغيير قوائم CSS بحسب حاجتكم:

 ** إضافة الروابط : لإضافة الروابط يكفي تعويض الرمز # بالرابط الخاص بكم ثم تعويض النص بما يناسبكم:
 <a href='http://www.folfoly.com/'>مدونة فلفلاي</a>    ليصبح <a href='#'>من نكون؟</a>
 ** تغيير صور الأيقونات:  إذا لم تعجبكم صور الأيقونات الخاصة بالشبكات الإجتماعية بإمكانكم تغييرها بصوركم الخاصة  عبر تبديل الرابط باللون الأحمر بروابطط صوركم:
<a href='#'><img height='18px' src='http://3.bp.blogspot.com/-bsoTf8EpVbE/Uw_W2HmlPOI/AAAAAAAAGXQ/RS57fNXl1tE/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>


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

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


الثلاثاء، 1 أكتوبر 2013

أداة الFirebug لتغيير HTML وCSS

- ليست هناك تعليقات


الFirebug هي واحدة من أهم إضافات متصفح الإنترنت موزيلا فايرفوكس. والتي تسمح بتغيير، مشاهدة، ونسخ أي كود صفحة إنترنت سواء كان HTML و CSS أو JAVASCRIPT.
سنرى في هذا الفيديو كيف نقوم بإضافتها واستعمالها:
-    إضافة فايربوج لمتصفحكم


الاثنين، 30 سبتمبر 2013

قالب بلوجر المعرب "الأنيق" للتحميل

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


مشاهدة

تحميل

الجمعة، 27 سبتمبر 2013

برنامج نوت باد++ لمعالجة أي كود

- ليست هناك تعليقات

من أجمل البرامج المجانية  التي يمكن استعمالها في معالجة نصوصكم وأكواد HTML وغيرها. 

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

البرنامج ستحبونه لأنه يساعد في التمييز بين أجزاء الأكواد لتغييرها بحيث يسهل البحث عن ما نريد تغييره بالضبط.

نوت باد++ مفيد بشكل كبير في تغيير أكواد HTML، CSS، PHP، وغيرها..

تحميل

الخميس، 26 سبتمبر 2013

أسهل طريقة لإنشاء قوائم CSS وإضافتها لمدونتك

- ليست هناك تعليقات

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

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






الأربعاء، 25 سبتمبر 2013

إضافة خانات جديدة في وسط الصفحة الرئيسية لبلوجر

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






1 – نبدأ بفتح أداة تغيير القالب، وبالضغط على Ctrl+F سنبحث عن ]]></b:skin> لإضافين هذين الكودين:

كود 1 فوق ]]></b:skin> :


#col-left {
width: 48%;
float: left;
}
#col-right {
width: 48%;
float: right;
}
كود 2 تحت ]]></b:skin> :


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#blog-pager {
display:none;
}
.feed-links {
display:none;
}
</style>
</b:if>

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

2 – ثم في خيارات اداة تغيير القالب نضغط على "تنسيق النموذج"

3 – Ctrl+F من جديد لنبحث عن <b:section class='main' id='main' showaddelement='no'> ، بعد إيجاده سيبدو بهذا الشكل:

4 – سننسخ الكود التالي ونلصقه في المكان المحدد بالسهم الأحمر في الخطوة 3 قبل </div> :


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='col-left' showaddelement='yes' />
<b:section class='sidebar' id='col-right' showaddelement='yes'/>
<div style='clear: both;'/>
</b:if>
الكود بالأحمر كما اشرنا أعلاه هو لإظهار الخانتين على االصفحة الرئيسية فقط.
5 – نحفظ القالب، وبفتح أداة "التخطيط" سنكتشف أنه تمت خانتين جديدتين في الوسط.

يمكنكم إضافة ما تشاءون الآن من أدوات..

الثلاثاء، 24 سبتمبر 2013

إضافة أزرار المشاركة على الشبكات الإجتماعية لمدونة بلوجر

- هناك 6 تعليقات

1- عن أزرار المشاركة على الشبكات الإجتماعية:

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

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

2- طريقة إضافة أزرار المشاركة على الشبكات الإجتماعية لمدونة بلوجر:

   * الخطوة 1:
من واجهة التحكم بالمدونة نختار القالب ثم تحرير  HTML
  * الخطوة 2:
من لوحة المفاتيح Ctrl+F ثم قوموا بالبحث عن الكود التالي:
<div class='post-footer-line post-footer-line-1'> 
++ ملاحظة: ستجدون أن الكود يتواجد لمرتين، ما يهمنا هو الكود الثاني وليس الأول، ستجدونه بالنزول داخل كود قالب المدونة.

  * الخطوة3 :
بعد ايجادكم للكود،  قوموا بلصق هذا الكود أسفله مباشرة بعد نسخه:



<!-- بداية السكريبد -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px; width:44px;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
<style type='text/css'>
#pin-wrapper > a {background-image:none !important;}
</style>
</b:if>
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- نهاية ازرار المشاركة الأفقية -->


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



x x x

- ليست هناك تعليقات
cxv xcx

الأحد، 22 سبتمبر 2013

HulkLoad أفضل موقع لربح الأموال

- ليست هناك تعليقات

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


الموقع هو هولك لود Hulkload الذي يوفر خادمات لتخزين ملفاتكم، وهو موقع يؤدي بالنسبة لغالبية دول شمال إفريقيا والشرق الأوسط 2$ لكل ألف تحميل، وهو ثمن جيد بالمقارنة مع مواقع أخرى. والمذهل في هذا الموقع انك تستطيع الحصول على أموالك ابتداء من 10$.
 

يمكنكم التسجيل في الموقع من هنا.

الجمعة، 20 سبتمبر 2013

ما هي ال RSS وأهميتها؟

- ليست هناك تعليقات

الRSS أو Rich Site Summary
وتعني الملخص المهم لموقع، أي عصارة لأهم التغييرات التي تحدث في محتوى موقع ما أو مدونة والتي يتم توفيرها لكل من يريدها.
- كيف يعمل الRSS؟
1 - يقوم موقع او مدونة ما بالتسجيل في خدمة RSS أوتوماتيكيا، يدويا، أو باستعمال برامج.
2 – المزود RSS يبنى بالxml ويتم تخزينه في خادم. هناك المئات من مزودي الRSS تنتظر المتصفحين للإشتراك فيها كقراء.
3 – مزود RSS يقوم بقراءة الخلاصة وعرضها، حيث يتم عرض جديد المزود.
 

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

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


لا تنسوا التسجيل في خدمة الRSS لمستر معلم من هنا حتى لا يفوتكم أي جديد.

إضافة أيقونة Favicon أو رمز التفضيلات لمدونتك

- ليست هناك تعليقات
1- ما هي ايقونة الFavicon؟



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

2- كيف نضيف الFavicon أو رمز التفضيلات للمدونة؟
لإضافة  رمز التفضيلات لمدونتكم هناك طريقتان:

-    باستعمال كود HTML:
ستفتحون أداة تغيير كود قالب المدونة. سنفتح أداة تغيير الكود وبالضغط على Ctrl+F سنبحث عن </head> . وتحتها مباشرة سنلصق هذا الكود التالي بعد نسخه:
مع تغيير  الرابط باللون الأحمر برابط صورة رمز التفضيلات الخاصة بكم.

<link rel="shortcut icon" href="http://example.com/myicon.ico" />

-    انطلاقا من واجهة التخطيط على المدونة:
 نضغط على تحرير في أداة رمز التفضيلات:

نختار الصورة التي يجب ان يكون حجمها اقل من 100 كيلوبايت.

3- قوموا بحفظ التغييرات وافتحوا المدونة لمشاهدة التغييرات.

ربح الأموال على يوتوب

- ليست هناك تعليقات

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

2-    بعد ذلك نضغط على عرض الميزات الإضافية تحت ميزات إضافية

3-    ثم في الوسط نضغط عرض إعدادات تحقيق الدخل

4-    نختار تمكين حسابي

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


الخميس، 19 سبتمبر 2013

إظهار صورة الكاتب في نتائج بحث جوجل

- هناك 4 تعليقات

1- لماذا  إظهار صورة الكاتب في نتائج بحث جوجل؟

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

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


وللقيام بذلك سنحتاج إلى:
- مدونة بلوجر
- بروفايل جوجل بلوس

بوجود هذين الاثنين سنتبع الخطوات التالية:
 

2-  نسخ رقم بروفايل جوجل+


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

3- إضافة رابط بروفايل لمدونة بلوجر:


قم بنسخ هذا الكود ونشره على مدونتك، سواءا في الصفحة الرئيسية أو من خلال صفحة من نكون.
<a href="https://plus.google.com/xxxxxxxxxx/" rel="author"target="_blank">تابعني على جوجل بلوس</a>
نقوم بحفظ التغييرات بعد تغيير xxxxxxxxxx   برقم بروفايلك وقد تم العمل فيما يخص المدونة. الرابط الذي اضفناه يثبت ملكيتك للمدونة التي تكتب فيها.

4- ربط مدونة بلوجر ببروفايل جوجل بلوس:

سنعود لبروفايل جوجل بلوس، ثم ننقر حول من القائمة:


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

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

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

 أ - السبب الأول هو حجم الصورة، من المهم ألا يكون مستطيلا وأن تكون الصورة من نوعية jpg.
ب - أحيانا يتطلب الأمر إضافة رابط بروفايل جوجل بلوس في صفحة "من نكون" كما وضحنا ذلك أعلاه.
ج - قم بإضافة رابط مدونتك وصفحة "من نكون  " في إطاري مساهم في والروابط في بروفايل جوحل بلوس.

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

الاثنين، 16 سبتمبر 2013

شروط القبول في أدسنس من جوجل

- هناك تعليقان (2)

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


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

هناك 12  شيئا يجب عليك معرفته قبل التقدم لأدسنس

1 – سياسة الخصوصية
من بين الأخطاء الشائعة المنتشرة بين المدونين،إهمال صفحة سياسة الخصوصية و الكثيرين يعتبرونها غير مهمة ولا تغير شيئا بالنسبة للمدونة. لكن بالنسبة لجوجل الأمر مختلف.
بإمكانك كتابة سياسة الخصوصية الخاصة بمدونتك بنفسك، أو البحث في مدونات أخرى ونسخ الأشياء التي تراها مناسبة لمدونتك. مدونة بدون سياسة خصوصية يمكن أن يتم رفضها.
2 – صفحة من نكون؟
سواء نريد التقدم بطلب لأدسنس أم لا، صفحة من نكون لها أهمية كبيرة. عدم وجودها على أي مدونة يقلل من حظوظ قبول الطلب. دون أن ننسى أنها تعطي فكرة للزوار عن محتوى المدونة ويقوي الثقة بين الاثنين.
3 – صفحة للاتصال بنا
زوار مدونتك هم أغلى ما تملك، تصور أن احدهم لديه ما يقوله لك، رأي، عتاب على شيء لم يعجبه. سؤال أو استفسار... من الأفضل أن يجد وسيلة للاتصال بصاحب المدونة عوض البحث عن الجواب في مكان آخر.
بالنسبة لجوجل، وجود صفحة الاتصال يعني أنك مهتم بقرائك وليس بالأموال فقط.
4 – تأكيد الاسم والبريد
تأكدوا من وضع البريد والاسم بشكل واضح في صفحة للاتصال بنا أو من نكون. فذلك يسمح لجوجل بالتأكد أن الأمر يتعلق بنفس الشخص الذي تقدم لادسنس وليس أحد هواة البريد  الغير المرغوب فيه.
5 – تأكيد العمر
عندما تقوم بالتسجيل على ادسنس، لا تعتقد أنك تلعب. عليك بإعطاء عمرك الحقيقي. وإذا كنت لا تبلغ الثامنة عشر من العمر بعد، فلا داعي للتقدم لأدسنس لأن الجواب بكل بساطة سيكون الرفض.
6 – الحد الأدنى للمقالات
بعض المدونين رغم تجاوزهم لمائة مقالة إلا أنه يتم رفض طلباتهم للانضمام لأدسنس. هناك بعض الشروط التي يجب الانتباه إليها. كطول المقالات مثلا، ألف مقالة من سطرين أو ثلاثة تعتبر لا شيء بالنسبة لجوجل، المطلوب هو مقالات طويلة ومتوسطة أي بين حوالي ثلاث مائة او خمس مائة كلمة.
7 – التصميم
تصميم مدونتك يأتي بعد المحتوى من حيث الأهمية. طريقة تقديمك لمحتوى مدونتك يظهر مهنيتك وغنى تجربتك.
8 – المحتوى
تحدثنا في الرقم 6 عن عدد المقالات. نوع المقالات وطولها مهم جدا كذلك. فأدسنس ليس للمواقع الإباحية والقرصنة. أي خطأ بسيط يمكن أن يكلف غاليا ويؤدي لرفض الطلب. المقالات التي لا تتعدى 300 كلمة تعتبر  علامة حمراء وخطر يمكن أن تندم عليه.
9 – القيمة المضافة
هل تساءلت يوما عن دورك وتأثيرك على شبكة الإنترنت؟ ما الذي تساهم به في محتوى الإنترنت. إذا كان جوابك لا شيء فلا تشتكي من عدم ربحك الأموال. جوجل سيعطون لك الإشارة الحمراء إذا لم تكن لدى مدونتك أي قيمة مضافة لقرائها.
10 – إسم النطاق
التوفر على إسم نطاق ثانوي مثل .blogspot.comقد يعقد الأمر قليلا. ومن المهم الحصول على إسم نطاق خاص ك .com ربما تتسائلون لماذا تم قبولي رغم توفري على ذلك. فأنا تقدمت بطلبي سنة 2010 حيث كانت الأمور بسيطة نسبيا بالمقارنة مع اليوم.
أقدمية إسم النطاق قد يتم الإعتماد عليها، ففي اسيا إسم النطاق يجب ان يكون بعمر ستة أشهر مثلا.
11 – منصات إشهار أخرى
إذا كنت تنشر إعلانات لشركات أخرى فلا تنتظر أن يتم قبول طلبك. يجب حذفها من المدونة قبل التقدم لجوجل. جوجل يسمح بنشر إشهارات أخرى ولكن بعد ان يتم قبولك.
12 – الزيارات المؤدى عنها
أليات جوجل بإمكانها مراقبة المدونات التي تحصل على الزيارات المؤدى عنها ويتم معاقبة أصحابها. بإمكانك الحصول على الزيارات من محركات البحث أو أي مصادر أخرى، أما استعمالك للزيارات المؤدى عنها فلن يضمن لك إلا الرفض.





قوالب مجانية، ووردبريس، قوالب جاهزة، قوالب معربة، قوالب بلوجر معربة، قةالب بلوجر 2013، قوالب بلوجر 2014، , موقع قوالب بلوجر, قوالب مدونة بلوجر, قوالب بلوجر 2010, افضل قالب بلوجر ، قوالب بلوجر، قوالب بلوجر مجانية، تحميل قوالب،blogger templates, premium blogger template, arabic blogger template, blogger tutorials, how blogger, help blogger, مساعدة بلوغر، كيف بلوغر، Adsensek conditions to be accepted in Adsense, Apply for Adsense, Money online,

السبت، 14 سبتمبر 2013

إضافة مربع الإعجاب فايسبوك الجانبي

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

1- طريقة إضافة المربع تبدأ بتغيير كود قالب المدونة. سنفتح أداة تغيير الكود وبالضغط على Ctrl+F سنبحث عن </head> . وتحتها مباشرة سنلصق هذا الكود بعد نسخه:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

ثم نعود لواجهة التخطيط لنختار إضافة أداة جديدة والتي ستكون HTML/JavaScript حيث سنلصق الكود التالي بعد نسخه:
مع تغيير إسم صفحة الفايسبوك باللون الأحمر
<style type='text/css'>
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url('http://1.bp.blogspot.com/-PUYBb2326SY/T13eXFv1sPI/AAAAAAAABdE/VOqfHVMXhWk/s1600/w2b_vertical-right.png');background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type='text/javascript'>
/*<![CDATA[*/
(function(w2b){
w2b(document).ready(function(){
var $dur = 'medium'; // Duration of Animation
w2b('#fbplikebox').css({right: -250, 'top' : 350 })
w2b('#fbplikebox').hover(function () {
w2b(this).stop().animate({
right: 0
}, $dur);
}, function () {
w2b(this).stop().animate({
right: -250
}, $dur);
});
w2b('#fbplikebox').show();
});
})(jQuery);
/*]]>*/
</script>
<div id='fbplikebox' style='display:none;'>
<div class='fbplbadge'></div>
<iframe src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fmistermo3alem&amp;width=250&amp;height=260&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:250px; height:260px;background:#FFFFFF;' allowtransparency='true'></iframe>
</div>

سنقوم بحفظ الأداة الجديدة، ونفتح المدونة لنرى التغيير الجديد.

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

الجمعة، 13 سبتمبر 2013

طريقة تغيير كود قالب بلوجر

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

من قائمة واجهة بلوجر نختار قالب:


ثم تحرير HTML :

ستفتح نافذة تغيير كود القالب  والتي تبدو بهذا الشكل:


وللبحث بسهولة داخل الكود نضغط من لوحة المفاتيح Ctrl+F لتفتح خاتة صغيرة في الركن الأعلى على اليمين، نكتب فيها مت نريد ثم Enter/Entrer من لوحة المفاتيح. إذا كان هناك مجموعة من الأشياء بنفس الإسم نستمر يالضغط على Enter/Entrer  حتى نجد ما نريد:

قوالب مجانية، ووردبريس، قوالب جاهزة، قوالب معربة، قوالب بلوجر معربة، قةالب بلوجر 2013، قوالب بلوجر 2014، , موقع قوالب بلوجر, قوالب مدونة بلوجر, قوالب بلوجر 2010, افضل قالب بلوجر ، قوالب بلوجر، قوالب بلوجر مجانية، تحميل قوالب، arabib blogger templates, free blogger premium templates, blogger tutorials, ;learn blogging, help blogger,  مساعدة بلوجر، تعلم بلوجر، دروس   قوالب مجانية، ووردبريس، قوالب جاهزة، قوالب معربة، قوالب بلوجر معربة، قةالب بلوجر 2013، قوالب بلوجر 2014، , موقع قوالب بلوجر, قوالب مدونة بلوجر, قوالب بلوجر 2010, افضل قالب بلوجر ، قوالب بلوجر، قوالب بلوجر مجانية، تحميل قوالب، arabib blogger templates, free blogger premium templates, blogger tutorials, ;learn blogging, help blogger,  مساعدة بلوجر، تعلم بلوجر، دروس Hide a widget on home page and show it on other pages, كيفية التحكم في إظهار أو إخفاء أداة معينة ما على أي صفحة بالبلوجر، إظهار أو إخفاء أداة على الصفحة الرئيسية أو على صفح محددة، التحكم فى اظهار واخفاء أداة / عنصر فى بلوجر، طريقة عرض أداة في الصفحة الرئيسية فقط 

إضافة أو حذف أداة على مدونة بلوجر

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


- إضافة أداة:
طريقة إضافة أداة لمدونة بلوجر بسيطة، إذ من قائمة واجهة بلوجر نختار التخطيط:

بعد ذلك تفتح صفحة التحكم بالأدوات، ومنها نضغط على إضافة أداة:

نختار الأداة التي نريد، تقوم بتغيير الإعدادت إن شئنا ثم حفظ.

- حذف أداة:
لحذف اداة من مدونة بلوجر، نتبع نفس الخطوات ومن صفحة التحكم بالأدوات، تبحث عن المدونة التي نرغب بحذفها ونضغط تحرير:


ثم حذف:

قوالب مجانية، ووردبريس، قوالب جاهزة، قوالب معربة، قوالب بلوجر معربة، قةالب بلوجر 2013، قوالب بلوجر 2014، , موقع قوالب بلوجر, قوالب مدونة بلوجر, قوالب بلوجر 2010, افضل قالب بلوجر ، قوالب بلوجر، قوالب بلوجر مجانية، تحميل قوالب،blogger templates, premium blogger template, arabic blogger template, blogger tutorials, how blogger, help blogger, مساعدة بلوغر، كيف بلوغر، facebook like boxK add pop up facebook like box? قوالب مجانية، ووردبريس، قوالب جاهزة، قوالب معربة، قوالب بلوجر معربة، قةالب بلوجر 2013، قوالب بلوجر 2014، , موقع قوالب بلوجر, قوالب مدونة بلوجر, قوالب بلوجر 2010, افضل قالب بلوجر ، قوالب بلوجر، قوالب بلوجر مجانية، تحميل قوالب، arabib blogger templates, free blogger premium templates, blogger tutorials, ;learn blogging, help blogger,  مساعدة بلوجر، تعلم بلوجر، دروس  

الأربعاء، 11 سبتمبر 2013

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

- هناك 4 تعليقات

1 - لماذا مربع الإعجاب فايسبوك المنبثق؟

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

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

2- إضافة مربع الإعجاب فايسبوك لمدونات بلوجر:

الخطوة الأولى تبدأ بفتح أداة تغيير القالب الخاص بمدونتكم، من قائمة واجهة المدونة نضغط على قالب:



ثم تحرير HTML






من لوحة المفاتيح ننقر ننقر Ctrl+F للبحث داخل القالب عن الكود التالي   </body>  

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



=> الكود:

<style type='text/css'>
#haakblogFBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:260px;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#haakblogFBpop a.haakblogclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).bind(&quot;load&quot;, function() {
// Animate Top
$(&#39;#haakblogFBpop&#39;).animate({top:&quot;150px&quot;}, 1000);
// Widget by www.haakblog.com
$(&#39;a.haakblogclose&#39;).click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='haakblogFBpop'>
<!-- Widget  Start -->
<center>
<b>تابعنا على فايسبوك</b></center>
<center>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFolfoly&amp;width=300&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=196282097100252' style='border:none; overflow:hidden; width:300px; height:258px;'/>
</center>
<!-- Widget End -->
<a class='haakblogclose' href='#'>&#215;</a>
<center style='float:right; margin-right:10px;'>
<span style='font-size:xx-small; color:#000; text-decoration:none;'/>
<a href='http://www.folfoly.com/2013/09/add-pop-up-facebook-like-box-blogger.html' style='font-size:xx-small; color:#3B78CD; text-decoration:none;' target='_blank'
rel='dofollow'
>مربع الإعجاب على مدونتك؟</a></center>
</div>


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