الصفحات

Wednesday, April 29, 2015

قالب New Minima Colored Redesign معرب و مطور

قالب New Minima Colored Redesign معرب و مطور - متوافق مع جميع الشاشات و الاجهزة سيو مدعم و يعد من افضل قوالب بلوجر

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



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

  1. متوافق مع جميع الشاشات
  2. إعلانات ادسنس متجاوبة
  3. أداة اختبار جوجل مدعم
  4. نظام تعليقات بلوجر
  5. مواضيع ذات صلة
  6. محرك بحث متطور
  7. ازرار المشاركة
  8. سهم الصعود إلى اعلى
  9. نموذج اتصل بنا
  10. التصميم عامودين
  11. تصميم فلات
  12. سيو مدعم 
  13. صندوق الإشتراك بالبريد الإلكتروني
        و المزيد

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

Tuesday, April 28, 2015

دورة بلوجر 2015 - تحسين ارشفة المدونة و اضافة ملف Sitemap

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

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

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

ما هي المشكلة في بلوجر بإضافة خريطة الموقع ؟


هناك بعض الاخبار الجيدة. بلوجر بالفعل لديها خرائط افتراضية خاصة بكل مدونة. لأنه و بكل بساطة لا يمكن أن يكون لمنصة لها شعبية كبيرة مثل بلوجر   ( مدعومة من جوجل )  ليس لديها خرائط افتراضية ولكن المشكلة الوحيدة هنا انه يجب كتابة العناوين هكذا و ليس رفع ملف XML كامل
http://yourblogname.blogspot.com/atom.xml?redirect=false

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

كيفية إنشاء خريطة الموقع XML كاملة في بلوجر

طريقة رقم 1 : عناوين الكتابة

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

http://yourblogname.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

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

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


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


http://yourblogname.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500
http://yourblogname.blogspot.com/atom.xml?redirect=false&start-index=501&max-results=500

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


http://yourblogname.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500
http://yourblogname.blogspot.com/atom.xml?redirect=false&start-index=501&max-results=500
http://yourblogname.blogspot.com/atom.xml?redirect=false&start-index=1001&max-results=500
http://yourblogname.blogspot.com/atom.xml?redirect=false&start-index=1501&max-results=500


اظن ان هذا يكفي لفهم كيفية إضافة خريطة الموقع في بلوجر. يمكنك تغيير قيمة بدء المؤشر وفقا للحاجة الخاصة بك.
فقط تأكد من انك قمت بزيادتها 500 و ترك max-result = 500 مثل ما هي.
الان بعد إضافة روابط خريطة الموقع التي ذكرناها في السابق بالشكل الصحيح قم بإضافة هذه الروابط ايضا لزيادة الارشفة و الفهرسة

sitemap.xml
rss.xml
atom.xml
feeds/posts/default?redirect=false
feeds/posts/default?orderby=updated
feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc
feeds/posts/default?max-results=5&redirect=false
feeds/posts/default
feeds/comments/default?redirect=false
feeds/comments/default?max-results=5
feeds/comments/default
atom.xml?redirect=false
atom.xml?redirect=false&start-index=1&max-results=200

هذا كل شيء تقريبا في الدرس الثاني سوف نتعرف على كيفية التعديل على ملف robots.txt بالطريقة الصحيحة

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

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

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

Monday, April 27, 2015

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

View and Download counter for blogger
زر معاينة او زر التحميل يعتبر جزء اساسي من غالبية المدونات خصوصا التي تعتمد على وجود ملفات وشروحات كثيرة احتساب عدد المشاهدات او التحميلات لاى رابط قد يكون له اهمية عند البعض هناك العديد من الطرق لإحتساب المشاهدات والتحميلات لكن دائما ما يشوبها عيوب مثل الثقل الكبير في جلب الأعداد واكواد جافا كبيرة وصعوبه في التركيب والإستخدام او عدم توافق مع بعض المواقع لذلك الحل سيكون مع آداة اليوم الآداة تحتسب عدد الضغطات الحقيقية على الروابط وتعتمد على سكريبت خفيف للغاية الإضافة تعتمد على موقع متخصص في حساب المعاينات وتم انشائها بشكل حصري لكن مدون لتكون بعرض مناسب وشكل جذاب وسهله في التعامل والتركيب وطبعا أول شئ يجب ان تشاهده هو معاينة حية بنفسك
معاينةعدد المشاهدات :
تحميلعدد التحميلات :

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

الآن مع التركيب

أولا كود المظهر أضفه فوق الوسم ]]></b:skin>
#cnmubcoun {
  margin: auto;
  width: 420px;
}
/*Preview*/
#cnmudcount1 {
  float: right;
  margin: 10px auto 30px;
  width: 200px;
}
#cnmudcount3 {margin: 10px auto 30px; width: 200px;}
#cnmudcount1 .cb1 a,#cnmudcount3 .cb1 a {
  background: url("https://lh3.googleusercontent.com/-tFT_SzCGOCs/VT6o1RUN9II/AAAAAAAAASw/P8dx0KP6wYo/s24/search.png") no-repeat scroll 96% center #E77B00;
  color: #fff;
  display: block;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  transition: all 0.7s ease 0s;
}
#cnmudcount1 .cb2,#cnmudcount3 .cb2 {
  background-color: #000;
  border-radius: 0 0 5px 5px;
  color: #fff;
  display: block;
  font: bold 12px/20px tahoma;
  height: 0;
  opacity: 0;
  position: absolute;
  text-align: center;
  transition: all 0.5s ease 0s;
  width: 200px;
}

/*Download*/
#cnmudcount2 {
  float: left;
  margin: 10px auto 30px;
  width: 200px;
}
#cnmudcount4 {margin: 10px auto 30px; width: 200px;}
#cnmudcount2 .cb1 a,#cnmudcount4 .cb1 a {
  background: url("https://lh3.googleusercontent.com/-Q0fbJ6eNObg/VT6o1blDgdI/AAAAAAAAASs/yUJb62g7Oug/s24/downloadwhite.png") no-repeat scroll 96% center #319300;
  color: #fff;
  display: block;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  transition: all 0.7s ease 0s;
}
#cnmudcount2 .cb2,#cnmudcount4 .cb2 {
  background-color: #c40101;
  border-radius: 0 0 5px 5px;
  color: #fff;
  display: block;
  font: bold 12px/20px tahoma;
  height: 0;
  opacity: 0;
  position: absolute;
  text-align: center;
  transition: all 0.5s ease 0s;
  width: 200px;
}
/*Hover*/
#cnmudcount1:hover .cb2,#cnmudcount2:hover .cb2,#cnmudcount3:hover .cb2,#cnmudcount4:hover .cb2 {height: 24px; opacity: 1;}
 ما يهمك تغييره في الكود السابق
  1. لون زر المعاينة #E77B00
  2. لون جملة العداد لزر المعاينة #000
  3. لون زر التحميل #319300
  4. لون جملة عداد زر التحميل #c40101

 طريقة الإستخدام

<div id="cnmubcoun">
<!--معاينة-->
<div id="cnmudcount1">
<span class="cb1"><a href="#" target="_blank" rel="nofollow">معاينة</a></span>
<span class="cb2">
عدد المشاهدات :
<script type='text/javascript' src='http://dstats.net/sitetracker.php?url=#'></script>
<script type='text/javascript'>document.write(dsCounter);</script>
</span>
</div>

<!--تحميل-->
<div id="cnmudcount2">
<span class="cb1"><a href="#" target="_blank" rel="nofollow">تحميل</a></span>
<span class="cb2">
عدد التحميلات :
<script type='text/javascript' src='http://dstats.net/sitetracker.php?url=#'></script>
<script type='text/javascript'>document.write(dsCounter);</script>
</span>
</div>

</div>
تضيف الكود السابق في الموضوع بعد تحويل صندوق الكتابة من وضع التأليف الى وضع HTML

الرمز # المكرر مرتين في منطقة المعاينة تغيره بالرابط الذي تريد احتساب مشاهداته
اى تغيير في الرابط بين المرتين ستختلف النتائج
نفس الشئ مع رمز # المكرر مرتين في منطقة التحميل
في حالة رغبت بإستخدام زر واحد فقط من الزرين استخدم المنطقة الخاصة به فقط كما ترى كل منطقة معلمة بلون
مع تغيير الرقم 1 في منطقة المعاينة برقم 3
والرقم 2 في منطقة التحميل بالرقم 4
بالتوفيق


Tuesday, April 14, 2015

اضافة فهرس التبويبات المنسدلة

اضافة فهرس التبويبات المنسدلة بالوان مختلفة و طريقة احترافية

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


كيفية إنشاء الفهرس


  1. ادخل إلى لوحة تحكم المدونة
  2. انتقل إلى الصفحات >> قم بإنشاء صفحة جديدة
  3. انتقل من وضع تأليق إلى وضع HTML
  4. قم بنسخ الكود التالي داخل الصفحة

<div dir="ltr" style="text-align:right;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content {background-color: #fff;color: #444;font-family: Droid Arabic Kufi,Sans-serif;font-size: 13px;font-weight: 400;overflow: hidden;border-radius: 4px;box-shadow: 0 0 20px rgba(0,0,0,.1);}
.table-of-content .toc-header {text-align: right;color: #444;font-family: droid arabic kufi;font-weight: 400;font-size: 14px;background-color: #fff;margin: 0;padding: 15px;overflow: hidden;cursor: pointer;border-bottom: 1px solid #ccc;transition: initial;}
.table-of-content .toc-header:hover {background-color: #fdfdfd;}
.table-of-content .toc-header:before {content: '';width: 0;height: 0;position: relative;float:left;top: 10px;left: 10px;border: 5px solid transparent;border-color: #aaa transparent transparent;transition: all .3s ease;}
.table-of-content .toc-header.active {color: #fc4f3f;}
.table-of-content h3.toc-header.active:before {border-color: #666 transparent transparent;top: 5px;-webkit-transform: rotate(-180deg);-moz-transform: rotate(-180deg);-ms-transform: rotate(-180deg);-o-transform: rotate(-180deg);transform: rotate(-180deg);}
.table-of-content .loading {display: block;padding: 15px;text-decoration: blink;}
.table-of-content ol {margin: 0;padding: 0;list-style: none;transition: initial;}
.table-of-content li {line-height: normal!important;margin: 0!important;padding: 8px 15px 8px 8px!important;white-space: nowrap;text-align: right;overflow: hidden;background: #444359!important;transition: initial;}
.table-of-content a {color: #d9d9d9;text-decoration: none;transition: initial;}
.table-of-content a:visited {color: #a2a2a9;transition: initial;}
.table-of-content a:hover,.table-of-content a:visited:hover {color: #ffc937;text-decoration: none;transition: initial;}
.post ol li:before {display: none;}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">... انتظر</span></div>
<script>
var toc_config = {
    url: 'http://newz-b.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:left;border-radius:3px;margin-top: -24px;">جديد</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://mudwnp.googlecode.com/svn/trunk/tea.js"></script>
</div>

- و اخيرا انقر فوق حفظ الصفحة
- الان يمكن معاينة الفهرس الاول عبر زر المعاينة التالي




و هناك قوالب بلوجر احيانا تكون الوانها داكنة لذلك يوجد نسخة ثانية من الفهرس بالوان داكنة لإضافته نقوم بنفس الخطوات السابقة و لكن مع تبديل الكود السابق بالكود التالي
<div dir="ltr" style="text-align:right;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content {background-color: #222;color: #ddd;font-family: Droid Arabic Kufi,Sans-serif;font-size: 13px;font-weight: 400;overflow: hidden;border-radius: 4px;box-shadow: 0 0 10px rgba(0,0,0,.1);}
.table-of-content .toc-header {text-align: right;color: #fff;font-family: inherit;font-weight: 400;font-size: 14px;background-color: #333;margin: 0;padding: 15px;overflow: hidden;cursor: pointer;border-top: 1px solid #444;border-bottom: 1px solid #222;transition: initial;}
.table-of-content .toc-header:hover {background-color: #3a3a3a;}
.table-of-content .toc-header:before {content: '';width: 0;height: 0;position: relative;float:left;top: 10px;right: 10px;border: 5px solid transparent;border-color: #aaa transparent transparent;transition: all .3s ease;}
.table-of-content .toc-header.active {background: #3a3a3a;color: #fff;}
.table-of-content .toc-header.active:before {border-color: #fff transparent transparent;top: 5px;-webkit-transform: rotate(-180deg);-moz-transform: rotate(-180deg);-ms-transform: rotate(-180deg);-o-transform: rotate(-180deg);transform: rotate(-180deg);}
.table-of-content .loading {display: block;padding: 15px;text-decoration: blink;}
.table-of-content ol {margin: 0;padding: 0;list-style: none;transition: initial;}
.table-of-content li {line-height: normal!important;margin: 0!important;padding: 8px 15px 8px 8px!important;white-space: nowrap;text-align: right;overflow: hidden;background: #222!important;transition: initial;}
.table-of-content a {color: #aaa;text-decoration: none;font-size: 86%;transition: initial;}
.table-of-content a:visited {color: #666;transition: initial;}
.table-of-content a:hover,.table-of-content a:visited:hover {color: #fff;text-decoration: none;transition: initial;}
.post ol li:before {display: none;}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">... انتظر</span></div>
<script>
var toc_config = {
    url: 'http://newz-b.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:left;border-radius:3px;margin-top: -24px;">جديد</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://mudwnp.googlecode.com/svn/trunk/tea.js"></script>
</div>



 اهم الإعدادات


استبدل url: 'http://newz-b.blogspot.com/' برابط مدونتك

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

Sunday, April 12, 2015

تغيير شكل صناديق الإقتباس إلى اشكال احترافية

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

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

الشرح


  1. ادخل لوحة تحكم المدونة
  2. انقر على قالب >> تحرير HTML
  3. ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه

/* CSS Simple Pre Code */
pre {
    background: #fff;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
}

pre.code label {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #444;
    position: absolute;
    left: 1px;
    top: 16px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #d9d9d9;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #444;
}

pre::after {
    content: "اضغط مرتين لنسخ الكود";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #aaa;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #0288d1;
}

pre.code-html code {
    color: #558b2f;
}

pre.code-javascript code {
    color: #f57c00;
}

pre.code-jquery code {
    color: #78909c;
}


الان ابحث عن الوسم </body> و اضف الكود التالي فوقه
<script type='text/javascript'>
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

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

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

نذهب من وضع تأليف إلى وضع HTML و نضع احد الاكواد التالية مع تغيير ما هو باللون الاحمر بالكود المراد كتابته
<pre class='code code-html'><label>HTML</label><code>... Code HTML  ...</code></pre>

<pre class='code code-css'><label>CSS</label><code>... Code CSS ...</code></pre>

<pre class='code code-javascript'><label>JS</label><code>... Code JavaScript ...</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>... Code jQuery ...</code></pre>



ايضا يمكنك تغيير الوان صناديق الإقتباس عبر إضاقة الكود التالي بدل كود الـ CSS السابق
/* CSS Simple Pre Code */
pre {
    background: #333;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}

pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ddd;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}

pre::after {
    content: "اضغط مرتين لنسخ الكود";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #91a7ff;
}

pre.code-html code {
    color: #aed581;
}

pre.code-javascript code {
    color: #ffa726;
}

pre.code-jquery code {
    color: #4dd0e1;
}



هذا كل شيء اي سؤال او استفسار لا تترد بوضعه في تعليق


Friday, April 10, 2015

قالب بلوجر معرب قالب Max Mag

قالب بلوجر


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

Tuesday, April 7, 2015

ما الفرق بين بلوجر و ووربريس - مميزات و عيوب


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

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

بلوجر -Blogger


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


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


المميزات


مجانية الإستخدام و هي ليست لك

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

الخيارات عند كتابة موضوع هي بسطية جدا

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

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

ادسنس و جوجل بلس - Adsense and Google Plus

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

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

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

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

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

  1. زرجوجل بلس
  2. زر جوجل بلس للإشارة
  3. صناديق AdSense لربح المال

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


العيوب


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

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

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

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

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

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

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


رفع الصور : لديك في بلوجر مساحة 1GB من المساحة و هذا امر ليس بجيد بحيث إذا اردت توسيع مساحة التخزين يجب عليك ان تقوم بالترقية إلى Google+ وقتها يتم تخزين صورك في صور جوجل بلس Google+ عن طريق بيكاسا حيث يصبح لديك مساحة 15GB من مساحة التخزين المشتركة مع بريد جوجل و لكن مع هذا فهذه المساحة ليست بجيدة كثيرا.


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


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

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


ووردبريس - WordPress


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

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

المميزات 


افضل ما يميز ووردبريس  Wordpress على منصة بلوجر Blogger هي أنك تملك جميع الحقوق لموقع الويب الخاص بك و الموقع الخاص بك هو لك :) - و هذا ما يجعل اكثر المستخدمين يتوجهون إلى اختيار مدونات ووردبريس

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

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

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

العيوب


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

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

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

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


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


التكاليف الباهظة


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

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


الأمور التي لا تزال خطأ في ووردبريس


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

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


في الختام


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


مع بلوجر Blogger : التدوين وظيفته بسيطة, ولكن ووردبريس هو نظام إدارة محتوى قوي الي يشمل المدونات كسمة رئيسية.

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

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


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


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


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


Monday, April 6, 2015

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

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

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


شرح تركيب الإضافة


هنا يا صديقي تحتاج إلى اضافة الكود التالي في أداة
من لوحة تحكم المدونة > تخطيط > انقر على إضافة أداة HTML/JavaScript > ثم نسخ الكود التالي و لصقه بالادة ثم اضغط على حفظ

<style scoped='' type='text/css'>
#fb-fanbox {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;right:0;z-index:99999;}
#fb-boxclose {width:100%;height:100%;}
#fb-boxview {background:#fff;border:8px solid #03a9f4;width:340px;height:230px;position:absolute;top:33%;right:37%;border-radius:3px;}
#fb-closebox {float:left;cursor:pointer;position:absolute;left:-1px;top:-2px;}
#fb-closebox:before {content:"CLOSE";padding:5px 8px;background:#03a9f4;color:#fff;font-weight:normal;font-size:10px;font-family:inherit;}
#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Pengaturan cookie
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// Dapatkan cookie
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fb-fanbox').delay(3000).fadeIn('fast');
$('#fb-closebox, #fb-boxclose').click(function(){
$('#fb-fanbox').stop().fadeOut('fast');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fb-fanbox'>
<div id='fb-boxclose'>
</div>
<div id='fb-boxview'>
<div id='fb-closebox'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/mudwnp&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border:none;overflow:hidden;width:339px;height:200px;'></iframe>
</div>
</div>

اهم الإعدادات


استبدل https://www.facebook.com/mudwnp بعنوان صفحتك على فيس بوك
لإظهار الصندوق في كل مرة يتم فتح المدونة احذف هذا الكود$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
لضبط الوقت و تأخير ظهور الصندوق المنبثق استبدل هذه.delay(3000)

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

Saturday, April 4, 2015

قالب Sky Blog معرب

قالب Sky Blog معرب هو قالب بتصميم جميل و احترافي و يصلح للمدونات الاخبارية و المجلات كما إنه متوافق بنسبة 100% مع العديد من الاجهزة و هو سهل الإستعمال

قالب Sky Blog معرب - هو قالب بتصميم جميل و احترافي و يصلح للمدونات الاخبارية و المجلات كما إنه متوافق بنسبة 100% مع العديد من الاجهزة و هو سهل الإستعمال بحيث مصمم بطريقة احترافية ليناسب جميع الاذواق كما ان الوانه هادئة يمكنك معاينة و تحميل القالب عبر الازرار التالية



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


  1. يدعم جميع المتصفحات [ IE8+,Mozilla,Chrome,Safari ]
  2. صديق للسيو و محركات البحث
  3. اماكن للإعلانات جاهزة
  4. صندوق تعريف الكاتب
  5. سلايدر شو احترافي
  6. نظام تعليقات بلوجر
  7. مواضيع ذات صلة
  8. سريع في التصفح
  9. ازرار المشاركة
  10. متجاوب
       و المزيد ....


يوجد مع ملف التحميل ملف شرح التعديل على القالب اي سؤال او استفسار لا تترد بوضعه في تعليق 

Friday, April 3, 2015

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

Blogger Post Target
مسار الموضوع في مدونات بلوجر يعتبر من الإضافات التي تريح الزائر من البحث في أدوات المدونة او اجزائها عن أقسام الموضوع هناك من يدعون ان لتلك الإضافة فوائد في الأرشفة وما الى ذلك لكن هذه معلومة خاطئه كما قلت فائدة هذه الإضافة الأساسية هي التسهيل على الزائر وهذه فائدة كبيرة لا يستهان بها فمن واجبك كمدون ان تريح زائر مدونتك وهو يتصفحها لكي يبقى بها وقت اطول لكن يجب ان نضع النقاط على الحروف فيما يخص معلومات خاطئة عن بعض الإضافات
صنعت لكم تنسيق سهل وخفيف من هذه الإضافة وبعيد عن السكريبتات التي يلجأ لها البعض في هذه الإضافة والتي تسبب ثقل زائد لا داعي له هذه الإضافة هي من اكواد بلوجر الرسمية لا يوجد اى شئ اضافي خارجي مما يجعلها لا تسبب اى نوع من الثقل او الأخطاء في المدونة كما تفعله بعض الإضافات الأخرى
لتركيب الإضافة فقط ابحث عن الكود التالي
<b:includable id='post' var='post'>
وأضف بعده مباشرة الكود التالي

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#cnmumasar {
  background-color: #ddd;
  display: block;
  font-size: 12px;
  margin: 10px 0;
  padding: 5px 0;
  width: 100%;
}
#cnmumasar .masarhome {
  background: url("https://lh3.googleusercontent.com/-CnMJ5rXyu10/VR7MIGHMNKI/AAAAAAAAAQE/V9TBcMTIoC8/s16/home.png") no-repeat scroll right center rgba(0, 0, 0, 0);
  color: #000;
  float: right;
  margin: 0 10px 0 5px;
  padding: 0 20px 0 0;
}
#cnmumasar .masarhome:hover {color:#555;}
#cnmumasar .post-labels {
  background: url("https://lh6.googleusercontent.com/-27rhGHNvBa4/VR7MIFVbJUI/AAAAAAAAAQQ/iX8Hq7rNk94/s16/attach_2.png") no-repeat scroll right center rgba(0, 0, 0, 0);
  padding-right: 20px;
}
#cnmumasar .post-labels a {
  background-color: #000;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  float: none;
  font-size: 10px;
  font-weight: bold;
  padding: 0 3px 2px;
}
#cnmumasar .post-labels a:hover {background-color:#555;}
#cnmumasar .masartitle {
  background: url("https://lh5.googleusercontent.com/-g9j2SOHg6sE/VR7MIPJOXbI/AAAAAAAAAQM/A3V1gTwxbtU/s16/text.png") no-repeat scroll right center rgba(0, 0, 0, 0);
  color: #555;
  padding-right: 20px;
}
</style>
<div id="cnmumasar">
<span><a class='masarhome' href='/'>الرئيسية</a></span>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:loop>
</b:if>
</span>
<span class='masartitle'><data:post.title/></span>
</div>
</b:if>

التنسيق

هذا #ddd هو لون الخلفية
هذا 12 هو حجم الخط
هذا #000 لون رابط الرئيسية
هذا #000 لون خلفية الأقسام
هذا 10 حجم خط روابط الأقسام
هذا #555 لون خلفية الأقسام عند تمرير الماوس
أما الثلاث روابط المعلمة باللون الوردي هي روابط الأيقونات غيرها بروابط أخرى مناسبة يفضل ان يكون حجمها 16x16
وبالتوفيق