الصفحات

Tuesday, September 30, 2014

شرح حماية حقوق قوالب بلوجر

Protect your Templates With Non Removable Credit
حصرياً على كن مدون شرح كامل لحماية وتشفير حقوق قوالبك في بلوجر كثر هذا الطلب على من اخوه افاضل ولم ارد ابداً ان أتأخر عليهم اكثر من ذلك لكن ما أخرني في هذا الأمر هو البحث عن طريقة للشرح بحيث لا تكون في نفس الوقت طريقة لكسر الحماية يعني لا أعلمك من جهه كيف تحمي قالبك ومن جهة اخرى اعلم آخرين طريقة السرقة طبعاً هذه الفكرة مؤلمة أساسا لي وهي فكرة التعدي على حقوق الملكية سواء قوالب او اضافات او اى شئ نجد أشخاص لا ضمير عندهم يجلسون طوال اليوم كل ما يهمهم هو سرقة الآخرين مواضيع إضافات قوالب كل شئ أكواد دون اذن وكأنه حق مستباح لا يقدرون كم الجهد الذي يبذل لعمل ابسط كود ايجاد الفكرة نفسها مجهود كبير ثم هم بكل اريحية يضيعون تعب ساعات طويله انا لا أعرف كيف يستحلون شئ محرم بهذا الشكل بكل سهولة أسأل الله لهم الهداية  ومن هنا كان التحدي كيف أصنع شرح يحل تلك المعضلة وبفضل الله ها أنا اقدمه لكم فإستخدموه فيما ينفع
هذا الكود هو محور الشرح
<script type='text/javascript'>
//<![CDATA[
$(document)['ready'](function () {
        $('#cnmuprot')['html']('<a href="http://cnmu.blogspot.com" rel="dofollow" target="_blank">كن مدون</a>');
        setInterval(function () {
                if (!$('#cnmuprot:visible')['length']) {
                  window['location']['href'] = 'http://cnmu.blogspot.com';
                };
            }, 3000);
    });
//]]>
</script>
فكرة هذا الكود أنه يعطي الأمر بانه إذا تم تغيير الحقوق يتم استبدال التغيير بالإسم والرابط المخصصان
وكما هما في الكود كن مدون و الرابط http://cnmu.blogspot.com
أنت تستبدلهم بما تريد استبدل الرابط المكرر مرتين برابط موقعك
واستبدل الإسم بإسم موقعك
الجزء الثاني من فكرة الكود هي انه اذا تم حذف الحقوق يتم اعادة توجيه الزائر للموقع الموجود به
حماية مزدوجة

كيف نستخدم الكود

ببساطة ادمج هذا الكود في القالب اضفه في أى مكان تريد أو اضفه وسط ملفات جافا أخرى أو في ملف خارجي
لكن بهذه الطريقة الكود واضح ويمكن تعديله وهنا الجزء الحصري لكن مدون آداة تشفير ستساعدك في اخفاء الكود
ادخل الى صفحة الآداة وقم بتشفير الكود ثم اضف الكود المشفر بين وسمي فتح واغلاق للجافا
<script type="text/javascript">
هنا أضف الكود
</script>
وأضفه في اى مكان في القالب 
كيف تصعب الأمر اكثر ؟
 ذلك بدمج الملف في ملفات جافا مهمه في القالب
مثلاً هذا كود جافا يخص اضافة داخل القالب
 <script type="text/javascript">
  // list top topcommenters:
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
}
$(document)['ready'](function () {
        $('#cnmuprot')['html']('<a href="http://cnmu.blogspot.com" rel="dofollow" target="_blank">كن مدون</a>');
        setInterval(function () {
                if (!$('#cnmuprot:visible')['length']) {
                  window['location']['href'] = 'http://cnmu.blogspot.com';
                };
            }, 3000);
    });

 </script>
كما تلاحظ تم دمج  كود الحقوق الخاص بنا داخل كود تلك الإضافة
طبعا لم نأخذ الكود بوسمي الفتح والإغلاق الخاصة بالجافا لانه موجود في كود الآداة أخذنا فقط الجزء العملي
المهم هذه فكرة الدمج يمكن ان تدمجه بعد تشفيره 
وهناك ما هو أفضل ؟؟ 
يمكنك تشفير الكود كاملا بما فيه كود الإضافة وعندما يكون الكود باكمله مشفر لا يمكن حذف لأنه مع الحذف ستتوقف الإضافة هي الأخرى لكن تشفير الكود مع كود الإضافة في بعض الإضافات قد لا يكون جيداً فيجب ان تنتقي اضافة لا يؤثر التشفير على عملها ويمكنك التجربه اكثر من مرة 

لحظة لم ينتهي الشرح 

 بقي الجزء الآخر من الكود وهو رابط الحقوق انت بعد ان شفرت الكود ووضعته يجب ان يكون هناك جزء ظاهر وهو الرابط الذي ستضيفه في الفوتر في القالب هذا هو
<a href='http://cnmu.blogspot.com' id='cnmuprot' rel='dofollow' target='_blank'>كن مدون</a>
كما ترى هو رابط عادي يعني لا تشفره يعني تضيفه بالطريقة التي تريد في الفوتر فقط عدل الرابط والكلمة بنفس ما وضعته في الكود الاول 
المعرف المعلم بالأخضر cnmuprot هو الذي يفعل الكود ان تم تعديل الرابط سيقوم الكود تلقائيا بوضع الرابط الخاص بك الذي شفرته ان تم تعديل الإسم سيتم استبداله بالإسم الذي شفرته اذا تم حذف الكود او المعرف سيتم اعادة التوجيه للرابط المشفر

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

Saturday, September 27, 2014

افضل المواقع لتحميل قوالب ووردبريس

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

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


هذه لائحة من افضل المواقع لتحميل قوالب ووردبريس



1 - http://www.elegantthemes.com/


2 - http://themefuse.com/


3 - http://ithemes.com/


4 - http://www.woothemes.com/


5 - http://www.studiopress.com/

6 - http://www.themeskingdom.com/


7 - http://www.rockettheme.com/


8 - http://templatic.com/


9 - http://www.cssigniter.com/ignite/


10 - http://graphpaperpress.com/


11 - http://themeforest.net/


12 - https://mythemeshop.com/




اتمنى ان تعجبكم هذه المواقع 

في امان الله 
مدون محترف

Friday, September 26, 2014

افضل المواقع لتحميل قوالب بلوجر

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


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




هذه لائحة من افضل المواقع لتحميل قوالب بلوجر



1 - http://soratemplates.com/


2 - http://templatetrackers.com/


3 - http://seobloggertemplates.com/


4 - http://btemplates.com/


5 - http://www.deluxetemplates.net/


6 - http://chocotemplates.com/


7 - http://www.blogskins.com/


8 - http://www.templateism.com/


9 - http://www.bietemplates.com/


10 - http://www.raytemplates.com/


11 - http://www.way2bloggertemplates.com/


12 - http://www.freetemplatesblogger.info/


13 - http://johnytemplate.blogspot.com/


يمكنك ايضا مشاهدة : افضل المواقع لتحميل قوالب ووردبريس


اتمنى ان تعجبكم هذه المواقع 

في امان الله 
مدون محترف

شرح تحويل صور الإنفوجرافيك إلى فيديو


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

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



والفيديو التالي هو توضيح عملي لاستخدام الموقع

في امان الله 
مدونة مدون محترف


Thursday, September 25, 2014

قالب متجاوب احترافي للمدونات الربحية

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


مميزات القالب

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

Tuesday, September 23, 2014

ايقونات فلات عالية الجودة للتحميل


ايقونات فلات عالية الجودة للتحميل ,افضل مجموعة ايقونات فلات للتحميل

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


1. http://goo.gl/3jXsjv


افضل ايقونات عالية الجودة على شكل فلات لتصميم المواقع


2. http://goo.gl/JvyGGD


افضل ايقونات عالية الجودة على شكل فلات لتصميم المواقع


3. http://goo.gl/gMH2ZV


افضل ايقونات عالية الجودة على شكل فلات لتصميم المواقع


4. http://goo.gl/FZyoK9


افضل ايقونات عالية الجودة على شكل فلات لتصميم المواقع


5. http://goo.gl/ux19p0

افضل ايقونات عالية الجودة على شكل فلات لتصميم المواقع



يمكنك ايضا مشاهدة : 10 مجموعات من الايقونات المرسومة مجانا
                              اضافة ازرار فلات احترافية لمدونات بلوجر


تحياتي
مدونة مدون محترف







Sunday, September 21, 2014

اضافة صورة في الشريط الجانبي لمدونات بلوجر

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

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


كيفية اضافة الصور في الشريط الجانبي في مدونات بلوجر


إذهب إلى التخطيط >> إضافة أداة > صورة



اضافة صورة في الشريط الجانبي لمدونات بلوجر


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


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

تحياتي 
مدون محترف


Saturday, September 20, 2014

تصنيف فيس بوك مدونتك كـ spam الأسباب وطرق العلاج

Stop Facebook From Treating Your blog as spam
أصبح الكثير من المدونين يواجهون تلك المشكلة وهي انه يتم تصنيف مدوناتهم في موقع فيس بوك كمحتوى غير مرغوب به ولا يتم النقل المباشر للمدونة عند الضغط على رابطها حتى مع اختصار الروابط ايضاً لا يفيد ومع موقع عملاق كالفيس بوك لا ينفع ان نخسره ونخسر مميزاته في جلب الزوار والإشهار لذلك يجب ان يكون هناك حلول لهذا الأمر لكن قبل ان نخوض في الحلول يجب ان نكتشف ما الأسباب التي أدت لهذا الامر فغالباً نكون نحن السبب دون أن ندري

الأسباب

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

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

الصور والملفات
قد يكون من محتويات قالبك او مدونتك صور او ملفات بها اشياء ضارة ومدمج بها ملفات خبيثة تضر بالزوار

بلاغات الحاقدين
للأسف هناك بعض معدومي الضمير لا يحب المنافسة الشريفة فيبدأ بعمل بلاغات ضد رابط مدونتك هدفاً لتقليل الوافدين اليها او بغضاً لك

المقدمات

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

منها
ظهور كلمات تحقق Captcha  عند مشاركة الرابط
أو ظهور كثير من الأخطاء عند محاولة المشاركة ويكتب لك تعذر المشاركة


الحلول

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

في حالة ان كانت المشكلة في المحتوى 

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

في حالة ان السبب صور او ملفات تحتوي ملفات خبيثة

عليك فحص المدونة أنصح بموقع virustotal
استخدامه بسيط كالتالي

scan your website with virustotal


ستظهر لك صفحة النتائج وان كان هناك اكتشافات سيظهر لك البرنامج الذي اكتشفها يمكنك تثبيت البرنامج لمعرفة ما الذي اكتشفه بالضبط طبعا لو الإكتشافات كثيرة يجب ان تعمل يجد على اصلاحها
بعد حذفها وازالتها استخدم آداة Debug لعمل تحديث للروابط المصنفة كسبام او رابط مدونتك الأساسي وكأنك تخبر الفيس بوك عن اصلاح الخطأ فيتم تغييرالإجراء واعتبار مدونتك مرة أخرى آمنة
استخدام آدآة Debug سهل
  1. ستجد خانة لإضافة الرابط اضفه بها
  2. ثم اضغط زر Debug
  3. ثم سيظهر زرين اضغط على Fetch new scrape information

في حالة كان الأمر ناتج عن بلاغات

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

facebook Warnning
هذه أكثر الاشياء الشائعة في هذا الموضوع أتمنى ان يكون مفيد لكم وحلا لهذه المشكلة لمن تواجههم
تحياتي

Friday, September 19, 2014

اضافة تأثير الزوم على الصور لمدونات بلوجر

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


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




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


الان ابحث عن ]]></b:skin> و اضف الكود التالي فوقه

.zoomeffect img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.zoomeffect img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

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


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


 <a class="zoomeffect" href="#" target="_blank">
<img src="##" /></a>

مع استبدال ## برابط الصورة و يمكن تكرار الكود اكثر من مرة على حسب رغبتك
و لوضع رابط داخل الصورة استبدل # برابط الموضوع التي تريده


يمكنك ايضا مشاهدة : اضافة تأثير الدوران على الصور لمدونات بلوجر 

تحياتي 
مدون محترف

Thursday, September 18, 2014

افضل لغات البرمجة المفيدة للمدونين

ما هي لغات البرمجة الاساسية في تصميم مواقع الانترنت و مدونات بلوجر و ماذا يجب عليك ان تتعلم

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


هل تحتاجون إلى تعلم ما هي الاكواد او مهارات البرمجة


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


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



اللغة الاساسية في الويب : HTML


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




لغة CSS


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




لغة PHP


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




بعض منها جيدة وأخرى مفيدة


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

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



بالتوفيق
مدون محترف

آخر التعليقات مع الإشعارات

Comments With Notification Blogger widget
إضافة جديدة تتعلق بآخرالتعليقات لكن هذه المرة مع ميزة جديدة وهي الإشعارات الإضافة تظهر إشعارات مباشرة مع نشر اى تعليق جديد بشكل تلقائي وهو مفيد جداً للمدونات التي تكون التعليقات جزء أساسي من نشاطها وهي أيضاً جاذبة للقارئ لكي يتصفح التعليقات الجديد مما يزيد من الزيارات وبإذن الله تنال إعجابكم يمكنك أولا رؤية المعاينة الحية من الرابط التالي

والآن مع التركيب : تركب الإضافة في آداة HTML/JavaScript

<style>
#cnmucount {
  margin: -4px -49px;
  z-index: 9997;
  position: absolute;
}
#show-total {
  position: absolute;
  cursor: pointer;
  display: block;
  z-index: 9999;
}
.total-show {
  background-color: #0098d9;
  border-radius: 4px;
  color: white;
  display: block;
  font-size: 11px;
  font-weight: bold;
  height: 15px;
  margin: -7px -16px 0 0;
  text-align: center;
  width: 34px;
  z-index: 9999;
}
#bsnotif {
  background: url("https://lh5.googleusercontent.com/-7Ouuw-OGP3s/VBprcytb9sI/AAAAAAAAEuw/buM-muBUBkQ/s24/comment.png") no-repeat scroll center center #bbb;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  height: 24px;
  padding: 3px 4px;
  width: 24px;
  z-index: 9997;
  position: absolute;
}
#bsnotif2 {
  background: url("https://lh5.googleusercontent.com/-7Ouuw-OGP3s/VBprcytb9sI/AAAAAAAAEuw/buM-muBUBkQ/s24/comment.png") no-repeat scroll center center #0098d9;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  height: 24px;
  padding: 3px 4px;
  width: 24px;
  z-index: 9996;
  position: absolute;
}
#bs-wrapper {
  width:352px;
  position:fixed;
  top:30px;
  z-index:9999;
  background-color:#fff;
  padding:0 13px 0 0;
  color:#666;
  left:-369px;
  font-family: Arial, Sans-serif;
  border:4px solid #0098D9;
  border-left:none;
  transition:0.5s ease;
}
#cm-scroll {
width: 100%;
height: 560px;
overflow: auto;
position: relative;
}
#cnmucomment-container {
  color:#666;
  font-family: Arial, Sans-serif;
}
#cnmucomment-container.cm-active {
position:fixed;
right:0;
top:61px;
}
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}
.vscrollerbase {
width: 5px;
    background-color: #111;border-radius:2px;
}
.vscrollerbar {
width: 5px;
background-color: #444;border-radius:2px;
}
.hscrollerbase {
height: 10px;
background-color: #111;border-radius:2px;
}
.hscrollerbar {
height: 10px;
background-color: #444;border-radius:2px;
}
.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background-color: gray;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:right;
}
  .cm-outer pre {background-color:#141414;font-size:11px;color:#7c7c7c}
.cm-outer li {
  padding:7px 10px 12px;
  list-style:none;
  clear:both;
  position:relative;
  border-bottom:1px dashed #777;
  margin-left:10px;
}
.cm-outer code {
 color:#a6a658;
    font-size:11px;
}
  .cm-outer li.selected {
    border-left:4px solid #fffe8c;
}
  .cm-outer li:first-child {
  border-top:none;
}
  .cm-outer li:last-child {
  border-bottom:none;
}
  .cm-text {color:#555;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 60px 8px 0;font-size:12px;font-weight:normal !important;}
  .cm-header a {color:#0098D9;text-decoration:none;font-size:12px;font-weight:bold}
.cm-header a:hover {color:#555;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-right:60px}
.cm-outer img {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMl-_bYOJjy6ey2QSB0DzmmXSiC2HuxuCRp20QzcU6t85dm82eg63X3yZRuMIP0GszsJtTpd35TuBsDMurw-3oCA39nP02dOYXF9ICxY7NDV0vTLPRQ5g2rQAnE1HEmYNltI6SS_UVRoxc/s1600/BS+anon.png") no-repeat scroll 50% 50% #ddd;
  border-radius: 100px;
  box-shadow: 0 0 2px #222;
  display: block;
  float: right;
  overflow: hidden;
  padding: 2px;
  position: absolute;
  right: 0;
  top: 10px;
}
.BS-Notif-footer {margin-top:7px;}
.BS-Notif-footer a {color:#04BDFA;text-decoration:none;}
.BS-Notif-footer a:hover {color:#e6e6e6;text-decoration:none;}
div.cm-header img[src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPzU0mAYkGM33VzB4UU_zdQl_7ysYQ_n1BK6O3ieL1oW1q83b_GhcumPj61RiyvVXrRurM4MBh8bs0L4GWshpkFHfZYj9YOtD-UqsfwirFkdsVUfzqxK00w2TAGZUicgtSPOZgUXDfMwl9/s1600/BS+openid.gif'] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9LceTKaZRNdE-eO8LBfEzT-FQ1_bysrnhOxqtn1_6tvtYqX89_58W48tzXoexaFrimsAhrifvlAimp9x_voRHJp4wTNMFXfwBbcA0CUyB2W1SG5UeAacdzfvNCbmOKC9fZLOVfC1wVZTS/s1600/BS+gravatar.png);
}
.bs-ground{
        display: none;
        position: absolute;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index:99;
        opacity:.30;
}
img.cm-smiley  {
  float:none;
  position:relative;
  display:inline-block;
    width:12px !important;
    height:12px !important;
    top:2px;
    border:none;
    border-radius:2px;
background:none;
}
.myframe {
  display:none;
  width:100%;
  height:265px;
  margin-bottom:5px;
  border-radius:5px;
}
.jsfiddle-demo {
  display:block;
  width:100%;
  height:250px;
  border:1px solid #bbb;
  background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNYhvdMhVnL52U2fwKV33WVhTFz-duN9DdoF8LlQwQkkv_ekaoNgDuGoge8lMn_4AcWnR8eT-szT5ftu_-S0l_WoNbVYiUC4CHHkBtGlHnxUj17v2yESW9Wk0e_NJkFJFry4A159UNmp5W/s1600/bs+loading+dot.gif') no-repeat 50% 50%;
}
.sticky {
    position: fixed;
    top: 80px;
    z-index: 100;
    border-top: 0;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<div class='bs-ground' id='bg'></div>
<div id='bs-wrapper'>
<div id="cnmucount">
<div id='bsnotif' title='Notification'></div>
<div id='show-total'></div>
<div id='bsnotif2' title='Notification'></div>
</div>
<div class='flexcroll' id='cm-scroll'>
<div id='cnmucomment-container'></div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://cnmu.blogspot.com",
    max_result: 18,
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: false,
    ct_id: "cnmucomment-container",
    new_cm: " تعليقات جديدة ",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#bsnotif').click(function(){$("#bs-wrapper").css({left: "0px"});$("#bg, #bsnotif2").show();$("#bsnotif").hide();});$('#bsnotif2').click(function(){$("#bs-wrapper").css({left: "-369px"});$("#bg, #bsnotif2").hide();$("#bsnotif").show();});$('#bg').click(function(){$("#bs-wrapper").css({left: "-369px"});$("#bg, #bsnotif2").hide();$("#bsnotif").show();});document.getElementById('bsnotif').onclick = function() {document.title = originalTitle;$('#show-total').hide();};document.getElementById('show-total').onclick = function() {document.title = originalTitle;$('#show-total').hide();$("#bs-wrapper").css({left: "0px"});$("#bg").show();};setTimeout(function() {$('.myframe').each(function() {$(this).replaceWith('<iframe class="myframe" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');});}, 5000);$(document).ready(function() {
var stickyNavTop = $('#HTML7').offset().top; var stickyNav = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyNavTop) { $('#HTML7').addClass('sticky');} else {$('#HTML7').removeClass('sticky'); }};stickyNav();$(window).scroll(function() {stickyNav();});});
//]]>
</script>
<script src='https://cnmu.googlecode.com/svn/trunk/2014/comment-Notification.js' type='text/javascript'></script>
أولا إستبدل هذا الرابط http://cnmu.blogspot.com برابط مدونتك
هذا #0098D9 هو اللون الخاص بالأداة عدله باللون المناسب لقالبك
الكود الاخضر يمكنك ازالته ان كان لديك مكتبة جي كويري في قالبك
تجربة موفقة تحياتي

Tuesday, September 16, 2014

اضافة تأثير الدوران على الصور لمدونات بلوجر

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


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




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


الان ابحث عن ]]></b:skin> و اضف الكود التالي فوقه

.spinningeffect img {
/* Spinning Social Icons Widget By www.mudwnp.blogspot.com */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.spinningeffect img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

اهم الملاحظات حول الكود


يمكنك أيضا تغيير درجة دوران الصور استبدل  360deg, ستجدها مكررة اكثر من مرة استبدلها كلها 

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


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


<a class="spinningeffect" href="YOUR-IMAGE-URL/" target="_blank">
<img src="http://YOUR-IMAGE-URL" /></a>

الان لتطبيق تأثير الدوران على الصور


استبدل  YOUR-IMAGE-URL برابط الصورة و يمكنك تكرار الكود كما تريد في الموضوع

يمكنك ايضا مشاهدة : اضافة تأثير الدوران على الصور لمدونات بلوجر 

تحياتي 
مدون محترف

Sunday, September 14, 2014

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

اضافة ثلاث اعمدة في الفوتر و تنسيقها بطريقة احترافية و يمكن اضافة 4 او 5 اعمدة على حسب رغبتك مثل مدونة مدون محترف

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

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


الان ابحث عن ]]></b:skin> و اضف الكود التالي فوقه

 /*----- Advanced Multi Column Footer By www.mudwnp.blogspot.com -----*/

    #lower {
    margin:auto;
    padding: 0px 0px 10px 0px;
    width: 100%;
    background:#333333;
    }
    #lower-wrapper {
    background:#333333;
    margin:auto;
    padding: 20px 0px 20px 0px;
    width: 960px;
    border:0;
    }
    #lowerbar-wrapper {
    background:#333333;
    float: right;
    margin: 0px 5px auto;
    padding-bottom: 20px;
    width: 23%;
    text-align: justify;
    color:#ddd;
    font: normal 12px Arial, Tahoma, Verdana;
    line-height: 1.6em;
    word-wrap: break-word;
    overflow: hidden;
    }
    .lowerbar {margin: 0; padding: 0;}
    .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
    .lowerbar h2 {
    margin: 0px 0px 10px 0px;
    padding: 3px 0px 3px 0px;
    text-align: right;
    border:0;
    color:#ddd;
    text-transform:uppercase;
    font: bold 14px Arial, Tahoma, Verdana;
    }
    .lowerbar ul {
    color:#fff;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    }
    .lowerbar li {
    display:block;
    color:#fff;
    line-height: 1.6em;
    margin-right: 0 !important;
    padding: 6px;
    border-bottom: 1px solid #222;
    border-top: 1px solid #444;
    list-style-type: none;
    }
    .lowerbar li a {
    text-decoration:none; color: #DBDBDB;
    }
    .lowerbar li a:hover {
    text-decoration:underline;
    }
    .lowerbar li:hover {
    display:block;
    background: #222;
    }

اهم الملاحظات حول الكود


لتغيير حجم الفوتر قم بتغيير width: 100%; على حسب ما حجم مدونتك بتغيير رقم 100
و هذا الرقم width: 23%; هو حجم عرض الاعمدة في الفوتر إذا اضفت 3 اعمدة يصبح 33%
لتغيير لون خلفية الفوتر #333333  قم بتغيير هذا الرقم بكود اللون الذي تريده ستجده مكرر اكثر من مرة قم بتغييرها كلها
لتغيير حجم و نوع الخط قم بتغيير رقم 14 بالحجم الذي تريد و تغيير Arial بالخط الموجود في مدونتك
 
الان ابحث عن </body> و اضف الكود التالي فوقه

<div id='lower'>
    <div id='lower-wrapper'>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar1' preferred='yes'>
    </b:section>
    </div>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar2' preferred='yes'>
    </b:section>
    </div>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar3' preferred='yes'>
    </b:section>
    </div>


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar4' preferred='yes'>
    </b:section>
    </div>



    <div style='clear: both;'/>
    </div> </div>

لاضافة عمود خامس قم باضافة هذا الكود


    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar4' preferred='yes'>
    </b:section>
    </div>

مع تغيير lowerbar4 بــ  lowerbar5
اي تعديل تريده قم بوضع رد في تعليق بالمشكلة و سوف يتم الرد عليك بحل لها

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

Monday, September 8, 2014

نموذج الجوال وطرق اعداده والتعامل معه

Edit And Customize Blogger Mobile Template
تكلمنا من قبل عن القوالب المتجاوبه ونموذج الجوال وكيفة ضبطه وتفعيله على المدونة لكن لم نتكلم عن الإعدادت والتعامل معه لذلك أحببت ان أخصص موضوع مستقل عن التعامل مع هذا النموذج وتخصيصه كما هو مبين في الموضوع السابق طريقة تفعيل نموذج الجوال الان سنتكلم عن التعامل مع هذا النموذج مثل اضافة ادوات خاصه به او ادوات مشتركه بينه وبين نموذج سطح المكتب أو اضافة اعلانات عليه وهو امر يهم كثيراً المهتمين بالربح من مدوناتهم خصوصاً أن الزوار من الجوال والأجهزة الذكية لم يعد عدد بسيط كالسابق فمستخدمي الأهزة الذكية والهواتف لتصفح الإنترنت ارتفع كثيراً 

أولا نوضح الادوات الرسمية في بلوجر التي يدعمها نموذج الجوال

  1. آداة الصفحات
  2. آداة رأس الصفحة
  3. صندوق المواضيع
  4. آداة الملف الشخصي
  5. آداة أدسنس الرسمية
  6. آداة الإسناد (تدعمه بلوجر)
نعم هذه فقط هي الادوات التي يدعمها نموذج الجوال ومعنى يدعمها اى تصبح متجاوبة تلقائيا وتعرض على الهواتف بشكل مضبوط وللأسف بعضها أساسا لا نستخدمه يعني آداة الإسناد عادة نحذفها آداة أدسنس الرسمية لاتعمل مع غالبية القوالب لكن يجب ان نوضح الامر يكون الموضوع متكامل
كيف نفعل تلك الأدوات على نموذج الهاتف فقط او نلغيها من عليه أو نجعلها مشتركة بين نموذج الهاتف ونموذج سطح المكتب
عبر الثلاث اكواد التالية
mobile='only'    تفعيلها على الهاتف فقط
mobile='no'      عدم تفعيلها على نموذج الهاتف
mobile='yes'     تفعيلها على نموذج الهاتف ونموذج سطح المكتب وغالبا تفعل تلقائيا بدون الكود
كيفة اضافة تلك الاكواد ؟ نبحث عن الإضافة ونضيف لها الكود كما بالمثال التالي
<b:widget id='PageList1' locked='false' title='الصفحات' mobile='only' type='PageList'>


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

blogger Custom mobile template
الثانية البحث عن الوسم <body>
واستبداله بالكود التالي
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
يمكنك التعامل مع الادوات السابقة وهذا النموذج بنفس الشكل
لكن هذا النموذج بما انه يعتمد على تصميم قالبك فإن لم يكن تصميم قالبك منظم ومضبوط قد يكون النموذج غير مضبوط كيف نضبطه
هنا تحتاج بعض الخبرة في الـ css ستقوم بتعديل النموذج بإستخدام لغة css بشكل طبيعي كأنك تتعامل مع قالبك العادي لكن الفرق انك ستضيف للمعرف معرف آخر خاص بالجوال وهو  .mobile
مثال أنا اريد التعديل على الهيدر ولكن لاعدل الهيدر في نموذج الهاتف فقط على فعل التالي
نفترض ان معرف الهيدر هو #header 
لنجعل التعديل في نموذج الهاتف فقط نضيف قبله معرف الهاتف فيصبح بالمظهر التالي
.mobile #header 
ونضيف ما نريد من اكواد الـ CSS وهكذا مع باقي الاجزاء التي تريد تعديلها

المرحلة الأخيرة التعامل مع الإضافات داخل القالب

هنا بعدما قمت بإعداد نموذج الجوال الخاص بك او ان كان معد مسبقاً
نريد مثلا أن نضيف به كود أو وحدة اعلانية
استخدم الكود التالي
<b:if cond="data:blog.isMobile">
<!--المظهر على الجوال-->
<a href="http://cnmu.blogspot.com">كن مدون</a>
<b:else/>
<!--المظهر على سطح المكتب-->
<a href="http://cnmu.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikmYpf5ow5pr6sVTejad_3_HPJd7OVhELt7B09HSl3hPkKhwET2OwipuBzdWvvl_K-mdVJrId0VPJCC9VXDWAIQ-Z2Mqin5G1Hykt2K_urwvmWtjQu_XMrZqtzOAYV2-ABDPKyfRtEQfk/s1600/468x60.png"/></a>
</b:if>
ما هو معلم بالأحمر في الكود السابق هذا تحذفه هو فقط مثال
ما فعلته في الكود السابق انني اعطيت أمرين الأمر الأول وهو الكود الأحمر الأول
أن يظهر رابط واسم كن مدون هذا خاص بالمظهر على الجوال
اما الثاني فهو اظهار رابط ولكن بدلا من كلمة كن مدون وضعت صورة
اذاً عندما تفتح بنموذج سطح المكتب ستظهر صورة عندما تفتح بنموذج الجوال يظهر رابط فقط
وقس على ذلك باقي الأشياء مثلا وحده اعلانية واحده بحجم للجوال واخرى بحجم لسطح المكتب
الى آخره
نفرض مثلا اريد اظهار شئ على نموذج الجوال فقط استخدم الكود التالي
<b:if cond="data:blog.isMobile">
اضف هنا ما تريد
</b:if>
طبعا لمن لا يعرف كيف يظهر نموذج الجوار الخاص بمدونته ويتصفحه فقط بعد رابط المدونة اضف الكود المعلم بالأحمر كما في المثال التالي
http://cnmu.blogspot.com/?m=1
الى هنا انتهى موضوعنا أى سؤال أو استفسار حول الموضوع أخبرني في تعليق

تحياتي