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

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

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


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


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


لقيام بهذا قم بالدخول لمنصة تحرير 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

اضافة فهرس احترافى لمدونات بلوجر

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

هى بنا ننتقل الى الشرح

اولا المعاينة الحية للقهرس
معاينة

ثانيا الكود وتنسيقة وشرحة 

<div dir="rtl" style="text-align: right;" trbidi="on">
<style scoped="" type="text/css"> #toc-outer { color:black; font:normal 13px/15px font-family: 'Droid Arabic Kufi',serif; height:auto; margin:0 auto; overflow:hidden; padding:0; text-align:right; } #loadingscript { padding:0px 0px; height:37px; text-indent:-9999px; color:transparent; background:white url('data:image/gif;base64,R0lGODlhEAALALMMAOXp8a2503CHtOrt9L3G2+Dl7vL0+J6sy4yew1Jvp/T2+e/y9v///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCwAMACwAAAAAEAALAAAEK5DJSau91KxlpObepinKIi2kyaAlq7pnCq9p3NZ0aW/47H4dBjAEwhiPlAgAIfkECQsADAAsAAAAAAQACwAABA9QpCQRmhbflPnu4HdJVAQAIfkECQsADAAsAAAAABAACwAABDKQySlSEnOGc4JMCJJk0kEQxxeOpImqIsm4KQPG7VnfbEbDvcnPtpINebJNByiTVS6yCAAh+QQJCwAMACwAAAAAEAALAAAEPpDJSaVISVQWzglSgiAJUBSAdBDEEY5JMQyFyrqMSMq03b67WY2x+uVgvGERp4sJfUyYCQUFJjadj3WzuWQiACH5BAkLAAwALAAAAAAQAAsAAAQ9kMlJq73hnGDWMhJQFIB0EMSxKMoiFcNQmKjKugws0+navrEZ49S7AXfDmg+nExIPnU9oVEqmLpXMBouNAAAh+QQFCwAMACwAAAAAEAALAAAEM5DJSau91KxlpOYSUBTAoiiLZKJSMQzFmjJy+8bnXDMuvO89HIuWs8E+HQYyNAJgntBKBAAh+QQFFAAMACwMAAIABAAHAAAEDNCsJZWaFt+V+ZVUBAA7') no-repeat 50% 50%; } .itemposts { float: right; height: auto; overflow: hidden; width: 47%; box-shadow: 1px 1px 5px #C3C3C3; background: none repeat scroll 0% 0% #F9F9F9; border: 1px solid #FFF; margin: 3px 5px 8px; padding: 0px 3px; } .itemposts h6 { border-bottom: 1px solid #CCC; color: #333; height: 30px; overflow: hidden; text-transform: none; margin: 0px 0px 5px; padding: 2px 6px !important; font:bold 13px font-family: 'Droid Arabic Kufi', serif; } .itemposts h6 a:hover { color:#38f; text-decoration:none; } .itemposts img { background-color:#fff; border:1px solid #ccc; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; float:right; height:65px; margin:0 0 5px 7px; padding:3px; width:65px; z-indent:99999px; } .itemposts .iteminside {} .itemposts .itemfoot { border-top: 1px solid #CCC; clear: both; overflow: hidden; padding: 4px 5px; font:12px font-family: 'Droid Arabic Kufi', serif; } .itemposts .itemfoot a.itemrmore { color:#333; float:left; font-weight:bold; text-decoration:none; } .itemposts .itemfoot a.itemrmore:hover {text-decoration:underline} #itempager { clear:both; padding:10px 0; } #pagination, #totalposts { color:#000; display:block; font:12px font-family: 'Droid Arabic Kufi', serif; margin-bottom:10px; text-align:center; padding:0; } #pagination span, #pagination a { color: #FFF; display: inline; margin: 0px 1px; padding: 2px 5px; text-indent: 0px; background-color: #068BC9; background-image: linear-gradient(#068BC9 0%, #3161C2 50%, #3059AB 51%); border: 1px solid #3161C2; text-decoration: none; border-radius: 10px; } #pagination a:hover {background-color:#333} #pagination span.actual {background-color:black} #pagination span.hidden {display:none}</style> <script> var showPostDate = true, showComments = true, idMode = true, sortByLabel = false, labelSorter = "JQuery", loadingText = "Loading...", totalPostLabel = "عدد المواضيع:", jumpPageLabel = "الصفحة", commentsLabel = "التعليقات", rmoreText = "الموضوع كاملا &#9658;", prevText = "Sebelumnya", nextText = "Berikutnya", siteUrl = "http://ar-blogger-tips.blogspot.com/", postPerPage = 10, numChars = 150, imgBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC"; </script> <script src="http://yourjavascript.com/1183493241/rifan-pagination.js"></script></div>
  • استبدل الرابط الملون بالأحمر برابط مدونتك
  • #C3C3C3 لو صندوق الظل للفهرس
  • #fff لون حدود صناديق الموضوع
  • #F9F9F9 لون خلفية الفهرس
لاتنسى عمل اعجاب بصفحة الفيس بوك من هنا
والأنضمام الينا من هنا
ارجو ان تنال الأضافة اعجباكم
اذا وجهاتك مشاكل فى الكود اطرحها علينا بالتعليق
لاتنسى ترك بصمتك




الأحد, يوليو 20, 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

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

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

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

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

هام:قم بأخذ نسخة احتياطية من قالبك لأستعمالة عند وجود اخطاء فى بعض الأحيان عند الأضافات
ثانيا
اذهب الى واجهة مدونتك
قم بأختيار قالب
ثم تحرير (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

افضل موقع لأضافة خلاصات موقعك لمحركات البحث وارشفتها

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

الثلاثاء, مايو 06, 2014

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

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

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

الكود

<style>
#ptftopbar {
border-radius: 10px;
height:30px;
width:auto;
background: #005094 url('..');
background-repeat:repeat-x;
text-align:left;
padding-top:4px;
}
#fbground {
border-radius: 10px;
border: 3px ;
height:600;
margin:0 auto;
width: 160px;
background:#fff;
border-bottom:2px #005094 solid;
border-right:2px #005094 solid;
border-left:2px #005094 solid;
text-align:center;
padding:4px;
}
#headlineatas {
opacity:1.0;
height:auto;
width:auto;
position:fixed;
top:65px;
left:10px;
border-bottom:1px #005094 solid;
border-bottom:0px blue solid;
color:#660000;
padding:1px;
z-index:1001;
font-size:13px;}
</style>
<script type="text/javascript">
function getValue()
{
document.getElementById("headlineatas").style.display = 'none';
}
</script>
<div id="headlineatas">
<div id="ptftopbar">
<img align="left" style="padding-right:2px;" src="http://i50.tinypic.com/34p1d6u.png" />
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em">ادعمناعلي الفيس بوك </span>
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a href="http://www.facebook.com/hh5050?ref=hl" target="_blank" onclick="getValue()">Close</a></span>
</div>
<div id="fbground">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fhh5050?ref=hl&amp;width=200&amp;height=200&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=false&amp;appId=221777087880548" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:140px; height:258px;" allowtransparency="true"></iframe>
</div>
<br/></div>
غير مابلون الأحمر برابط الجزء الأخير من صفحنك او بمعرف صفحتك
ان وفقت فهذا من الله وان اخطاءت فمن نفسي والشيطان

الجمعة, أبريل 18, 2014

اضافة احصائيات المدونة

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

هذة احصائية مدونتى

اليكم الكود اخى الفاضل واتمنى الردود

الكود




<div class='widget-content'> <ul><li><div><a href="http://ar-blogger-tips.blogspot.com/">المتواجدون الآن في المدونة: <script src="http://fastonlineusers.com/on2.php?d=ebd2-ar-blogger-tips.blogspot.com/+ data:blog.id + " type="text/javascript"></script></a></div></li> <li><div><a href="http://ar-blogger-tips.blogspot.com/">المتواجدون الآن في هذه الصفحة: <script src="http://fastonlineusers.com/on2.php?d=http://ar-blogger-tips.blogspot.com//+ data:post.id + " type="text/javascript"></script></a></div></li><ul></ul></ul> </div> <script style="text/javascript"> function numberOfPosts(json) { document.write('عدد التدوينات: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>'); } function numberOfComments(json) { document.write('عدد التعليقات : <b>' + json.feed.openSearch$totalResults.$t + '</b><br>'); } </script> <ul><li><script src="http://ar-blogger-tips.blogspot.com//feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li> <li><script src="http://ar-blogger-tips.blogspot.com//feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul> <span style="font-size:75%;"></span> <div dir="rtl" style="text-align: right;" trbidi="on"> <script> function numberOfPosts(json) { document.write('عددالتدوينات: <b>' + json.feed.openSearch$totalResults.$t + '</b> '); } function numberOfComments(json) { document.write('عدد التعليقات: <b>' + json.feed.openSearch$totalResults.$t + '</b> '); } </script></div>

ملحوظة  

كل ماعليك لتشغيل الأضافة هو 

استبدال هذا الجزء ar-blogger-tips.blogspot.com بالجزء الخاص بمدونتك بدون http:///

اتمنى ان تكون استمتعتم انتظر الردود



السبت, أبريل 05, 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

بلوجر تطلق محرر أكواد إتش تى إم إل HTML الجديد بمميزات رائعه

إطلقت منصة تدوين بلوجر مؤخرا محرر إتش تى إم إل HTML جديد يحمل صفات جميله جدا وجذابه جدا وعمليه ومفيده جدا جدا جدا .

يحتوى النموذج الجديد لتحرير الأكواد على المميزات والصفات التاليه :

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

شرح كامل وتفصيلى لطرق تعريب قوالب بلوجر

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

البرامج المستخدمه فى خطوات تعريب قالب بلوجر والتطوير

  1. متصفح الفايرفوكس .
  2. برنامج النوت باد ++ .
  3. إضافة الفاير باج لمتصفح الفاير فوكس .
  4. برنامج النوت باد العادى الخاص بالويندوز .
  5. برنامج كلر بايك .

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

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

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

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

نفتح قائمة Edit ثم نختار Replace وسيكون الشكل كما مبين فى الصوره
نقوم فى الخانه الأولى بكتابة Right وفى الخانه الثانيه بكتابة Ymen ثم نضغط على زر Replace All .
ثم نقوم فى الخانه الأولى بكتابة Left وفى الخانه الثانيه بكتابة Ysar ثم نضغط على زر Replace All .
ثم نقوم فى الخانه الأولى بكتابة Ymen وفى الخانه الثانيه بكتابة Left ثم نضغط على زر Replace All .
ثم نقوم فى الخانه الأولى بكتابة Ysar وفى الخانه الثانيه بكتابة Right ثم نضغط على زر Replace All .
ثم نغلق هذا المربع الحوارى , ونظلل الكود كاملا ونقوم بنسخه , ثم نلصقه فى مكان أكواد HTML الخاص بقالب المدونه على لوحة تحكم بلوجر ( بدلا من الكود الأصلى ) .
ثم نقوم بحفظ القالب , وبهذا نكون قد إنتهينا من الخطوه الأولى .

الخطوه الثانيه : تبديل الحواشى والمحاذاه

القالب ملىء بأكواد padding و أكواد margin وتكون فى صور متنوعه كالآتى
padding: 3px 10px 5px 4px;
padding: 3px 4px 9px;
padding: 6px 2px;
padding: 8px;
padding-right: 9px;
padding-left: 5px;
margin: 3px 10px 5px 4px;
margin: 3px 4px 9px;
margin: 6px 2px;
margin: 8px;
margin-right: 2px;
margin-left: 3px;
فى تعريب القوالب نهتم فقط بأنواع الأكواد التى تشبه الكودين التاليين فقط
padding: 3px 10px 5px 4px;
margin: 3px 10px 5px 4px;
ومهمتنا هنا هى أن نقوم بتبديل الأرقام بين القيمتين الثانيه والرابعه ( من إتجاه اليسار طبعا ) وسنشرح الآن كيف نقوم بعمل ذلك بأسهل طريقه .

نحن طبعا نستخدم متصفح الفايرفوكس لذا فعلينا البحث عن أول الكود كى نقوم بتبديله , وللبحث نقوم بضغط CTL+F وسيظهر لك مربع البحث فى أسفل متصفح الفايرفوكس كما فى الصوره
نقوم بالبحث أولا عن جزء من بداية الكود مثلا
padding:
ونقوم بضغط زر NEXT كى نتنقل من كود إلى آخر , وكلما وجدنا كودا يشبه الكود الذى ذكرناه سابقا نقوم بتبديل القيمتين الثانيه والرابعه , حتى ننتهى من كل هذه الأكواد المشابهه فى القالب .
وثانيا نقوم بالبحث عن جزء من بداية الكود الثانى مثلا
margin:
ونكرر ما فعلناه فى الخطوه السابقه .

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

وفى نهاية التعديلات نقوم بحفظ القالب .

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

حمل برنامج تعريب قوالب بلوجر من سيرفر الميديا فاير بالضغط هنا ( مساحة البرنامج 11 ميجا بايت )

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

تستطيع الآن بعد هذه التدوينه أن تقوم بتعريب قوالب بلوجر التى تعجبك بنفسك , كما تستطيع أن تلحق بنا فى ركب مطورى المدونات عن طريق متابعتك لسلسلة تدويناتنا القادمه التى سنشرح فيها بالتفصيل كيفية تطوير كل جزء من قالب بلوجر و عمل التعديلات عليه كى يلائم إحتياجاتك وزوقك ,, فقط تابعونا جيدا فى سلسلة التدوينات التاليه .
الأحد, فبراير 24, 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

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

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

data:blog.languageDirection
وهو مصطلح يعنى إتجاه اللغه فى المدونه وهو يهتم بتحديد فى أى إتجاه ستكون الكتابه , من اليمين لليسار كاللغه العربيه أم من اليسار لليمين كاللغه الإنجليزيه , وهكذا ,,,
data:blog.pageTitle
مصطلح يشير إلى عنوان المدونه , وهو يهتم بعنوان المدونه كوحده واحده .
data:link.title
وتعنى عنوان المدونه ولكن كنص فقط وليس كرابط .
data:link.href
تعنى عنوان المدونه ولكن كرابط وليس كنص فقط .
data:link.isCurrentPage
ويشير المصطلح إلى أن رابط الصفحه المفتوحه حاليا هو نفس الرابط الذى يشير إليه نص معين أو زر معين أو تبويب معين , فيتم التعامل معه بشكل مختلف عن باقى مثيلاته .
data:blog.homepageUrl
ويشير إلى عنوان المدونه أ, عنوان الصفحه الرئيسيه بالتحديد .
data:description
يشير هذا المصطلح إلى وصف المدونه .
data:newerPageUrl
مصطلح يعنى رسائل أحدث فى المدونه , وهو الرابط الذى يوجد أسفل التدوينه وينقلك إلى التدوينه الأحدث .
data:newerPageTitle
وهو يعنى فقط النص الذى سيظهر كى ينقلك إلى التدوينه الأحدث .
data:homeMsg
هو النص الذى يظهر أسف التدوينه كى ينقلك من خلال رابطه إلى الصفحه الرئيسيه .
data:olderPageUrl
مصطلح يعنى رسائل أقدم فى المدونه , وهو الرابط الذى يوجد أسفل التدوينه وينقلك إلى التدوينه السابقه .
data:olderPageTitle
يعنى فقط النص الذى سيظهر كى ينقلك من خلال رابطه إلى لتدوينه الأقدم او السابقه .
data:post.title
ويشير إلى عنوان التدوينه .

ربما كانت التدوينه قصيره شيئا ما .. ولكن ربما أقوم بإكمال المعلومات فى تدوينه لاحقه إن شاء الله
الخميس, ديسمبر 06, 2012

شرح كامل لأكواد HTML الخاصه بقوالب مدونات بلوجر - الجزء الأول

قالب بلوجر هو بالأساس عباره عن ملف بإمتداد XML وهو نوع من الملفات التى تحتوى على أكواد HTML و CSS بطريقه مدمجه , فيكون إسم القالب مثلا SIMPLE.XML وهو الملف الذى يتم تحميله ورفعه على مدونتك كى يكسبها شكلا جميلا ومميزا .
عند رفع ملف القالب على مدونتك وفتح تحرير HTML سنجد أن القالب عباره عن أكواد مصفوفه بشكل منظم ومرتب , هذه الأكواد لها معنى وكل منها له وظيفه , سنتناول الآن الأكود كل جزء على حدا ولكن عليك أن تفتح قالب مدونتك كى تتابع معنا هذه الأكواد وشكلها فى الواقع .
<?xml version="1.0" encoding="UTF-8" ?>
وهو الترميز الذى يميز هذا الملف بأنه على لغة XML والذى يخبر المتصفح أن يتعامل مع هذا الملف على هذا النحو .
<!DOCTYPE html>
<html b:version='2' class='v2' 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'>
هذه تكويدات خاصه بنوع الملف ومحتواه وليس من الضرورى عليك معرفة ماذا تفعل هذه الأكواد , ولكن هنك جزء هام فيها وهو الملون باللون الأحمر وهو الذى يخبر المتصفح أن يقوم بقراءة المحتوى من إتجاه معين , وهذا الجزء هام جدا وسنتعامل معه كثيرا فيما بعد .
<head>
وهو وسم رأس المدونه وهو الوسم الذى يحتوى على أوامر هامه جدا مثل الميتا تاج .
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
وهذه هى أوامر الميتا تاج وهى الأساسيه ويمكنك اضافة أوامر ميتا تاج أخرى على حسب إحتياجاتك , فمثلا أمر الميتا تاج الأول خاص بمتصفح الإنترنت إكسبلورر 7 , ثم يليه جمله شرطيه وسأقوم بشرحها بدقه .
 <b:skin><![CDATA[
 هو وسم بداية وفتح الكود الذى يضم بداخله أوامر لغة CSS وهى اللغه التى تحدد شكل المدونه وتعطيه المظهر المطلوب .
<Variable name="body.font" description="Font" type="font"
         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
وهو كود المتغيرات ويوجد عادة فى القوالب التى تقدمها لنا بلوجر رسميا , ونجد هذا الكود موجود بكثره ولكل واحد فيهم وظيفه محدده , فمثلا فى هذا الكود فهو يحدد لنا خط محتوى المدونه ويقدم لنا الخط الأساسى والمعتاد ثم يقدم لنا الخط الذى قمت أنت بإختياره وتغييره من خلال مصمم نماذج بلوجر .
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}
وهو كود CSS ويلى أكواد ووسوم المتغيرات مباشرة , وهذا الكود الذى كتبته كنموذج يحدد لنا محتوى أو جسد المدونه من حيث الخط ولون النص والخلفيه والحواشى , ونلاحظ إستخدام المتغيرات فى هذه الأكواد .
]]></b:skin>
وهو وسم نهاية وإغلاق الكود الذى ضم بداخله لغة CSS , وبهذا يحدد أوامر هذه اللغه بين وسميه بداية ونهايه .
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
وهو كود مكتبة جى كويرى الذى يجعل مدونتك قابله للإستعانه بتأثيرات جى كويرى الجذابه جدا , وإن لم تكن موجوده بمدونتك فعليك إضافتها .
</head>
وهو وسم إغلاق رأس المدونه , وهو الذى يضم كل ما ذكرناه سابقا فيما بعد وسم فتح رأس المدونه .
  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
وهو وسم بداية وفتح جسد المدونه أو محتوى المدونه .
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
</b:section>
وهو كود أداه موجوده على المدونه , والكود السابق خاص بقائمة الروابط , فهو يحدد إسم الأداه وإذا كانت مقفله أو مفتوحه ونوع الأداه, ومثل هذه الأدوات يكون رأس الصفحه و رسائل المدونه الإلكترونيه ( التدوينه نفسها ) .
<div class='main-outer'>
    <div class='main-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
 وهو كود التقسيم والذى يحدد قسم معين فى المدونه ويحتوى على ما يحتوى عليه هذا القسم , ويبدأ بكود البدايه وينتهى بوسم الإغلاق .
<b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
وهو وسم الشرط , ووظيفته أنه يشتطر أمرا ما على المتصفح , فمثلا يشترط على المتصفح بإظهار أداه معينه فى الصفحه الرئيسيه فقط وإخفائها فى باقى الصفحات , وهكذا فى أمور كثيره فى المدونه .
  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;

// <![CDATA[
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                } else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
                  comment.displayTime = entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == config.authorName
              && comment.author.profileUrl == config.authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return config.baseUri + '/delete-comment.g?blogID='
               + config.blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }

      // Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>
وهو نموذج لكود جافا سكريبت JAVASCRIPT وهى لغه تقوم بعمل عدة مهام والقيام بعدة وظائف وإعطاء أوامر كثيره تفيد فى استخدام القوالب فى بلوجر .
</body>
وهو وسم نهاية وإغلاق جسد أو محتوى القالب , وهو الوسم الذى ضم كل ما سبق ذكره منذ ذكر كود أو وسم فتح جسد الصفحه أو محتوى المدونه .
</html>
وسم الإغلاق للكود كاملا .

لقد قمنا سريعا بإستعراض محتويات أكواد قالب من قوالب بلوجر , وفى التدوينات القادمه سوف نقوم بشرح تفصيلى لأوامر ومصطلحات وجمل كوديه داخل هذه الأكواد كى نصبح اكثر إحترافيه فى التعامل مع أكواد مدوناتنا على بلوجر .
الجمعة, نوفمبر 02, 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