ازرار CSS لمدونتك ومن تصميمك

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: right;"><img alt="create css buttons" border="0" src="http://2.bp.blogspot.com/-IaBejZvM4SQ/UXzcx0fG4WI/AAAAAAAABQA/T0Ay_XIihVw/s1600/buttons.png" title="ازرار css لمدونات بلوجر" /></div>ازرار <b>Css Buttons</b> أصبحت رائجه ومستخدمه من قبل كثير من المدونين نظراً لأنها تضيف لمسة جمالية للمواضيع وأيضا هي مميزة ولافتة للإنتباه فيراها القارئ بسهولة وهناك الكثير من الإضافات الجاهزة لصنع تلك الأزرار لكن هناك حكمة شهيرة تقول " لا تعطني سمكة ولكن علمني كيف أصطاد "<br />وهذا ما سنتعلمه وهو طريقة صنع تلك الأزرار بحيث تصنع الزر الذي يتناسب مع الوان مدونتك ويتطابق معها <a href="http://cnmu.blogspot.com/" target="_blank"><b>100%</b></a> وسنستخدم لعمل الأزار موقع متخصص في صنعها , هناك مواقع كثيرة لصنع الأزرار لكن الموقع الذي سنستخدمه هو أسرعها واسهلها في التعامل لدخول الموقع اضغط على الزر التالي وهذا الزر مثال للمعانية  <br /><div style="text-align: center;"><br /></div><div style="text-align: center;"><a class="cnmubo" href="http://cnmu.blogspot.com/p/preview.html?url=http://css-tricks.com/examples/ButtonMaker" target="_blank">دخول الموقع</a></div><div style="text-align: center;"><br /></div><a name="more"></a><div style="text-align: center;">وهذا شرح لقائمة تنسيق الأزرار الخاصة بالموقع</div><br /><div class="separator" style="clear: both; text-align: center;"><img alt="CSS Button Maker" border="0" src="http://3.bp.blogspot.com/-aZhpApwT7wc/UXzcycQuYvI/AAAAAAAABQE/AJkyrZYBPnM/s1600/buttons2.gif" title="صانع أزرار CSS" /></div><div style="text-align: center;">والفديو التالي هو توضيح عملي لطريقة صناعة الأزرار واستخدام الموقع</div><center><div class="cnmuv"><iframe width="441" height="246" frameborder="0" src="http://www.youtube.com/embed/opmpoJVZXiY?rel=0" allowfullscreen=""></iframe></div></center><div style="text-align: center;"><br />وهذا هو الكود الناتج من عملية تصميم الزر</div><br /><blockquote class="tr_bq">.<b><span style="color: red;">button</span></b> {<br />   border-top: 1px solid #de8200;<br />   background: #f78000;<br />   background: -webkit-gradient(linear, left top, left bottom, from(#fcc565), to(#f78000));<br />   background: -webkit-linear-gradient(top, #fcc565, #f78000);<br />   background: -moz-linear-gradient(top, #fcc565, #f78000);<br />   background: -ms-linear-gradient(top, #fcc565, #f78000);<br />   background: -o-linear-gradient(top, #fcc565, #f78000);<br />   padding: 7px 14px;<br />   -webkit-border-radius: 29px;<br />   -moz-border-radius: 29px;<br />   border-radius: 29px;<br />   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;<br />   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;<br />   box-shadow: rgba(0,0,0,1) 0 1px 0;<br />   text-shadow: rgba(0,0,0,.4) 0 1px 0;<br />   color: #000000;<br />   font-size: <span style="color: blue;"><b>19</b></span>px;<br /><span style="color: #38761d;"><b>   font-family: Georgia, serif;</b></span><br />   text-decoration: none;<br />   vertical-align: middle;<br />   }<br />.<b><span style="color: red;">button</span></b>:hover {<br />   border-top-color: #fa0519;<br />   background: #fa0519;<br />   color: #ffffff;<br />   }<br />.<b><span style="color: red;">button</span></b>:active {<br />   border-top-color: #2faafc;<br />   background: #2faafc;<br />   }</blockquote><br /><div style="text-align: center;">هذا الكود يضاف فوق الوسم <b></b:skin> </b>ولكن طبعا تحتاج لضغط سهم توسيع عناصرا لستايل</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGpFAmD-pS6fu9A_HIrhUm_CTeTRCMmB4PI6dqDeXURSjHfIc_TDcJ8-oF260im2NZeImwLKYz-niX-fXLrhOzETq2cYh7Y7oKPq0Iy9BUnMezOQvdUh1dCYmF9zr280yDxlnCYMhDiwG/s1600/tawse3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGpFAmD-pS6fu9A_HIrhUm_CTeTRCMmB4PI6dqDeXURSjHfIc_TDcJ8-oF260im2NZeImwLKYz-niX-fXLrhOzETq2cYh7Y7oKPq0Iy9BUnMezOQvdUh1dCYmF9zr280yDxlnCYMhDiwG/s1600/tawse3.png" /></a></div><h2 style="text-align: right;">أهم الملاحظات حول الكود</h2>هذه الكلمة <b><span style="color: red;">button</span></b>  والمتكررة ثلاث مرات هي معرف الزر ولهذا يفضل تغييرها بكلمة من عندك تميز الزر<br />مثلا نكتب buttonred أو أي كلمة المهم ان لا تكون بها مسافات<br />وإن أردت ان تضيف أكثر من زر كل ما عليك ان تقوم بتنسيق الزر باللون الذي يعجبك ثم تغير المعرف الخاص به وتضيف الكود الخاص كما فعلت بالزر الأول وهكذا<br />الرقم <span style="color: blue;"><b>19</b></span> هو حجم الخط يمكنك تغييره كنوع أكبر من التحكم<br />أما هذا الكود <span style="color: #38761d;"><b>   font-family: Georgia, serif;</b></span> هو وسم الخط وان كنت تستخدم خط مخصص في مدونتك استبدل الوسم بوسم الخط الخاص بك<br /><br /><h2 style="text-align: right;">طريقة استخدام الأزرار في المواضيع</h2>قم بتحويل صندوق المواضيع من وضع التأليف الى وضع HTML<br />ثم أضف الكود التالي في المكان الذي تريد<br /><br /><blockquote class="tr_bq"><a class="<span style=" color:=""><b>button</b></span>" href="<span style="color: blue;"><b>#</b></span>" rel="nofollow" <span style="color: orange;"><b>target="_blank"</b></span>><b><span style="color: #38761d;">Word</span></b></a></blockquote><br />نستبدل <b><span style="color: #38761d;">Word</span></b> بأى كلمة نريد مثل تحميل معاينة أى شئ<br />ونستبدل هذا الرمز <b><span style="color: blue;">#</span></b> بالرابط الذي نريد الزر أن يفتحه عند الضغط عليه<br />ونستبدل <span style="color: red;"><b>button</b></span> بمعرف الزر الذي سنستخدمه<br />هذا الكود <span style="color: orange;"><b>target="_blank"</b></span>  معناه أن الرابط سيفتح في صفحة جديدة ان اردته أن يفتح في نفس الصفحة قم بإزالته<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsr0hSeRzo4UgCS9cgMIN_9cgYwMNNC5kYOBlUsMrPCduJTF_lABzC6fvSo3bWv80aMAafxIwHDtfpoDYJXiKEgvbD_RIpRIJjNhre7XbEl2qHG-6HlrSVMEt2mwezz0IjknyEzaeqdeZs/s1600/sep.png" /></div><br /><div style="text-align: center;"><span style="font-size: large;"> الى هنا انتهى موضوعنا وبالتوفيق للجميع </span></div><div style="text-align: center;"><span style="font-size: large;">دمتم في أمان الله</span></div><br /></div>

ازرار CSS لمدونتك ومن تصميمك

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

مزيد من المعلومات »

قالب Horcrux نسخة إحترافية

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: right;"><img alt="Horcrux Blogger Template" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHzZnbmGBE3SuoDexN6ovITqVlIXUaGE3Uu62HBJyqIchqFlHZWbLzCUUcC6OAZ_Fx9rECHazGrZvombbsTjMdIHYSF2H7ZXa6PmjhXhklPfD6Vy6MgmkheSI4u4KAf16nPQcseD3m9Lc/s622/Horcrux.jpg" title="قالب Horcrux معرب ومطور لمدونات بلوجر" /></div>أقدم لكم نسخة احترافية من قالب<span style="color: #0b5394;"><b> Horcrux Blogger Template</b></span> هذه النسخة بها العديد من الإمكانيات ومنسقة بدرجة كبيرة وتتميز بخفتها وأناقتها تم عمل العديد من التعديلات على تلك النسخة وضبطها وعمل توسعة شاملة للقالب<br /><br /><div style="text-align: center;"><a class="cnmubo" href="http://cnmu.blogspot.com/p/preview.html?url=http://cn-test.blogspot.com" target="_blank">معاينــة </a>  <a class="cnmubb" href="http://cnmu.blogspot.com/p/preview.html?url=https://www.box.com/s/ga9o41gm2b93dr0wbqx1" target="_blank">تحميــل</a></div><br /><h2 style="text-align: right;">مميزات القالب </h2><h4 style="text-align: right;">القالب مساحته مضبوطة وبحجم مناسب جدا </h4><h4 style="text-align: right;">القالب خفيف جداً وأنيق ومنظم </h4><h4 style="text-align: right;">القالب صديق لمحركات البحث </h4><h4 style="text-align: right;">يحتوي القالب على هيدر مميز ومساحة إعلانية بمقاس 468x60</h4><h4 style="text-align: right;">يحتوي على صندوق اشتراك عبر البريد مدمج بالنسخة </h4>فقط ابحث عن هذه الكلمة <span style="color: red;"><b>feedid</b></span> واستبدلها بمعرف فيدبرنر الخاص بك ستجدها مكررة مرتين<br /><h4 style="text-align: right;">يحتوي اكواد الميتا تاج مضافة في بداية القالب ابحث عن كلمة تعديل وقم بتبديل المعلومات بها </h4><h4 style="text-align: right;">تم تركيب نموذج التعليقات التفاعلية بتنسيق يناسب القالب</h4><h4 style="text-align: right;">يحتوي صندوق المشاركة عبر المواقع الإجتماعية داخل المواضيع</h4><h4 style="text-align: right;">يحتوي على ازرار المتابعة عبر المواقع الإجتماعية مصصمه من قبلي </h4><div style="text-align: center;">ويمكن تعديل الروابط على النحو التالي</div><div style="text-align: center;">ابحث عن هذه الاكواد وغير ما يلزم<br /><br /><a name="more"></a><br /><blockquote class="tr_bq"><br /><!--facebook--> <br /><a class="facebook" href="رابط حساب فيس بوك" rel="nofollow" target="_blank"/><br /><!--twitter--> <br /><a class="twitter" href="رابط حساب تويتر" rel="nofollow" target="_blank"/><br /><!--googleplus--> <br /><a class="googleplus" href="رابط جوجل بلس" rel="nofollow" target="_blank"/><br /><!-- youtubes --> <br /><a class="youtubes" href="رابط قناة يوتيوب" rel="nofollow" target="_blank"/><br /><!-- blogger --> <br /><a class="blogger" href="http://www.blogger.com/follow-blog.g?blogID=<span style="color: orange;"><b>xxxxx</b></span>" rel="nofollow" target="_blank"/></blockquote><br />نستبدل <span style="color: orange;"><b>xxxxx</b></span>  بمعرف المدونة<br />وهذه طريقة الحصول عليه<br />ادخل الى لوحة تحكم مدونتك وانسخ المعرف بالشكل التالي</div><div style="text-align: center;"><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://4.bp.blogspot.com/-rAqP5Ml_2sE/UPazP57sldI/AAAAAAAAANA/NWUEaraMALs/s1600/bfw+%25283%2529.gif" /></div><br />هذه <a href="http://cnmu.blogspot.com/p/blog-page_12.html" target="_blank">شروط الإستخدام </a>يرجى المحافظة عليها ولا أسامح أحد يحذف حقوق القالب </div><div style="text-align: center;">وبالتوفيق للجميع</div><br /></div>

قالب Horcrux نسخة إحترافية

أقدم لكم نسخة احترافية من قالب Horcrux Blogger Template هذه النسخة بها العديد من الإمكانيات ومنسقة بدرجة كبيرة وتتميز بخفتها وأناقتها تم ع...

مزيد من المعلومات »

نظام تعليقات جوجل بلس على بلوجر

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: right;"><img alt="Google Plus comments to blogger" border="0" src="http://3.bp.blogspot.com/-FZJZIMlihS8/UXMwm_Ku6YI/AAAAAAAABNg/S3yZH5MyANA/s1600/gpcomment.png" title="أضف تعليقات جوجل بلس الى بلوجر" /></div>قامت جوجل بعمل تحديث على منصة بلوجر وموقعها الإجتماعي جوجل بلس وزيادة قوة الربط بينهما عن طريق إتاحة إستخدام نظام تعليقات جوجل بلس على منصة بلوجر وهي خطوة قوية جداً في تطوير النظامين معاً والحقيقة نظام التعليقات ممتاز جداً ومريح في الإستخدام لكن يعيبه نفس الشئ الذي يعيب تعليقات فيس بوك وهي محدودية الإستخدام انه لا يستطيع إستخدامه والتعليق به إلا أصحاب حسابات جوجل بلس وهو ما سيكون جيد للمدونات التي تتحدث عن جوجل بلس وتطويره أو المدونات التي تطور بلوجر نظراً لان متابعيها يملكون حسابات جوجل لكن سيكون مقيد لغيرها من المدونات ولكن نعتبرها خطوة ممتازة وقد تكون في المستقبل عامل أكبر للتطوير لكن ما لفت نظري هو سهولة التركيب القوية جداً بدون أكواد بدون أي إضافات فقط ضغطة زر ويعمل النظام , لكن يجب أن يتم دمج الملف الشخصي لبلوجر مع ملف جوجل بلس حتى يمكن تركيبه وهو ما لا يحبه كثير من مستخدمي بلوجر لكن من يريد أن يطلق العنان لإمكانيات جوجل بلس في مدونته يتبع شرح تركيب نظام التعليقات<br /><h3 style="text-align: center;"><a name="more"></a>شرح التركيب</h3><div style="text-align: center;">قم بالدخول للوحة تحكم مدونتك وإختر <span style="color: #cc0000;"><b>+ Google</b></span> ثم إضغط على كلمة البدء كما في الصورة</div><div style="text-align: center;">طبعا من قام بدمج ملفه الشخصي بجوجل بلس مسبقا لا يحتاج للخطوات الأولى وينتقل للخطوة الأخيرة مباشرة فهذه الخطوات خاصة بالذين لم يدمجوا بعد ملفاتهم بجوجل بلس </div><div style="text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://2.bp.blogspot.com/-73v2-Wnk3io/UXMwkPOfcyI/AAAAAAAABM8/WjL8xlwdHqg/s1600/gpcomment+%25281%2529.gif" /></div><div style="text-align: center;">الخطوة الثانية ستظهر هذه الصفحة قم بتطبيق التالي</div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://3.bp.blogspot.com/-6LY6-vcU7gQ/UXMwkdJiV-I/AAAAAAAABNA/rynHBUWmvoo/s1600/gpcomment+%25282%2529.gif" /></div><div style="text-align: center;">ثم ستنتقل لهذه الصفحة طبق ما في الصورة التالية</div><div style="text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://3.bp.blogspot.com/-vwD9hVi6MTE/UXMwkUTPraI/AAAAAAAABNI/SdfYrMP4D4A/s1600/gpcomment+%25283%2529.gif" /></div><div style="text-align: center;">الخطوة الأخيرة إنتقل مرة أخرى للوحة التحكم وإختار <b>+Google</b> وطبق التالي</div><div style="text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><img alt="" border="0" src="http://3.bp.blogspot.com/-ZxrlC_Sq-7Q/UXMwlf3U5KI/AAAAAAAABNQ/282BrtAUsUc/s1600/gpcomment+%25284%2529.gif" title="ربط ملف بلوجر بجوجل بلس" /></div><div style="text-align: center;"><span style="color: red;">ملاحظة </span>: <span style="color: blue;">النظام ياخذ لغة المدونة لذا لو لغة المدونة عربية سيكون عربي لو إنجليزية سيكون إنجليزي وهكذا </span></div><div style="text-align: center;"><span style="color: #674ea7;">وهذه صورة لمعاينة شكل النظام لاني طبعا لا أستطيع عرض معاينة حية لانني لم احب دمج ملفي الشخصي بجوجل بلس ولتعلم أنه إذا قمت بإزالة الدمج في اى وقت سيختفي نظام التعليقات لكن من يرغب بمعاينة حية يمكنه مشاهدة المعاينة الموجوده على مدونة بلوجر</span> الرسمية من <a href="http://cnmu.blogspot.com/p/preview.html?url=http://buzz.blogger.com/2013/04/bringing-google-comments-to-blogger.html" target="_blank">هنــا</a></div><div style="text-align: center;">اضغط على الصورة لتكبيرها</div><div style="text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-Ntl3es6fCRI/UXMwlqf8qAI/AAAAAAAABNY/PodmchgLP2E/s1600/gpcomment+%25285%2529.gif" target="_blank"><img alt="Google plus comments preview" border="0" height="200" src="http://2.bp.blogspot.com/-Ntl3es6fCRI/UXMwlqf8qAI/AAAAAAAABNY/PodmchgLP2E/s200/gpcomment+%25285%2529.gif" title="نظام تعليقات جوجل بلس" width="176" /></a></div><div style="text-align: center;"><br /><span style="color: red;">ملاحظة هامة</span> : هذا النظام يلغي نظام تعليقات بلوجر لذا سيلاحظ من فعله أو تم تفعيله تلقائيا في مدونته<br />أن خانة التعليقات لا تظهر في لوحة التحكم ومن يرغب في العودة للنظام الاصلي يلغي التاشير من على خيار إستخدام تعليقات +Google<br />ومن يريد إعادة حسابه الى حساب بلوجر يتبع التالي<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://1.bp.blogspot.com/-ddhuZj2gQNY/UX0KgH45q2I/AAAAAAAABQg/42nruK_oPDw/s1600/commentshow.gif" /></div>إذا قمت بتحويل حسابك الى الحساب الشخصي في بلوجر مرة أخرى دون أن تلغي التأشير من على تعليقات جوجل بلس<br />ستظل تعليقات بلوجر مخفية وعليك مرة أخرى أن تحول حسابك الى جوجل بلس ثم تزيل التاشير <br />دمتم في امان الله</div><div style="text-align: center;"><br /></div></div>

نظام تعليقات جوجل بلس على بلوجر

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

مزيد من المعلومات »

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

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: right;"><img alt="Add Quran to your website" border="0" src="http://2.bp.blogspot.com/-wbG3LVmR31s/UXGkFq5-zLI/AAAAAAAABMM/xIE-dkNkHQY/s1600/quran.jpg" title="اضافة القرآن الى موقعك" /></div>القرآن الكريم نور القلوب وحياة النفوس ووجوده في أى مكان رحمه وثواب واجر عظيم ولن تجد مكان يجلب لك حسنات مثل المواقع والمدونات عندما تضيف بها القرآن الكريم فكل زائر سيستمع للقرآن عن طريقك لك به أجر , تخيل كم الحسنات التي تاتيك وبإذن الله في هذا الموضوع سنضيف مجموعة طرق لوضع القرآن الكريم في مدونتك بطريقة صحيحة تجتذب المستمع , لان طرق إضافة القرآن الكريم بفضل الله متعددة لكن يجب ان تفكر أيهم يتناسب مع مدونتك وكيفية الإضافة لان هناك أخطاء ترتكب تسبب نتيجه عكسية ونفور مثال : نجد شخص يضيف إضافة قوية جداً بها كل القراء ولكنها ثقيلة ويجد الزائر معاناه في تحميلها او قد يكون الزائر يحتاج شئ بسيط ولا يستطيع البقاء طويلا ويضطر للإنتظار حتى يتم تحميل المدونة بسبب ثقل الأدوات وطبعا أدوات الميديا عموما ويدخل بها إضافات القرآن تاخذ وقت في التحميل بالإضافة أن بعض الإضافات تعمل تلقائيا وهذا ليس جيدا  حتى وإن كانت النية أن تسمعه خير الكلام لكن لا يجب ان ندفع الناس او نجبرهم على الطاعة ولكن اجعل دائما زائر مدونتك يحدد ما يريد فلو إستمع مكرها قد يغلق مدونتك وهو لا يرغب او لان الثقل أرهقه في التحميل لذا حاول ان تيسر على زائرك كل شئ وعليك أن تحدد هل ترغب بوضع الإضافة في آداة أم في صفحة مستقلة لماذا ؟ لانه لو قرارك أن تضعها في آداة يجب ان تنتقي إضافة خفيفة جداً بحيث لا تسبب مشكلة للزائر ولا تبدأ تلقائيا أبدا , أما لو كنت تهدف الى  إضافتها الى صفحة مستقله فحينها يمكن ان تستخدم  إضافة قوية لأن الزائر هو من دخل طائعا ويجب ان توفر له إضافة قوية تشمل عدد كبير من القراء بحيث ينتقي من يحب ان يستمع له<br /><br /><a name="more"></a><br /><h3 style="text-align: center;">إضافات تضاف الى آداة HTML/JavaScript </h3><div style="text-align: center;">كما قلنا سننتقي إضافات خفيفة جداً حتى لا نثقل على الزائر </div><div style="text-align: center;">وإضافتنا الأولى هي إذاعة القرآن العامه وهي إضافة خفيفة للغاية وتقوم بعرض تلاوات طوال الوقت بأصوات قراء متعددين </div><div style="text-align: center;">وهذه معاينة حية للإضافة </div><br /><center><div id="container-main"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> حمل مشغل الفلاش </div><script src="https://cnmu.googlecode.com/svn/trunk/cnmu-player.js" type="text/javascript"></script><script type="text/javascript">var s1 = new SWFObject("https://cnmu.googlecode.com/svn/trunk/cnmu-player.swf","ply","160","20","9","#FFFFFF"); s1.addParam("allowfullscreen","false"); s1.addParam("allowscriptaccess","always"); s1.addParam("flashvars","file=http://50.22.217.209:9998/;stream.nsv&type=mp3&volume=70&autostart=false"); s1.write("container-main"); </script></center><br /><div style="text-align: center;">كود الإضافة </div><br /><blockquote class="tr_bq"> <center><br /><div id="container-main"><br /><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> حمل مشغل الفلاش </div><br /><script type="text/javascript" src="https://cnmu.googlecode.com/svn/trunk/cnmu-player.js"></script><br /><script type="text/javascript"><br />var s1 = new SWFObject("https://cnmu.googlecode.com/svn/trunk/cnmu-player.swf","ply","<b>160</b>","20","9","#FFFFFF");<br />s1.addParam("allowfullscreen","false");<br />s1.addParam("allowscriptaccess","always");<br />s1.addParam("flashvars","file=http://50.22.217.209:9998/;stream.nsv&type=mp3&volume=70&autostart=false");<br />s1.write("container-main");<br /></script><br /></center></blockquote><br /><div style="text-align: center;">ويمكنك تعديل مساحة عرض المشغل بزيادة الرقم <b>160</b> </div><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsr0hSeRzo4UgCS9cgMIN_9cgYwMNNC5kYOBlUsMrPCduJTF_lABzC6fvSo3bWv80aMAafxIwHDtfpoDYJXiKEgvbD_RIpRIJjNhre7XbEl2qHG-6HlrSVMEt2mwezz0IjknyEzaeqdeZs/s1600/sep.png" /></div><div style="text-align: center;">اما إن أردت إضافة تحكم أكبر في إختيار القارئ فهذه إضافة أخرى خفيفة وتتيح ذلك</div><br /><center><div style="-moz-border-radius: 15px; -webkit-border-radius: 15px; background: #fff; border-radius: 15px; border: 4px solid #7F8080; padding: 12px 5px 5px 9px; width: 220px;"><center><iframe align="middle" allowtransparency="1" frameborder="0" height="160" scrolling="no" src="http://www.alro7.net/smallplay2.php?alro7alro7&volume=150&loop=1&showvolume=1&sliderwidth=10&loadingcolor=FFFF00&slidercolor1=FAFAFA&slidercolor2=C7C7C7&showplaylistnumbers=0" width="220"></iframe></center></div></center><br /><div style="text-align: center;">كود الإضافة </div><br /><blockquote class="tr_bq"> <center><br /><div style="padding:12px 5px 5px 9px; background:#fff; width:<span style="color: red;"><b>220</b></span>px; border:4px solid <span style="color: #666666;"><b>#7F8080</b></span>; border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;"><br /><center><iframe align="center"  src="http://www.alro7.net/smallplay2.php?alro7alro7&volume=150&loop=1&showvolume=1&sliderwidth=10&loadingcolor=FFFF00&slidercolor1=FAFAFA&slidercolor2=C7C7C7&showplaylistnumbers=0" frameborder="0" allowtransparency="1" scrolling="no"  width="<span style="color: red;">220</span>" height="<span style="color: blue;"><b>160</b></span>"></iframe></center><br /></div><br /></center></blockquote><br />ويمكن تعديل هذا اللون <span style="color: #666666;"><b>#7F8080</b></span>  فهو لون الإطار الخارجي<br />أما لزيادة العرض فغير الرقم <span style="color: red;"><b>220</b></span>  ولزيادة الطول غير الرقم زد الرقم <span style="color: blue;"><b>160</b></span> <br /><h3 style="text-align: center;">وضع إضافة في صفحة مستقله</h3><div style="text-align: center;">وجدت عدة إضافات ذات إمكانيات عالية بحيث تضاف بشكل ممتاز في المدونة وإخترت الإضافة التالي فهي تعتبر اكثر توافقا من حيث الحجم والجوده فحجمها وجودتها متناسبان ويمكن أن تضيفها في صفحة ثابته قم بتحويل صندوق الكتابة من وضع التأليف الى وضع HTML ثم أضف كود الإضافة به</div><div style="text-align: center;"><br /></div><div style="text-align: center;"><a class="cnmubo" href="http://cnmu.blogspot.com/p/preview.html?url=http://1-cnmu.blogspot.com/p/blog-page_19.html" target="_blank">إضغط هنا للمعاينة </a></div><div style="text-align: center;"><br /></div><div style="text-align: center;">الكود</div><br /><blockquote class="tr_bq"><center><br /><div style="width:400px;height:500px; background:#658556; margin:5px; border:7px dashed #FEE664; border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;"><br /><object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" height="500" id="Full_Quran" width="400"><br /><param name="movie" value="http://www.khadejah.net/Quran/Quran_Arabic.swf?site=" /><br /><param name="quality" value="high"><br /><param name="wmode" value="transparent"><br /><embed src="http://www.khadejah.net/Quran/Quran_Arabic.swf?site=" quality="high" wmode="transparent" width="400" height="500" name="Full_Quran" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /><br /></object><br /></div><br /></center></blockquote><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: #38761d;">نسأل الله أن يكون هذا العمل خالصاً لوجهه وان يوفق الجميع الى ما يحب ويرضى </span></div><div style="text-align: center;"><span style="color: #38761d;">دمتم في امان الله</span></div><div style="text-align: center;"><br /></div></div>

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

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

مزيد من المعلومات »

سلايدر كن مدون التلقائي بتنسيقك الخاص

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: right;"><img border="0" src="http://2.bp.blogspot.com/-cQqzKLNZ6dU/UXAVdSFCscI/AAAAAAAABL0/jiDW0_9lxqY/s1600/Slider1.jpg" /></div>سلايدر رائع لعرض مواضيعك المميزة هذا السلايد يعمل بشكل تلقائي بحيث انك لا تحتاج لإضافة صور او كتابة شئ كل ما عليك فعله هو ان تربطه بأحد الأقسام وهو سيقوم بجلب صور وعنوان وملخص الموضوعات ويظهرها تلقائيا هذه النسخة خاصة بنا ولن تجدها في مكان آخر وأخذت الكثير من الضبط والتعديل لتصبح سهلة التنسيق وذات شكل جذاب وأمر التنسيق سنتطرق اليه في الموضوع بحيث تتمكن من تنسيقها بشكل يتناسب مع مدونتك ويميز هذه النسخة السرعة والتوافق مع غالبية القوالب وبمكنك رؤية معاينة حية لها عبر الرابط التالي<br /><br /><a name="more"></a><br /><div style="text-align: center;"><a class="cnmubo" href="http://cnmu.blogspot.com/p/preview.html?url=http://1-cnmu.blogspot.com/p/slider.html" target="_blank">معاينــة</a></div><br /><h3 style="text-align: center;">طريقة التركيب</h3>أول شئ خذ نسخة إحتياطية من قالبك لتجنب المشاكل<br />ثم ادخل الى تحرير القالب<br /><h4 style="text-align: right;">ضع الكود التالي <span style="color: red;">فوق </span>الوسم <span style="color: blue;"><b></body></b></span></h4><br /><blockquote class="tr_bq "><script src='https://cnmu.googlecode.com/svn/trunk/cnmuautos.js'></script><br /><script><br />featuredcontentslider.init({<br />id: "slider1", //id of main slider DIV<br />contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]<br />toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]<br />nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.<br />enablefade: [true, 0.5], //[true/false, fadedegree]<br />autorotate: [true, 6000], //[true/false, pausetime]<br />onChange: function(previndex, curindex){ //event handler fired whenever script changes slide<br />//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)<br />//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)<br />}<br />})<br /></script></blockquote><br /><h4 style="text-align: right;">وأضف الكود التالي<span style="color: red;"> تحت</span> هذا الكود <span style="color: blue;"><b><div id='main-wrapper'></b></span></h4><br /><blockquote class="tr_bq "><span style="color: red;"><b:if cond='data:blog.url == data:blog.homepageUrl'></span><br /><div id='featured'><br /><div class='sliderwrapper' id='slider1'><br /><script><br />document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");<br /></script><br /></div><br /><div class='pagination' id='paginate-slider1'><br /></div><br /></div><br /><span style="color: red;"></b:if></span></blockquote><br />السلايد معد ليظهر في الصفحة الرئيسية فقط بحيث لا يسبب ثقل في التصفح للزائر لكن إن أردته ان يظهر في كل الصفحات قم بإزالة الكودين المحددين باللون الأحمر أو راجع هذا الموضوع لتحكم أكثر في مكان إظهار وإخفاء السلايدر من <a href="http://cnmu.blogspot.com/2013/02/blog-post.html" target="_blank">هنـــا</a><br /><h4 style="text-align: right;">ثم أضف الكود التالي<span style="color: red;"> فوق</span> الوسم <span style="color: blue;"><b></head></b></span></h4><blockquote class="tr_bq"><script><br />imgr = new Array();<br />imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHw-jvac8VzqpzurQrfnfzPc3XjEvD8A0pxpD4qXTqxFVikYypB2Ozhg5bWNuJpSuq3gejp8DzqcHFU7OuLq-_veci3lHZeJPJnFrk14fnvDShCXpQ98vX0cd0cwDKCk6wj_Mim_eBcU/s200/noimage.png";<br />showRandomImg = true;<br />aBold = true;<br />summaryPost = <span style="color: #38761d;"><b>200</b></span>;<br />numposts1 =<span style="color: blue;"><b>18</b></span>;<br />label1 = "<span style="color: red;">القسم</span>";<br />function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}<br />function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}<br />if ("content" in entry) {<br />var postcontent = entry.content.$t;}<br />else<br />if ("summary" in entry) {<br />var postcontent = entry.summary.$t;}<br />else var postcontent = "";<br />postdate = entry.published.$t;<br />if(j>imgr.length-1) j=0;<br />img[i] = imgr[j];<br />s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);<br />if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;<br />var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;<br />}}<br />var daystr = day+ ' ' + m + ' ' + y ;<br />var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="155" height="121" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';<br />document.write(trtd);<br />j++;<br />}}<br /></script></blockquote><br />الرقم <span style="color: #38761d;"><b>200</b></span> هو عدد حروف الملخص<br />الرقم <span style="color: blue;"><b>18</b></span> هو عدد المواضيع التي تظهر في السلايد قم بالزيادة او النقصان بحسب عرض مدونتك<br /><span style="color: red;">القسم</span> إستبدله بإسم القسم الذي تريد أن يظهر السلايد مواضيع منه<br /><span style="color: red;">ملاحظة</span> :  " قد يرغب احد أن يصنع قسم او تسمية جديدة للسلايد بحيث يضع به مواضيع مختلفة من الأقسام ولا يريده ان يكون ظاهر للزائر بشكل كبير يمكن عمل التالي بإستبدال<span style="color: red;"> القسم</span> برمز مثلا وليكن النجمة <span style="color: red;">*</span> ثم وضع المواضيع التي ترغب في تسمية جديدة وأيضا أعطها رمز النجمة ويمكن إخفائها من آداة التسميات بالطريقة التالية "<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://2.bp.blogspot.com/-TtBi8ZOf75w/UXAVdXlOMJI/AAAAAAAABL4/0uMwXazv03A/s1600/Slider2.gif" /></div><br /><h3 style="text-align: center;">إتمام التركيب مع شرح التنسيق</h3> الكود التالي هو المتمم لعملية التركيب وهو الخاص بتنسيق السلايدر<br /><h4 style="text-align: right;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGpFAmD-pS6fu9A_HIrhUm_CTeTRCMmB4PI6dqDeXURSjHfIc_TDcJ8-oF260im2NZeImwLKYz-niX-fXLrhOzETq2cYh7Y7oKPq0Iy9BUnMezOQvdUh1dCYmF9zr280yDxlnCYMhDiwG/s1600/tawse3.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGpFAmD-pS6fu9A_HIrhUm_CTeTRCMmB4PI6dqDeXURSjHfIc_TDcJ8-oF260im2NZeImwLKYz-niX-fXLrhOzETq2cYh7Y7oKPq0Iy9BUnMezOQvdUh1dCYmF9zr280yDxlnCYMhDiwG/s1600/tawse3.png" /></a>قم بإضافته <span style="color: red;">فوق </span>الوسم <span style="color: blue;"></b:skin></span> بعد توسيعه </h4><blockquote class="tr_bq">#featured{<br />margin-bottom:10px;<br />}<br />.sliderwrapper{<br />position: relative;<br />border-bottom-width: 6px;<br />height: 124px;<br />}<br />.sliderwrapper .contentdiv{<br />background: <span style="color: #b45f06;"><b>#fff</b></span>;background: -moz-linear-gradient(top,<span style="color: #b45f06;"><b>#fff</b></span>,<span style="color: magenta;"><b>#EAEAEA</b></span>);background: -webkit-linear-gradient(top,<span style="color: #b45f06;"><b>#fff</b></span>,<span style="color: magenta;"><b>#EAEAEA</b></span>);<br />border:3px solid <span style="color: #38761d;"><b>#7C7B7B</b></span>;<br />height:<span style="color: blue;"><b>180</b></span>px;<br />border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;<br />box-shadow: 0 1px 2px #999;-moz-box-shadow: 0 1px 2px #999;-webkit-box-shadow: 0 1px 2px #999;<br />margin-top: 10px;<br />opacity: 1;<br />padding: 15px 15px 15px 0;<br />position: absolute;<br />visibility: hidden;<br />width: <span style="color: red;"><b>623</b></span>px;<br />}<br /><br />.pagination{<br />text-align: right;<br />margin-top: 110px;<br />padding:5px;<br />margin-left:5px;<br />}<br />.pagination a{<br />background: <b><span style="color: #674ea7;">#F0EFEF</span></b>;background: -moz-linear-gradient(top,#fff,<span style="color: #674ea7;"><b>#F0EFEF</b></span>);background: -webkit-linear-gradient(top,#fff,<span style="color: #674ea7;"><b>#F0EFEF</b></span>);<br />font:13px Arial;<br />font-weight:bold;<br />color:#a3a3a3;<br />padding:4px 8px;<br />border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px;<br />box-shadow: 0 1px 2px #000;-moz-box-shadow: 0 1px 2px #000;-webkit-box-shadow: 0 1px 2px #000;<br />margin-right:4px;<br />}<br />.pagination a.selected{<br />color:#fff;<br /><b>background:#000;</b><br />}<br />.pagination .prev,.pagination .next { color:#EAEAEA;<br />font-size:0px; background:none; padding:0px; }<br />.featuredPost{<br />width:<span style="color: red;"><b>380</b></span>px;<br />padding:0px 10px 10px 10px !important;<br />bottom:0;<br />float:left !important;<br />}<br />.pagination .prev, .pagination .next{float:right;} <br />.featuredPost a{<br />color:#000;<br />font: 18px "Microsoft Sans Serif";<br />margin:0;<br />padding:0;<br />}<br />.featuredPost h2{margin:0 0 8px 0;}<br />.featuredPost span{font-size:11px; margin:0; color:#C94545;}<br />.featuredPost p{font-size:13px; margin:4px 0 0 0; color:#797979;}<br />.sliderPostPhoto a img{float: right !important;width:<span style="color: blue;"><b>220</b></span>px; height:<span style="color: blue;"><b>180</b></span>px;border:2px solid #000;}<br />.sliderPostPhoto{float: right !important; width:100px !important;}</blockquote>لتعديل عرض السلايدر قم بتعديل الأكواد الحمراء بنفس النسبة إذا قمت بزيادة 10px يجب أن تزيدها جميعا بنفس النسبة ونفس الشئ إن أنقصت العرض<br />أما لتعديل الإرتفاع تعدل النسب الزرقاء بنفس الطريقة مع مراعاة أن الرقمين المتجاورين <span style="color: blue;"><b>220</b></span> و <b><span style="color: blue;">180</span></b> هما عرض وإرتفاع الصورة<br />هذا اللون  <span style="color: #38761d;"><b>#7C7B7B</b></span> هو لون الإطار الخارجي للسلايدر<br /><h4 style="text-align: right;">وهذا التدرج اللوني هو خلفية السلايدر</h4>background: <b><span style="color: #b45f06;">#fff</span></b>;background: -moz-linear-gradient(top,<b><span style="color: #b45f06;">#fff</span></b>,<b><span style="color: magenta;">#EAEAEA</span></b>);background: -webkit-linear-gradient(top,<b><span style="color: #b45f06;">#fff</span></b>,<b><span style="color: magenta;">#EAEAEA</span></b>);<br /><br /><h4 style="text-align: right;">وهذا التدرج هو لون الأزرار </h4>background: <span style="color: #674ea7;"><b>#F0EFEF</b></span>;background: -moz-linear-gradient(top,#fff,<span style="color: #674ea7;"><b>#F0EFEF</b></span>);background: -webkit-linear-gradient(top,#fff,<span style="color: #674ea7;"><b>#F0EFEF</b></span>);<br /><br />وهذا لون <b>background:#000;</b> الزر الخاص بالموضوع المختار في السلايدر<br />هذه هي أهم الأكواد التي ستتيح لك التحكم في السلايدر وجعله مناسب لمدونتك ويمكنك الإستعانة بخدمة<a href="http://cnmu.blogspot.com/p/copy-color-picker.html" target="_blank"> أكواد الألوان التابعة لنا </a><br />وبالتوفيق بإذن الله<br /><br /></div>

سلايدر كن مدون التلقائي بتنسيقك الخاص

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

مزيد من المعلومات »

شرح كامل للتعليقات التفاعلية في بلوجر

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: right;"><img alt="Blogger Threaded Comments" border="0" src="http://4.bp.blogspot.com/--9WmIYD5yKQ/UW2bT-At5LI/AAAAAAAABJs/P0xTpcXAEug/s1600/comments.jpg" title="التعليقات التفاعلية المترابطة في بلوجر" /></div>قامت جوجل منذ فترة طويلة بتحديث نظام تعليقات بلوجر بعمل نظام تفاعلي يضيف خواص جديدة ويجعل التعليقات بتنسيق افضل هناك من فضل البقاء على النظام القديم وهناك من عدل الى النظام الجديد بالكامل وهناك من عدل ولم ينسقه بشكل مضبوط لذا هذا الموضوع موجه لكل المدونون بشكل عام حتى من قام بالفعل بتركيب النظام الجديد ففي هذا الموضوع سنتطرق لبعض الأشياء قد تكون ذات فائدة وبالتالي تضيف شئ جديد لمن قام بتعديل مدونته بالفعل أولا قبل أن أن تقرر تركيب النظام قم بقراءة هذا الموضوع أولا إن لم تكن قرأته من قبل فهو سيساعدك في تقرير هل هذا هو النظام الأنسب لمدونتك أم لا <br /><a href="http://cnmu.blogspot.com/2013/03/Comments-Systems.html" target="_blank">تعرف على أنظمة التعليقات وإختيار نظام يتناسب مع مدونتك</a><br />سينقسم هذا الموضوع لأربع مراحل وهم مرحلة الإعداد مرحلة التركيب مرحلة التنسيق مرحلة الضبط والصورة التالية سترافقنا في كل المراحل وسنتطرق لكل جزء فيها وسنبدأ مع<br /><h3 style="text-align: center;">مرحلة الإعداد </h3><a name="more"></a><br /><div class="separator" style="clear: both; text-align: right;"><img alt="blogger comments settings" border="0" src="http://4.bp.blogspot.com/-yue9eqwTLoU/UW2bU3Tf8nI/AAAAAAAABJ0/V8OX8LX1ZLk/s1600/comments2.gif" title="إعدادات بلوجر مشاركات وتعليقات" /></div>قم بالدخول الى إعدادات مدونتك ثم إختار مشاركات وتعليقات<br /><h4 style="text-align: right;">أول جزء وهو موقع التعليقات : سنجعله مضمن </h4><h4 style="text-align: right;">ثاني جزء وهو الخاص بمن يمكنه التعليق هذا يرجع لراحتك في التعامل ومحتوى مدونتك </h4><span style="color: blue;">الخيار الأول</span> : وهو انه يمكن لأى شخص التعليق هذا سيسمح لاى أحد ان يعلق على مواضيعك حتى لو لم يكن له أى بريد الكتروني<br /><span style="color: blue;">الخيار الثاني</span> :  يسمح لفئات معينة للتعليق وهي التي تملك حسابات في مواقع محددة<br /><span style="color: blue;">الخيار الثالث</span> :  لن يستطيع التعليق إلا من يملك حساب في جوجل <br /><span style="color: blue;">الخيار الرابع</span> : لا يمكن لاحد غير الاعضاء والمقصود بالأعضاء هؤلاء الذين يظهرون في إضافة المتابعون لمدونتك هم فقط من يمكنهم التعليق فإختر ما تراه مناسباً لك<br /><h4 style="text-align: right;">ثالث جزء وهو الخاص بالإشراف على التعليقات </h4><span style="color: #38761d;">الخيار الأول</span> : دائما أى انه لن يتم نشر أى تعليق إلا بعد ان تسمح بذلك<br /><span style="color: #38761d;">الخيار الثاني </span>: أحيانا سيعطيك الحق في الإشراف على التعليقات لكن في حالة مرور وقت على التعليقات وأنت لم تحدد هل ستنشرها ام تحذفا سيتم نشرها<br /><span style="color: #38761d;">الخيار الثالث</span> : وهو أبداً هذا سيجعل اى تعليق ينشر تلقائيا<br />وبالنسبة للجزء الخاص بالبريد ستضيف بريد الكتروني تكون متابع له بإستمرار وستأتيك عليه رسائل بالتعليقات الجديدة هذا في حالة أنك إخترت الإشراف على التعليقات<br /><h4 style="text-align: right;">رابع جزء يهمنا في إعداد التعليقات هو رسالة التعليقات </h4>هذا الجزء يمكنك ان تكتب به رسالة تظهر مع صندوق التعليقات يمكن ان تنبه عن أمر أو تكتب شئ يحفز الزائر على التعليق ويمكنك أن تضيف بها روابط بالشكل التالي<br /><a href="الرابط">الكلمة التي ترغب بظهورها</a><br /><h3 style="text-align: center;">ننتقل لمرحلة التركيب </h3><div style="text-align: center;">سنقوم بتركيب التعليقات المترابطة التفاعلية بالشكل التالي </div><div style="text-align: center;">أدخل الى تحرير قالبك وإبحث عن هذا الكود </div><div style="text-align: center;"><br /></div><blockquote class="tr_bq"><div style="text-align: center;"><b:include data='post' name='comments'/></div></blockquote><div style="text-align: center;"><br /></div><div style="text-align: center;">وإستبدله بالكود التالي </div><div style="text-align: center;"><br /></div><blockquote class="tr_bq"><div style="text-align: center;"><b:if cond='data:post.showThreadedComments'><br /><b:include data='post' name='threaded_comments'/><br /><b:else/><br /><b:include data='post' name='comments'/></b:if></div></blockquote><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="color: red;">ملاحظة</span> : ستجد الكود متكرر أكثر من مرة قم بتعديلها كلها </div><h3 style="text-align: center;">مرحلة التنسيق </h3>بإنتهاء التركيب ستصبح التعليقات التفاعلية تعمل في قالبك لكن ستكون بمظهر بسيط جداً إن كان يعجبك فلا تقوم بعمل تعديل أما إن لم يكن يعجبك فيمكنك تنسيقه وإخترت لكم نموذج خفيف وبسيط ويمكن ان تنسقه بما يتناسب مع مدونتك بسهولة وستضيفه بالشكل التالي<br /><div style="text-align: left;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGpFAmD-pS6fu9A_HIrhUm_CTeTRCMmB4PI6dqDeXURSjHfIc_TDcJ8-oF260im2NZeImwLKYz-niX-fXLrhOzETq2cYh7Y7oKPq0Iy9BUnMezOQvdUh1dCYmF9zr280yDxlnCYMhDiwG/s1600/tawse3.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGpFAmD-pS6fu9A_HIrhUm_CTeTRCMmB4PI6dqDeXURSjHfIc_TDcJ8-oF260im2NZeImwLKYz-niX-fXLrhOzETq2cYh7Y7oKPq0Iy9BUnMezOQvdUh1dCYmF9zr280yDxlnCYMhDiwG/s1600/tawse3.png" /></a></div>من تحرير القالب قم بتوسيع جزء الستايل  <br />وأضف فوق <b></b:skin></b> الكود التالي<br /><br /><blockquote class="tr_bq">.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}<br />.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:right}<br />.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 5px 10px 5px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:<span style="color: red;"><b>#E0DFDF</b></span>;border:1px solid <span style="color: #674ea7;"><b>#A3A1A1</b></span>;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}<br />.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}<br />.comments .comments-content .inline-thread{padding:0}<br />.comments .comments-content .comment-thread{margin:8px 0}<br />.comments .comments-content .comment-thread:empty{display:none}<br />.comment-replies{margin-top:1em;margin-right:40px;background:#fff}<br />.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}<br />.comments .comments-content .comment:first-child{padding-top:16px}<br />.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}<br />.comments .comments-content .comment-body{position:relative}<br />.comments .comments-content .user{font-style:normal;font-weight:normal}<br />.comments .comments-content .user a{color:<span style="color: #134f5c;"><b>#0E6284</b></span>;font-weight:normal;text-decoration:none}<br />.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}<br />.comments .comments-content .datetime a{color:<span style="color: #134f5c;"><b>#0E6284</b></span>;font-size:12px;float:left;text-decoration:none}<br />.comment-content{margin:0 0 8px;padding:0 5px}<br />.comment-header{font-size:18px;background-color:<span style="color: blue;"><b>#f1f1f1</b></span>;border-bottom:1px solid <span style="color: #38761d;"><b>#e3e3e3</b></span>;padding:5px}<br />.comments .comments-content .owner-actions{position:absolute;left:0;top:0}<br />.comments .comments-replybox{border:none;height:230px;width:100%}<br />.comments .comment-replybox-thread{margin-top:0}<br />.comments .comment-replybox-single{margin-top:5px;margin-right:48px}<br />.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}<br />.comments .thread-toggle{cursor:pointer;display:inline-block}<br />.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}<br />.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}<br />.comments .thread-chrome.thread-collapsed{display:none}<br />.comments .thread-toggle{display:inline-block}<br />.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-left:4px}<br />.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}<br />.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}<br />.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg36N8BhxFWE3US8Wfu22Z-WFTjrOxX9LURmxyPDeQyLA9XQUebDKXXeEhTr_4SkKttLHd8M0eQLcVBOy4L-DgPCfF8gwx14AXcogS8pUBzMz3B3sE02uYQedQnv3d-cn9eJko_0s0NuvY/s51/arrow.png) top left no-repeat;float:right;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}<br />.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}<br />.comments .comment-block{margin-right:65px;position:relative;border:5px solid <span style="color: #38761d;"><b>#e3e3e3</b></span>;border-radius:8px}<br />@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-right:0}}</blockquote>هذا النموذج هو نفس الشكل الموجود في صورة الموضوع ولقد إستخدمته في عدة قوالب لانه ممتاز بحق وهذه نماذج للمعاينة<br /><br /><div style="text-align: center;"><a class="cnmubo" href="http://cnmu.blogspot.com/p/preview.html?url=http://w-cnmu.blogspot.com/2013/03/blog-post_8901.html" target="_blank">نموذج 1</a>  <a class="cnmubo" href="http://cnmu.blogspot.com/p/preview.html?url=http://t-cnmu.blogspot.com/2013/02/blog-post_2305.html" target="_blank">نموذج 2</a></div><br /><h2 style="text-align: right;">تنسيق النموذج </h2>هذا اللون  <span style="color: blue;"><b>#f1f1f1</b></span> هو لون رأس التعليق الذي يظهر به الإسم والتاريخ <br />هذا اللون  <span style="color: #38761d;"><b>#e3e3e3</b></span> هو لون الإطار الخارجي وهو متكرر مرتين قم بتغيره فيهما <br />هذا اللون <span style="color: red;"><b>#E0DFDF</b></span> هو لون أزرار الرد والحذف <br />وهذا لون <span style="color: #674ea7;"><b>#A3A1A1</b></span>  الإطار الخارجي للأزرار <br />وهذا اللون <span style="color: #134f5c;"><b>#0E6284</b></span> هو لون إسم الكاتب والتاريخ وهو متكرر مرتين<br />فقط عدل الألون وسيصبح النموذج متوافق مع مدونتك تماماً<a href="http://cnmu.blogspot.com/p/copy-color-picker.html" target="_blank"> أكواد الألوان</a><br /><h3 style="text-align: center;">مرحلة الضبط </h3>مرحلة الضبط ستأخذنا الى نقطتين<br /><h4 style="text-align: right;">النقطة الأولى عدم ظهور نموذج التعليق او صورة المعلق بشكل مضبوط </h4>والسببب يرجع الى أن بعض القوالب تكون بها أكواد لتنسيق التعليقات القديمة وتؤثر على التموذج الجديد فما الحل ؟<br />الحل أن نبحث عن الاكواد القديمة ونحذفها وستكون الأكواد تحمل نفس المعرف <b><span style="color: red;">.</span>comments</b> <br />وسنجد كل كود منها يبدأ بقوس فتح { وينتهي بقوس إغلاق } لذا يجب تحديد الأكواد جيدا وطبعا لا تنسى نسختك الإحتياطية لتجنب أى مشكلة <span style="color: red;">ملاحظة</span> قد نجد كود ولكنه يبدأ بهذا الرمز <b><span style="color: red;">#</span>comments</b> هذا لا نحذفه نبقي على هذا بالكامل من أول قوس الفتح الى قوس الإغلاق اما باقي  الاكواد نحذفها وهذا كله في حالة ظهور مشكلة في شكل التعليقات <br /><h4 style="text-align: right;">النقطة الثانية رسالة التعليقات </h4>ذكرنا طريقة كتابة رسالة التعليقات في البداية لكن التعليقات المترابطة تقوم بعمل التالي بعد كتابة اول تعليق يتم إنزال رسالة التعليقات تحت صندوق التعليق وليس فوقه واظن أن بلوجر ترى أن الرسالة لم تعد بنفس القيمة طالما تم كتابة تعليق<br />هناك من قد يتفق مع هذا وهناك من لا يعجه ذلك ويريد إبقاء الرسالة فوق صندوق التعليقات ويمكنه عمل ذلك عبر الشرح التالي<br />نبحث عن هذا الكود<br /><br /><blockquote class="tr_bq"><b:includable id='threaded-comment-form' var='post'></blockquote><br /><div style="text-align: center;">بعده بسطور سنجد هذا الكود  <span style="color: #ea9999;"><b><b:else/></b></span> نضيف بجواره الكود التالي</div><br /><blockquote class="tr_bq"><div id='threaded-comment-form'></blockquote><br /><div style="text-align: center;">وهذه صورة للتوضيح</div><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Threaded Comments Message" border="0" src="http://2.bp.blogspot.com/-vkWN3X2cKSw/UW2bVZi859I/AAAAAAAABJ8/w_cCYRmoqOw/s1600/comments3.gif" title="مكان رسالة التعليقات" /></div><div style="text-align: center;">قد تجدها مضافة بالفعل وحينها نتجاوز هذا الجزء</div><div style="text-align: center;">ثم نبحث عن هذا الكود </div><br /><blockquote class="tr_bq">document.getElementById(domId).insertBefore(replybox, null);</blockquote><br /><div style="text-align: center;">ونستبدله بهذا</div><br /><blockquote class="tr_bq">document.getElementById (domId). insertBefore (document.getElementById ('threaded-comment-form'), null);</blockquote><br /><div style="text-align: center;">ربما يكون الموضوع طويل بعض الشئ لكن فضلت ذكر كل ما يهمنا حول تعليقات بلوجر بحيث نستفيد منها جيدا </div><div style="text-align: center;">موفقين بإذن الله </div> </div>

شرح كامل للتعليقات التفاعلية في بلوجر

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

مزيد من المعلومات »

فواتح المواضيع والعبارات الترحيبية بشكل تلقائي

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: right;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0REvkbjT_Z5URW7D-LqEKEqLFamSPmhWk5_8i5Xx5HVMXzQAE6eykwvruJGBPD0-hNL5xpvA51CmMARZ873biXrrbrCqC5PeNeqSxpaH_vZQflgbG73ecIhpmQZ-9DsdhpbuPCFfftauL/s1600/welcome.jpg" /></div>كل مدون لديه طريقته الخاصة في إفتتاح مواضيعه بالإضافة أن محتوى وتصميم  المدونة يفرض أيضا طريقة لفتح المواضيع لكن في الغالب لا تخلوا مدونة إلا وتحتوي عبارات ترحيبية وأيضا تكون عادة نفس العبارات في كل موضوع لكن مسألة العبارات الترحيبية بالرغم من جذبها للقارئ وإشعاره بمودة  عند قراءة الموضوع بالإضافة الى الفواتح التي لها بعد شرعي وثواب عظيم كعبارة السلام ( <span style="color: #6aa84f;">السلام عليكم ورحمة الله وبركاته</span> ) او الثناء على رب العالمين والصلاة على الحبيب (<span style="color: #38761d;"> الحمد لله رب العالمين والصلاة والسلام على المبعوث رحمة للعالمين سيدنا محمد وعلى آل وصحبه أجمعين </span>) ,<span style="color: red;"> لحظة </span>هل صليت على النبي ام قرأت فقط ؟ صلي على الحبيب ولا تكن بخيل , طبعا كل هذا جميل ورائع لكن نتكلم عن امر عملى قليلا العبارات الترحيبية تظهر في ملخص الموضوع ولو وضعتها كصورة ستظهر في مصغرات الموضوع لأنها تكون أول صورة وهذا سيجعلها تؤدي دور وتؤثر على دور آخر وهو جذب الزائر للقراءة فنحن نهدف الى جذب الزائر الى القراءة ثم بعد أن يقرر بالفعل انه سيقرأ الموضوع تظهر العبارة الترحيبية لكن ظهورها في الملخصات تضيع مسألة الجذب عبر الملخص , إذاً ما اللحل ؟ الحل وببساطة هو أننا سنحصد كل المزايا ونلغي كل العيوب سنقوم بعمل تركيب تلقائي للعبارات التحيبية وجعلها تظهر في المواضيع تلقائيا وهذا سيوفر وقت الكتابة وفي نفس الوقت وضعها بهذا الشكل لا يجعلها تظهر في الملخصات <br /><a name="more"></a><br /><h3 style="text-align: center;">الترحيب كصورة </h3><div style="text-align: center;">لمن يرغب في إضافة رسائل الترحيب على هيئة صورة يتبع التالي</div><div style="text-align: center;">لكن أولا هذه معاينة لرؤية الناتج</div><div style="text-align: center;"><br /></div><div style="text-align: center;"><a class="cnmubo" href="http://cnmu.blogspot.com/p/preview.html?url=http://w-cnmu.blogspot.com/2013/02/blog-post.html" target="_blank">معاينــــة </a></div><div style="text-align: center;"><br /></div><div style="text-align: center;">طريقة التركيب : إبحث عن احد هذه الأكواد</div><div style="text-align: center;"><br /></div><div style="text-align: center;"><blockquote class="tr_bq"><div class='post-header'></blockquote></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><blockquote class="tr_bq"><div class='post-header-line-1'/></blockquote></div><div style="text-align: center;"><br /></div><div style="text-align: center;">وأضف تحته الكود التالي</div><div style="text-align: center;"><br /></div><div style="text-align: center;"><blockquote class="tr_bq"><b:if cond='data:blog.pageType  == "item"'><br />    <Center><img src="<b>url</b>"/> </Center><br />    </b:if></blockquote></div><div style="text-align: center;"><br /></div><div style="text-align: center;">وإستبدل <b>url</b> برابط الصورة التي تعجبك ويمكنك البحث في صور جوجل ستجد آلاف الصور الترحيبية</div><div style="text-align: center;">وهذا رابط الصورة الظاهرة في المعاينة لمن أراد إستخدامها</div><div style="text-align: center;"><br /></div><div style="text-align: center;"><blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtOwAfK3XQYI1zKA0xiPI3MzpJLuRJ81YGdO08zmY4VLTB3E2cPWWwtYoc2n_B4zntPbUB12_ytUt3_VS7b1OCGI2-paE1IzQAquP9wEfdRM4jO4rqUnSHtRXMyKo95SlHGHDWjJCzm43l/s355/bsmlh.png</blockquote></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><h3>الترحيب كنص</h3></div><div style="text-align: center;">طبعا هناك من يفضل النصوص من اجل السرعة أو لمن قد يواجه مشكلة في ظهور صورة الترحيب في المشارات الخاصة بالمواقع الإجتماعية ولهذا تم إعداد وتنسيق نص يمكنك التحكم به وضبطه بما يعجبك وطريقة الإضافة نفس طريقة إضافة الصورة لكن بدلا من إضافة كود الصورة سنضيف الكود التالي</div><div style="text-align: center;"><br /></div><div style="text-align: center;"><blockquote class="tr_bq"><b:if cond='data:blog.pageType  == "item"'><br /> <div style='font-size:22px; <span style="color: blue;">color:#000</span>; font-weight:bold; text-align:center; text-shadow:  0px 3px 3px #666;padding:5px;'><br />     السلام عليكم ورحمة الله وبركاته<br /><span style="color: red;"><b></br></b></span><br />الحمد لله والصلاة والسلام على رسول الله<br />     </div><br /></b:if></blockquote></div><div style="text-align: center;"><br /></div><div style="text-align: center;">يمكنك إستبدال النصوص بالنصوص التي تعجبك والكود الاحمر يمكنك تكراره تحت النص لتضيف سطر جديد</div><div style="text-align: center;">والجزء الازرق هو لون النص</div><div style="text-align: center;">وهذه معاينة حية لشكل الرسالة الترحيبية</div><div style="text-align: center;"><br /></div><div style="text-align: center;"><a class="cnmubo" href="http://cnmu.blogspot.com/p/preview.html?url=http://w-cnmu.blogspot.com/2013/03/blog-post.html" target="_blank">معاينـــة</a></div><br /><h2 style="text-align: right;"><span style="color: orange;">ملاحظات عامة </span></h2>الصور والعبارات ستظهر في المواضيع فقط لذا لا تقلق حول مظهر المدونة<br />في حالة عدم إيجاد أحد الأكواد ابحث عن أكواد مشابهه فالقوالب تختلف<br />في حالة وجود تكرار للاكواد قم بتجربة الكود تحت كل واحد إلى أن تجد المناسب<br /><span style="color: #a64d79;">يمكن عمل عبارة ثابته ايضا وتلقائية في نهاية الموضوع عبر إضافة نفس الأكواد ولكن تحت احد هذه الاكواد</span><br /><br /><blockquote class="tr_bq"><div class='post-footer'></blockquote><br /><blockquote class="tr_bq"><div class='post-footer-line-1'/></blockquote><br /><div style="text-align: center;"><span style="font-size: large;">وبالتوفيـــــــــق</span></div><br /></div>

فواتح المواضيع والعبارات الترحيبية بشكل تلقائي

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

مزيد من المعلومات »

شرح تعديلات واجهة تحرير قوالب بلوجر الجديدة

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: right;"><img alt="blogger new template Editing page" border="0" src="http://3.bp.blogspot.com/-nHQ4X6aHjzI/UWV6dqalYoI/AAAAAAAABF4/bPrYySLoKdU/s1600/bte.gif" title="واجهة تحرير القالب في بلوجر" /></div>تفاجأ من دخل اليوم لواجهة تحرير القالب في بلوجر بتغيير الواجهة ووجود خيارات جديدة وخيارات مفقودة وكثيرين قد يواجهون مشكلة في التعامل بسبب الشكل الجديد للواجهه ولذا أسرعت بهذا الموضوع بعد الوصول للفكرة الاساسية من عمل الواجهه بحيث لا يتعطل من يعدل على القوالب ويفهم ما الذي يحدث بالضبط طبعا وكالعادة تسعى جوجل لتطوير منصة بلوجر والتي أصبحت في العاميين السابقين محل إهتمام كثير من مستخدمي الإنترنت ولكن دائما ما تكون التعديلات صادمة في البداية ثم بعد الإعتياد ينتهي الأمر لكن طبعا هناك من يحب البقاء على المظهر الأساسي الذي يتعود عليه كالمثل القائل<span style="color: blue;">" اللى تعرفه أحسن من اللى ما تعرفوش"</span> فالشئ المعروف بالنسبة للمستخدم أفضل من الشئ المبهم ولو كان افضل وعموما حتى الآن لم تظهر هل بالفعل الواجهه الجديدة ستكون أفضل أم لا ولكن اهم ماجاء في الواجهة الجديدة هو أنه أصبح الوصول لاكواد الأدوات اسهل بكثير بضغطة زر دون بحث او أى شئ أيضا أصبحت الألوان أكثر تميزاً للأكواد ويمكن تحديد الأكواد بسهولة أكبر ودون أخطاْ بالإضافة الى إمكانية المعاينة في نفس الصفحة بدلا من التنقل بين صفحة وأخرى لكن أهم تعديل هو عدم وجود زر توسيع عناصر الواجهة والذي إرتبك الكثييرين من عدم وجوده والبعض لم  يعلم كيف يعدل وماذا يفعل وهذا هو محور الموضوع توضيح الجزء الخاص بزر توسيع عناصر الصفحة ولم أرد ان أكتب كثيراً لان الكتابة قد لا توضح بالضبط لذا فضلت الشرح بالفديو سيكون أسهل واسرع وأكثر وضوحاً <a name="more"></a><br /><center><div class="cnmuv"><iframe width="441" height="246" frameborder="0" src="http://www.youtube.com/embed/-OGxSQvbhv8?rel=0" allowfullscreen=""></iframe></div></center><br />بالنسبة للبحث عن الأكواد داخل القالب يجب ان تضغط داخل إطار التحرير ضغطة بحيث يتم تنشيطة ثم تضغط زري <span style="color: blue;"><b>Ctrl+F</b></span> لكي يظهر شريط البحث المخصص للنموذج الجديد تكتب ما تريد البحث عنه ثم تضغط Enter<br />أيضا بالنسبة لاكواد الستايل وهي الاكواد التي تقع بين الوسمين <span style="color: #38761d;"><b><b:skin> و </b:skin></b></span><br />يجب أن يتم توسيع العناصر الخاصة بها إن اردنا أن نضيف كود مثلا فوق <span style="color: #38761d;"><b><b:skin></b></span><br /><br /><div class="separator" style="clear: both; text-align: right;"><img border="0" src="https://lh4.googleusercontent.com/--bVccw3cxa8/UWbDX4IaRoI/AAAAAAAABGY/iD4kTvJm86A/s622/nte_1.gif" /></div><h3 style="text-align: center;">إمكانية الإستبدال </h3><div style="text-align: center;">ومن المميزات الإضافية أيضا في الواجهة الجديدة إمكانية الإستبدال ويمكنك إستبدال أى جزء بالضغط على أزرار </div><div style="text-align: center;"><b><span style="color: blue;">Ctrl</span>+<span style="color: #93c47d;">Shift</span>+<span style="color: red;">F</span></b> شاهد الصورة التالية للتوضيح </div><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://1.bp.blogspot.com/-HQO29WvgW4k/UWbQd_S01mI/AAAAAAAABGs/Roca_lMT8MM/s1600/nte_2.gif" /></div><div style="text-align: center;">أيضا إمكانية إستبدال الكل إن أردت أن تستبدل كلمة او كود متكررة في القالب يمكنك إستبدالها مرة واحده بنفس الطريقة السابقة لكن بالضغط على أزرار <b><span style="color: blue;">Ctrl</span>+<span style="color: #6aa84f;">Shift</span>+<span style="color: red;">R</span></b> ولن تظهر Yes , No بل سيتم الإستبدال مباشرة</div><h3 style="text-align: center;">أزرار إضافية</h3><div style="text-align: center;">تحتوي التحسينات الجديدة على زر </div><div style="text-align: center;"><span style="background-color: #eeeeee;">الرجوع الى الإعدادات الإفتراضية لقوالب عناصر واجهة المستخدم</span></div><div style="text-align: center;">وهذا الزر يمكنك من الرجوع الى الإعدادات الإفتراضية للأدوات مثلا لديك آداة قمت بعمل تعديلات بها عن طريق القالب وتريدها أن تعود الى التنسيق الإفتراضي فهذا الزر سيساعدك</div><div style="text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://2.bp.blogspot.com/-Fi0nDHs6ElA/UWbQedSRbQI/AAAAAAAABGw/s1vmzOnSeWg/s1600/nte_3.gif" /></div><div style="text-align: center;">بالإضافة الى زر <span style="color: white;"><span style="background-color: orange;">تنسيق النموذج</span></span> هذا الزر يتيح لك عند الضغط عليه كل أكواد الستايل والتنسيق والروابط التي يمكنك التعديل عليها في القالب ويخفي باقي الأكواد بحيث يصبح التحكم أفضل</div><div style="text-align: center;">حتى الآن هذه هي المميزات التي وضحت من تجربتي الاولى مع الواجهة الجديدة وأترك لك إكتشاف الباقي تحياتي</div><div style="text-align: center;"><br /></div></div>

شرح تعديلات واجهة تحرير قوالب بلوجر الجديدة

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

مزيد من المعلومات »

تعرف على بيكاسا وبعض أسراره

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: right;"><img alt="Picasa Web Albums" border="0" src="http://3.bp.blogspot.com/-q3I9pTq684A/UWLR3n_YqSI/AAAAAAAABFo/vCnJ4IcD3eM/s1600/picasa.jpg" title="مركز رفع الصور بيكاسا" /></div>مركز رفع الصور العملاق بيكاسا <b><span style="color: magenta;">Picasa</span> <span style="color: #38761d;">Web</span> <span style="color: blue;">Albums</span></b> ربما تكون سمعت عنه وربما لم تسمع به وربما سمعت عنه ولم تستخدمه لذا هذا الموضوع سيكون دليلك في التعرف عليه أو تطوير معرفتك به موقع الرفع بيكاسا هو أحد خدمات العملاق جوجل <b>Google</b> وهو المركز المدمج ببلوجر لذا هو أفضل ما يمكن أن تستعين به في تخزين صورك وإذا قمت بإضافة صورة في موضوع ستجد في خيارات صندوق الإضافة من البومات ويب بيكاسا حتى الصور التي ترفعها عبر مدونتك ستجدها محفوظة عليه إذا كل مستخدم لبلوجر يحمل المفتاح السحري لخدمات جوجل وهو بريد <span style="color: #3d85c6;"><b>Gmail</b></span> فانت لا تحتاج فتح حساب على بيكاسا فأنت بالفعل تملك واحداً ويمكنك الدخول له عبر الرابط التالي<br /><a href="https://picasaweb.google.com/lh/myphotos?noredirect=1" target="_blank"> <b>https://picasaweb.google.com/lh/myphotos?noredirect=1</b></a><br />وأكيد لاحظ المستخدمون لخدمة بيكاسا في الفترة الأخيرة انهم يتم تحويلهم لجوجل بلس <span style="color: #666666;"><b>Google plus</b></span> لإدارة الحساب وهذا أزعج الكثيرين وانا منهم فما الحل لذلك ؟هناك حلين الأول أن تحذف ميزات جوجل بلس وهو حل لا أنصح به لانه قد يسبب مشكلة وقد يكون خطا بسيط يحذف حساب جوجل بالكامل الحل الثاني هو الرابط الذي وضعته فهذا الرابط لا يسمح بالتحويل لجوجل بلس لاحظ كلمة <b>noredirect</b> لذا قم بحفظ الرابط بهذه الصيغة في مفضلتك وأدخل منه لحسابك في بيكاسا لن يتم تحويلك لجوجل بلس<br />قد يقول البعض بيكاسا رائع لكنه محدود ولكن هو خطأ شائع جداً نظراً لأنه من يريد رفع الصورة يجد أن المساحة محدودة مثل الصورة التالية<br /><br /><a name="more"></a><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-sUDzXgfZ_Io/UWLR2xBTi8I/AAAAAAAABFY/g-6m8o1OlUY/s1600/picasa+%25284%2529.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Picasa Storage" border="0" src="http://4.bp.blogspot.com/-sUDzXgfZ_Io/UWLR2xBTi8I/AAAAAAAABFY/g-6m8o1OlUY/s1600/picasa+%25284%2529.gif" title="مساحة التخزين في بيكاسا" /></a></div>ها هو أحد يهلل قائلا هل رأيت مساحته محدودة بـ <b>5</b> جيجا , ارد قائلا هذا أحد الأشياء التي تغيب عن كثير من المستخدمين مساحات بيكاسا مفتوحة الدليل أنت ستجد في <b>Storage used</b> المساحة المستخدمة الرقم بجوارها<span style="color: #6aa84f;"><b> 0</b></span> بالرغم من أنك قد تكون رفعت على الأقل 10 ميجا صور وأنا شخصيا رفعت حتى الآن حوالي <b>200</b> ميجا وما تزال المساحة المستخدمة <b>0</b> إذن ما الأمر ؟<br />ببساطة بيكاسا لا يحتسب مساحة أي صورة لا يزيد طولها أو عرضها عن <b>2048px</b> فأى صورة أقل من هذا الرقم لا تحسب حتى لو رفعت آلاف الصور أقل من تلك المساحة لن تحتسب وطبيعي لا احد يرفع بتلك المساحات الكبيرة إلا فقط من يصمم خلفيات أو تصاميم يحتاج بها تلك الجودة الكبيرة وهو أيضا لديه <b>5</b> جيجا مخصصة لذلك وهي مساحة ممتازة إذا أنت مع بيكاسا تنطلق بحرية كاملة<br />ايضا بيكاسا يتيح رفع الفديو وايضا لا يحتسب الفديو الذي أقل من <b>15</b> دقيقة <br /><h3 style="text-align: center;">بعض خصائص الألبوم</h3><div style="text-align: center;">بيكاسا يتيح لك عمل البومات بحيث تنسق صورك بشكل يناسبك وللألبومات مزايا أيضا لا يعرفها كثير من المستخدمين والصورة التالية محدد بها نقاط سنتكلم عنها نقطة نقطة</div><div style="text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><img alt="picasa albums" border="0" src="http://4.bp.blogspot.com/-zrSqyFKAgco/UWLR2OqVacI/AAAAAAAABFA/V_1gLTGAVyM/s1600/picasa+%25281%2529.gif" title="خصائص البوم بيكاسا" /></div><div style="text-align: center;">نبدأ مع او نقطة وهي كلمة <span style="color: #0b5394;">Edit</span> بجوار الألبوم هذه الكلمة عند الضغط عليها تظهر النافذة التالية</div><div style="text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><img alt="Picasa Album Edit" border="0" src="http://3.bp.blogspot.com/-Qf4C-lFVlkY/UWLR2vCROcI/AAAAAAAABFU/TdGGIiSTmyA/s1600/picasa+%25283%2529.gif" title="تحرير البوم بيكاسا" /></div><div style="text-align: center;">هذه النافذة تقدم خيارات ثلاث هي ما يهمنا بالفعل الخيار الأول</div><div style="text-align: center;"><b>Public on web </b>ويعني ان هذا الألبوم أى شخص يمكن ان يشاهد الصور التي بداخله ويصل له عن طريق البحث في الإنترنت أو أى طريقة</div><div style="text-align: center;">الخيار الثاني وهو<b> Limited , anyone with the link</b></div><div style="text-align: center;">وهو يعني ان هذا الألبوم لا يجده أحد إلا إن كان لديه لديه الرابط الخاص به</div><div style="text-align: center;">الخيار الثالث <b>Only you</b> وهو ليكون الألبوم خاص لا يمكن لاحد أن يشاهده إلا أنت لكن طبعا إن نشرت صورة منه يشاهدها الآخرين لكن الألبوم كله لا يجده احد غيرك طبعاً بعدما تختار الخيار المناسب إضغط <span style="color: #3d85c6;"><b>Save changes</b></span></div><h2 style="text-align: right;"><span style="color: orange;">نأتي للخيارين المؤشر عليهما بـ 1 و 2</span></h2><br />هذين الخيارين يخصان جعل الألبوم سلايدر نعم بيكاسا تتيح لك عمل سلايدر من أى البوم كل ما عليك أن ترفع الصور التي تريد عرضها في السلايدر إلى البوم ثم تضغط على الرقم واحد ليظهر لك الخيار الثاني المسمى<br /><span style="color: #3d85c6;"><b>Embed Slideshow</b></span> وعند الضغط عليه ستظهر النافذة التالية<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Picasa slideshow" border="0" src="http://4.bp.blogspot.com/-0vGPfjEsXv0/UWLR2qQvw6I/AAAAAAAABFM/zK2QtRUUZd0/s1600/picasa+%25282%2529.gif" title="عمل سلايد شو في بيكاسا" /></div><div style="text-align: center;">ملحوظة بخصوص الكود يمكنك التحكم في حجمه بشكل أكبر عبر تعديله يدويا هذه أرقام للعرض والطول</div><div style="text-align: center;"> <b>width=</b>"288" <b>height=</b>"192" قم بتعديلها بما يناسبك وطبعا بعد نسخ الكود من الألبوم الذي ترغب بعمله سلايدر يمكن أن تضيفة في المدونة في آداة <b>HTML/JavaScript</b> أو أن تضيفه في موضوع بان تحول الموضوع من وضع التأليف الى وضع <span style="color: #a64d79;"><b>HTML</b></span> وتضيف الكود </div><div style="text-align: center;"><span style="color: #0b5394;">آخر جزء وهو رمز RSS هذا عند الضغط عليه يفتح لك رابط خلاصات الصور إن كنت تهدف الى إستخدامه بأى طريقة </span></div><h4 style="text-align: right;"><span style="color: magenta;">معلومة بسيطة عن روابط الصور</span></h4><div style="text-align: right;">من مميزات روابط الصور في بيكاسا تصغير الصور عبر الرابط نفسه</div><div style="text-align: right;">مثال</div><div style="text-align: right;">هذا رابط صورة الموضوع بحجمها الطبيعي</div><div style="text-align: right;"><a href="http://3.bp.blogspot.com/-q3I9pTq684A/UWLR3n_YqSI/AAAAAAAABFo/vCnJ4IcD3eM/s1600/picasa.jpg">http://3.bp.blogspot.com/-q3I9pTq684A/UWLR3n_YqSI/AAAAAAAABFo/vCnJ4IcD3eM/<b>s1600</b>/picasa.jpg</a></div><div style="text-align: right;"><br /></div><div style="text-align: right;">وهذا الرابط مصغر </div><div style="text-align: right;"><br /></div><div style="text-align: right;"><a href="http://3.bp.blogspot.com/-q3I9pTq684A/UWLR3n_YqSI/AAAAAAAABFo/vCnJ4IcD3eM/s300/picasa.jpg">http://3.bp.blogspot.com/-q3I9pTq684A/UWLR3n_YqSI/AAAAAAAABFo/vCnJ4IcD3eM/<b>s300</b>/picasa.jpg</a></div><div style="text-align: right;"><br /></div><div style="text-align: right;">الفرق في رقم <b>s1600</b> و <b>s300</b> الرقم الأول <b>1600</b> هو رقم كبير فيظهر الصورة بحجمها الطبيعي لان الصورة أقل من <b>1600</b> أم الرقم الثاني <b>300</b> وهو أصغر من الصورة فتم التصغير الى أن هذا الحجم فهو مفيد في عرض الصور بشكل أفضل </div><h3 style="text-align: center;">معلومة أخيرة عن أرشفة الصور</h3><div style="text-align: center;">هناك معلومة هامة حول ارشفة الصور بشكل عام لكي يتم ارشفة الصورة بالطريقة الصحيحة عليك بإستخدام خيار الخصائص </div><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Image indexing" border="0" src="http://1.bp.blogspot.com/-W66EsMPqOFs/UWLR3gFCeeI/AAAAAAAABFk/EmjdkE0kTP4/s1600/picasa+%25285%2529.gif" title="خصائص الصور" /></div><div style="text-align: center;">في نص خانة العنوان أكتب أى كلمة أو جملة تدل على الصورة وفي النص البديل يمكنك أيضا كتابة شئ يدل عليها او أن تكتب كلمة إنجليزية مثلا تدل على الصورة وذلك حتى يجدها من يبحث بالإنجليزية وطبعا كله  يعود بالنفع على مدونتك  <br />تحديث بتاريخ 23 مايو 2013<br />لمن واجه مشكلة ظهور خلفية سوداء للصور الشفافة يدخل إلى إعدادات <a href="https://www.google.com/settings/plus" rel="nofollow" target="_blank">جوجل بلس من هنا</a><br />ثم يزيل التاشير من على خيار تحسين الصور الجديدة تلقائياً<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Fix Picasa Transparency" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0UMAyCKtqOmrgrCNeGjifwy5MuJovckzk0x8RUw9rjzIbAZuMTHcGQo3jVFYjnRWAZEHzIKhbxucBRffMx2WpVCtAO8d2mmUb8OWNq85allxIHNjaaH_xzIoN_hCk0JUEFMg2NooOZMM/s1600/pica.png" title="إصلاح مشكلة الخلفية السوداء للصور الشفافة" /></div><br /></div><div style="text-align: center;"><span style="color: red;">كل ما ذكرنا هو جزء لا يوفي هذا العملاق حقه الذي معه صورك ستكون بأمان وبالإضافة أنه الأكثر توافقا مع بلوجر وصورة تظهر بشكل مضبوط في الأدوات والمواضيع فعلى كل مدون في بلوجر ان يكون بيكاسا خياره الأول ولن يندم على ذلك </span></div><br /><br /></div>

تعرف على بيكاسا وبعض أسراره

مركز رفع الصور العملاق بيكاسا Picasa Web Albums ربما تكون سمعت عنه وربما لم تسمع به وربما سمعت عنه ولم تستخدمه لذا هذا الموضوع سيكون دليل...

مزيد من المعلومات »

سلايدر خفيف وأنيق وسهل التنسيق

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: right;"><img alt="image slider blogger Widget" border="0" src="http://1.bp.blogspot.com/-nU3N-bLLfa4/UV7yepbawqI/AAAAAAAABDI/v8ZCpX3BbA4/s1600/slid.jpg" title="سلايد شو خفيف لمدونات بلوجر" /></div>السلايد شو أو السلايدر <b>Slider</b> هي إضافة تمكنك من عرض صور بشكل متعاقب وأنيق وطبعا يمكن إستخدمها في عرض مواضيعك المميزة أو أى شئ ترغب بعرضه يكون واضح ولافت للأنظار هناك عشرات الإضافات التي تستخدم نفس الخاصية ولكن إخترت لكم هذه بالتحديد وهي من تصميمات  <a href="http://www.menucool.com/" rel="nofollow" target="_blank">menucool.com</a> لأنها تحتوي عدة مميزات أول شئ هي خفيفة جداً وهو ما تفتقر اليه أغلب السلايد الأخرى ميزة أخرى وهي ان تصميمها بسيط وليس مبالغ فيه فلا تسبب شذوذ عن الإطار العام لمدونتك أيضا هي سهلة التنسيق وستتوائم مع مدونتك ومظهرها بسهولة بإذن الله أيضا هي سهلة التركيب فالكود الخاص بها ستضيفة الى آداة<span style="color: #3d85c6;"><b> HTML/JavaScript</b></span> ثم إسحب الآداة فوق صندوق المواضيع ولا شئ آخر وهو من النادر إيجاده في كثير من السلايد أيضا بها ميزة أخرى وهي عدم الخروج عن الإطار الأساسي كثير من الإضافات الخاصة بالسلايد عند بداية التحميل نجد الصور ظاهرة بشكل عمودي ومشوه ثم بعد إكتمال التحميل تبدأ بالظهور بالشكل العادي أما هذه الإضافة لا توجد بها تلك المشكلة فهي ستظل بشكل متناسب حتى قبل التحميل أيضا بعض السلايد يعطيك عدد محدد من الروابط لا تستطيع تجاوزه اما هذه فالعدد مناسب وانت من يتحكم به ربما الشئ الوحيد الذي ينقص هذه الإضافة هو أن الصور يجب ان تكون بالحجم المناسب يصعب تعديل الحجم عبر الأكواد مع إني افضل ذلك حتى لا تكون الصور مشوهه ويمكنك معاينة شكل السلايدر عبر المثال التالي<br /><br /><a name="more"></a><div style="text-align: center;"><a class="cnmubo" href="http://cnmu.blogspot.com/p/preview.html?url=http://w-cnmu.blogspot.com/p/blog-page.html" target="_blank">معايـــنة</a></div><br />كود السلايدر<br /><br /><blockquote class="tr_bq"><style type="text/css"><br /><br /><br />#mcis {<br /> display: none;<br />}<br /><br />#sliderFrame {<br /> position: relative;<br /> width: <b>600</b>px;<br /> margin: 0 auto;<br />border:5px solid <span style="color: #38761d;"><b>#000</b></span>;<br />border-bottom:25px solid <span style="color: #38761d;"><b>#000</b></span>;<br />background:#fff;<br />border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;<br />margin-bottom:5px;<br />}<br />#slider img {<br /> position: absolute;<br /> border: none;<br />display: none;<br />}<br /><br />#slider {<br /> width: <b>600</b>px;<br /> height: <span style="color: #990000;"><b>218</b></span>px;<br /> background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYl8sIDmN-dPC93LohpETrnMFImjrWoeyFlPQ8Mo_JZboK6FMUUq-1OipgBO6_viwlnQz70Cwe2FRxhnS7uzq8Iqd_4od1ftBPRgief7sJ6kImcLmv50qNyrKN1Z1z4-efwHvbShxUK0g/s39/cnmuslidlod.gif) no-repeat 50% 50%;<br /> position: relative;<br /> margin: 0 auto;<br /> box-shadow: 0px 1px 5px #999999;<br />}<br /><br />#slider a.imgLink {<br /> z-index: 2;<br /> display: none;<br /> position: absolute;<br /> top: 0px;<br /> left: 0px;<br /> border: 0;<br /> padding: 0;<br /> margin: 0;<br /> width: 100%;<br /> height: 100%;<br />}<br /><br />div.mc-caption-bg, div.mc-caption-bg2 {<br /> position: absolute;<br /> width: 100%;<br /> height: auto;<br /> padding: 0;<br /> left: 0px;<br /> bottom: 0px;<br /> z-index: 3;<br /> overflow: hidden;<br /> font-size: 0;<br />}<br /><br />div.mc-caption-bg {<br /> background-color: black;<br />}<br /><br />div.mc-caption {<br /> font: bold 14px/20px Arial;<br /> color: #EEE;<br /> z-index: 4;<br /> padding: 10px 0;<br /> text-align: center;<br />}<br /><br />div.mc-caption a {<br /> color: #FB0;<br />}<br /><br />div.mc-caption a:hover {<br /> color: #DA0;<br />}<br /><br />div.navBulletsWrapper {<br /> top:<span style="color: #b45f06;"><b>225</b></span>px;<br />background: none;<br /> position: relative;<br /> z-index: 5;<br /> cursor: pointer;<br />}<br /><br />div.navBulletsWrapper div {<br /> width: 11px;<br /> height: 11px;<br /> background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoS-LP_vjuudD8FrENST5xIAC8OOeEV0VI3F0bZwOu5NWsmveSUBpEohddxpW_2zZ73tPxOZybwaJ6tX13mCmAFfHxoA7QHMIUBjy1hG1iqxuLenZGZdJQXo7bJqnjeAdFTyU0yHrkC7g/s22/cnmu-sliddot.png) no-repeat 0 0;<br /> float: left;<br /> overflow: hidden;<br /> vertical-align: middle;<br /> cursor: pointer;<br /> margin-right: 11px;<br /> _position: relative;<br />}<br /><br /><br /><br />div.navBulletsWrapper div.active {<br /> background-position: 0 -11px;<br />}<br /><br />#slider {<br /> transform: translate3d(0,0,0);<br /> -ms-transform: translate3d(0,0,0);<br /> -moz-transform: translate3d(0,0,0);<br /> -o-transform: translate3d(0,0,0);<br /> -webkit-transform: translate3d(0,0,0);<br />}<br /> </style> <br /><br /><script src="https://cnmu.googlecode.com/svn/trunk/cnmuslid.js" type="text/javascript"></script><br /><br /><div id="sliderFrame"><br />                <div id="slider"><br /><span style="color: red;"><a href="رابط الموضوع"><img alt="عنوان الموضوع" src="رابط الصورة"/></a></span><br /><a href="رابط الموضوع"><img alt="عنوان الموضوع" src="رابط الصورة"/></a><br /></div></div></blockquote><br /><h2 style="text-align: right;">طريقة تنسيق السلايد</h2><br />بالنسبة للرقم <b>600</b> هذا هو عرض السلايدر وهو متكرر لذا إن أردت ان تعدل عرض السلايد يجب ان تغير الرقم في كل المرات المتكرر فيها<br />الرقم <span style="color: #990000;"><b>218</b></span> هو إرتفاع السلايد يمكنك تعديله لكن بنفس القدر الذي ستعدله به يجب ان تعدل به هذا الرقم أيضا <span style="color: #b45f06;"><b>225</b></span> فإن قمت بالزيادة مثلا بنسبة 20 يجب أن تزيد الآخر 20 وإن قمت بالإنقاص نفس الشئ تنقص الآخر بنفس النسبة <br />أما هذا الكود <span style="color: #38761d;"><b>#000</b></span> وهو متكرر مرتين هذا لون السلايد قم بتعديله باللون الذي يعجبك<a href="http://cnmu.blogspot.com/p/copy-color-picker.html" target="_blank"> أكواد الألوان</a><br />أما هذا الكود<span style="color: red;"> <a href="رابط الموضوع"><img alt="عنوان الموضوع" src="رابط الصورة"/></a></span><br />هو كود الصور او الموضوعات قم بتكراره بحسب العدد الذي ستضيفه<br />ملاحظة حجم الصور يجب ان يكون بحجم العرض والإرتفاع الذي ستحدده<br /> فمثلا في الكود العرض محدد بـ 600 والإرتفاع 218<br />إذا الصورة ستكون بحجم 600x218<br />إن اردت أن تظهر الإضافة في صفحات محددة كالصفحة الرئيسية فقط مثلا أو صفحات المواضيع راجع الموضوع التالي من <a href="http://cnmu.blogspot.com/2013/02/blog-post.html" target="_blank">هنـــا</a><br /><br /></div>

سلايدر خفيف وأنيق وسهل التنسيق

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

مزيد من المعلومات »

تقديم خريطة مدونتك لجوجل وملف Robots

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: right;"><img alt="Submit SiteMap To Google WebMaster" border="0" src="http://2.bp.blogspot.com/-eYnKomyY4Mg/UVrgTWuCj5I/AAAAAAAABBQ/MnblVxFDYMs/s1600/gsitem.jpg" title="تقديم خريطة موقعك الى جوجل وإعداد ملف Robots.txt" /></div><div style="text-align: center;">خرائط المواقع هي تعتبر دليل يستخدم من قبل محركات البحث لتقوم بفهرسة موقعك لكن طبعا هناك من سيقاطع قائلاً أصبحت هذه الأمور ليست ذات أهمية كبيرة واصبحت محركات البحث أقوى ولا تنتظر تلك الملفات لتقوم بالفهرسة , هذه المرة لن أعارض وسأوافقه وأنها بالفعل لم تعد ذات أهمية كبيرة ولكن سنفترض انها ذات أهمية بنسبة <b>00,1 %</b> وهي لن تكلفنا شئ ولن تضر بشئ اليس من الحكمة أن نستفيد بتلك النسبة من الفائدة ولو قليلة وأعلم أيها المدون أن الإستهانة باقل نسبة من الفائدة يؤثر على تقدم مدونتك فتعدد الفوائد الصغيرة ينتج فائدة كبيرة كما يقول المثل المصري أبو بلاش كتر منه <b>^_^</b> أى الشئ المجاني خذ منه ما تستطيع طبعا هو جشع لكن التدوين الجشع فيه لا يضر بأحد , طبعا أهم ميزة في مدونات بلوجر<b> Blogger</b> أنها تأتي برعاية العملاق جوجل لذا يتم توفير الكثير من الأشياء التي يستهلكها من يعلق في منصات تدوين أخرى أو مواقع عادية وأهم ميزة هي ان مدوناتك بمجرد إنشائها تضاف تلقائياً لمحرك بحث جوجل والذي يعد محرك البحث الاول في العالم والاكثر إستخداماً في العالم العربي لكن تقديم الخريطة يجب ان يتم بشكل يدوي وهذا ما سنفعله سنقدم الخريطة لأدوات مشرفي المواقع في جوجل  <b>Submit SiteMap To Google WebMaster</b></div><div style="text-align: center;">أول شئ ندخل الى صفحة مشرفي المواقع من <a href="https://www.google.com/webmasters/tools/home" rel="nofollow" target="_blank">هنــا </a>  </div><div style="text-align: center;"></div><a name="more"></a><div style="text-align: center;">بعد الدخول سنجد قائمة بكل المدونات التي فتحناها على بلوجر وإن كانت لديك مدونة واحده ستجد واحده المهم أنت ستحدد المدونة التي تريد بإختيارها كالمثال التالي أنا إخترت مدونتي كن مدون </div><div style="text-align: center;"><br /></div><div style="text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><img alt="cnmu.blogspot.com " border="0" src="http://4.bp.blogspot.com/-1LLg66Y-3zA/UVrgSQ2AjFI/AAAAAAAABAw/u3q17KThGck/s1600/gsitem+%25281%2529.gif" title="كن مدون" /></div><div style="text-align: center;"> بعد الدخول الى الصفحة الخاص بمدونتك على أدوات مشرفي المواقع ستجد زر</div><div style="text-align: center;"> بإسم إضافة / إختبار ملف <b>Sitemap</b> سنضغط عليه </div><div style="text-align: center;">ستظهر قائمة في خانة فارغة نكتب في تلك الخانة<span style="color: #3d85c6;"><b> sitemap.xml </b></span> ثم نضغط على زر تقديم ملف  <b>Sitemap</b></div><div style="text-align: center;">ملحوظة لمستخدمي الدومينات المدفوعة قد لا تقبل معكم <span style="color: #666666;"><b>Sitemap.xml</b></span><br />فإستخدم بدلا منها<br /><span style="color: #cc0000;"><b><span id="bc_0_27b+seedTa_TD" kind="d">feeds/posts/default?orderby=updated</span></b></span><br /></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://4.bp.blogspot.com/-afrrRosMLoI/UVrgSQO1A0I/AAAAAAAABA0/ZJP1fKI2oBM/s1600/gsitem+%25283%2529.gif" /></div><div style="text-align: center;">بعد ذلك ستظهر رسالة تخبرك أنه تم  إرسال ملف الخريطة <b>Sitemap</b> ويمكنك ضغط تحديث الصفحة لترى الناتج أو تغلق الصفحة فقد إنتهت مهمتنا </div><div style="text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://2.bp.blogspot.com/-aurOAL6QXOY/UVrgSx6XOqI/AAAAAAAABBI/VJ9myb5Qjoc/s1600/gsitem+%25284%2529.gif" /></div><div style="text-align: center;">بقي أمر واحد في الموضوع وهو تقديم رابط الخريطة أيضا في ملف <b>Robots.txt</b></div><div style="text-align: center;">وهو يختص بالتعامل مع عناكب البحث  ولن نخوض في تعاريف هذا الملف كثيراً لأنها وببساطه لا تهم في شئ بالنسبة لمستخدم بلوجر العادي والإعدادات الإفتراضية هي الأسلم والانسب وتحديد مكان الخريطة في ملف الروبوت خطوة مناسبة وجيده في تحسين الأرشفة , قم بالدخول الى صفحة الإعدادات في مدونتك ثم حدد تفضيلات البحث وإختار تمكين ملف <b>Robots.txt</b> </div><div style="text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: right;"><img border="0" src="http://3.bp.blogspot.com/-nLwUiy3oQXg/UVrgTQiI8OI/AAAAAAAABBM/YdUBgQixlbk/s1600/gsitem+%25285%2529.gif" /></div><div style="text-align: center;"> وأضف الكود التالي في المساحة المخصصة كالصورة السابقة ثم إضغط حفظ التغييرات </div><div style="text-align: center;"><br /></div><blockquote class="tr_bq"><br />User-agent: Mediapartners-Google<br />Disallow: <br /><br />User-agent: *<br />Disallow: /search<br />Disallow: /search?updated-min=<br />Disallow: /search?updated-max=<br /><br />Sitemap: http://<span style="color: red;"><b>cnmu</b></span>.blogspot.com/feeds/posts/default?orderby=updated</blockquote><br /><div style="text-align: center;">ولا تنسى تغيير <span style="color: red;"><b>cnmu</b></span> في الكود بمدونتك </div><div style="text-align: center;">كيف تعرف الصفحات التي تم أرشفها في جوجل ؟</div><div style="text-align: center;">قم بكتابة الكود التالي في محرك بحث جوجل <b>site:cnmu.blogspot.com</b></div><div style="text-align: center;">وإستبدل رابط مدونتي برابط مدونتك ويجب ان يكون الرابط بهذا الشكل بدون http</div><div style="text-align: center;">أحيانا يلجأ البعض لرؤية آخر ساعة أو آخر <b>24</b> ساعة ليرى صفحات مواضيعه الأخيرة وهل تأرشفت ام لا لكن لا يجدها </div><div style="text-align: center;">أحيانا تتأرشف الصفحات لكنها لا تظهر عند الضغط على أحداث آخر ساعة أو آخر <b>24</b> ساعة يمكنك التأكد أكثر هل الصفحة تارشفت أم لا بكتابة جزء من عنوان الموضوع بعد الرابط مثال </div><div style="text-align: center;"><b>site:cnmu.blogspot.com <span style="color: blue;">Robots</span></b></div><div style="text-align: center;">وهي كلمة من عنوان هذا الموضوع ونفس الشئ معك أكتب اى كلمة من عنوان موضوعك الأخيرة وستظهر لك النتائج بشكل أفضل وإعلم أيضا ان تفاعل الزوار وكثرة التردد على المواضيع يحسن سرعة أرشفتها فإحرص على المواضيع الجيدة والمفيدة والجذابة للزوار والغير منقولة  فجودة محتواك وحصريته على مدونتك هو المحرك الرئيسي لأرشفة صفحاتك </div><br /></div>

تقديم خريطة مدونتك لجوجل وملف Robots

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

مزيد من المعلومات »