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

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

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


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


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


لقيام بهذا قم بالدخول لمنصة تحرير HTML الخاصة بقالبك، ولديك احد الخيارين، أما أظهار الوحدة اسفل العنوان أو في نهاية الموضوع، لذا قم بالبحث عن الكود المناسب وأسفل منه مباشرة ضع كود وحدتك الأعلانية
لوضع الوحدة أسفل العنوان ضعها اسفل الكود التالي
<div class='post-header'>
لوضع الوحدة أسفل الموضوع مباشرة ضعها اسفل الكود التالي
<div class='post-footer'>
ربما تجد هذة الاكواد في حالة تكرار، اذا لم تفلح مع الكود الاول جربها مع الكود الثاني وهكذا إلي ان تفلح العملية، وهكذا.
ملحوظة مهمة، يجب عليك تضمين الوحدة داخل هذا الكود حتي تظهر الوحدة داخل الموضوعات فقط وليس في الصفحة الرئيسية 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Adsense Unit code below this -->
</b:if>
يوضع كود الوحدات المستخدمة أسفل هذا السطر
<!-- Adsense Unit code below this -->

الأن كيف تحدد الوحدة لتظهر داخل موضوعات كاتب معين؟

لتقوم بذلك ما عليك هو أستخدام نفس الطريقة بالأعلي مع تضمين الوحدة داخل الكود التالي
<!-- Adsense Unit by author name for blogger by ahmed hegazy -->
<b:if cond='data:post.author == &quot;Author_Name_Here&quot;'>
<!-- Adsense Unit code below this -->
</b:if><!-- End author unit -->

يتم أيضاً تضمين الوحدة اسفل هذا السطر

<!-- Adsense Unit code below this -->

مع أستبدال كلمة Author_Name_Here بأسم الكاتب المراد اظهار الوحدة داخل موضوعاته.

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


كود توضيحي


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Adsense Unit by author name for blogger by ahmed hegazy -->
<b:if cond='data:post.author == &quot;Author1_Name_Here&quot;'>
<!-- Adsense Unit code below this -->
</b:if><!-- End author unit -->
<!-- Adsense Unit by author name for blogger by ahmed hegazy -->
<b:if cond='data:post.author == &quot;Author2_Name_Here&quot;'>
<!-- Adsense Unit code below this -->
</b:if><!-- End author unit -->
<!-- Adsense Unit by author name for blogger by ahmed hegazy -->
<b:if cond='data:post.author == &quot;Author3_Name_Here&quot;'>
<!-- Adsense Unit code below this -->
</b:if><!-- End author unit -->
</b:if>

هذا الكود بالأعلي هو عبارة عن كود جاهذ للأستخدام لثلاثة وحدات أعلانية لثلاثة مؤلفين مختلفين، حيث لا تظهر الوحدات الا داخل الموضوعات ويتم تضمين كود الوحدة أسفل هذا السطر مباشرة
<!-- Adsense Unit code below this -->
اتمنى ان اكون وفيت بالشرح على قدر الأمكان وفقنا الله انا وانتم
والسلام عليكم ورحمةالله وبركاتة


الاثنين, يوليو 21, 2014

اضافة تابعنى على فيس بوك بشكل انيق

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

الكود وشرحة

<center>
<div style="background: #FFFFFF; padding: 7px; border: 1px dashed #000000; padding-bottom: 3px;">
<div class="so">
<a href="ضع هنا رابط الفيس بوك"><img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/facebook.png" /></a>
<a href="ضع رابط قناة اليوتيوب "><img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/youtube.png" /></a>
<a href="ضع رابط صفحتك جوجول بلس"><img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/google_plus.png" /></a>
<a href="ضع رابط تويتر"><img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/twitter.png" /></a>
<a href="ضع رابط التغذية"><img src="https://cdn1.iconfinder.com/data/icons/flat-3d-social-media-icons/48/rss.png" /></a>
</div>
</div>
</center>
ننتقل الى تنسيق الكود
اللون الأحمر لون خلفية الأضافة
اللون الأزرق لون حدود الأضافة
اللون البرتقالى روابط الصور غيرها بما تريد ولاكن نفس المقاس
ضع كل رابط مناسب كما موضح بالأضافة
وشكرا
لاتغادر قبل ترك بصمتك
الأربعاء, يوليو 16, 2014

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

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

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


السبت, يونيو 14, 2014

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

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

<meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>

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

الأربعاء, يونيو 11, 2014

كيفية اختيار عنوان حصرى لموضوعك

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

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

اترك بصمتك وشاركنا الرأى






الثلاثاء, يونيو 10, 2014

كيفية فتح جميع/روابط/نوافذ/مواضيع مدونتك (فى علامة تبويب جديدة)

كيفية فتح جميع/روابط/نوافذ/مواضيع مدونتك (فى علامة تبويب جديدة)

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

طريقة التركيب

هام:قم بأخذ نسخة احتياطية من قالبك لأستعمالة عند وجود اخطاء فى بعض الأحيان عند الأضافات
ثانيا
اذهب الى واجهة مدونتك
قم بأختيار قالب
ثم تحرير (html)
توسيع قوالب واجهة المستخدم اى نقوم بالضغط فى صندوق الأكواد
مرة واحد بالزر الأيسر للماوس
ثم نقوم بضغط ازار الكيبورد
ctrl+f

ثم نبحث عن الكود
</head>
ثم نقوم بأضافة هذا الكود فوقة 
<base target='_blank' />
الأن احفظ القالب ولاتنسى الأنضمام الينا
والدعاء ابلغنا بالتعليق لنعرف رايك بالموضوع
مبروك عليك الأضافة 
السبت, مايو 31, 2014

كود الميتا تاج الذى يضع مدونتك فى صدارة محركات البحث فى عام 2014 لمدونتك على بلوجر

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

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

قم بالبحث عن الكود التالى
<head>
وقم بحذف جميع الأكواد التى بعده وقبل الكود التالى :ماعدا اكواد الخطوط او اى ملفات اخرى
<b:skin>
أى قم بحذف ما بينهماولكن هناك ما لا يجب أن تحذفه , وهو كود الخطوط على مدونتك ( إن وجد )
ثم ضع بينهما الكود التالى
<title>عنوان المدونة</title>
<meta content='حول المدونة' name='Description'/>
<meta content='الكلامات الدلالية .' name='keywords'/>
<meta content='global' name='distribution'/>
<meta content='10 days' name='revisit'/>
<meta content='10 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='width=1100' name='viewport'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='blogger' name='generator'/>
<meta content='index, follow' name='robots'/>
<meta content='اسم صاحب المدونة بالأنجليزية' name='author'/>
<meta content='بلدك بالأنجليزى' name='country'/>
<meta content='حقوك المدونة' name='copyright'/>
<meta content='IE=9' http-equiv='X-UA-Compatible'/>
<meta content='chrome=1' http-equiv='X-UA-Compatible'/>
قم بتعديل الكود عن طريق تغيير الكلمات بين القوسين بالمطلوب فيها , وراعى أن يكون وصف المدونه عباره عن جمله مفيه لا تزيد عن 150 حرف وتصف بهم حال المدونه فعلا .
سيؤدى ذلك إلى ظهور أفضل بكثير لمدونتك فى المراتب الأولى من محركات البحث وخصوصا محرك البحث العملاق جوجل .
الجمعة, مايو 30, 2014

اجبار الزائر على مشاهد الفديو بمدونتك




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

مرحبا بكم فى مدونة نصائح للمدونين

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

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

<object height="420" width="650"><param name="movie" value="http://www.youtube.com/v/1GDrOqPI3uc"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/1GDrOqPI3uc" type="application/x-shockwave-flash" allowscriptaccess="always" allownetworking="internal" allowfullscreen="true" height="420" width="630"></object>
<img border="0" src="http://i2.ytimg.com/vi/1GDrOqPI3uc/0.jpg" height="0" width="0" /></div>
كل ماعلبك لأستحدامة هو تغير هذا الكود  1GDrOqPI3uc موجود ثلاث مرات بكود الفديو الذى تريدة

الكود الذى ياخذ من الفديو موضح امام بالصورة
اجبار الزائر على مشاهد الفديو بمدونتك
معاينة للفديو امامكم


                          
اتمنى انا ينال اعجابكم شجعونا بالردود
الأربعاء, مايو 21, 2014

مجموعة اكواد صناديق بلوجر بتقنية css3

بسم الله الرحمن الرحيم 
مرحبا بكل متابعى نصائح للمدونين
بعض طلب الكثير والبحث والسؤال
عن
كيفية عمل صندوق اقتباس مميز للبلوجر تلقائيا
اليوم اتيت لكم بمجموعة من الأكواد الجزاء الأول
بتقنية css3
طريقة التركيب سهلة جدا نفتح القالب ثم تحرير html ثم نحرر القالب
ملحوظة:اذا لم يظهر صندوق الأقتباس قم بعمل الأتى
أبحث عن
.post blockquote
وأحذف الكود بأكملة قد تجدة بهذا الشكل
.post blockquote{margin:1em 20px}
.post blockquote p{margin:.75em 0} 
ثم قم بالأتى 
بالضفط على ctrl+f
ونقوم بالبحث عن الكود التالى
]]></b:skin>
وتضيف قبله او فوقة اى شكل يعجبك
من الاشكال الاتية

الشكل الأول

blockquote {
border-bottom-left-radius: 6px;
-webkit-bottom-left-radius: 6px;
-moz-bottom-left-radius: 6px;
-o-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-bottom-right-radius: 6px;
-o-border-bottom-right-radius: 6px;
margin: 0 0 20px;
border-left: 30px solid #FC4F08;
background-color: #302C2B;
color: #B8B4AA;
border-radius: 10px 20px 20px 10px;
-webkit-border-radius: 10px 20px 20px 10px;
-moz-border-radius: 10px 20px 20px 10px;
-o-border-radius: 10px 20px 20px 10px;
padding: 4% 2% 4% 3%;
font-family: 'Voces', cursive;
font-size: medium;
text-align: left !important;
direction: ltr !important;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
}
Pseudo ::after element

الشكل الثانى 



.post blockquote {
max-height: 400px;
clear: both;
padding: 0 10px 10px 10px;
border: 1px solid #DDD;
color: #666;
direction: ltr;
text-align: left;
border-radius: 4px;
font: 12px "Courier New", "MS Sans Serif", sans-serif, serif;
line-height: 1.6em;
-ms-overflow-x: auto;
overflow-x: auto;
position: relative;
z-index: 50;
background: #FFF;
}
.post blockquote:before {
content: " CODE --> copy/past this code and Enjoy --> ";
padding: 0px 20px;
margin: 0 -10px 5px -10px;
border-bottom: 3px solid #A4D3DF;
display: block;
background: #E5F8FD url(https://jetara.googlecode.com/files/%D8%AA%D9%86%D8%B2%D9%8A%D9%84.png) left 2px top 2px no-repeat;
color: #A4B1B8;
}

الشكل الثالث

blockquote {
width: 80%;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #FFCC00;
border: 2px solid #80D4DF;
color: #333;
position: relative;
padding: 20px 30px;
border: none;
margin: 0 auto;
margin-bottom: 15px;
font-size: 13px;
margin-right: -2px;
}
blockquote:before {
background: #99CCFF;
content: "إقتباس";
position: absolute;
left: -31px;
text-align: center;
line-height: 32px;
color: #FFF;
top: 0;
width: 50px;
height: 28px;
font-weight: bold;
}

الشكل الرابع 

.post blockquote {
background: #EFEFEF;
border: 2px dotted #000000;
box-shadow: 1px 1px 0 #000, 3px 3px 0 #fff, 4px 4px 0 #000, 6px 6px 0 #fff, 7px 7px 0 #000, 9px 9px 0 #fff, 10px 10px 0 #000;
color: #404141;
direction: ltr;
font: 14px Arial;
margin: 15px auto;
max-height: 400px;
overflow: auto;
padding: 15px;
text-align: left !important;
width: 80%;
}
.post blockquote:before {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieDyP8k1zgmyFl2sKQ3GvM6gbA4OioFeRIyO0Eja7FS7TgN-BmSzOs7OzdxTaYicjHkWlkwdTga647DBXieBRkynIvRIpO_urEd5Wepw4ykDrt0AArApd2sngK9jVV5RkTMkjNxUSSvBXN/s172/16x16.png") no-repeat scroll 99% -97px #000000;
color: #FFFFFF;
content: "3alam-b.Blogspot.Com كود معد بواسطة";
display: block;
font: bold 12px droid arabic kufi;
height: 20px;
margin: -15px -15px 5px;
padding: 4px 30px 6px 0;
text-align: right !important;
}

الشكل الخامس 



.post blockquote {
margin: 15px 35px 15px 15px;
padding: 10px;
clear: both;
list-style-type: none;
background: #FFFBC6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjQABA-Vz7mhqplKtiIOYjHzgMcRB14qv70t0IAWmlL0uPXl687jplg_1Fz9I4jZuI93TUfSzkF3DBG9CmUhvMbg4ymJnXmEPJ0o7e-0nOkAb4qT8ifvh22KR4XAdPyJNEC43LgPGmzAx_/s320/cv-1.png) no-repeat right bottom;
border-top: 1px solid #4977FF;
border-right: 1px solid #5686FF;
border-bottom: 1px solid #475FFF;
border-left: 1px solid #5686FF;
border-radius: 10px;
box-shadow: 2px 3px 3px 1px rgba(0, 0, 0, 0.5), 0 2px 2px 0 rgba(255, 255, 255, 0.5) inset;
height: 380px;
overflow: scroll;
overflow-x: hidden;
direction: ltr;
}


اتمنى ان تكون الاشكال اعجبتكم
وانتظرونا مع مجموعة جديدة من اكواد الاقتباس للبلوجر
نرجو كلمة فقط او تعليق يعنى تقيمك للموضوع
الاثنين, مايو 12, 2014

كود الفتحة الاجبارية htmljavascsript

كود الفتحة الاجبارية htmljavascsript للبلوجر


بسم الله الرحمن الرحيم اليوم اقدم لكم فى هذة التدوينة من نصائح للمدونين 
بعد البحث العميق كود الفتحة الأجبارية مجرب
طريقة التركيب
فتح التخطيط اضافة اداة htmljavascsript
وهذا الكود ايضا يندرج الى المنتديات
اليكم الكود
<script type="text/javascript"> document.body.onclick= function(){ window.open('ضع هنا الموقع المراد فتحة', 'poppage', 'toolbars=0, scrollbars=1, location=0, statusbars=0, menubars=0, resizable=1, width=600, height=300, left = 50, top = 50'); }</script>
والقيمة التاليةwidth=600, height=300 بالقيمة التي تحلو لك
الأحد, مارس 23, 2014

كيفية اضافة مكتبة فيديوهات اليوتيوب لمدونتك بشكل احترافى

اضافة مكتبة فيديوهات اليوتيوب لمدونتك بشكل احترافى

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

♦ المعاينـــــــــــــــة ♦







كــــــــــــــــود الاضافـــــــــــــــــة
<script language="JavaScript">
//here you place the ids of every element you want.
var ids=new Array('link1','link2','link3','link4','link5','link6','link7','link8');
function channel(id){

hideallids();
showdiv(id);
}
function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}
function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}
function showdiv(id) {
//safe function to show an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
</script>
<br />
<div align="center">
<div style="text-align: center;">
</div>
<table border="1" style="background-color: #cccccc; text-align: center; width: 240px;">
<tbody>
<tr>
<td width="25%"><input onclick="javascript:channel('link4');" type="button" value="الحلقة 4" /></td>
<td width="25%"><input onclick="javascript:channel('link3');" type="button" value="الحلقة 3" /></td>
<td width="25%"><input onclick="javascript:channel('link2');" type="button" value="الحلقة 2" /></td>
<td width="25%"><input onclick="javascript:channel('link1');" type="button" value="الحلقة 1" /></td>
</tr>
<tr>
<td width="25%"><input onclick="javascript:channel('link8');" type="button" value="الحلقة 8" /></td>
<td width="25%"><input onclick="javascript:channel('link7');" type="button" value="الحلقة 7" /></td>
<td width="25%"><input onclick="javascript:channel('link6');" type="button" value="الحلقة 6" /></td>
<td width="25%"><input onclick="javascript:channel('link5');" type="button" value="الحلقة 5" /></td>
</tr>
</tbody></table>
<hr />
<div id="link1" style="display: block;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/C4oMy3PPNaE?rel=0" width="575"></iframe>
</div>
</div>
<div id="link2" style="display: none;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/2F8cXGoSLeM?rel=0" width="575"></iframe>
</div>
<div id="link3" style="display: none;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/Bg9UjZmg_dY?rel=0" width="575"></iframe>
</div>
<div id="link4" style="display: none;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/Zbp1q1qYNwg?rel=0" width="575"></iframe>
</div>
<div id="link5" style="display: none;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/PZzYkTYESCI?rel=0" width="575"></iframe>
</div>
<div id="link6" style="display: none;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/G0Vj7rbRiUg?rel=0" width="575"></iframe>
</div>
<div id="link7" style="display: none;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/PH_br4e2ryM?rel=0" width="575"></iframe>
</div>
<div id="link8" style="display: none;">
<div style="left: 485px; position: absolute; top: 25px;">
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/5BseRzzmZn8?rel=0" width="575"></iframe>
</div>
</div>
اذا اردت تغير مقاطع الفيديو قم بتغيير عنوان اليوتيوب اذا اردت تغير مضمون العرض قم بتغيير هذا الكود

فى المكان الذى تريد عرضة
</div>
<br />
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/PH_br4e2ryM?rel=0" width="575"></iframe>
</div>
اذ اعجبك الموضوع ضع رد 
الخميس, مارس 20, 2014

كود الميتا تاج الذى يضع مدونتك فى صدارة محركات البحث فى عام 2013 لمدونتك على بلوجر

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

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

قم بالبحث عن الكود التالى
<head>
وقم بحذف جميع الأكواد التى بعده وقبل الكود التالى :ماعدا امواد الخطوط او اى ملفات اخرى
<b:skin>
أى قم بحذف ما بينهما
ولكن هناك ما لا يجب أن تحذفه , وهو كود الخطوط على مدونتك ( إن وجد )
ثم ضع بينهما الكود التالى
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content=' وصف المدونة' name='description'/>
<meta content='كلمات , دلالية' name='keywords'/>
<meta content='رابط بانر' name='og:image'/>
<meta content='global' name='distribution'/>
<meta content='10 days' name='revisit'/>
<meta content='10 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='all' name='audience'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<meta content='إسمك بالإنجليزية' name='author'/>
<meta content='ar' name='language'/>
<meta content='بلدك بالإنجليزية' name='country'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
 قم بتعديل الكود عن طريق تغيير الكلمات بين القوسين بالمطلوب فيها , وراعى أن يكون وصف المدونه عباره عن جمله مفيه لا تزيد عن 150 حرف وتصف بهم حال المدونه فعلا .

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

كيف تصنع وتضيف وتستخدم أزرار جميله جدا بتأثير CSS3 لمدونتك وتدويناتك على بلوجر

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

تستطيع عمل هذه الروابط على شكل أزرار جميلة المظهر بتأثير CSS رائع وبأشكال متعدده لتختار ما يناسبك منها

كيف تحصل على هذه الأزرار

إذهب إلى أكواد HTML الخاصه بقالب مدونتك وفقط قم بالبحث عن الكود التالى
]]></b:skin>
وقبله مباشرة ضع الكود التالى
/*Gzero Buttons*/
.nw-btn {
    border-image: none;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    display: inline-block;
    font-size: 13px;
    font-family: Arial;
    line-height: 20px;
    margin: 0;
    padding: 4px 12px;
    text-align: center;
    vertical-align: middle;
    cursor:pointer;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-style: solid;
    border-width: 1px;
    color: #FFF !important;
    text-decoration: none !important;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
.nw-btn:hover {
    text-decoration: none !important;
}
.nw-btn:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}
/*Blanco*/
.nw-btn.white {
    background: #F5F5F5 ;
    background-image: linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
    background-image: -o-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
    background-image: -moz-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
    background-image: -webkit-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
    background-image: -ms-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #E6E6E6),color-stop(1, #FFFFFF)) ;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75) !important;
    color: #333 !important;
}
.nw-btn.white:hover {background: #E6E6E6 ;}
/*Azul*/
.nw-btn.blue {
    background: #49AFCD;
    background-image: linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -o-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -moz-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -webkit-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -ms-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #2F95B4),color-stop(1, #5BC0DE));
}
.nw-btn.blue:hover {background:#2F96B4;}
/*Verde*/
.nw-btn.green {
    background: #5BB75B;
    background-image: linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -o-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -moz-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -webkit-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -ms-linear-gradient(bottom, #51A351 0%, #62C462 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #51A351),color-stop(1, #62C462));
}
.nw-btn.green:hover {background:#51A351;}
/*Naranja*/
.nw-btn.orange {
    background: #FAA732 ;
    background-image: linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
    background-image: -o-linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
    background-image: -moz-linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
    background-image: -webkit-linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
    background-image: -ms-linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F89306),color-stop(1, #FBB450)) ;
}
.nw-btn.orange:hover {background: #F89406 ;}
/*Rojo*/
.nw-btn.red {
    background: #DA4F49 ;
    background-image: linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
    background-image: -o-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
    background-image: -moz-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
    background-image: -webkit-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
    background-image: -ms-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #BD362F),color-stop(1, #EE5F5B)) ;
}
.nw-btn.red:hover {background: #BD362F ;}
/*Finish Gzero Buttons*/
ثم قم بحفظ القالب
والآن عندما ترغب بإظهار أى رابط على شكل زر فقط عدل فى كود الرابط
فالرابط فى الأساس عند التعديل على HTML الخاص بالتدوينه نجده بالشكل التالى
<a href="#">كلمات الرابط</a>
وعن رغبتنا فى جعله على شكل الزر نجعله بالشكل التالى
<a class="nw-btn white" href="#">كلمات الرابط</a>
أى أننا أضفنا الكود التالى إلى الكود الأصلى
class="nw-btn white"
وها هى أكواد الأزرار بألونها تستطيع أن تختار من بينها اللون المفضل لديك
<a class="nw-btn white" href="#">زر أبيض</a>
<a class="nw-btn red" href="#">زر أحمر</a>
<a class="nw-btn blue" href="#">زر أزرق</a>
<a class="nw-btn orange" href="#">زر برتقالى</a>
<a class="nw-btn Green" href="#">زر أخضر</a>
وبذلك تكون قد حصلت على أزرار رائعة المظهر وبكل سهوله عن طريق أكواد CSS البسيطه والرائعه .
الثلاثاء, أبريل 02, 2013

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

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

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

كيفية إضافة أداة آخر الموضوعات مع الصور والتلميحات

إذهب إلى لوحة تحكم بلوجر ثم إلى التخطيط ثم أضف أداة HTML/JAVASCRIPT وقم بلصق الكود التالى فيها
<style type="text/css">
#post-gallery {
  width:304px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#17B986;
  -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 3px 2px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#48D;
  text-align: center;
}
#post-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('http://softglad.at.ua/images/loading.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}
#post-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item .rp-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:5px solid #FA7C19;
  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#FA7C19;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "آخر التدوينات",       // Widget Title
    numposts    = 20,      // The number of thumbnails / posts to display
    numchar     = 200,      // Number of characters in the description tooltip
    rcFadeSpeed = 600,      // Speed of the effect. fadeIn () tooltip appears
    pBlank      = "http://softglad.at.ua/images/no-img.png",      // Image that show up if the post doesn't have a image
    blogURL     = "http://AR-BLOGGER-TIPS.BLOGSPOT.com";       // Your Blog Address
</script>
<script src="http://softglad.at.ua/widgets/post-gallery.js" type="text/javascript"></script>
وفقط قم بوضع رابط مدونتك بدلا من  http://AR-BLOGGER-TIPS.BLOGSPOT.com وقم بحفظ القالب وإستمتع بالإضافه الرائعه .
الجمعة, مارس 08, 2013

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

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

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

وجوجل تقدم لنا الآن 6 خطوط عربيه جديده وهى :
  1. Amiri
  2. Droid Arabic Kufi
  3. Droid Arabic Naskh
  4. Lateef
  5. Scheherazade
  6. Thabit
وحتى أسهل عليكم , ها هى الخطوط السته وأشكالهم فى الصور
Amiri
Droid Arabic Kufi
Droid Arabic Naskh
Lateef
Scheherazade
Thabit

والآن كيف نستخدم هذه الخطوط فى مدوناتنا على بلوجر ؟

تنقسم الخطوات إلى شقين
الشق الأول : إضافة رابط الخط
إفتح أكواد HTML الخاصه بقالب مدونتك , ثم قم بالبحث عن الكود التالى
<head>
 وضع تحته مباشرة الكود الخاص بالخط وهو كالتالى للخطوط السته على التوالى

ملحوظه : عليك بوضع السطر الخاص بالخط المطلوب فقط وليس كل الخطوط .
<link href='http://fonts.googleapis.com/earlyaccess/amiri.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/lateef.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/scheherazade.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/thabit.css' rel='stylesheet' type='text/css'/>
الشق الثانى : تعديل نوع الخط فى الجزء الذى تريد تغييره
والآن تستطيع تغيير الخط على كل أجزاء المدونه , فقط عليك معرفة كود الجزء المراد تغيير الخط فيه , وإليك شكل أكواد CSS الخاص بكل خط من الخطوط السابقه وبنفس الترتيب

ملحوظه : عليك إستخدام كود واحد من الأكواد التاليه , وإختر هذا الكود على أسس إختيارك لكود نوع الخط السابق .
font-family: 'Amiri', serif;
font-family: 'Droid Arabic Kufi', serif;
font-family: 'Droid Arabic Naskh', serif;
font-family: 'Lateef', serif;
font-family: 'Scheherazade', serif;
font-family: 'Thabit', serif;
وأخيرا يمكنكم الإستعانه بهذه الصفحه , وهى الصفحه الرئيسيه الخاصه بجوجل والتى تقدم هذه الخطوط .
الأربعاء, فبراير 06, 2013

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

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

هذا سبب , والسبب الآخر أنى وجدت الكثير من التدوينات الموجوده على الإنترنت والتى تتناول هذه الإضافه بالشرح إما أنها لا تقدم شرحا وافيا وصحيحا , وإما أنها تقدم شرحا قديما ولا يتناسب مع الوضع الحالى من حيث التطورات , كما أن بها بعض العيوب , ولذلك إليكم شرح مفصل لكيفية إضافة صندوق تعليقات الفيسبوك لمدوناتكم على بلوجر .
قم بالضغط على هذا الرابط وسيفتح لك صندوق حوارى يطلب منك أن تدخل سطرين من البيانات
إدخل فى السطر الأول إسم التطبيق وليكن مثلا ( تعليقات الفيسبوك ) أو أى إسم تريده .
إدخل فى السطر الثانى إسم مدونتك بالإنجليزيه ( ar-blogger-tips ) مثلا أو أى إسم تريده .
ثم إضغط إستمرار أو متابعه أو continue تبعا للغة إستخدامك للفيسبوك .
سيظهر لك مربع حوارى آخر به كلمه للتحقق , قم بإدخالها ثم إضغط متابعه .
ستجد أن المربعات الحواريه قد أغلقت وظهرت أمامك الصفحه بها بيانات , وهى ما يهمنا كما فى الصوره .
إفتح تحرير HTML الخاص بقالب مدونتك وقم بتوسيع القالب ثم إتبع الآتى :
إبحث عن الكود التالى
<html
أضف بعده مباشرة الكود التالى
xmlns:fb='http://www.facebook.com/2008/fbml'
سيصبح شكل الكود كاملا كالشكل التالى
<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
ثم إبحث عن الكود التالى
<body>
ضع الكود التالى بعده مباشرة
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
    FB.init({xfbml: true, appId: معرف التطبيق });
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/ar_AR/all.js'
    document.getElementById('fb-root').appendChild(e);
  }());
</script>
وقم بإستبدال كلمة معرف التطبيق ذات اللون الأحمر برقم App ID/API Key المعطى لك فى البيانات التى حصلت عليها سابقا .
بعد ذلك قم بالبحث عن الكود التالى
</head>
وأضف قبله مباشرة الكود التالى
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta   expr:content='data:blog.pageTitle' property='og:title'/>
<meta   expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta   expr:content='data:blog.title' property='og:title'/>
<meta   expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta   content='عنوان المدونة' property='og:site_name'/>
<meta   content='http://google.com/help/hc/images/logos/blogger_logo.gif'   property='og:image'/>
<meta content='معرف التطبيق ID'   property='fb:app_id'/>
<meta content='معرف حسابك على فيسبوك ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>
قم بتغيير عنوان المدونه وإكتب عنوان مدونتك
قم بتغيير الرابط ذو اللون البرتقالى إلى رابط الصوره التى ترمز لمدونتك
قم بتغيير معرف التطبيق ID إلى رقم App ID/API Key المعطى لك فى البيانات السابقه
قم بتغيير معرف حسابك على فيسبوك ID إلى معرف حسابك الحقيقى على الفيس بوك , فمثلا من الممكن أن يكون إسما هكذا
https://www.facebook.com/yaso.actor
أو من الممكن أن يكون أرقاما هكذا
https://www.facebook.com/profile.php?id=100006891387389
وبعد أن تنتهى من هذه التعديلات قم بالبحث عن الكود التالى
<data:post.body/>
ثم أضف بعده مباشرة الكود التالى
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div><script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<fb:comments width='560' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' migrated='1'/>
</div>
</b:if>
تستطيع تغيير عرض الصندوق من خلال تغيير الرقم باللون الأحمر .

وفى النهايه قم بحفظ القالب وتمتع بصندوق تعليقات الفيسبوك على مدونتك .
الثلاثاء, ديسمبر 11, 2012

كيف تجعل تدوينه او أكثر مثبته على الصفحه الرئيسيه لمدونتك على بلوجر

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

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

طريقة التاريخ ( غير جيده )

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

طريقة الإضافه ( غير جيده )

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

طريقة التدوينه المثبته الحديثه ( ممتازه )

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

إذهب إلى أكواد HTML الخاصه بقالب مدونتك ثم قم بالبحث عن الكود التالى
</body>
ثم ضع قبله تماما الكود التالى
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style type='text/css'>
    .sticky-post { background-color: #F0F0F0; padding: 8px;}
    .stickies-container { background-color: #E4E4E4; padding: 4px; margin-bottom: 2em;}
    .stickymore { display: none; }
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    // Sticky posts by MS-potilas 2011. See http://yabtb.blogspot.com/
    // Configuration:
    var stickyLabel = "sticky"
    var maxStickies = 2;  // 1-20
    var showDate = true;
    var showTitle = true;
    var showFooter = true;
    var showPostedBy = true;
    var showCommentLink = true;
    var showLabels = true;
    var showStickyLabel = false;
    var showEmailPost = false;
    var showShareButtons = true;
    var showShareEmail = true;
    var showShareBlog = true;
    var showShareTwitter = true;
    var showShareFacebook = true;
    var showSharePlusone = true;
    var widthPlusone = 300;
    var txtComment = "comment";
    var txtComments = "comments";
    var txtPostedBy = "Posted by [user] at [time]";
    var txtLabels = "Labels:";
    var txtMore = "Read more &raquo;";
    var dynamicMore = true;
    var txtHideMore = "&laquo; <small>Hide</small>";
    // config end
    function findQuickEdit() {
      var elements = document.getElementsByTagName("*");
      var expr = /(^| )quickedit( |$)/;
      for(var i=0 ; i<elements.length ; i++)
        if(expr.test(elements[i].className))
          return (elements[i].offsetWidth != 0);
      return false;
    }
    function toggleStickyMore(id) {
      if(document.getElementById(id)) {
        if(document.getElementById(id+'-morelink').style.display != 'none') {
          document.getElementById(id).style.display = 'block';
          document.getElementById(id+'-morelink').style.display = 'none';
        } else {
          document.getElementById(id).style.display = 'none';
          document.getElementById(id+'-morelink').style.display = 'inline';
        }
      }
      var elm=document.getElementById(id+'-buttons');
      if(elm) {
        var old=elm.style.display;
        elm.style.display = 'none';
        elm.style.display = old; // because of IE...
      }
    }
    function renderStickies(result) {
        if(!result || !result.feed || !result.feed.entry || !result.feed.entry.length) return;
        var divSticky = document.createElement('div');
        divSticky.className = "stickies-container";
        var elm = document.getElementById("Blog1");
        elm.insertBefore(divSticky, elm.firstChild);
        if(!showLabels && !showPostedBy && !showCommentLink)
          showFooter = false;
        var strBuffer="";
        var isQuickEdit = findQuickEdit();
        for(var i = 0 ; i < result.feed.entry.length && i < maxStickies ; i++) {
            if(strBuffer != "")
              strBuffer += "<br />";
            var entry = result.feed.entry[i];
            strBuffer += "<div class=\"sticky-post\">";
            var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
            postDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
            if(showDate)
              strBuffer += "<h2 class=\"date-header\">" + postDate.toLocaleDateString() + "</h2>";
            var link="";
            for(var k = 0; k < entry.link.length; k++ ) {
              if(entry.link[k].rel == 'alternate') {
                link = entry.link[k].href;
                break;
              }
            }
            var blogid = entry.id.$t.split('-')[1].split('.')[0];
            var postid = entry.id.$t.split('-')[2];
            if(postid != "") {
              var elepost=document.getElementsByName(postid);
              if(elepost && elepost[0]) {
                elepost = elepost[0].parentNode;
                while(elepost && !/(^| )date-outer( |$)/.test(elepost.className))
                  elepost = elepost.parentNode;
                if(elepost && elepost.parentNode) elepost.parentNode.removeChild(elepost);
              }
            }
            if(showTitle)
              strBuffer += "<h3 class=\"post-title entry-title\"><a href=\"" + link + "\">"+ entry.title.$t + "</a></h3><br />";
            var content = entry.content.$t;
            if(content.indexOf("<a name='more'")!=-1) {
              if(!dynamicMore) {
                content = content.replace(/\n/g, " ");
                content = content.replace(/<a name='more'.*$/, "<div style='clear: both;'></div><div class='jump-link'><a href='"+link+"#more' title='"+entry.title.$t+"'>"+txtMore+"</a></div>");
              } else {
                var morelink = '<a href="javascript:void(0);" id="sticky'+postid+'-morelink" onclick="toggleStickyMore(\'sticky'+postid+'\');return false;" title="'+entry.title.$t+'">';
                morelink += txtMore+'</a><div class="stickymore" id="sticky'+postid+'">';
                morelink += '<a style="float:right;margin-left:1em;" href="javascript:void(0);" onclick="toggleStickyMore(\'sticky'+postid+'\');return false;" title="Hide text">' + txtHideMore + '</a>';
                content = content.replace(/\n/g, " ").replace(/<a name='more'.*?<\/a>/, morelink) + "</div>";
              }
            }
            strBuffer += content;
            if(showFooter) {
              var strComments = "";
              if(showCommentLink)
                strComments = "<a class=\"comment-link\" href=\"" + link + "#comments\">" + entry.thr$total.$t + " " + ((entry.thr$total.$t==1) ? txtComment : txtComments) + "</a>";
              strBuffer += "<div class=\"post-footer-line post-footer-line-1\"><div class=\"post-footer\">";
              if(showPostedBy) {
                var strPostedBy = txtPostedBy.replace('[user]', entry.author[0].name.$t);
                strPostedBy = strPostedBy.replace('[time]', '<a class="timestamp-link" href="'+link+'">'+postDate.getHours() + ":" + String("0"+postDate.getMinutes()).slice(-2)+'</a>');
                strBuffer += strPostedBy;
                if(showCommentLink)
                  strBuffer += " &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ";
              }
              if(showCommentLink && (showShareButtons || showEmailPost)) {
                strBuffer += strComments + " &nbsp; &nbsp; ";
                strComments = "";
              }
              if(isQuickEdit) {
                strBuffer += "<a href='http://www.blogger.com/post-edit.g?blogID="+blogid+"&postID="+postid+"&from=pencil' title='Edit Post'><img class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/></a> &nbsp; ";
              }
              if(showEmailPost) {
                emailPostUrl = "http://www.blogger.com/email-post.g?blogID="+blogid+"&postID="+postid;
                strBuffer += '<span class="item-action"><a href="'+emailPostUrl+'" title="Email Post"><img class="icon-action" height="13" src="http://img1.blogblog.com/img/icon18_email.gif" width="18"/></a></span> &nbsp; &nbsp; ';
              }
              if(showShareButtons) {
                strBuffer += "<div id='sticky"+postid+"-buttons' class='post-share-buttons goog-inline-block'>";
                sharePostUrl = "http://www.blogger.com/share-post.g?blogID="+blogid+"&postID="+postid;
                if(showShareEmail)
                  strBuffer += '<a class="goog-inline-block share-button sb-email" href="'+sharePostUrl+'&target=email" title="Email This" target="_blank"><span class="share-button-link-text">Email This</span></a>';
                if(showShareBlog)
                  strBuffer += '<a class="goog-inline-block share-button sb-blog" href="'+sharePostUrl+'&target=blog" onclick="\'window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;\' title="BlogThis!" target="_blank"><span class="share-button-link-text">BlogThis!</span></a>';
                if(showShareTwitter)
                  strBuffer += '<a class="goog-inline-block share-button sb-twitter" href="'+sharePostUrl+'&target=twitter" title="Share to Twitter" target="_blank"><span class="share-button-link-text">Share to Twitter</span></a>';
                if(showShareFacebook)
                  strBuffer += '<a class="goog-inline-block share-button sb-facebook" href="'+sharePostUrl+'&target=facebook" onclick="\'window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;\' title="Share to Facebook" target="_blank"><span class="share-button-link-text">Share to Facebook</span></a>';
                if(showSharePlusone)
                  strBuffer += '&nbsp;<div class="goog-inline-block dummy-container"><div class="g-plusone" data-size="medium" data-href="'+link+'" data-width="'+widthPlusone+'" data-annotation="inline"></div></div>';
                strBuffer += "</div>";
              }
              if(showLabels && (showPostedBy || showShareButtons))
                strBuffer += "<br />";
              if(showLabels) {
                if((entry.category.length > 1 && !showStickyLabel) || (entry.category.length > 0 && showStickyLabel)) {
                  strBuffer += txtLabels + " ";
                  for(var z = 0 ; z < entry.category.length ; z++) {
                    if(entry.category[z].term == stickyLabel && !showStickyLabel)
                      continue;
                    if(z) strBuffer += ", ";
                    strBuffer += "<a href=\"/search/label/" + encodeURIComponent(entry.category[z].term) + "\">" + entry.category[z].term + "</a>";
                  }
                }
                if(strComments != "")
                  strBuffer += " &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ";
              }
              strBuffer += strComments;
              strBuffer += "</div></div>";
            }
            strBuffer += "</div>";
        }
        strBuffer = strBuffer.replace(/<img width=.1. height=.1. [^>]+>/g, "");
        divSticky.innerHTML = strBuffer;
    }
    feedURI = "/feeds/posts/default/-/" + stickyLabel + "?max-results=25&redirect=false";
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+feedURI+'&alt=json-in-script&callback=renderStickies"></'+'script>');
    //]]>
    </script>
    </b:if>
    </b:if>
ثم قم بحفظ قالب مدونتك وإستمتع بالتدوينات المثبته .

إعدادات وملاحظات هامه جدا

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