201: October 2015

Wednesday, October 28, 2015

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

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

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

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

معاينة تحميل

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

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

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

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

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

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

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

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

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

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

Monday, October 26, 2015

قالب Ecstacy معرب

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

معاينة تحميل

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

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

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

Thursday, October 22, 2015

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

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

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

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

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

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

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

معاينة

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

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

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

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

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

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

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

الإعدادت

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

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

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

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

Tuesday, October 20, 2015

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

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

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

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

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

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

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

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

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

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

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

وتجربة موفقة

Wednesday, October 14, 2015

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

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

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

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

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

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

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

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

Tuesday, October 13, 2015

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

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

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

معاينة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Monday, October 12, 2015

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

Open Extrnal Links in New Tab and Make it Nofollow

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

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

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

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

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

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

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

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

Sunday, October 11, 2015

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

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

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

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

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

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

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

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

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

الطريقة الصحيحة لتفعيل HTTPS في بلوجر

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

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

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

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

هناك ثلاث فوائد رئيسية لاستخدام HTTPS بدلاً من HTTP للوصول إلى مدونتك:

- يساعد على التأكد من أن يفتح الزائرون الموقع الإلكتروني الصحيح ولا يتم إعادة توجيهم إلى موقع إلكتروني ضار.

- يساعد على كشف محاولات أي مهاجم لتغيير أي بيانات مرسلة من Blogger إلى الزائر.

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

أو سرقة معلوماتهم. عند تمكين HTTPS، يمكن للزائرين الوصول إلى الإصدار المشفر من مدونتك

لتمكين HTTPS:

سجل الدخول إلى Blogger.
حدد المدونة المراد تحديثها.
في القائمة اليمنى، انقر على الإعدادات > أساسي > إعدادات HTTPS.
في توفر HTTPS، حدد نعم.

ننصحك بقرائة الموضوع التالي: كيفية إعادة توجيه الروابط من Http إلى Https في مدونات بلوجر ذات النطاق المجاني
و لو تم ملاحظة رابط مدونتنا إنه اصبح في بدايته https://

المصدر: support.google

Wednesday, October 7, 2015

اضافة شريط آخر الأخبار المتحرك بشكل احترافي

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

و لا غِنى عنها بالنسبة لهم فالشريط يقوم بعرض عناوين آخر و أحدث المواضيع بشكل مُتحرك

و المميز في هذا الشريطإنه مُلفت للنظر بسبب ألوانه بحيث يتغير لون مربع الأقسام بشكل تلقائي مما يؤدي إلى لفت نظر الزائر

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

يُمكنك معاينتها من خلال الزر التالي

معاينة

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

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

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

/* CSS ticker */
.ticker {overflow: hidden;}
.ticker .title {float: right;width: 150px;height: 40px;line-height: 40px;text-align: center;color: #FFFFFF;background: #2c97de;margin: 7px 6px 7px 0px;}
.post-tag{display: inline-block;height: 20px;line-height: 20px;padding: 0px 5px;font-size: 13px;margin-left: 4px;color: #fff !important;font-family: Droid Arabic Kufi, cursive;background-color: #B565BE;}
.ticker .ticker-icon {float: right;margin-right: 10px;}
.ticker .ticker-icon i {margin-left: 15px;display: inline-block;font-size: 18px;}
.ticker .title h6 {float: right;line-height: 40px;font-size: 13px;font-weight: 700;font-family: droid arabic kufi,cursive;}
.ticker .tickercontainer {width: 84%;margin: 0;overflow: hidden;float: right;height: 40px;}
.ticker .tickercontainer .mask {position: relative;top: 8px;overflow: hidden;height: 40px;}
.ticker ul.newsticker {position: relative;right: 100px;list-style-type: none;margin: 0;padding: 0;height: 40px;}
.ticker ul.newsticker li {font-size: 12px;float: right;height: 40px;margin-left: 15px;}
.ticker ul.newsticker a {white-space: nowrap;padding: 0 7px;color: #FFFFFF;height: 40px;font-size:12px;font-weight:400;}
a.post-tag {line-height: 21px;}
.newsticker li:nth-child(1) a.post-tag{background-color: #2C97DE;}
.newsticker li:nth-child(2) a.post-tag{background-color: #A557A5;}
.newsticker li:nth-child(3) a.post-tag{background-color: #1E73BE;}
.newsticker li:nth-child(4) a.post-tag{background-color: #DD3333;}
.newsticker li:nth-child(5) a.post-tag{background-color: #E94B35;}
.newsticker li:nth-child(6) a.post-tag{background-color: #1EBE65;}
.newsticker li:nth-child(7) a.post-tag{background-color: #F7B625;}
.newsticker li:nth-child(8) a.post-tag{background-color: #479123;}
.newsticker .recent-title{display: inline-block;}
.ticker ul.newsticker span {margin: 0 0 0 10px;}
.ticker ul.newsticker .sep {display: inline-block;width: 6px;height: 7px;margin: 0 40px;}
.ticker-section {margin-right: 20px;width: 96.3%;overflow: hidden;background: #363b3f;-webkit-box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);-moz-box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);}
.PageList .selectnav {margin-top: 8px;}
.jari { color: #fff; position: relative; right: 5px; }

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

@media screen and (max-width:1066px) {
.ticker .tickercontainer {width: 80%;}}

@media screen and (max-width:960px) {
.ticker .tickercontainer {width: 75%;}}

@media only screen and (max-width:768px){
.ticker .tickercontainer {width: 68%;}}

@media only screen and (max-width:640px){
.ticker .title{display:none}
.ticker .tickercontainer {width: 95%;}}

مُلاحظة

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

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

<script type='text/javascript'>
//<![CDATA[
// News Ticker plugin ~ URL: http://jonmifsud.com/open-source/jquery/jquery-webticker
(function(e){function n(e,t){var s=e.data("settings");if(typeof t==="undefined")t=false;if(t){i(e)}var o=r(e);e.animate(o.css,o.time,"linear",function(){e.css(s.direction,"0");n(e,true)})}function r(e){var t=e.data("settings");var n=e.children().first();var r=Math.abs(-e.css(t.direction).replace("px","").replace("auto","0")-n.outerWidth(true));var t=e.data("settings");var i=r*1e3/t.speed;var s={};s[t.direction]=e.css(t.direction).replace("px","").replace("auto","0")-r;return{css:s,time:i}}function i(e){var t=e.data("settings");e.css("transition-duration","0s").css(t.direction,"0");var n=e.children().first();if(n.hasClass("webticker-init"))n.remove();else e.children().last().after(n)}function s(e,t){if(typeof t==="undefined")t=false;if(t){i(e)}var n=r(e);var s=n.time/1e3;s+="s";e.css(n.css).css("transition-duration",s)}function o(t,n,r){var i;e.get(t,function(t){var s=e(t);s.find("item").each(function(){var t=e(this),n={title:t.find("title").text(),link:t.find("link").text()};listItem="<li><a href='"+n.link+"'>"+n.title+"</a></li>";i+=listItem});r.webTicker("update",i,n)})}function u(t){var n=t.data("settings");t.width("auto");var r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});if(r<t.parent().width()||t.children().length==1){if(n.duplicate){itemWidth=Math.max.apply(Math,t.children().map(function(){return e(this).width()}).get());while(r-itemWidth<t.parent().width()||t.children().length==1){var i=t.children().clone();t.append(i);r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});itemWidth=Math.max.apply(Math,t.children().map(function(){return e(this).width()}).get())}}else{var s=t.parent().width()-r;s+=t.find("li:first").width();var o=t.find("li:first").height();t.append('<li class="ticker-spacer" style="width:'+s+"px;height:"+o+'px;"></li>')}}if(n.startEmpty){var o=t.find("li:first").height();t.prepend('<li class="webticker-init" style="width:'+t.parent().width()+"px;height:"+o+'px;"></li>')}r=0;t.children("li").each(function(){r+=e(this).outerWidth(true)});t.width(r+200);widthCompare=0;t.children("li").each(function(){widthCompare+=e(this).outerWidth(true)});while(widthCompare>=t.width()){t.width(t.width()+200);widthCompare=0;t.children("li").each(function(){widthCompare+=e(this).outerWidth(true)})}}var t=function(){var e=document.createElement("p").style,t=["ms","O","Moz","Webkit"];if(e["transition"]=="")return true;while(t.length)if(t.pop()+"Transition"in e)return true;return false}();var a={init:function(r){r=jQuery.extend({speed:50,direction:"right",moving:true,startEmpty:true,duplicate:false,rssurl:false,hoverpause:true,rssfrequency:0,updatetype:"reset"},r);return this.each(function(){jQuery(this).data("settings",r);var i=jQuery(this);i.addClass("newsticker");var a=i.wrap("<div class='mask'></div>");a.after("<span class='tickeroverlay-right'> </span><span class='tickeroverlay-left'> </span>");var f=i.parent().wrap("<div class='tickercontainer'></div>");u(i);if(r.rssurl){o(r.rssurl,r.type,i);if(r.rssfrequency>0){window.setInterval(function(){o(r.rssurl,r.type,i)},r.rssfrequency*1e3*60)}}if(t){i.css("transition-duration","0s").css(r.direction,"0");s(i,false);i.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend",function(t){if(!i.is(t.target)){return false}s(e(this),true)})}else{n(e(this))}if(r.hoverpause){i.hover(function(){if(t){var n=e(this).css(r.direction);e(this).css("transition-duration","0s").css(r.direction,n)}else jQuery(this).stop()},function(){if(jQuery(this).data("settings").moving){if(t){s(e(this),false)}else{n(i)}}})}})},stop:function(){var n=e(this).data("settings");if(n.moving){n.moving=false;return this.each(function(){if(t){var r=e(this).css(n.direction);e(this).css("transition-duration","0s").css(n.direction,r)}else e(this).stop()})}},cont:function(){var r=e(this).data("settings");if(!r.moving){r.moving=true;return this.each(function(){if(t){s(e(this),false)}else{n(e(this))}})}},update:function(t,n,r,i){n=n||"reset";if(typeof r==="undefined")r=true;if(typeof i==="undefined")i=false;if(typeof t==="string"){t=e(t)}var s=e(this);s.webTicker("stop");var o=e(this).data("settings");if(n=="reset"){s.html(t);s.css(o.direction,"0");u(s)}else if(n=="swap"){s.children("li").addClass("old");for(var a=0;a<t.length;a++){id=e(t[a]).data("update");match=s.find('[data-update="'+id+'"]');if(match.length<1){if(r){if(s.find(".ticker-spacer:first-child").length==0&&s.find(".ticker-spacer").length>0){s.children("li.ticker-spacer").before(t[a])}else{s.append(t[a])}}}else s.find('[data-update="'+id+'"]').replaceWith(t[a]);}s.children("li.webticker-init, li.ticker-spacer").removeClass("old");if(i)s.children("li").remove(".old");stripWidth=0;s.children("li").each(function(){stripWidth+=e(this).outerWidth(true)});s.width(stripWidth+200)}s.webTicker("cont")}};e.fn.webTicker=function(t){if(a[t]){return a[t].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof t==="object"||!t){return a.init.apply(this,arguments)}else{e.error("Method "+t+" does not exist on jQuery.webTicker")}}})(jQuery);
//]]>
</script>
<script>
//<![CDATA[
$(".ticker .jari").each(function () {
var e = $(this).text();
if (e.match("recent")) {
$.ajax({
   url: "/feeds/posts/default?alt=json-in-script&max-results=6",
   type: "get",
   dataType: "jsonp",
   success: function (e) {
    var t = "";
    var n = "<ul>";
    for (var r = 0; r < e.feed.entry.length; r++) {
     for (var i = 0; i < e.feed.entry[r].link.length; i++) {
      if (e.feed.entry[r].link[i].rel == "alternate") {
       t = e.feed.entry[r].link[i].href;
       break
      }
     }
     var s = e.feed.entry[r].title.$t;
     var o = e.feed.entry[r].category[0].term;
     n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"
    }
    n += "</ul>";
    $(".ticker .jari").each(function () {
     $(this).html(n);
     $(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');
     $(this).removeClass("widget-content").addClass("layout-content");
     $(this).find("ul").webTicker();
     $("p.trans").each(function () {
      var e = $(this).text();
      var t = $(this).attr("data-tran");
      $("#pages-wrapper *").replaceText(e, t)
     })
    })
   }
})
} else {
$.ajax({
   url: "/feeds/posts/default/-/" + e + "?alt=json-in-script&max-results=10",
   type: "get",
   dataType: "jsonp",
   success: function (e) {
    var t = "";
    var n = "<ul>";
    for (var r = 0; r < e.feed.entry.length; r++) {
     for (var i = 0; i < e.feed.entry[r].link.length; i++) {
      if (e.feed.entry[r].link[i].rel == "alternate") {
       t = e.feed.entry[r].link[i].href;
       break
      }
     }
     var s = e.feed.entry[r].title.$t;
     var o = e.feed.entry[r].category[0].term;
     n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"
    }
    n += "</ul>";
    $(".ticker .jari").each(function () {
     $(this).html(n);
     $(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');
     $(this).removeClass("widget-content").addClass("layout-content");
     $(this).find("ul").webTicker();
     $("p.trans").each(function () {
      var e = $(this).text();
      var t = $(this).attr("data-tran");
      $("#pages-wrapper *").replaceText(e, t)
     })
    })
   }
})
}
});
//]]>
</script>

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

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

<div class='clear'/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='ticker ticker-section' id='ticker'>
   <div>
     <div>
<div class='content-wrap container-wrapper '>
<div class='title second-color-bg '>
        <div class='ticker-icon'> <i class='fa fa-spinner fa-pulse'/> </div>
        <h6>آخبار الموقع</h6>
      </div>
<div class='jari'>
    recent
</div>
       </div>
</div>
   </div>
</div>
</b:if></b:if>

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

Thursday, October 1, 2015

إنشاء مظهر مستقل لصفحات الخطأ

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

هذا هو الشكل المبسط للنموذج

للتركيب قم بإضافة الكود التالي بعد وسم الفتح <body> مباشرة

<b:if cond='data:blog.pageType == "error_page"'>
<style type="text/css">
body {
background: #777 none repeat scroll 0 0;
color: #fff;
font-size: 20px;
line-height: 2em;
padding: 30px 0;
}
h6 {
color: #fdd702;
display: block;
font-size: 30px;
font-weight: bold;
margin: 0;
padding: 0;
}
.erhomr {
background-color: #444;
border: 1px solid #fff;
box-shadow: 0 0 2px #000;
color: #fff;
display: inline-block;
height: 40px;
padding: 0 20px;
line-height:40px;
text-align: center;
text-decoration: none;
transition: all 0.7s ease 0s;
}
.erhomr:hover {background-color: #000; color:#fff;}
</style>
<center>

<img src="https://lh3.googleusercontent.com/--qV_QKSmy-8/Vg2mqNE7-AI/AAAAAAAAFxM/znKnsbB1a-o/s210-Ic42/sad-smiley-face.png"/>
<h6>صفحة خطأ</h6>
<p>الصفحة التي تبحث (ي) عنها غير موجوده</p>
<a class="erhomr" href="/">الرئيسية</a>

</center>
</b:if>
<b:if cond='data:blog.pageType != "error_page"'>
<div class="cnmu-error-body">

ثم استخدم الكود التالي فوق وسم الإغلاق </body> مباشرة

</div>
</b:if>

تنسيقات على الكود الأول
هذا اللون #777 هو خلفية الصفحة
هذا اللون #fdd702 هو لون كلمة صفحة خطأ
هذا اللون #444 هو لون زر الرئيسية
وهذا #000 لون الزر عند تمرير الماوس
الرابط الوردي هو رابط الصورة
الكلام العربي يمكنك تعديله
ان اردت اضافة جمل اضافية اضف هذا الكود واكتب ما تريد فيه
<p>هنا</p>
كرر الكود كلما اردت سطر اضافي