الخمسة النمطية القالب الثالث

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

معاينة تحميل

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

 صورة للتخطيط الداخلي مع توضيح المساحات

طريقة تلوين القالب

من لوحة التحكم ثم قالب ثم تخصيص ثم متقدم

تحرير القائمة

ابحث عن هذا الكود في القالب

<li><a href='#'>رابط</a></li>
<li id='sub'> <a>قائمة</a>
<ul id='drop'>
<li> <a href='#'>فرعي</a></li>
<li> <a href='#'>فرعي</a></li>
<li> <a href='#'>فرعي</a></li>
<li> <a href='#'>فرعي</a></li>
</ul>
</li>
<li><a href='#'>رابط</a></li>
<li><a href='#'>رابط</a></li>

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

تعديل حجم المواضيع

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

.post-outer {
  background-color: #000;
  border: 4px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #bbb;
  float: right;
  height: 180px;
  margin: 0 6px 20px;
  overflow: hidden;
  position: relative;
  width: 225px;
}

الرقم 180 هو الإرتفاع
الرقم 225 هو العرض
يرجى الإلتزام بشروط الإستخدام
والحفاظ على الحقوق وعدم نزعها

إضافة آداة تقدير الوقت اللازم لقراءة المقال في بلوجر

اليوم في مدون محترف سوف نُشارك معكم إضافة مُثيرة للإهتمام نوعاً. وهذه الإضافة من برمجة المُبرمج (مايكل لينش)
 وظيفة الاداة تعمل على تقدير مدى الوقت اللازم لقراءة المقال في محتوى معين.

مثال: إذا كان المقال طوله متوسط، سوف يظهر للزائر فوق في المعلومات إن مُدة قراءة المقال

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

 في قياس قوة المقال وكم من المُمكن ان يبقى الزائر في مدونته، وطبعاً قوة المقال تُقاس بعدد الكلمات

وتُقاس ايضاً بعدم وجود اخطاء إملائية ولغوية ومدى حصرية المقال (محتوى أصلي او منقول).

معاينة

أولا: سوف نبحث عن الوسم </head> و نُضيف الكود التالي فوقه، إذا كان موجود لا تقوم بإضافته

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

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

span.left {float:left ;display:inline-block;padding:10px 5px;}

ثالثاً: سوف نبحث عن الوسم </body> و نُضيف الكود التالي فوقه

<script type='text/javascript'>
//<![CDATA[
// Reading Time Author: Michael Lynch http://michaelynch.com Licensed under the MIT license
!function(e){e.fn.readingTime=function(n){var t={readingTimeTarget:".eta",wordCountTarget:null,wordsPerMinute:270,round:!0,lang:"ar",lessThanAMinuteString:"",prependTimeString:"",prependWordString:"",remotePath:null,remoteTarget:null,success:function(){},error:function(){}},i=this,r=e(this);i.settings=e.extend({},t,n);var a=i.settings;if(!this.length)return a.error.call(this),this;if("it"==a.lang)var s=a.lessThanAMinuteString||"Meno di un minuto",l="دقيقة";else if("fr"==a.lang)var s=a.lessThanAMinuteString||"Moins d'une minute",l="دقيقة";else if("de"==a.lang)var s=a.lessThanAMinuteString||"Weniger als eine Minute",l="دقيقة";else if("es"==a.lang)var s=a.lessThanAMinuteString||"Menos de un minuto",l="دقيقة";else if("nl"==a.lang)var s=a.lessThanAMinuteString||"Minder dan een minuut",l="دقيقة";else if("sk"==a.lang)var s=a.lessThanAMinuteString||"Menej než minútu",l="دقيقة";else if("cz"==a.lang)var s=a.lessThanAMinuteString||"Méně než minutu",l="دقيقة";else if("hu"==a.lang)var s=a.lessThanAMinuteString||"Kevesebb mint egy perc",l="perc";else var s=a.lessThanAMinuteString||"Less than a minute",l="دقيقة";var u=function(n){if(""!==n){var t=n.trim().split(/\s+/g).length,i=a.wordsPerMinute/60,r=t/i;if(a.round===!0)var u=Math.round(r/60);else var u=Math.floor(r/60);var g=Math.round(r-60*u);if(a.round===!0)u>0?e(a.readingTimeTarget).text(a.prependTimeString+u+" "+l):e(a.readingTimeTarget).text(a.prependTimeString+s);else{var o=u+":"+g;e(a.readingTimeTarget).text(a.prependTimeString+o)}""!==a.wordCountTarget&&void 0!==a.wordCountTarget&&e(a.wordCountTarget).text(a.prependWordString+t),a.success.call(this)}else a.error.call(this,"The element is empty.")};r.each(function(){null!=a.remotePath&&null!=a.remoteTarget?e.get(a.remotePath,function(n){u(e("<div>").html(n).find(a.remoteTarget).text())}):u(r.text())})}}(jQuery);
$(function(){$('.post-body').readingTime();});//]]>
</script>

رابعاً: نقوم بإضافة الكود التالي في المكان الذي تُريده، يُمكنك إضافتها بجانب معلومات التدوينة او في نهاية التدوينات ..إلخ.

<span class='right'> <span class='eta'/> <i class='fa fa-clock-o'/></span>

خامساً: نقوم بحفظ القالب
اتمنى ان يكون الموضوع اعجبكم

إضافة المشاركات المميزة في بلوجر

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

يُمكنك إضافتها من خلال التخطيط بحيث سوف تجد ثاني إضافة هي "المشاركات المُميزة"، وظيفتها عبارة 

عن عرض أحدث المواضيع، أو عرض مواضيع لقسم معين أنت تحدده، والمميز بها إنه بها ازرار التنقل بين المواضيع

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

كيفية إضافة المشاركات المميزة في بلوجر

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

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

ويُمكنك ايضاً مُعاينة الإضافة من الجانب، وبالطبع مع وجود هذه الإضافة سوف تجلب الكثير من الأفكار إلى المدونين من أجل تطوير الإضافة.

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

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

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

بعد ان تضيفها ستجد هذه الخيارات حدد التالي

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

.FeaturedPost h2 {display: none !important;}
.FeaturedPost h3 a {
  background-color: #444;
  color: #fff !important;
  display: block;
  font-size: 15px !important;
  line-height: 1.8em !important;
  padding: 5px 0;
  text-align: center;
}
.FeaturedPost p {
  display: block;
  font: 14px/1.8em tahoma;
  margin: 5px 0;
  text-align: center;
}

الكود #444 هو لون عنوان المشاركة

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

قالب Nubie Banget معرب

قالب Nubie Banget معرب - هو أحد قوالب بلوجر السريعة، ومُناسب جداً للمُشتركين في إعلانات ادسنس 

بحيث يوجد به أماكن مُناسبة لوضع الإعلانات والتي قد تجعل الزائر يضغط عليها

ايضاً قد يزيد من عدد مشاهدات إعلانات ادسنس وهذا معناه 

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

قد يكون القالب لا يوجد به الكثير من المميزات والإضافات الإحترافية، ولكن الميزة الأكثر من مُمتازة فيه

هي سُرعته التي لا يُستهان بها. لإنه عند تصميم القالب لم يتم التركيز كثيراً على إضافة ميزات وإضافات بلوجر من أجل 

أن يكون سريع جداً ولا يجعل الزائر ينتظر كثيراً اثناء تحميل المدونة.

يُمكنك معاينة وتحميل القالب من الأزرار التالية

معاينة تحميل

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

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

       والمزيد ....

أتمنى أن يكون القالب أعجبكم
لا تنسى ترك تعليق ومُشاركة الموضوع مع اصدقائك

كيفية إضافة وحدة إعلانية نصية مشابهة لإعلانات جوجل ادسنس

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

نصية مُشابهة لإعلانات جوجل ادسنس النصية، بحيث هذه الإضافة لا تختلف بشيء عن إعلانات جوجل ادسنس. 

وتعمل بنفس الطريقة التي في الإعلانات بحيث عند مرور مؤشر الماوس على رابط إعلان يتم عرضه بشكل تلقائي، 

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

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

معاينة

كيفية تركيب الإعلانات

1. ادخل لوحة تحكم بلوجر
2. انقر على تبويب قالب
3. اضغط على تحرير HTML

ابحث عن الوسم </head> و اضف الكود التالي فوقه، إذا كان موجود لا تقم بإضافته

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

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

/* Iklan Teks GA */
.iklan-teks{position:relative;margin:0;padding:10px;max-height:300px;overflow:hidden}
.iklan-teks div{position:relative;background:#FFF;height:120px;padding:8px 0;margin:0;z-index:1;color:#555}
.iklan-teks h5.iklan-header{position:relative;background:#FFF;font-size:12px;color:#0f7dc8;border-top:1px solid #d8d8d8;border-radius:0;padding:8px 0;margin:0;text-transform:none;cursor:pointer}
.iklan-teks h5.iklan-header:first-child{border-top:0}
.iklan-teks h5.iklan-header:before{content:&quot;&quot;;width:0;height:0;position:absolute;top:20px;left:15px;border:5px solid transparent;border-color:#b2b2b2 transparent transparent;cursor:pointer}
.isi-iklan span.judul-iklan{font-weight: 700;font-size:12px;color:#0f7dc8;display:inline-block;cursor:pointer}
.isi-iklan span.url-iklan{font-size:12px;color:#0f7dc8;display:block;margin:8px 0;cursor:pointer}
.isi-iklan span.url-iklan:before{content:&quot;\f0c0&quot;;font-family:FontAwesome;float:right;margin:0 0 0 10px}
.isi-iklan span.panah-besar{color:#fff;background:#e74c3c;border-radius:50%;height:34px;float:left;width:34px;text-align:center;line-height:34px;cursor:pointer;transition:all .6s}
.isi-iklan span.panah-besar:before{content:&quot;\f053&quot;;font-family:FontAwesome;margin:0 3px 0 0;font-size:20px}
.isi-iklan span.panah-besar:hover{background:#34495e;color:#fff}
.isi-iklan p.isi{padding:0;margin:0 0 0 40px;color:#555;font-size:12px;text-align:right}

الان ابحث عن الوسم </body> و اضف الكود التالي فوقه

<script type="text/javascript">
//<![CDATA[
(function(a){a.fn.hoverTimeout=function(c,e,b,d){return this.each(function(){var f=null,g=a(this);g.hover(function(){clearTimeout(f);f=setTimeout(function(){e.call(g)},c)},function(){clearTimeout(f);f=setTimeout(function(){d.call(g)},b)})})}})(jQuery);(function(b){b.fn.iklanaccordion=function(a){a=jQuery.extend({active:1,hovertimeout:300,sUpSpeed:500,sDownSpeed:500,sUpEasing:null,sDownEasing:null},a);return this.each(function(){var g=b(this),h=g.children("div[data-header]"),f=a.active-1;h.each(function(){b(this).hide().before('<h5 class="iklan-header">
'+b(this).data("header")+"</h5>
")});g.children("div:eq("+f+")").show().prev().css("margin-top","-47px").addClass("active");g.find(".iklan-header").hoverTimeout(a.hovertimeout,function(){g.children("h5").removeClass("active").animate({marginTop:0});h.slideUp(a.sUpSpeed,a.sUpEasing).animate({marginTop:-47});b(this).addClass("active").next().slideDown(a.sDownSpeed,a.sDownEasing)})})}})(jQuery);$(function(){$(".iklan-teks-sidebar").iklanaccordion();$(".iklan-teks-post-footer").iklanaccordion()});$(".info-icon").hover(function(){$(".info-iklan").animate({left:0},500,"easeInOutExpo")},function(){$(".info-iklan").animate({left:-103},500,"easeInOutExpo")});
//]]>
</script>

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

خطوة إضافة الإعلانات تكون على الشكل التالي

1. ندخل لوحة تحكم بلوجر
2. انقر على تبويب تخطيط
3. إضافة أداة جديدة
4. ثم إضافة أداة JavaScript

 <div class='iklan-teks iklan-teks-sidebar' id='iklan-teks'>
    <!-- iklan ke 1 -->
    <div data-header="مدون محترف">
      <span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">مدون محترف</span>
      <span class='url-iklan' onclick="window.open('/');">http://mudwnp.blogspot.com</span>
      <span class='panah-besar' onclick="window.open('/');"></span>
      <p class='isi'>المدونة الاولى في بلوجر</p>
      </span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header="أعلن هنا">
      <span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">أعلن معنا</span>
      <span class='url-iklan' onclick="window.open('/');">http://www.xxxx.blogspot.com</span>
      <span class='panah-besar' onclick="window.open('/');"></span>
      <p class='isi'>لا تنسى زيارتنا</p>
      </span>
    </div>
    <!-- iklan ke 3 -->
    <div data-header="ايجي جيك">
      <span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">ايجي جيك</span>
      <span class='url-iklan' onclick="window.open('/');">http://www.aegygeek.com/</span>
      <span class='panah-besar' onclick="window.open('/');"></span>
      <p class='isi'>ايجي جيم افضل المدونات التقنية</p>
      </span>
    </div>
    <!-- iklan ke 4 -->
    <div data-header="أعلن هنا">
      <span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">عنوان مدونتك هنا</span>
      <span class='url-iklan' onclick="window.open('/');">رابط مدونتك هنا</span>
      <span class='panah-besar' onclick="window.open('/');"></span>
      <p class='isi'>وصف مدونتك هنا</p>
      </span>
    </div>
    <!-- iklan ke 5 -->
    <div data-header="أعلن هنا">
      <span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">أعلن هنا</span>
      <span class='url-iklan' onclick="window.open('/');">رابط المدونة</span>
      <span class='panah-besar' onclick="window.open('/');"></span>
      <p class='isi'>وصف المدونة</p>
      </span>
    </div>
  </div>

الإعدادات

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

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

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

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

ولكن هُناك ايضاً اشخاص لا ذنب لهم وهُم الذين يربحون من إعلانات أدسنس، بحيث يضعون 3 او 4 إعلانات 

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

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

الدرس عبارة عن إضافة اكواد في قالب بلوجر الخاص بك، وظيفة الاكواد تقوم بتعطيل إضافة أدبلوك 

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

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

فهو لن يؤثر عليها بشيء. لمن يود تجربة الإضافة قُم بتنفيذ الخطوات التالية.

كيفية إضافة رسالة كشف إضافة أدبلوك مع جافا سكريبت

1. ادخل لوحة تحكم بلوجر
2. انقر على تبويب قالب
3. انقر على تحرير HTML

ابحث عن الوسم </body> و اضف الكود التالي فوقه

<script type='text/javascript'>
//<![CDATA[
// Adblock Detected
window.onload=function(){setTimeout(function(){var e=document.querySelector("ins.adsbygoogle");e&&0==e.innerHTML.replace(/\s/g,"").length&&(e.style.cssText="color:rgba(0,0,0,0.5);font-weight:700;font-size:110%;padding:20px;margin:auto;text-align:center;text-decoration:none;display:block!important;background:rgba(0,0,0,0.02);border:1px solid rgba(0,0,0,0.08)",e.innerHTML="يبدو إنك قمت بمنع إعلانات جوجل ادسنس في المتصفح الخاص بك")},2e3)};
//]]>
</script>

الإعدادات

قم بتغيير نص الرسالة الذي باللون الاحمر على حسب ذوقك بما تريد
للتعديل على الخط والالوان ...إلخ، قم بالتعديل على ما هو باللون الازرق

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

إضافة التاريخ الهجري لمدونات بلوجر

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

<style type="text/css">
.cnmu-hijrid {
  background-color: #3da04b;
  border: 4px solid #fff;
  border-radius: 4px;
  box-shadow: 0 0 2px #000;
  color: #fff;
  margin: 10px auto;
  width: 170px;
}
.cnmu-hijrid .datname {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 50px #000 inset;
  display: block;
  font-size: 16px;
  height: 32px;
  line-height: 32px;
  text-align: center;
}
.cnmu-hijrid .datnum {
  background-color: #000;
  border-radius: 4px;
  display: inline-block;
  float: right;
  font-size: 24px;
  height: 48px;
  line-height: 48px;
  margin: 10px 10px 10px 0;
  text-align: center;
  width: 48px;
}
.cnmu-hijrid .month {
  display: block;
  float: left;
  font-family: times new roman;
  font-size: 20px;
  margin: 5px;
  text-align: center;
  width: 100px;
}
.cnmu-hijrid .yearf {
  background-color: #fff;
  border-radius: 2px;
  color: #000;
  display: inline-block;
  float: left;
  font-size: 20px;
  height: 24px;
  line-height: 24px;
  margin-bottom: 5px;
  margin-left: 18px;
  text-align: center;
  width: 80px;
}
.fasel1,.fasel2,.fasel3 {display: none;}
</style>
<script type="text/javascript" src="https://googledrive.com/host/0B9wf6r4PTnMiYUpXRTZLZmo5ZWc"></script>
<script type='text/javascript'>
document.write(writeIslamicDate(0))
</script> 
بما ان التاريخ الهجري متغير فقد ياتي شهر شوم زائد او ناقص بحسب دورة القمر فنحتاج ان تكون هناك امكانية لمجارات هذا
وهذا متاح في الإضافة
القمر 0 كل ما عليك فعله لزيادة يوم ان تستبدله بالرقم 1 ولإنقاص يوم إستبدل بسالب 1 هكذا -1
هذا #3da04b هو لون الإضافة عدله ان اردت

ملحوظة لو استخدمت الجزء المعلم بالوردي فقط سيظهر لك التاريخ بالشكل التالي ويمكن استخدامه داخل القالب

كيف تميز القوالب المجانية من القوالب المسروقة

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

وسنلخص طرق معرفة القوالب المجانية من المسروقة في 7 نقاط

النقطة الأولى قوالب عربية

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

النقطة الثانية قوالب معربة

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

النقطة الثالثة جماليات وامكانيات القالب

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

النقطة الرابعة إسم القالب

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

النقطة الخامسة البحث عن الإسم

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

النقطة السادسة موقع  Themeforest.net

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

النقطة السابعة فحص معاينة القالب

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

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

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

قالب G Vusion 2 معرب ومطور

قالب G Vusion 2 معرب ومطور - هو احد قوالب بلوجر البسيطة يمتاز القالب ببساطته والوانه الهادئة، ايضاً مُدعم باكواد سيو وصديق لمُحركات البحث، وفي نفس الوقت سريع في التصفح ويوجد به اماكن للإعلانات جاهزة داخل المواضيع وهو تحديث لقالب G Vusion معرب و مطور والذي يُعتبر أول قالب اقوم بتعريبه في مدون محترف يُمكنكم تحميل القالب ومعاينته من خلال الأزرار التالية.

معاينة تحميل

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

1. متوافق مع جميع الشاشات
2. مدعم باكواد سيو
3. صديق لمحركات البحث
4. تصميم القالب بتقنية فلات
5. أماكن للإعلانات جاهزة
6. محرك بحث
7. قائمة علوية رئيسية
8. قائمة فرعية ثابتة
9. اداة اخر المعلقين
10. مواضيع ذات صلة
11. خيارات التنقل بين المواضيع
12. ازرار المشاركة
13. ازرار معاينة وتحميل
14. زر إخفاء وإظهاء جزء من النص
15. نظام تعليقات بلوجر مع إبتسامات
16. آداة ثلاثية التبويبات للسايد بار
17. صندوق الإشتراك بالمدونة
18. صفحة الفهرس
19. نموذج اتصل بنا
20. جداول الكلمات
21. جدول بثلاث اعمدة
22. رسائل التنبيه
23. مترجم الموقع

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

قالب بلو بلوجر

قالب بلو بلوجر - هو قالب بلوجر بسيط يجمع بين ثلاثة عناصر (الجمال، السرعة، وسهولة التحكم به)، بحيث تستطيع التحكم بعدد عرض المواضيع في كل الفئات، وتستطيع زيادة عدد الأقسام كما شئت، وبه سلايدر يعرض المواضيع بشكل عشوائي أو أحدث المواضيع ويُمكنك الإختيار بينهم، وتستطيع التحكم بألوان السايدبار و القالب بشكل كامل، والمُميز به إنه مُدعم بأكواد سيو وصديق لمحركات البحث ويصلُح للمدونات الأخبارية والمجلات ومدونات الألعاب والشخصية أيضاً، يُمكنك مُعاينة مميزات القالب من الأزرار التالية.

مميزات مُعاينة

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

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

داخل المواضيع

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

سعر القالب 10$
لشراء القالب تواصل معنا عبر صفحة فيسبوك
أي تحديثات أو تطويرات في القالب يتم إرسالها بشكل مجاني للمُشتري
وأتمنى من الجميع أن يُعطيني رأيه بالقالب وماذا ينقصه برأيكم

شرح التأثيرات الحركية CSS Animation

مجال التأثيرات الحركية مجال واسع جداً ومن الصعب ان يتم شرحه بالكامل لأنه يعتمد على جزء كبير في لغة CSS لكن هناك حل سهل وبسيط يعتمد عليه أغلب المستخدمون للتأثيرات وهو عبر التأثيرات الجاهزة 

وهذا الشرح والكود إعداد حصري لكن مدون 

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

معاينة

كيف يمكن عمل تلك التأثيرات ؟

أول شئ استخدم الكود التالي في قالبك
<link href='http://cnmu.googlecode.com/svn/trunk/2015/animate.css' rel='stylesheet' type='text/css'/>
<script src='https://googledrive.com/host/0B9wf6r4PTnMianRNWmU0VFdhVHc' type='text/javascript'/>
كل ما عليك فعله هو استخدام الكلاس التالي
class="wow animated #"
رمز # يستبدل بإسم الحركة
مثال لو لدينا صورة نريد ان نطبق عليها الحركة سيصبح كودها كالتالي

<img class="wow animated tada" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdfzJaAWYUYsI6x6BolsaTlhIGFhVQBbufQYvnFP5ie7_QGOGk8uzwEyaC-auMWLZXHqo58QUC4hnc8XuqXcrkGBioDDtrOHmH67_kh123_18pFBNMtchHkbMd5AlMxA2CYEvvDD0JD4b7/s1600/256%25D8%25A1256.png"/>

كما تلاحظ كلمة tada هو إسم الحركة

كيف نحصل على اسم الحركة

ببساطة من الموقع التالي
http://daneden.github.io/animate.css
ستجد معاينة لكل الحركات وأسمائها فقط اكتب اسم الحركة وطبقه على ما تريد يجب أن تكتب الإسم مضبوط
إضغط هنا لفتح قائمة أسماء قابلة للنسخ
مثال آخر لو اردنا تطبيق حركة معينة على مواضيع المدونة بحيث كلما تم التمرير لأسفل يحدث التأثير على الموضوع
أغلب قوالب بلوجر تعتمد على هذا الكود كحاكم للمواضيع
<div class='post-outer'>
كل ما عليك  فعله تطبيق الكود فيصبح
<div class='post-outer wow animated fadeInUp'>
طبعا يمكنك تعديل التأثير الحركي بالتأثير الذي تريد
ملحوظة قد يكون الكود متكرر في القالب فيجب التطبيق عليهم جميعا أو التجربة حتى تجد الصحيح

التعليقات البرمجية للغات HTML,CSS

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

ما هي التعليقات البرمجية ؟

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

كيف نستخدم تلك التعليقات ؟

هناك نوعين يهمان مستخدمي بلوجر وهما تعليقات HTML,CSS
نبدأ بتعليقات CSS

/*اكتب هنا ما تريد*/

هذا هو نمط تعليقات الــ CSS يمكنك استخدامه في الاكواد التي فوق الوسم ]]></b:skin>
يعني مثلا او اضفت كود في تلك المنطقة يمكنك ان تكتب قبله تعليق يوضح البداية وتعليق بعده يوضح النهاية بحيث أن أردت حذفه تحذفه من بداية التعليق الأول الى نهاية التعليق  الثاني

تعليقات HTML

<!--اكتب هنا ما تريد-->

نفس الأمر كما في التعليقات السابقة لكن هذه تستخدمها في باقي اجزاء القالب
تجربة موفقة مع تحياتي

التحكم في تفعيل أو تعطيل الإضافات بحسب فئة الصفحات

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

ما هي فئات الصفحات في بلوجر؟

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

الفئة	المعرف
المواضيع	item
الصفحات الثابتة	static_page
صفحات الفهرسة كالتنقل بين المواضيع	index
الأرشيف	archive

كل ما عليك فعله هو استبدال رمز # في الكود التالي بمعرف الفئة التي تريد واستبدل كلمة كود الإضافة بكود الإضافة او الوحدة الإعلانية او اى شئ ولن تعمل حينها إلا في الفئة التي حددتها

<b:if cond='data:blog.pageType == "#"'>
كود الإضافة
 </b:if>

 هام للغاية : ستلاحظ في الكود علامة = معلمة بالاحمر والسبب هو ان هذه العلامة تعني ان الإضافة او الكود لن يظهر إلا في هذه الفئة من الصفحات
لكن لو استبدلت تلك العلامة بعلامة التعجب ! ستغير معنى الكود تماماً
ويصبح ستظهر الإضافة في جميع الصفحات ما عدا تلك الفئة يعني العكس تماماً

إستخدام الاكواد على أدوات بلوجر الرسمية

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

لكنك ستجد هذا الكود في تلك الأدوات <b:includable id='main'>

بعده تضيف الكود الاول الخاص بالفئة

ثم ستجد الكود التالي في نهاية الأدوات </b:includable>

فوقه تضيف كود الإغلاق

صورة توضيحية

التحديثات الجديدة في المنصة

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

<b:if cond='data:blog.pageType in {"#1","#2"}
كود الإضافة
</b:if>

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

وطبعا الكود يعني ان الإضافات لن تظهر إلا في هذه الفئات

لكن ماذا لو اردنا عكس الامر كما فعلنا بعلامة التعجب ؟

بسيط استبدل in بـ not in
وسيصبح معنى الكود ان تعمل الإضافة في جميع الصفحات ما عدا تلك الفئات

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

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

ببساطة بهذا الكود ويسري عليه ما يسري على الاكواد السابقة

<b:if cond='data:blog.url == "#"'>
كود الإضافة
</b:if>

كل ما عليك هو استبدال رمز # برابط الصفحة التي تريد
ما عدا الصفحة الرئيسية ستستبدل رمز الـ "#" مع العلامتين  بالكود التالي
data:blog.homepageUrl
وطبعا علامة = يمكنك استبدالها بعلامة التعجب ! ان اردت تغيير معنى الكود

قلنا في البداية انه يمكن انشاء مظاهر لكل فئة من الصفحات بإستخدام هذه الأكواد

نعم كل ما عليك ان تضيف أكواد الـ CSS الخاصة بك بين اى كودين تريد , مثال لو قررنا عمل مظهر خاص لصفحات المواضيع

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
CSS أكواد الــ
</style>
</b:if>

وكود الستايل المخصص كاملا يضاف فوق الوسم </head>
إستخدام موفق بإذن الله

إضافة وحدة إعلانية عائمة مع زر الإغلاق في بلوجر

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

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

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

معاينة

شرح إضافة إعلانات عائمة مستجيبة مع زر إغلاق

1. الذهاب إلى لوحة تحكم بلوجر
2. انقر على تبويب قالب
3. اضغط على تحرير HTML

ابحث عن الوسم </body> و اضف الكود التالي فوقه

<script type='text/javascript'>
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>
<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>
<div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCa9nZfDrWiVZCIF5rOXchg8knhyphenhyphenZ5Z7SCFSPeFDQ3p-PDkleK6xUyFNAyIDt3JBgM5DAhymR9bbWkoHsSh2WRnTKpyEqK0MpVDO4vP4FKm-ooMJfO0gpu5K_nvM81idvaDFTeSwFr1EjY/s1600/btn_close.gif' title='إغلاق الموضوع' style='vertical-align:middle;'/></a></div>
<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
<a href='#' title='عنوان الصورة'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='عنوان الصورة' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPd5gAeliieTQgaxuRNoJbH-cTpSehCQCq4fF-RFl2JPvgCWiplSEb8b79ZJFLDuHqehbQZ9hK1KDViE-Ntr6ziHADOdl84MYBoD_DIWaLsYSHF_vMjOF1S2Wa6u2qd9QoZtmeVoxqsZJu/s1600/arlina-tea.png'/></a>
</div>
</div>

الإعدادت

الرابط الذي باللون الاحمر إستبدله بالبنر الإعلاني الخاص بك
الرابط الذي باللون الازرق وهو زر كلمة close إستبدلها بما تريد
اسبتدل الرمز # برابط الموقع المراد الإعلان عنه
الكلمات التي باللون الاخضر استبدلها بعنوان البنر الإعلاني
الرقم 728pxهو المسؤول عن حجم عرض الإعلان

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

الخمسة النمطية القالب الثاني

القالب الثاني من مجموعة القوالب النمطية والحصرية لكن مدون

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

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

معاينة تحميل

القالب النمطي الثاني

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

 

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

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

هذا القالب يناسب كثيراً المدونات التي تحتوي مقالاتها الكثير من الكتابة

مثل مدونات قصص النجاح , او المدونات الطبية , او التعليمية , اوالتغذية او مدونات الأسرة

فهذا القالب سيكون ممتاز لهذه النوعية من المدونات

طريقة تعديل روابط القائمة

<ul class='mmenu' id='selnav'>
<li><a href='#'>رابط</a></li>
<li id='sub'> <a>قائمة</a>
<ul id='drop'>
<li> <a href='#'>فرعي</a></li>
<li> <a href='#'>فرعي</a></li>
<li> <a href='#'>فرعي</a></li>
<li> <a href='#'>فرعي</a></li>
</ul>
</li>
<li><a href='#'>رابط</a></li>
<li><a href='#'>رابط</a></li>
</ul>

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

قالب Ecstacy معرب

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

معاينة تحميل

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

1. متوافق مع المتصفحات الرئيسية (IE8 +، موزيلا، كروم، سفاري)
2. ازرار المشاركة في نهاية الموضوع
3. شريط لعرض صور إنستغرام
4. متوافق مع جميع الشاشات
5. أماكن للإعلانات جاهزة
6. صديق لمحركات البحث
7. قائمة رئيسية منسدلة
8. مُدعم بأكواد سيو

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

إضافة تعليقات فيسبوك في بلوجر بكل سهولة

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

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

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

بعيداً عن التعقيدات التي مررنا بها في درسنا السابق اضافة تعليقات فيسبوك 2015 في بلوجر 

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

يمكنك معاينة الإضافة عبر الزر التالي

معاينة

اولاً ابحث عن الوسم <head> و اضف الاكواد التالية تحته

<meta content='اي دي حسابك الشخصي' property='fb:admins'/>
<meta content='اي دي صفحة الفيسبوك' property='fb:app_id'/>

ملاحظة يجب عليك تغيير ما هو باللون الاحمر من اجل ان تعمل التعليقات

ثانياً ابحث عن الوسم </head> و اضف الكود التالي فوقه

<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize", function(){
 var url = location.protocol+'//'+location.host+location.pathname;
  var containercm_width = $('#container-commentfb').width();
    $('#container-commentfb').html('<div class="fb-comments" ' +
    'data-href="'+url+'"' +
    ' width="' + containercm_width + '" data-num-posts="10"></div>');
    FB.XFBML.parse( );
  });
//]]>
</script>

ثالثاً ابحث عن الوسم <data:post.body/> و اضف الكود التالي تحته

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</b:if>

الإعدادت

1. الرقم 650 هو المسئول عن حجم العرض الخاصة بصندوق تعليقات فيسبوك
2. وسم <data:post.body/> سوف تجده مكرر اكثر من مرة الذي يهمنا هنا هو االخاص بالمواضيع

لإضافة عداد التعليقات الخاصة بصندوق تعليقات فيسبوك اضف الكود التالي

<a expr:href='data:post.url + &quot;#fb-comment&quot;'><span class="fb-comments-count" expr:data-href='data:post.url'></span> facebook comments</a>

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

تنسيق آداة قائمة الروابط وفتح روابطها في نافذة جديدة

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

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

ما إستخدامات تلك الإضافة ؟

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

كيفية تركيب الإضافة ؟

1. من صفحة التخطيط
2. إضافة آداة
3. ثم اختار آداة قائمة الروابط

تنسيق الإضافة بإستخدام الكود التالي

.LinkList ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
.LinkList ul li {
  margin: 0;
  padding: 0;
}
.LinkList li a {
  background-color: #444444;
  box-shadow: 0 1px 0 4px #fff;
  color: #fff;
  display: block;
  height: 40px;
  line-height: 40px;
  margin-bottom: 5px;
  text-align: center;
  text-decoration: none;
  transition: all 0.7s ease 0s;
}
.LinkList li a:hover {background-color: #fc5400;}
هذا اللون #444444 هو لون خلفية الروابط
وهذا #fc5400 هو اللون عند تمرير المؤشر
*هذا التنسيق سيعمل على أى إضافة قائمة روابط موجوده في قالبك
بعض القوالب تكون الآداة مستخدمه في القائمة العلوية بالتالي سيحدث تشويه
فيمكنك ان تجعل هذا التنسيق فقط على الىداة التي ستضيفها
بإستبدال الكود الأحمر بمعرف الآداة . كيف؟
ابحث عن الآداة في القالب والمعرف هو الكلمة التي بعد id مثال

كما تلاحظ هنا المعرف هو LinkList1 وتكتب قبله فقط # ليكون #LinkList1
وطبعا الفتح في نافذة جديدة كما هو موضح في الصورة السابقة
أضف الكود target='_blank' في المكان الموضح في الصورة

شرح مبسط للإستخدام

وتجربة موفقة

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

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

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

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

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

ثم تحذف كل شئ موجود في صندوق التحرير ثم تضيف أكواد قالب التنظيف وتضغط حفظ

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

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin><![CDATA[/*
-----------------------------------------------
Name : CNMU Cleaning Template
Designer URL  : http://cnmu.blogspot.com
year          : 2015
----------------------------------------------- */
]]></b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id="Blog1" locked="true" type="Blog" />
</b:section>
</body>
</html>

إضافة زر تحكم لإظهار و إخفاء التعليقات داخل المواضيع في بلوجر

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

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

معاينة

إضافة زر إظهار و إخفاء التعليقات في بلوجر

1- ادخل إلى لوحة تحكم بلوجر

2- و انقر على قالب

3- و اضغط على تحرير HTML

4- ابحث عن الكود التالي

<div class='comments' id='comments'>

مُلاحظة: سوف تجد الكود في الأعلى مُكرر مرتين نحن سوف نستخدم الكود الثاني منه
الان بعد أن وجدنا الكود الثاني سوف نقوم بمسحه و إستبداله بالكود التالي

<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">إظهار التعليقات</a>
<div class='clear'/>
        <div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">إخفاء التعليقات</a>
<div class='clear'/>

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

/* Show and Hide Comments */
.hide-content{display:none;margin:0;padding:0;}
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}

إعدادات التنسيق

- كود اللون #fff هو خاص بلون كلمة إظهار و إخفاء
- رقم 15px و هي خاصة بحجم الخط
- كود اللون #5593f0 هو خاص بلون خلفية الزر

الان مرة أخرى ابحث عن الوسم </body> و اضف الكود التالي فوقه

<script type='text/javascript'>
//<![CDATA[
// Show and Hide Comments
function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
//]]>
</script>

الان قُم بحفظ القالب
اي سؤال او استفسار لا تترد بوضعه في تعليق

فتح الروابط الخارجية في صفحة جديدة مع إعطائها الوسم Nofollow

الروابط الخارجية احد المكونات التي لا مفر من استخدامها في المدونات إما لشرح او لتحميل لكن هناك مشكلتين مرتبطتان بالروابط الخارجية 

1. عدم الفتح في نافذة المدونة وهذا يجعل الزائر يترك المدونة وربما يكون ما يزال يقرأ 
2. ان تصبح الروابط الخارجية Dofollow مما يؤثر سلباً على المدونة ان كثر وجودها

وقد شرحنا سابقاً ما هو الـ Nofollow , Dofollow في الموضوع التالي إضغط هنــــــا 

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

مثال لرابط سيفتح في صفحة جديدة وله وسم Nofollow

<a href='#' target="_blank" rel="nofollow">الرابط</a>

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

<script type='text/javascript'>
$(document).ready(function() {
$("a[href^='http://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
$(this).attr('rel', 'nofollow');
}
}
);
$("a[href^='https://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);
});
</script>
الكود يجمع بين الامرين الفتح في صفحة جديدة والـ Nofollow
لانني وجدت كثير من المدونين يستخدمون كودين منفصلين مما يجعل الأمر ثقيل
وقد حدد الجزء الخاص بالـ Nofollow باللون الأصفر لمن اراد حذف هذا الأمر

إعادة التوجيه من Http إلى Https للمدونات ذات النطاق المجاني

بعد تعرُفنا على كيفية تفعيل ميزة HTTPS في بلوجر, مازال هُناك مشكلة قد تواجه المدونات ذات النطاق المجاني بحيث هذا الموضوع هُنا لم يعُد له فائدة, لإنه سوف يتم إعادة التوجيه إلى http:// بدلاً من https:// ولكن مع مدون محترف دائما عندنا الحلول لكُل شيء, ودرس اليوم سوف يكون عبارة عن التحويل من Http:// إلى Https:// بشكل تلقائي في المدونات ذات النطاق المجاني مثل مدونتي و يكون هذا عن طريق اكواد جافا سكربت, لذلك علينا اولاً مسح الكود الذي اضفناه في الموضوع القديم و إتباع الخطوات في هذا الموضوع

طريقة التحويل

1. توجه إلى بلوجر
2. إلى قالب
3. الضغط على تحرير HTML
4. امسح الكود الذي اضفناه في موضوعنا هُنا

ابحث عن الوسم </head> و اضف الكود التالي فوقه

 <script type='text/javascript'>
var blog = document.location.hostname;
var slug = document.location.pathname;
var ctld = blog.substr(blog.lastIndexOf("."));
if (ctld != ".com") {
  var ncr = "https://" + blog.substr(0, blog.indexOf("."));
ncr += ".blogspot.com/ncr" + slug;
window.location.replace(ncr);}
</script>

 <script type='text/javascript'>
function check_secure() {
var secssl = /^https/i;
var blog = document.location.hostname;
var slug = document.location.pathname;
var subs = window.location.search;
if (!window.location.origin.match(secssl)) {
window.location = "https://" + blog + slug + subs;
}
}
check_secure();
</script>

اتمنى ان يكون الموضوع أفادكم
اي سؤال او استفسار لا تترد بوضعه في تعليق