مدون محترف

قالب Food Blog معرب

noreply@blogger.com (مدون محترف) — Mon, 10 Oct 2016 14:18:00 +0000

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

معاينة تحميل

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

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

مُلاحظة: القالب تم شراءه من أحد مُتابعين المدونة وقام بتقديمه للمُتابعين بشكل مجاني (لذلك يحق لنا مسح حقوق المُصمم كما هو مذكور عند الشراء)، النُسخة مدفوعة ولم يتم تشفير حقوق التعريب الخاصة بنا ونحن نُقدمه للجميع بدون حقوق.

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

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

noreply@blogger.com (مدون محترف) — Mon, 05 Sep 2016 06:23:00 +0000

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

لذلك بعد ظهور هذه المشكلة قررت أنّ بحث عن المشكلة وهذا بعد الرسائل والتعليقات الكثيرة التي وصلت إلي عبر البريد والمدونة، وبعد البحث وجدت حل للمُشكلة وكانت بسبب بلوجر أيضًا حيثُ أنّ أكواد Ajax Script أصبحت غير مدعومة من قِبل بلوجر ولست مُتأكد من هذا أيضًا.

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

الخطوة الأولى

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

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

function pageNavi(a){(function(e){var i={postperpage:6,numshowpage:4,previous:"« السابق",next:"التالي »",loadAjax:true,thumbnailSize:"s400",summaryLength:300};

مُلاحظة قد يكون الكود مُختلف من مدونة لأخرى، لذلك يجب التركيز جيدًا وقراءة الكود بشكل كامل.
الذي سوف نبحث عنه والذي يهُمنا من هذا الأمر كُله هو loadAjax:true حيثُ أنّنا سوف نقوم باستبدال كلمة true بكلمة false، ليصبح الكود على الشكل التالي.

function pageNavi(a){(function(e){var i={postperpage:6,numshowpage:4,previous:"« السابق",next:"التالي »",loadAjax:false,thumbnailSize:"s400",summaryLength:300};

الخطوة الثانية

قد يكون الكود على الشكل التالي.

var pageNaviConf = {
perPage: 6,
numPages: 5,
firstText: "الأولى",
lastText: "الأخيرة",
nextText: "التالية",
prevText: "السابقة"
}

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

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

قالب Dzine معرب

noreply@blogger.com (مدون محترف) — Sun, 31 Jul 2016 07:36:00 +0000

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

معاينة تحميل

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

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

والمزيد .....

مُلاحظة: تم شراء القالب (النسخة المدفوعة) وتعريبها، وعند الشراء يقومون بأرسال القالب بدون حقوق وهذا معناه أنّنا لم ننتهك حقوق التصميم بحذف حقوق المُصمم. أتمنى أنّ يكون التعريب أعجبكم.

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

noreply@blogger.com (مدون محترف) — Mon, 18 Jul 2016 02:52:00 +0000

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

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

السؤال الآن هو: كيف يُمكننا أنّ نُشجع الزائر على قراءة عدد قليل من المقالات أو أكثر من مقال في المدونة؟

أولًا إذا كُنت لا تعرف من أين يأتي الزوار أو ما هو مصدر جلب الزوار إلى المدونة يُنصح باستخدام Google Analytics مع أنّ هذا الأمر خارج موضوعنا ولكنّ استخدام خدمة جوجل هذه سوف تعود بالفائدة الكبيرة حيثُ يُمكننا تتبع مصدر الزيارات ومعرفة كل شيء عن زوار المدونة.

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

ولكنّ كيف يُمكن فعل ذلك؟

تكتيكات من أجل إقناع الزوار في البقاء فترة أطول

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

معاينة

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

1- الدخول إلى لوحة تحكم بلوجر> التخطيط> إضافة آداة في السايدبار> الضغط HTML/JavaScript.
2- نسخ الكود التالي ولصقه داخل الآداة التي قُمنا بإضافتها.

<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimRF0XbXX7-_NPipfhYllfBqX6e1n_vZdj0p46GnlyJkr9tO8rQcR9CrhgxsETFTB734k0LhZzS93sH6g0teZgR3mdg18fhXvjoLeJ7NZGXa9OaLYr7jOr_mrBQn5Cdaaz7dVLXXsrdkM/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;font: 700 16px 'droid arabic kufi', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'droid arabic kufi', sans-serif;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:9px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>
<div id="featuredbwidget"></div>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"https://mudwnp.blogspot.com/",
featuredNum:9,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:true,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLV6a0jbaxvp5autT8rI91cB9bgg29FaXN5y82yb30oJFF4w0KiIsvRwZMH1dLufJmNqUqboR_4jPDuf1irfFWu4ZdU2-oT9W8Ru8E977G59HCO3XWkaOror7_oBEUpItoiQRrDHVDytE/s500/no-image.png",byMonth:["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>

الإعدادات

listURL: استبدل رابط مدونتي https://mudwnp.blogspot.com/ برابط مدونتك.
featuredNum: تغيير عدد 9 للعدد الذي تُريده، حيثُ أنّه المسؤول عن عدد عرض المقالات.
listbyLabel: من أجل عرض مقالات قسم مُعين استبدل كلمة false بأسم القسم المراد عرض مقالاته.
feathumbSize: للتحكم بحجم أو بُعد الصورة.
interval: للتحكم بالوقت اللازم الخاص بالتنقل بين المقالات.
autoplay: للتحكم بحركة التنقل الخاصة بالمقالات ومن أجل وقف عمل السلايدر وجعله يدوي استبدل true بكلمة false.

3- بمجرد الانتهاء من إعدادات الكود يجب الضغط على حفظ.
أتمنى أنّ تكون أعجبتكم الإضافة، ويُمكن تطويرها للأفضل إذا كُنت تملك خبرة في CSS.

قالب ايجي جيك الاحترافي

noreply@blogger.com (مدون محترف) — Sat, 02 Jul 2016 12:27:00 +0000

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

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

معاينة

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

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

والمزيد ....

شراء القالب 15$

يوجد طُرق دفع أخرى، لذلك تفضل بالتواصل معي قبل الشراء.

قالب Gridz معرب

noreply@blogger.com (مدون محترف) — Mon, 20 Jun 2016 02:14:00 +0000

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

معاينة تحميل

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

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

والمزيد ....

حل مشكلة تلف إضافات مدون محترف بعد توقف خدمة جوجل كود

noreply@blogger.com (مدون محترف) — Mon, 16 May 2016 02:46:00 +0000

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

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

كيفية حل مشاكل الإضافات الخاصة بمدون محترف

ادخل لوحة تحكم بلوجر
اضغط على قالب
ثم اضغط على تحرير HTML

سوف نبحث عن جميع الأكواد التي تبدأ بالسطر التالي:

https://mudwnp.googlecode.com/svn/trunk

سوف نستبدله بالكود التالي:

https://cdn.rawgit.com/mudwnp/mudwnp/master

مثال آخر:

لنفترض أنّ الكود على الشكل التالي.

https://mudwnp.googlecode.com/svn/trunk/font-ge_dinar.css

سوف نجعله على هذا الشكل.

https://cdn.rawgit.com/mudwnp/mudwnp/master/font-ge_dinar.css

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

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

قالب Easy Mag معرب

noreply@blogger.com (مدون محترف) — Wed, 11 May 2016 04:55:00 +0000

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

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

معاينة تحميل

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

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

.... والمزيد .

قالب Value الإحترافي معرب

noreply@blogger.com (مدون محترف) — Sat, 30 Apr 2016 10:16:00 +0000

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

معاينة تحميل

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

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

أتمنى أنّ يُعجبكم القالب.

إضافة سلايدر شو تلقائي في السايدبار

noreply@blogger.com (مدون محترف) — Mon, 25 Apr 2016 14:24:00 +0000

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

معاينة

إضافة سلايدر شو تلقائي في السايدبار

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

<style scoped="" type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:500px }ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block }ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.rcentside li:nth-child(2){left:0;top:50% }ul.rcentside li:nth-child(3){left:50.5%;top:50% }ul.rcentside li:nth-child(4){width:100%;left:0;top:75% }ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out }ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4EjooE1fuOtlbppyKL6Tbjo7BJ9QUCsNNXllnsS5zD90Jtinlrm3OT_XuwFDurLy-mNSttG7x5etqKaCPDFIZ7lvds7B4bKHZOTdLR3e5oP22EexFE8H8xkgOaDejofTh-nCUZfpE3Fw/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }
</style>
<div id="featuredpostside"></div>
<script type='text/javascript'>
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","اغسطس","سبتمبر","اكتوبر","نوفمبر","ديسمبر"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSide({
blogURL: "http://aegygeek.com/",
MaxPost: 8,
idcontaint: "#featuredpostside",
ImageSize: 300,
interval: 5000,
autoplay: true,
tagName: false
});//]]>
</script>

تعديلات الكود

blogURL: قم باسبتدال رابط المدونة التالية http://www.aegygeek.com برابط مدونتك.
MaxPost: 8: هذا الوسم هو المسؤول عن عدد المواضيع التي سوف يتم عرضها.
ImageSize: 300: المسؤول عن حجم وأبعاد الصورة بالبكسل.
interval: 5000: الفاصل الزمني بين التنقل في المواضيع.
autoplay: وهو المسؤول عن عرض المواضيع بشكل تلقائي ولإيقافها قم باستبدال true بالكلمة التالية false.
tagName: وهو المسؤول عن عرض المواضيع حسب التسمية بحيث يجب عليك تغيير كلمة false باسم القسم الخاص بك.

أتمنى أنّ تكون الإضافة أعجبتكم بالتوفيق

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

noreply@blogger.com (مدون محترف) — Sat, 23 Apr 2016 09:52:00 +0000

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

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

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

معاينة

تقسيم محتوى المقال إلى صفحات مُتعددة

1. توجه إلى لوحة تحكم بلوجر> انتقل على تبويب قالب>اضغط على تحرير HTML> ابحث عن الوسم التالي ]]></b:skin> وأضف الكود التالي فوقه.

/* Multiple Page Slide */
a.movepg.nexter,a.movepg.prever{color:#fff}
.separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 40px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{direction: rtl;float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px}

2. قم بنسخ الكود التالي فوق الوسم </body>.

<script type='text/javascript'>
//<![CDATA[
function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=4;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
//]]>
</script>

لإضافة صفحات أكثر قم بتغيير maxIndex=4 إلى الرقم الذي تريده.

3. الآن قم بحفظ القالب.

الخطوة التالية، عند انشاء موضوع جديد قم بنسخ الكود التالي في وضع HTML

<div class="next-wrap">
<div id="photocons" class="instruction">
    <div class="slidecontentWrap">
      <div class="slidecontent">
        <-- هُنا يتم كتابة المحتوى -->
      </div>
      <div class="slidecontent">
        <-- هُنا يتم كتابة المحتوى -->
      </div>
      <div class="slidecontent">
        <-- هُنا يتم كتابة المحتوى -->
      </div>
      <div class="slidecontent">
        <-- هُنا يتم كتابة المحتوى -->
      </div>
      <div class="slidecontent">
        <-- هُنا يتم كتابة المحتوى -->
      </div>
      </div>
      </div>
      <a class="movepg prever">السابق</a>
      <a class="movepg nexter">التالي</a>
</div>

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

حل مشكلة اختفاء الإضافات من مدونات بلوجر

noreply@blogger.com (مدون محترف) — Sun, 17 Apr 2016 01:53:00 +0000

حل مشكلة اختفاء الإضافات من مدونات بلوجر -لاحظت في الآونة الأخيرة ظهور مشاكل في كثير من القوالب مثل اختفاء بعض إضافات بلوجر وصراحًة أنا عانيت من هذه المشكلة. في البداية ظننت أنّ المشكلة من أكواد جافا سكريبت المرفوعة على الاستضافات وقمت بتغيير هذه الملفات ولم تُحل المشكلة، وبعد عصف ذهني خارق :) وجدت حل وتقريبًا سبب المشكلة تحديثات بلوجر الجديدة حيث أصبحت لا تقوم بعرض الإضافات التي تبدأ بالكود <b:section.

الآن نحتاج إلى تركيز كبير من قبل الزوار بحيث أي إضافة اختفت من مدونتك سوف نقوم بعمل التالي، أولًا نذهب إلى كود HTML الخاص بالإضافة من داخل القالب ونقوم بمسح الأكواد المُظلل عليها كما في الصورة، وتغيير <b:section. إلى <div.

<b:section class='navigation' id='navigation' maxwidgets='1' showaddelement='no'>
      <b:widget id='HTML99' locked='true' title='Navigation-Menus (Do Not Edit Here!)' type='HTML' visible='true'>
        <b:includable id='main'>
          <nav class='main-nav'>
            
            <ul>
              <li class='home5'><a expr:href='data:blog.homepageUrl'>الرئيسية</a></li>
              <li class='home1'><a href='#'>اعلن لدينا</a></li>
              <li class='home2'><a href='http://vision-p.blogspot.com/p/blog-page.html'>فهرس المدونة</a></li>
              <li class='home3'><a href='#'>عن المدونة</a></li>
              <li class='home4'><a href='http://vision-p.blogspot.com/p/blog-page_11.html'>اتصل بنا</a></li>
            </ul>
            <a href='#' id='pull'>قائمة</a>
          </nav>
        </b:includable>
      </b:widget>
    </b:section>

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

<div class='navigation' id='navigation'>
          <nav class='main-nav'>
            
            <ul>
              <li class='home5'><a expr:href='data:blog.homepageUrl'>الرئيسية</a></li>
              <li class='home1'><a href='#'>اعلن لدينا</a></li>
              <li class='home2'><a href='http://vision-p.blogspot.com/p/blog-page.html'>فهرس المدونة</a></li>
              <li class='home3'><a href='#'>عن المدونة</a></li>
              <li class='home4'><a href='http://vision-p.blogspot.com/p/blog-page_11.html'>اتصل بنا</a></li>
            </ul>
            <a href='#' id='pull'>قائمة</a>
          </nav>
        </div>

الآن التغييرات التي حصلت في الأكواد هي:

<b:section class='navigation' id='navigation' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML99' locked='true' title='Navigation-Menus (Do Not Edit Here!)' type='HTML' visible='true'>
<b:includable id='main'>

قمنا باستبدال b:section بوسم div وقمنا بمسح الأكواد الملونة بالأحمر.
الكود الثاني والثالث قمنا بمسحهما ليصبح الكود على الشكل التالي.

<div class='navigation' id='navigation'>

الآن الجزء الأخير من الكود والذي هو:

       </b:includable>
      </b:widget>
    </b:section>

قمنا باستبدالها بالوسم </div>
أتمنى أنّ يكون الدرس واضح، وقوموا بمقارنة الأكواد وقراءة الموضوع جيدًا.

إضافة شريط آخر الأخبار المطور في بلوجر

noreply@blogger.com (مدون محترف) — Sun, 10 Apr 2016 16:18:00 +0000

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

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

معاينة

تركيب شريط آخر الأخبار المطور

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

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

/* CSS News Ticker */
.ticker-wrap{display:block;text-align:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-right:5px solid #3cc091}
.ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif}
.ticker-wrap>span>a{color:#222;text-decoration:none}
#ticker{height:45px;direction:rtl;overflow:hidden;background:#fefefe;text-align:right}
#ticker ul{direction:rtl;padding:0;margin:0;list-style:none}
#ticker ul li{height:45px;direction:rtl;white-space:nowrap}
#ticker ul li img{float:right;direction:rtl;width:35px;height:35px;margin:5px 5px 5px 7px}
#ticker ul li h3{margin:0;direction:rtl;font:700 12px 'droid arabic kufi',sans-serif}
#ticker ul li h3 a{color:#333;direction:rtl;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font:700 12px 'droid arabic kufi',sans-serif;line-height:20px!important;direction:rtl;color:#999}

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

<script type='text/javascript'>
//<![CDATA[
// Breaking News ticker by http://mudwnp.blogspot.com/
function getauthor(t){for(var e=0;e<t.length;e++)var i=t[e].name.$t;return i}function getmeta(t){var e=[];e[1]="يناير",e[2]="فبراير",e[3]="مارس",e[4]="أبريل",e[5]="مايو",e[6]="يونيو",e[7]="يوليو",e[8]="أغسطس",e[9]="سبتمبر",e[10]="أكتوبر",e[11]="نوفمبر",e[12]="ديسمبر";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10),r=e[parseInt(a,10)]+" "+n+" "+i;return r}function arlinadesignTicker(t){var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";if(i){for(var n=0;n<i.length;n++){for(var r=i[n],s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){var l=r.link[s].href;break}try{var o='<img src="'+r.media$thumbnail.url+'"/>'}catch(t){var o=""}var u=r.title.$t,c=getauthor(r.author),d=getmeta(r.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="tickermeta"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#ticker").vTicker()}!function(t){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},i={moveUp:function(t,e){i.animate(t,e,"up")},moveDown:function(t,e){i.animate(t,e,"down")},animate:function(e,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.children("ul"),o="up"===a?"li:first":"li:last";s.trigger("vticker.beforeTick");var u=l.children(o).clone(!0);if(0<r.height&&(n=l.children("li:first").height()),n+=r.margin+2*r.padding,"down"===a&&l.css("top","-"+n+"px").prepend(u),i&&i.animate){if(e.animating)return;e.animating=!0,l.animate("up"===a?{top:"-="+n+"px"}:{top:0},r.speed,function(){t(l).children(o).remove(),t(l).css("top","0px"),e.animating=!1,s.trigger("vticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("vticker.afterTick");"up"===a&&u.appendTo(l)},nextUsePause:function(){var e=t(this).data("state"),i=e.options;e.isPaused||2>e.itemCount||a.next.call(this,{animate:i.animate})},startInterval:function(){var e=t(this).data("state"),a=this;e.intervalId=setInterval(function(){i.nextUsePause.call(a)},e.options.pause)},stopInterval:function(){var e=t(this).data("state");e&&(e.intervalId&&clearInterval(e.intervalId),e.intervalId=void 0)},restartInterval:function(){i.stopInterval.call(this),i.startInterval.call(this)}},a={init:function(n){a.stop.call(this);var r=jQuery.extend({},e);n=t.extend(r,n);var r=t(this),s={itemCount:r.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1};t(this).data("state",s),r.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:n.margin,padding:n.padding}),isNaN(n.height)||0===n.height?(r.children("ul").children("li").each(function(){var e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())}),r.children("ul").children("li").each(function(){t(this).height(s.itemHeight)}),r.height((s.itemHeight+(n.margin+2*n.padding))*n.showItems+n.margin)):r.height(n.height);var l=this;n.startPaused||i.startInterval.call(l),n.mousePause&&r.bind("mouseenter",function(){!0!==s.isPaused&&(s.pausedByCode=!0,i.stopInterval.call(l),a.pause.call(l,!0))}).bind("mouseleave",function(){(!0!==s.isPaused||s.pausedByCode)&&(s.pausedByCode=!1,a.pause.call(l,!1),i.startInterval.call(l))})},pause:function(e){var i=t(this).data("state");if(i){if(2>i.itemCount)return!1;i.isPaused=e,i=i.element,e?(t(this).addClass("paused"),i.trigger("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.resume"))}},next:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e)}},prev:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveDown(a,e)}},stop:function(){t(this).data("state")&&i.stopInterval.call(this)},remove:function(){var e=t(this).data("state");e&&(i.stopInterval.call(this),e=e.element,e.unbind(),e.remove())}};t.fn.vTicker=function(e){return a[e]?a[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void t.error("Method "+e+" does not exist on jQuery.vTicker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="http://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
//]]>
</script>

الآن الكود الأخير وهو من أجل ظهور شريط الأخبار، هذا الكود يُمكنك وضعه في المكان الذي تريده على حسب ما تجده مُناسب.
من أجل أنّ تظهر المواضيع قم بتغيير رابط aegygeek.com برابط مدونتك.

<div class='ticker-wrap' data-domain='aegygeek.com'>
<div id='ticker'>
</div>
</div>

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

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

noreply@blogger.com (مدون محترف) — Thu, 31 Mar 2016 06:05:00 +0000

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

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

معاينة

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

ادخل إلى لوحة تحكم بلوجر
انقر على قالب
ثم انقر على تحرير HTML

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

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
/* CSS Recent Post by Label */
#HTML90{margin-right: 6px;}
#HTML91{margin-right: 6px;}
.mudwnplabel1 ul,.mudwnplabel2 ul{list-style:none;margin:0;padding:0}
.mudwnplabel1 li,.mudwnplabel2 li{margin:0;padding:0}
.mudwnplabel1 .widget,.mudwnplabel2 .widget{font-family:'Droid Arabic Kufi',sans-serif!important;font-family:13px;margin:0;padding:0}
.mudwnplabel1 .widget-content,.mudwnplabel2 .widget-content{padding:0;margin:0;word-wrap:break-word;overflow:hidden}
.mudwnplabel1 h2,.mudwnplabel2 h2{position:relative;margin:0;padding:15px 0;font-size:12px;font-weight:700;border-bottom:1px solid #ddd}
.mudwnplabel2 h2{margin:20px 0 0}
.data-title:before{content:'\f143';left:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:400;margin:0 0 0 10px;color:#07ACEC}
.data-title{margin-right: 6px;color:#07ACEC;border:1px solid #07ACEC;padding:3px 8px;border-radius:2px;margin-left:10px;font-size:10px;font-weight:700}
.mudwnplabel1 .index,.mudwnplabel2 .index{font-size:10px;font-weight:700}
.mudwnplabel1 .index a,.mudwnplabel2 .index a{color:#07ACEC;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6;color:#07ACEC;border-color:#07ACEC}
.mudwnplabel1 .index a:hover,.mudwnpabel2 .index a:hover{background:#07ACEC;color:#fff;border-color:transparent}
.mudwnplabel1 .index a:after{content:"\f104";font-family:FontAwesome;font-style:normal;font-weight:700;text-decoration:inherit;padding-right:5px}
.mudwnplabel2 .index a:after{content:"\f104";font-family:FontAwesome;font-style:normal;font-weight:700;text-decoration:inherit;padding-right:6px}
.mudwnplabel2 span.mudwnp_meta_comment a:hover{color:#07ACEC!important}
.mudwnplabel2 ul.mudwnp_thumbs li a:hover,.mudwnplabel2 ul.mudwnp_thumbs2 li a:hover{color:#07ACEC;text-decoration:none}
.mudwnp_right{margin:0;padding:0;border-left:1px solid #fff}
.mudwnp_right .cat_thumb{float:right;margin-left:10px!important}
.mudwnp_left{float:right;margin-top:-35px;padding:0}
ul.mudwnp_thumbs{margin:0;padding:0}
ul.mudwnp_thumbs li,ul.mudwnp_thumbs2{margin:0;padding:0}
ul.mudwnp_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}
ul.mudwnp_thumbs .cat_thumb img{border-radius: 4px;margin-right: 2px;height: 160px;width:100%;transition:all .2s}
ul.mudwnp_thumbs .cat_thumb img:hover{opacity:.9}
ul.mudwnp_thumbs2 li{margin:0 0 10px;padding:0 0 10px;width:27%;overflow:hidden;min-height:74px;float:right;margin-left:10px!important;border-bottom:1px solid #e9e9e9}
ul.mudwnp_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.mudwnp_thumbs2 .cat_thumb2{float:right;margin:0 0 0 10px;height:72px;overflow:hidden}
ul.mudwnp_thumbs2 .cat_thumb2 img{border-radius: 3px;margin-right: 2px;height:60px;transition:all .2s}
ul.mudwnp_thumbs2 .cat_thumb2 img:hover{opacity:.9}
span.mudwnp_title{font-family:'Droid Arabic Kufi',sans-serif;font-size:12px!important;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none;max-height:45px;overflow:hidden}
span.mudwnp_title2{font-size:12px!important;font-weight:700!important;line-height:1.4em;margin:0 0 3px;max-height:38px}
span.mudwnp_title a{color:#333}span.mudwnp_title a:hover{color:#07ACEC;text-decoration:none}
span.mudwnp_summary{display:block;line-height:1.6em;font-size:11px;width: 87%;text-overflow:ellipsis;margin:10px 0 0}
span.mudwnp_meta{display:block;font-family:'Droid Arabic Kufi',sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.mudwnp_meta a{color:#aaa;display:inline-block}
span.mudwnp_meta_date,span.mudwnp_meta_comment,span.mudwnp_meta_more{display:inline-block;margin-left:10px}
span.mudwnp_meta_comment a:before{content:"\f0e6";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-left:5px}
span.mudwnp_meta_comment a:hover{color:#07ACEC!important}
span.mudwnp_meta_date:before{content:"\f133";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-left:5px}
ul.mudwnp_thumbs2 li a:hover,ul.mudwnp_thumbs li a:hover{color:#07ACEC;text-decoration:none}
@media only screen and (max-width:768px){.tanggal i,.tags i{color:#ff8000!important}.mudwnp_left{width:100%;float:right;margin:0;padding:0}span.mudwnp_title2{max-height:33px!important}ul.mudwnp_thumbs2 li{border-bottom:0;width:58%;overflow:hidden;min-height:60px}.mudwnplabel1 .widget-content,.mudwnplabel2 .widget-content{margin-top:10px}span.mudwnp_summary,.mudwnp_right{display:none}span.mudwnp_title a{font-weight:700}span.mudwnp_title{margin:0 0 5px}ul.mudwnp_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}span.mudwnp_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:320px){ul.mudwnp_thumbs2 .cat_thumb2 img{width:80px;height:50px}.mudwnp_left{width:100%;float:right;margin:0;padding:0}ul.mudwnp_thumbs li{margin:0 0 10px;padding:0 0 10px}span.mudwnp_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px){.mudwnp_left{width:100%;float:right;margin:0;padding:0}ul.mudwnp_thumbs li{margin:0 0 10px;padding:0 0 10px}span.mudwnp_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>

الآن الخطوة الثانية وهي إضافة كود جافا سكربت فوق </head> أيضًا

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="يناير",g[2]="فبراير",g[3]="مارس",g[4]="ابريل",g[5]="مايو",g[6]="يونيو",g[7]="يوليو",g[8]="أغسطس",g[9]="سبتمبر",g[10]="أكتوبر",g[11]="نوفمبر",g[12]="ديسمبر",document.write('<span class="mudwnp_right">'),document.write('<ul class="mudwnp_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="mudwnp_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="mudwnp_meta">'),1==showpostdate&&(v=v+'<span class="mudwnp_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 تعليقات"==l&&(l="1 تعليقات"),"0 تعليقات"==l&&(l="0 تعليقات"),showcomment='<span class="mudwnp_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="mudwnp_meta_more"><a href="'+n+'" class="url" target ="_top">إقرأ المزيد...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="mudwnp_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="mudwnp_left">'),document.write('<ul class="mudwnp_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="mudwnp_title mudwnp_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="mudwnp_meta mudwnp_meta2">'),1==showpostdate2&&(v=v+'<span class="mudwnp_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 تعليق"==l&&(l="1 تعليقات"),"0 تعليق"==l&&(l="0 تعليقات"),showcomment='<span class="mudwnp_meta_comment mudwnp_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="mudwnp_meta_more mudwnp_meta_more2"><a href="'+n+'" class="url" target ="_top">إقرأ المزيد...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")}
//]]>
</script>
<script type='text/javascript'>
var numposts=1,numposts2=9,showpostthumbnails=!0,showpostthumbnails2=!0,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=310,thumb_height=160,thumb_width2=100,thumb_height2=55,no_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjE_Uy50rmDqlKYXNerEFozzjaJwhpW-SpuMOim1Q9dSed72-EStKGFX2YsISare0Jt-mI8jJ_dUGCefc0juIiwirOt3AGG4WO6f0SBQQwwxJ8oAfDpYdnkH68kgDFzR0DpPVY9DRJOQg/s320/mudwnp_thumb.png",no_thumb2="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDO2plt3O_ZAeKean2exI7kGkHfDp3WKU_8G0Kpdx366WqCquW8uCCBP3kHSqYyAp8R7v-UPupQLyMiN4iWKKQ8hSVJWwyik1xJhcqJv4w8ijh-5co6sauk9E4SijllhzpQcAcZuDfKg4/s1600/mudwnpthumb_small.png";
</script>
</b:if>
</b:if>

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

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mudwnplabel1-wrapper'>
        <b:section class='mudwnplabel1' id='mudwnplabel1' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML90' locked='false' title='Berita' type='HTML'>
            <b:includable id='main'>
<h2><span class='data-title'><data:content/></span><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>مشاهدة الكل</a></span></h2>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
<div id='mudwnplabel2-wrapper'>
        <b:section class='mudwnplabel2' id='mudwnplabel2' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML91' locked='false' title='Info Menarik' type='HTML'>
            <b:includable id='main'>
<h2><span class='data-title'><data:content/></span><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>مشاهدة الكل</a></span></h2>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
</b:if>

الخطوة الرابعة: الآن سوف تدخل إلى التخطيط سوف تجد آداتين جديدتين، كل ما عليك فعله هو تحرير الأداة وكتابة اسم القسم الذي تريد ظهور مواضيعه.

أتمنى أنّ يكون أعجبكم السكربت وانتظرونا بقوالب بلوجر جديدة إن شاء الله.
وإذا احتجت إلى أي مُساعدة في تركيب السكربت أترك تعليق.

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

noreply@blogger.com (مدون محترف) — Wed, 09 Mar 2016 04:41:00 +0000

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

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

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

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

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

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

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

سعر القالب 15$ يُمكن طلبه إما عن طريق موقع خمسات، أو تحويل المبلغ عبر باي بال، أو عبر رصيد فودافون كاش للمصريين.

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

noreply@blogger.com (مدون محترف) — Mon, 29 Feb 2016 06:47:00 +0000

سكربت عرض المواضيع حسب التسميات في بلوجر -في الآونة الأخيرة وصلتنا الكثير من الرّسائل حول هذه الإضافة وكيفيّة تركيبها، وظيفة الإضافة هي عرض مواضيع المدونة في الصّفحة الرّئيسية استنادًا إلى تسمية مُحددّة.

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

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

معاينة

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

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

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
/* Recent Post by Label */
.newarlinalabel1 ul,.newarlinalabel2 ul{list-style:none;margin:0;padding:0}
.newarlinalabel1 li,.newarlinalabel2 li{margin:0;padding:0;}
.newarlinalabel1 .widget,.newarlinalabel2 .widget{margin:0;padding:0}
.newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden}
.newarlinalabel1 h2,.newarlinalabel2 h2,.newarlinalabel3 h2{position:relative;margin:0;padding:15px 20px;font-size:12px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0}
.newarlinalabel2 h2,.newarlinalabel3 h2{margin:20px 0 0 0;}
.newarlinalabel1 h2:before,.newarlinalabel2 h2:before,.newarlinalabel3 h2:before{content:'\f108';left:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 0 0 10px;color:#ff675c;}
.newarlinalabel2 h2:before{content:'\f0c3';}.newarlinalabel3 h2:before{content:'\f143';}
.newarlinalabel1 .index,.newarlinalabel2 .index{font-size:10px;float:left;font-weight:400;}
.newarlinalabel1 .index a,.newarlinalabel2 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6}
.newarlinalabel2 .index a{color:#ef6c00;border-color:#ffa726}
.newarlinalabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent}
.newarlinalabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent}
.newarlinalabel1 .index a:after{content:"\f104";font-family:FontAwesome;margin-top:3px;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
.newarlinalabel2 .index a:after{content:"\f104";font-family:FontAwesome;margin-top:3px;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:6px}
.newarlinalabel2 span.newarlina_meta_comment a:hover{color:#38761d!important}
.newarlinalabel2 ul.newarlina_thumbs li a:hover,.newarlinalabel2 ul.newarlina_thumbs2 li a:hover{color:#ff675c;text-decoration:none}
.newarlina_right{width:280px;width:45.7%;float:right;margin:0;padding:0 0 0 20px;border-left:1px solid #e9e9e9}
.newarlina_left{width:250px;width:51.5%;float:left;margin:0;padding:0}
ul.newarlina_thumbs{margin:0;padding:0}
ul.newarlina_thumbs li,ul.newarlina_thumbs2{margin:0;padding:0}
ul.newarlina_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}
ul.newarlina_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s}
ul.newarlina_thumbs .cat_thumb img:hover{opacity:.9;}
ul.newarlina_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9}
ul.newarlina_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.newarlina_thumbs2 .cat_thumb2{float:right;margin:0 0 0 10px;width:62px;height:72px;overflow:hidden}
ul.newarlina_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s}
ul.newarlina_thumbs2 .cat_thumb2 img:hover{opacity:.9;}
span.newarlina_title{font-family:Droid Arabic Kufi,sans-serif;font-size:12px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none}
span.newarlina_title2{font-size:12px;line-height:1.4em;margin:0 0 3px}
span.newarlina_title a{color:#333}
span.newarlina_title a:hover{color:#ff675c;text-decoration:none}
span.newarlina_summary{display:block;line-height:1.6em;font-size:12px;text-overflow:ellipsis;margin:10px 0 0 0}
span.newarlina_meta{display:block;font-family:Droid Arabic Kufi,sans-serif;font-size:11px;font-weight:700;color:#aaa;text-transform:uppercase}
span.newarlina_meta a{color:#aaa;display:inline-block}
span.newarlina_meta_date,span.newarlina_meta_comment,span.newarlina_meta_more{display:inline-block;font-weight: 400;margin-left:10px}
span.newarlina_meta_comment a:before{content:"\f0e6";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
span.newarlina_meta_comment a:hover{color:#ff675c!important}
span.newarlina_meta_date:before{content:"\f133";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
ul.newarlina_thumbs2 li a:hover,ul.newarlina_thumbs li a:hover{color:#ff675c;text-decoration:none}
@media screen and (max-width:1024px) {
.newarlinalabel1 .widget-content, .newarlinalabel2 .widget-content {padding:20px 25px;}
.newarlina_right {width:50%;float:right;margin:0;padding:0;border-left:none}
.newarlina_left {width:46%;float:left;margin:0;padding:0;}
ul.newarlina_thumbs .cat_thumb {width:100%;height:auto;}
ul.newarlina_thumbs .cat_thumb img {width:100%;height:auto;}
ul.newarlina_thumbs li {margin:0;padding:0;}
span.newarlina_title2 {font-size:20px;line-height:1.2em;}
span.newarlina_summary {font-size:14px;}}
@media only screen and (max-width:768px){
.newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px 20px}
.newarlina_left{width:100%;float:right;margin:0;padding:0}
ul.newarlina_thumbs2 li{border-bottom:0}
span.newarlina_summary,.newarlina_right{display:none}
span.newarlina_title{margin:0 0 5px}
ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}
span.newarlina_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:480px){
#newarlinalabel1-wrapper,#newarlinalabel2-wrapper{display:none}}
@media only screen and (max-width:320px){
.newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px 20px}
.newarlinalabel1 h2,.newarlinalabel2 h2{padding:10px 20px 1px 20px}
.newarlina_left{width:100%;float:right;margin:0;padding:0}
ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.newarlina_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px) {
.newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px}
.newarlinalabel1 h2,.newarlinalabel2 h2{padding:10px 10px 1px 10px}
.newarlina_left{width:100%;float:right;margin:0;padding:0}
ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.newarlina_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>

كود جافا سكريبت

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="يناير",g[2]="فبراير",g[3]="مارس",g[4]="أبريل",g[5]="مايو",g[6]="يونيو",g[7]="يوليو",g[8]="أغسطس",g[9]="سبتمبر",g[10]="أكتوبر",g[11]="نوفمبر",g[12]="ديسمبر",document.write('<span class="newarlina_right">'),document.write('<ul class="newarlina_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="newarlina_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="newarlina_meta">'),1==showpostdate&&(v=v+'<span class="newarlina_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 تعليقات"==l&&(l="1 تعليقات"),"0 تعليقات"==l&&(l="0 تعليقات"),showcomment='<span class="newarlina_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="newarlina_meta_more"><a href="'+n+'" class="url" target ="_top">إقرأ المزيد...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="newarlina_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="newarlina_left">'),document.write('<ul class="newarlina_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="newarlina_title newarlina_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="newarlina_meta newarlina_meta2">'),1==showpostdate2&&(v=v+'<span class="newarlina_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 تعليق"==l&&(l="1 تعليقات"),"0 تعليق"==l&&(l="0 تعليقات"),showcomment='<span class="newarlina_meta_comment newarlina_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="newarlina_meta_more newarlina_meta_more2"><a href="'+n+'" class="url" target ="_top">إقرأ المزيد...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")}
//]]>
</script>
<script type='text/javascript'>
var numposts=1,numposts2=7,showpostthumbnails=!0,showpostthumbnails2=!1,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=280,thumb_height=200,thumb_width2=62,thumb_height2=62,no_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8lzJ5dDXg3LFXZJSdwiufWLpg97CNpt2Sq8aRWJMH4jec6pnqUue330O1ssGHR8zHpoOYTNNiqNfDhxYYFLt11T3i0Qn4aeIgdbeV1nOQYj5WKbG_DQBX7NqpKMxP44dutqa6anXgiz5o/s1600/newarlina_thumb.png",no_thumb2="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ1eOZ1Xb9oShfLrDUTDpK51_X2-Oon6TTqfEO34h-WcmwUjEnnueowYt7hFkFJyuV3Bcn2guXxaHVbL6QQEjBuDIzYmP30eDJztLGzow6fixwt-zYlGKHl_VBdDPHoX9fCwHfMC7Im0nG/s1600/newarlinathumb_small.png";
</script>
</b:if>
</b:if>

في الكود السابق يوجد جزء المُعلَم باللون الأحمر دعوني أشرحه لكم

numposts2=7: من خلال هذا الوسم تستطيع التحكم بعدد المواضيع
numchars=150: من خلال هذا الوسم تستطيع التحكم بعدد الكلمات الخاصة بالوصف

الآن من أجل أنّ تعمل الإضافة بالشكل الصحيح يجب عليك إضافة الكود التالي فوق كود Blog1

<b:section class='main' id='main' maxwidgets='3' showaddelement='yes'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='newarlinalabel1-wrapper'>
        <b:section class='newarlinalabel1' id='newarlinalabel1' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML80' locked='false' title='أنظمة التشغيل' type='HTML'>
            <b:includable id='main'>
<h2><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>مشاهد الكل</a></span><data:content/></h2>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
      <div id='newarlinalabel2-wrapper'>
        <b:section class='newarlinalabel2' id='newarlinalabel2' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML81' locked='false' title='علوم وفيزياء' type='HTML'>
            <b:includable id='main'>
<h2><span class='index'><a href='/search/label/<data:content/>?&max-results=8'>مشاهدة الكل</a></span><data:content/></h2>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
</b:if>

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

اضافة سلايدر شو تلقائي في بلوجر

noreply@blogger.com (مدون محترف) — Sat, 20 Feb 2016 07:03:00 +0000

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

معاينة

كيفية اضافة سلايدر شو تلقائي في بلوجر

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

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

/* Slider */
.blog_featured_posts {display: inline-block;width: 100%;margin-top: 0px;margin-bottom: 4px;}
.blog_featured_post {display: block;position: relative;float: right;overflow: hidden;height:334px;}
.blog_featured_post.first {width: 43%;margin-left: 9px;}
.blog_featured_post.second {width: 20.79%;margin-left: 9px;}
.blog_featured_post.third, .blog_featured_post.fourth {width: 34.126%;height:163px;}
.blog_featured_post.third {margin-bottom: 9px;}
.blog_featured_post a {display: block;color: rgb(255, 255, 255);text-shadow: rgba(0, 0, 0, 0.498039) 0px 1px 1px;position: relative;vertical-align: bottom;z-index: 1;height:100%;}
.blog_featured_post a:hover:before {opacity: 0.6;box-shadow: inset 0px -3px 200px 5px #000;}
.blog_featured_post a:before {display: block;position: absolute;content: '';right: 0px;top: 0px;width: 100%;height: 100%;box-shadow: inset 0px -3px 300px 5px #000;opacity: 0.5;-webkit-transition: all 0.2s;transition: all 0.2s;}
.blog_featured_post a .blog_contents {display: block;position: absolute;z-index: 5;bottom: 30px;right: 30px;left: 30px;font-weight:bold;text-transform: uppercase;line-height: 120%;-webkit-transition: all 0.2s;transition: all 0.2s;font-family: droid arabic kufi, sans-serif;}
.blog_contents span {font-style: normal;display: block;position: absolute;bottom: 100%;padding: 5px 10px;letter-spacing: 0px;font-size: 11px;line-height: 1;text-shadow: none;margin-bottom: 10px;background: #f58220;}
.blog_contents span:after {content: "";border-style: solid;border-width: 21px 7px 21px;border-color: transparent;border-bottom-color: #f58220;left: -7px;bottom: 0;position: absolute;}
.blog_contents span:before {content: "";border-style: solid;border-width: 21px 7px 21px;border-color: transparent;border-top-color: #f58220;right: -7px;top: 0;position: absolute;}
.blog_featured_post a .blog_contents h3 {text-shadow: 2px 2px 4px black;padding: 8px 10px 9px;text-align: right;float: right;display: inline-block;background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;width:114%;opacity: 0.9;font-size:12px;font-weight:700;margin-right: -30px;}
.blog_featured_post.first a .blog_contents h3 {text-shadow:2px 2px 4px black;padding: 8px 10px 9px;text-align:right;float:right;display:inline-block;background:rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;width:100%;opacity: 0.9;font-size:12px;font-weight:700;margin-right:-30px;}
.blog_featured_post .feat-img{width:100%;height:100%;background-size:cover;background-position:50%;}

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

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
aBold = true;
numposts1 = 4;
numposts11 = 1;
newsize = 400;
function recentposts1(json) {
j = showRandomImg ? Math.floor((imgr.length + 1) * Math.random()) : 0;
img = new Array;
if (numposts1 <= json.feed.entry.length) maxpost = numposts1;
else maxpost = json.feed.entry.length;
document.write('<div class="blog_featured_posts">');
for (var i = 0; i < maxpost; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var tag = entry.category[0].term;
var pcm;
var posturl;
var cropsize = newsize;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) if (entry.link[k].rel == "alternate") {
posturl = entry.link[k].href;
break
}
for (var k = 0; k < entry.link.length; k++) if (entry.link[k].rel == "replies" && entry.link[k].type == "text/html") {
pcm = entry.link[k].title.split(" ")[0];
break
}
if ("content" in entry) var postcontent = entry.content.$t;
else if ("summary" in entry) var postcontent = entry.summary.$t;
else var postcontent = "";
postdate = entry.published.$t;
if (j > imgr.length - 1) j = 0;
img[i] = imgr[j];
s = postcontent;
a = s.indexOf("<img");
b = s.indexOf('src="', a);
c = s.indexOf('"', b + 5);
d = s.substr(b + 5, c - b - 5);
if (a != -1 && (b != -1 && (c != -1 && d != ""))) img[i] = d;
var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var month2 = ["يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"];
var day = postdate.split("-")[2].substring(0, 2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for (var u2 = 0; u2 < month.length; u2++) if (parseInt(m) == month[u2]) {
m = month2[u2];
break
}
var daystr = day + " " + m + " " + y;
if (i == 0) {
var st = "#FF3D66";
var trtd = '<div class="blog_featured_post first"><a href="' + posturl + '"><div class="blog_contents"><span>' + tag + '</span><h3>' + posttitle + '</h3></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>';
document.write(trtd)
}
if (i == 1) {
var trtd = '<div class="blog_featured_post second"><a href="' + posturl + '"><div class="blog_contents"><span>' + tag + '</span><h3>' + posttitle + '</h3></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>';
document.write(trtd)
}
if (i == 2) {
var trtd = '<div class="blog_featured_post third"><a href="' + posturl + '"><div class="blog_contents"><span>' + tag + '</span><h3>' + posttitle + '</h3></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>';
document.write(trtd)
}
if (i == 3) {
var trtd = '<div class="blog_featured_post fourth"><a href="' + posturl + '"><div class="blog_contents"><span>' + tag + '</span><h3>' + posttitle + '</h3></div><div class="feat-img" style="background-image:url(' + img[i] + ');"></div></a></div>';
document.write(trtd)
}
j++
}
document.write('</div>')
};
//]]>
</script>

الكود الثالث وهو الخاص بعرض السلايدر في المدونة ويُمكنك وضعه في المكان الذي يُناسبك.
لكنّ أفضل مكان هو فوق المواضيع مُباشرًة لذلك ابحث عن الوسم <div id='content-wrapper'> و اضف الكود التالي فوقه

<div class='blog_featured_posts' id='blog_featured_posts'>
<div class='ct-wrapper'>
<b:if cond='data:blog.pageType == "index"'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=recentposts1\"><\/script>");
</script>
</b:if>
</div>
</div>

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

قالب Global معرب

noreply@blogger.com (مدون محترف) — Wed, 03 Feb 2016 05:29:00 +0000

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

معاينة تحميل

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

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

والمزيد ...

إضافة نجوم التقييم إلى المشاركات الشائعة

noreply@blogger.com (مدون محترف) — Wed, 20 Jan 2016 11:46:00 +0000

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

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

معاينة

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

اولاً يجب إضافة الكود التالي فوق الوسم </head>

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

مُلاحظة: إذا كان الكود موجود في مدونتك لا تقوم بإضافته
ثانيًا: قُمّ بالدخول إلى لوحة تحكم بلوجر ثم اضغط على تبويب قالب، ثمّ تحرير HTML واضف الكود التالي فوق الوسم ]]></b:skin>

الشكل الاول

/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 0 0 10px;width:60px;height:60px;overflow:hidden;float:right;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:11px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

الشكل الثاني

/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 0 0 10px;width:60px;height:60px;overflow:hidden;float:right;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:11px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

الشكل الثالث

/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 0 0 10px;width:60px;height:60px;overflow:hidden;float:right;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;left:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:11px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{float:right;margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

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

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

noreply@blogger.com (مدون محترف) — Mon, 18 Jan 2016 11:30:00 +0000

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

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

معاينة

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

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

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

/* About Me */
#HTML68 .aboutind-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.aboutind-img{position:relative;max-height:140px;overflow:hidden}
.aboutind-img img {max-width:100%;width:100%;transition:all .6s;}
.aboutind-img:hover img{transform:scale(1.2) rotate(-10deg)}
.aboutind-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;transition:all .3s}
.aboutind-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;right:22.5%;z-index:3}
.aboutind-float{text-align:center;display:table;width:100%;height:100%}
.aboutind-float a{background:rgba(243,156,18,.95);color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:67%;font-weight: 700;text-transform:uppercase;vertical-align:middle;border-radius:3px;transition:all .3s}
.aboutind-float:hover a{background:#404040;color:#fff;}
.aboutind-float a i{font-weight:normal;margin:0 0 0 5px}
.aboutind-wrpicon{display:block;margin:15px auto;position:relative;}
.aboutind-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .aboutind-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .aboutind-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:100%;}
.extender .aboutind-icon i{font-family:fontawesome;margin:0 0 0 3px}
.aboutind-icon.fbl a{background:#3b5998}
.aboutind-icon.twitt a{background:#19bfe5}
.aboutind-icon.crcl a{background:#d64136}
.aboutind-icon.fbl a:hover,.aboutind-icon.twitt a:hover,.aboutind-icon.crcl a:hover{background:#404040}
.extender .aboutind-icon:hover a,.extender .aboutind-icon a:hover{color:#fff;}
.aboutind-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.aboutind-info p{margin:5px 0}
.aboutind-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.aboutind-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.aboutind-info h4:before,.aboutind-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}
.aboutind-info h4:before {margin-right:-50%;text-align:left;}

ابحث عن الوسم <div id='sidebar-wrapper'>; و اضف الكود التالي تحته

<b:widget id='HTML68' locked='false' mobile='no' title='إنضم إلينا' type='HTML'>
            <b:includable id='main'>

<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='aboutind-img'>
<img alt='ايجي جيك' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-pI4xuJge5RULtny3tlO-2D9G2UJViJ47MR6lCGvo_Ujihhyvd4PzAOI_BqV31V6usZw39RKrOQFGEITxYkXukI7_HXP5hH1rsfB946jEMhYpM0gktv2mQWyhHqg2VMo4bpv5Hzvec_53/s1600/indz.jpg' title='Indzign' width='300'/>
<div class='aboutfloat-img'><span class='aboutind-float'><a href='https://www.blogger.com/follow-blog.g?blogID=6023018209771894916' rel='nofollow' target='_blank' title='انضم لأصدقاء الموقع'><i class='fa fa-user'/> انضم لأصدقاء الموقع</a></span></div>
</div>
</div>
<div class='aboutind-info'>
<h4><span>ايجي جيك</span></h4>
<p>مدونة تهتم بعالم التقنية، وأخبار الإنترنت</p>
</div>
<div class='aboutind-wrpicon'>
<ul class='extender'>
<li class='aboutind-icon fbl'><a href='//www.facebook.com/aegygeek' rel='nofollow' target='_blank' title='تابعنا على فيسبوك'><i class='fa fa-facebook fa-fw'/> أعجبني</a></li>
<li class='aboutind-icon twitt'><a href='//twitter.com/mudwnp' rel='nofollow' target='_blank' title='تابعنا على تويتر'><i class='fa fa-twitter fa-fw'/> متابعة</a></li>
<li class='aboutind-icon crcl'><a href='//plus.google.com/u/0/112703182151814934586' rel='nofollow' target='_blank' title='انضم لنا على جوجل+'><i class='fa fa-google-plus fa-fw'/> إنضمام</a></li>
</ul>
</div>
</div>
</div>
</b:includable>
          </b:widget>

إعدادات الكود

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

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

قالب Invision معرب

noreply@blogger.com (مدون محترف) — Tue, 12 Jan 2016 10:22:00 +0000

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

معاينة تحميل

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

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

والمزيد ...

أتمنى ان يكون اعجبكم القالب

إضافة الملاحظات داخل ورقة مطوية في بلوجر

noreply@blogger.com (مدون محترف) — Thu, 07 Jan 2016 02:32:00 +0000

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

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

معاينة

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

ندخل إلى لوحة تحكم بلوجر
نضغط على تبويب قالب
ثم نضغط على تحرير HTML

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

/* CSS Note */
.note{position:relative;width:30%;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71; direction: rtl;overflow:hidden}
.note.orange{direction: rtl;background:#f39c12}
.note.crusta{direction: rtl;background:#F2784B}
.note.river{direction: rtl;background:#3498db}
.note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}
.note.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22}
.note.crusta:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}
.note.river:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}

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

<div class='note'>...هنا اكتب ما تشاء...</div>
<div class='note orange'>...هنا اكتب ما تشاء...</div>
<div class='note river'>...هنا اكتب ما تشاء...</div>
<div class='note crusta'>...هنا اكتب ما تشاء...</div>

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

إضافة أداة ضغط أكواد CSS في بلوجر

noreply@blogger.com (مدون محترف) — Mon, 04 Jan 2016 09:17:00 +0000

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

معاينة

كيفية إضافة أداة ضغط أكواد CSS في بلوجر

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

<div id="cssminifier">
<style scoped="" type="text/css">
#cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}
#cssminifier textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:5px 5px 0 0;resize:none}
textarea:focus{background-color:#FFF;color:#303030}
#cssminifier .box{margin:10px auto 30px;color:rgba(255,2255,255,.6);}
#cssminifier .box p{margin:0 0 2px}
#cssminifier button{cursor:pointer;}
#cssminifier .col{width:48%;margin:0 auto 30px}
#cssminifier .right{float:right;margin-right:1%}
#cssminifier .left{float:left;margin-left:1%}
#cssminifier .button-group{background:#2980b9;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px}
#cssminifier button,#cssminifier button[disabled]:active{background:rgba(255,255,255,0.2);text-align:center;color:#fefefe;display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.471;border-radius:4px;margin:0 5px;border:0;transition:all .1s}
#cssminifier button:hover,#cssminifier button:active{background:#fff;color:#2980b9}
#cssminifier button[disabled],#cssminifier button[disabled]:active{background:#fff;}
#cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none}
#cssminifier br{display:none}
</style>
<span class="clear"></span>
<textarea autofocus="" id="cssField" placeholder="قم بنسخ كود الـ CSS هُنا..." spellcheck="false"></textarea>
<div class="button-group">
<div class="box">
<input class="opt1" id="stripAllComment" type="checkbox" />
<label for="stripAllComment">Strip all comments</label>
<input class="opt2" id="superCompact" type="checkbox" />
<label for="superCompact">Super compact</label>
<input class="opt3" id="betterIndentation" type="checkbox" />
<label for="betterIndentation">Keep indentation</label>
<input checked="" class="opt4" id="keepLastComma" type="checkbox" />
<label for="keepLastComma">Remove the last semicolon</label>
</div>
<button onclick="compressCSS("cssField");">ضغط الأكواد</button>
<button onclick="clearField("cssField");">مسح الأكواد</button>
<button onclick="selectAll("cssField");">نسخ الأكواد</button>
</div>
<div class="clear">
</div>
<script type="text/javascript">
function get(e){return document.getElementById(e)}function highlightCode(e){if(hc.checked){var a=e.innerHTML;a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/\'(.*?)\'/g,"<span class='st'>'$1'</span>").replace(/\"(.*?)\"/g,"<span class='st'>\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g,"$1<span class='pr'>$2</span>:<span class='vl'>$3</span>$4").replace(/<span class='pr'>\{/g,"{<span class='pr'>")}),a=a.replace(/<(.*?)('|")(.*?)('|")>/g,function(e){return e.replace(/'(.*?)'/g,"<span class='vl'>'$1'</span>").replace(/"(.*?)"/g,"<span class='vl'>\"$1\"</span>")}),a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/([\{\}\[\]\:\;\,]+)/g,"<span class='pn'>$1</span>").replace(/\!important/gi,"<span class='im'>!important</span>")}),a=a.replace(/\/\*([\w\W]+?)\*\//gm,"<span class='cm'>/*$1*/</span>"),e.innerHTML="<code>"+a+"</code>",hr.style.display="block",rt.style.display="block"}else hr.style.display="none",rt.style.display="none"}function compressCSS(e){var a=get(e),c=/@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/gi,n=a.value,t=n.length;n=sa.checked||sc.checked?n.replace(/\/\*[\w\W]*?\*\//gm,""):n.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm,"\n$2\n"),n=n.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g,"$2"),n=sc.checked?n:n.replace(/\}(?!\})/g,"}\n"),n=bi.checked?n.replace(c,function(e){return e.replace(/\n+/g,"\n ")}):n.replace(c,function(e){return e.replace(/\n+/g,"")}),n=bi.checked&&!sc.checked?n.replace(/\}\}/g,"}\n}"):n,n=bi.checked&&!sc.checked?n.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g,"@$1$2{\n "):n,n=cm.checked?n.replace(/;\}/g,"}"):n.replace(/\}/g,";}").replace(/;+\}/g,";}").replace(/\};\}/g,"}}"),n=n.replace(/\:0(px|em|pt)/gi,":0"),n=n.replace(/ 0(px|em|pt)/gi," 0"),n=n.replace(/\s+\!important/gi,"!important"),n=n.replace(/(^\n+|\n+$)/,""),a.value=n,hr.innerHTML="/* "+(t-n.length)+" of "+t+" unused characters has been removed. */\n"+n.replace(/</g,"<").replace(/>/g,">"),highlightCode(hr)}function clearField(e){var a=get(e);a.value="",a.focus()}function selectAll(e){get(e).focus(),get(e).select()}var hc=get("highlightCode"),sa=get("stripAllComment"),sc=get("superCompact"),cm=get("keepLastComma"),bi=get("betterIndentation"),bs=get("breakSelector"),tt=get("toTab"),to=get("tabOpt").getElementsByTagName("input"),sb=get("spaceBetween"),ip=get("inlineSingleProp"),rs=get("removeLastSemicolon"),il=get("inlineLayout"),si=get("singleBreak"),hr=get("highlightedResult"),rt=document.getElementsByTagName("h2")[1];
</script>
</div>

يُمكنك تنسيق شكل الأداة كما تريدون
بعد تنسيق الكود كما تريد يُمكنك الضغط على نشر الصفحة ومبروك عليك الأداة.
لا تنسى مُشاركة الموضوع مع اصدقائك ودعمنا عبر التعليقات.

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

noreply@blogger.com (مدون محترف) — Sat, 26 Dec 2015 12:30:00 +0000

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

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

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

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

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

معاينة

أولا: سوف نبحث عن الوسم </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>

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

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

noreply@blogger.com (مدون محترف) — Fri, 11 Dec 2015 20:58:00 +0000

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

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

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

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

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

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

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

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