كيفية حجب مستخدم أو أكثر من الدخول على مدونات بلوجر ووردبريس وجوملة

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

عندما يدخل المدونة أحد المستخدمين المُدرَج الـ ip الخاص بهم فى القائمة السوداء أو black list داخل الكود الذي سنستخدمه ستظهر له رسالة تقول "عفوا..قد تم حجبك من الدخول الى مدونتنا وسيتم توجيهك الى صفحة أخرى الأن", الكود الذي سنستخدمه يمكن استخدامه على بلوجر ووردبريس وجوملة وغيرهم. ووجب التنبيه على ان الكود يُبطئ تحميل المدونة قليلا. 

أولا: الدخول الى لوحة التحكم ثم قالب ثم تحرير HTML والبحث عن الوسم التالى

</head>

ثانيا: نضع فوقه أو قبله الكود التالى بعد التعديل

التعديلات:

Your-IP-Here  استبدلها بعنوان الأى بى الخاص بك ويجب كتابته والا لا فائدة من الكود ويمكنك معرفته منwhatismyip.com

baklola2.blogspot.com  استبدلها برابط الصفحة التى تريد توجيه المستخدم المحجوب اليها

Banned-IP-1 Banned-IP-2 Banned-IP-3  استبدلهم بأرقام الأى بى الخاص بالمستخدمين الذين سيتم حجبهم. 

<script>
var ip = 'Your-IP-Here';
function banned(){
alert("عفوا..قد تم حجبك من الدخول الى مدونتنا وسيتم توجيهك الى صفحة أخرى الأن");
history.go(-1);
window.location.replace("http://www.baklola2.blogspot.com")
}
function ban(){
if (ip == "Banned-IP-1" || ip == "Banned-IP-2" || ip == "Banned-IP-3"   )  {
banned();
}}ban();
</script>

يتميز الكود الاسبق بامكانية جعل عدد الأى بيهات لا نهائي. وأخيرا شكر خاص للرائع  Syed Faizan Aliعلى تطوير الكود.

Résuméabuiyad

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

مرحبا بكم .. فى مدونه محمد بقلوله

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

أولا: عليك تسجيل الدخول ثم التوجه الى قالب ثم تحرير HTML . ثم نضع مؤشر الماوس في اي مكان داخل القالب ثم نضغط (Ctrl+F) ونبحث عن هذا الوسم ]]></b:skin>

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

الكود المستخدم:

/*Reblog
----------------------------------------------- */
.reblog {

color: #fff;

font-weight: bold;

font-size: 14px;

text-shadow: 1px 1px 0 #75a43b;

padding: 5px 10px;

display: inline;

border: 1px solid #69963b;

background: #7cc237;

border-radius: 2px;

background: -webkit-gradient(linear, left top, left bottom, from(#afd95b), to(#7cc237));

background: -webkit-linear-gradient(top, #afd95b, #7cc237);

background: -moz-linear-gradient(top, #afd95b, #7cc237);

background: -ms-linear-gradient(top, #afd95b, #7cc237);

background: -o-linear-gradient(top, #afd95b, #7cc237);

box-shadow: inset 0 1px 0 #d0e8a0;

-webkit-box-shadow: inset 0 1px 0 #d0e8a0;

-moz-box-shadow: inset 0 1px 0 #d0e8a0;

-o-box-shadow: inset 0 1px 0 #d0e8a0;

}

.blogthis a {

color: #fff; text-decoration:none;}

a.reblog:hover {

color: #fff;

background: #7cc62b;

background: -webkit-gradient(linear, left top, left bottom, from(#b5e261), to(#7cc62b));

background: -webkit-linear-gradient(top, #b5e261, #7cc62b);

background: -moz-linear-gradient(top, #b5e261, #7cc62b);

background: -ms-linear-gradient(top, #b5e261, #7cc62b);

background: -o-linear-gradient(top, #b5e261, #7cc62b);

text-decoration:none;

}

ثم نبحث عن الوسم التالى بنفس الطريقة السابقة <div class='post-footer'>  سوف نجد أكثر من وسم بهذه الصيغة نذهب للوسم الثاني ونلصق الكود التالي تحته مباشرة وغير الكلمة المظللة باللون الاصفر كما تريد وليكن "أعد نشر هذه التدوينة داخل مدونتك"

<div class="reblogme"><li class='blogthis'><b:if cond='data:top.showBlogThisButton'>
<a class='reblog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, &quot;_blank&quot;, &quot;height=270,width=475&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>أعد نشر التدوينة</a></b:if>
 </li></div>

احفظ القالب ومبارك عليك اضافة زر Reblog لنشر تدويناتك داخل مدونات بلوجر الأخرى بضغطة زر.

Résuméabuiyad

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

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

لأضافة الكود لمدونتك فقط تحتاج لتسجيل دخولك ثم تذهب الى التخطيط  Layout بعدها تضغط اضافة أداة ثم HTML/Javascript.

قم بنسخ الكود التالى في المحتوى الخاص ب HTML/Javascript ودع العنوان فارغا.

<!--

Change your blog background by the time

-->

<script type='text/javascript'>

<!--

 var now = new Date();

 var hours = now.getHours();

   //16-18 ساعة

if (hours >= 16 && hours <= 18){

document.body.style.background="#3399FF url('http://2.bp.blogspot.com/-CFlHD7yvSl8/U3FRHwIY1hI/AAAAAAAABtQ/NV8Nq0k05wU/s1600/2.jpg') fixed top repeat-x";

   //19-21 ساعة

 } else if (hours >= 19 && hours <= 21){

document.body.style.background="#99CC66 url('http://3.bp.blogspot.com/-Jzs3xwYRy4s/U3FSeNbncBI/AAAAAAAABuU/dSyFcbfRzwU/s1600/3.jpg') fixed top repeat-x";

   //22-4 ساعة

 } else if (hours >= 22 || hours <= 4){

document.body.style.background ="#993399url('http://1.bp.blogspot.com/-WqPCH0CSpa8/U3FRtG7CywI/AAAAAAAABto/Q-Lj-6yTCBM/s1600/4.png') fixed top repeat-x";

   //5-6 ساعة

 } else if (hours >= 5 && hours <= 6){

document.body.style.background="#CC99CC url('http://1.bp.blogspot.com/-QCOac5C7_pQ/U3FR-4I_KiI/AAAAAAAABtw/5cVCl8xXOnk/s1600/5.jpg') fixed top repeat-x";

   //7-8 ساعة

 } else if (hours >= 7 && hours <= 8){

document.body.style.background="#9966CC url('http://3.bp.blogspot.com/-KCFFulPwpCM/U3FSNSixVGI/AAAAAAAABuA/1XVYnjuOcrU/s1600/6.jpg') fixed top repeat-x";

   //9-15 ساعة                       

 } else if (hours >= 9 && hours <= 15){

document.body.style.background="#868579 url('http://3.bp.blogspot.com/-Sixq9qoD9og/U3FSLlAEeTI/AAAAAAAABt4/2EvWQ0m9goA/s1600/7.jpg') fixed top repeat-x";

 }

//-->

<!--
www.sweup.com
-->

</script>

يمكنك تغير ما هو معلم بالالوان بما يناسبك أو يناسب مدونتك

اللون الاصفر  الساعة (من 1 الى 24) ومنها تتحكم فى عدد ساعات ظهور الخلفية.
 اللون الاحمر لون الخلفية وهي ضرورية اذا كان الصورة من نوع png اي شفافة ويمكنك الإستعانة بمولد الألوان لمدونة أبو إياد.
اللون الازرق رابط الصورة التي تريد ان تظهر في هذا التوقيت.

بذلك قد انتهينا من تركيب الإضافة. ويمكن للمهتمين بمجال الجافا سكربت متابعة الدرس تفصيلا : (خاص بالمهتمين فقط)

آلية عمل الكود :

اول خطوة يلزمنا نصل للتوقيت الموجود في جهاز الحاسوب الخاص بك وذلك يكون عن طريق الكلاس Date وهو الكلاس الخاص بالوصول للتاريخ بكافة أشكاله ساعة ,يوم,دقيقة..الخ ,الذي يخصنا هو الساعة ولذلك سنستعين بالدالة الخاصة بجلب الساعة وهى getHours();

var now = new Date();

var hours = now.getHours();

قمنا بعمل object باسم now  من الـ class الخاص بالوقت Date ثم قمنا بعمل متغير باسم hours وتم تخزين الساعة بداخله عن طريق الدالة الخاصة بجلب الساعة getHours

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

if (hours >= 16 && hours <= 18){ document.body.style.background="#3399FF url('http://2.bp.blogspot.com/-CFlHD7yvSl8/U3FRHwIY1hI/AAAAAAAABtQ/NV8Nq0k05wU/s1600/2.jpg') fixed top repeat-x";

المثال السابق يعطي أمر عبر الدالة hours بحيث اذا كان الوقت أكبر من أو يساوى 16 وأقل من أو يساوى 18 وقتها يجعل صورة الخلفية و اللون كما فى الكود السابق. ويتم الوصول للخلفية عن طريقة الـ document الذي يعتبر طريقة وصول في الـ JavaScript الي اي عنصر داخل القالب.

الان وقد انتهينا ..اتمنى ان يكون الشرح قد افادكم واي سؤال حول الموضوع يمكنك ترك تعليقا وسوف نرد عليك بأسرع وقت ان شاء الله.شكرا للرائع Dian chyta لتطوير الكود. انتظروا منى موضوعات حصرية كثيرة. كان معكم عبد الله أبو دقة.

Résuméabuiyad

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

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

اولا علينا التسيجل في بلوجر ◄ القالب ◄تحرير HTML ◄  نبحث(CTRL+F) عن هذا الوسم ]]></b:skin> ونضع اكواد الCSS فوقه مباشرة(قبله)

اكواد الCSS المستخدمة

div.flip{

position:relative;

width: 300px;

height: 250px;

-webkit-perspective: 600px; 

-moz-perspective: 600px;

-o-perspective: 600px;

perspective: 600px;

}

div.flip div.rotate{

width: 100%;

height: 100%;

-moz-transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

transform-style: preserve-3d;

-moz-transition: all 0.6s ease-in-out 0.3s;

-webkit-transition: all 0.6s ease-in-out 0.3s;

-o-transition: all 0.6s ease-in-out 0.3s;

transition: all 0.6s ease-in-out 0.3s;

}

div.flip div.rotate > *{ 

position:absolute;

width: 100%;

height: 100%;

-moz-backface-visibility: hidden;

-webkit-backface-visibility: hidden;

-o-backface-visibility: hidden;

backface-visibility: hidden;

}

div.flip div.rotate > div{

-webkit-box-sizing: border-box; 

-moz-box-sizing: border-box;

box-sizing: border-box;

padding: 8px;

background: #eee;

}

div.rotate.x *:nth-child(2){

-moz-transform: rotateX(180deg);

-webkit-transform: rotateX(180deg);

-o-transform: rotateX(180deg);

transform: rotateX(180deg);

}

div.flip:hover > div.rotate.x{

-moz-transform: rotateX(180deg);

-webkit-transform: rotateX(180deg);

-o-transform: rotateX(180deg);

transform: rotateX(180deg);

}

div.rotate.y *:nth-child(2){ 

-moz-transform: rotateY(180deg);

-webkit-transform: rotateY(180deg);

-o-transform: rotateY(180deg);

transform: rotateY(180deg);

}

div.flip:hover > div.rotate.y{

-moz-transform: rotateY(180deg);

-webkit-transform: rotateY(180deg);

-o-transform: rotateY(180deg);

transform: rotateY(180deg);

}

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

- اذا اردت ان تدور الصورتين حول محور X (بشكل جانبي ) تستخدم الكود التالي

<div class="flip" style="width: 540px; height: 300px; display: inline-block;">
<div class="rotate x">
 <img src="رابط الصورة الاولى هنا">
 <img src="رابط الصورة الثانية هنا">
</div>
</div>

-  اذا اردت ان تدور الصورتين حول محور Y (بشكل راسي ) تستخدم الكود التالي

<div class="flip" style="width: 540px; height: 300px; display: inline-block;">
<div class="rotate y">
 <img src="رابط الصورة الاولى هنا">
 <img src="رابط الصورة الثانية هنا">
</div>
</div>

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

Résuméabuiyad

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

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

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

والأن بعد معاينتها هل أعجبتك؟ اذا أعجبتك ستمر معنا لأهم أول خطوة يجب القيام بها هي تحميل هذا الملف: jquery.beforeafter.min.js ورفعه على أي إستضافة أو على google codeمثلا أو على dropbox نفسه، أنصحكم بتحميله وإعادة رفعه في حالة ما قمت بحذف بالخطأ أو شئ من هذا القبيل لن تلتحق بكم أي أضرار.

بعد القيام بالخطوة السابقة سنقوم بالمرور إلى الخطوة الثانية والقيام بالتالي:

     1.  الدخول الى لوحة التحكم www.blogger.com
     2.  ثم الدخول على القالب Template
     3.  ثم تحرير Html
     4.  ثم البحث (Ctrl+F) عن الوسم

</head>

     5.  أصف فوقه أو قبله الكود التالى مع تغيير الرابط الأحمر برابط الملف الذي رفعناه:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'/>

<script src='https://dl.dropboxusercontent.com/s/5l05j1v1pbur8jh/jquery.beforeafter.min.js' type='text/javascript'/>

<script type='text/javascript'>

$(function(){

$(&#39;#antesydespues1&#39;).beforeAfter({showFullLinks : true});

});

</script>

<script>

(function(i,s,o,g,r,a,m){i[&#39;GoogleAnalyticsObject&#39;]=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,&#39;script&#39;,&#39;//www.google-analytics.com/analytics.js&#39;,&#39;ga&#39;);

ga(&#39;create&#39;, &#39;UA-48685622-1&#39;, &#39;mosawir.com&#39;);

ga(&#39;send&#39;, &#39;pageview&#39;);

</script>

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

<div id='antesydespues1'>
<div><img alt='before' src='رابط الصورة1' width='500' height='291'/></div>
<div><img alt='after' src='رابط الصورة2' width='500' height='291'/></div>
</div>

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

Résuméabuiyad

رسالة مسجلة باللغة العربية للرد على مكالمات نموذج الاتصال الصوتى Usertalk

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

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

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

Résuméabuiyad

القائمة الأفقية الأكثر تطورا Metro UI لمدونات بلوجر بإصدارها الثانى

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

1- الدخول الى قالب ثم تحرير HTML ونقوم بالبحث (CTRL+F) عن الكود التالى 

]]></b:skin>

2- نضع الكود التالى (الكود الخاص بالـCSS) فوق السابق أو قبله

/*===MBL METRO UI Menu==*/
body {
 font-family:sans-serif;
}
a {
 text-decoration:none;
}
.mblmetromenu {
 width:960px;
 margin:auto;
}
@media screen and (max-width:960px) {
 .mblmetromenu {
 width:100%;
 }
}
/* MblMetroMenu */
.MblMetroMenu {
 position:relative;
}
.om-nav {
 position:absolute;
 width:100%;
 z-index:999;
 display:none;
}
.om-ctrlbar {
 width:100%;
 height:48px;
}
.om-ctrlitems {
 margin:auto;
 padding:0px;
 height:48px;
 display:inline-block;
 text-align:center;
}
.om-ctrlitem {
 height:48px;
 width:48px;
 display:none;
 cursor:pointer;
 float:left;
 opacity:0.5;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
 filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om-ctrlitem:hover {
 opacity:0.8;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
 filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om-activectrlitem {
 opacity:1 !important;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
 filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
 width:960px;
 margin:auto;
}
.om-controlitem {
 height:48px;
 cursor:pointer;
}
.om-closenav {
 float:left;
}
.om-movenext {
 float:right;
}
.om-itemholder {
 margin:auto;
 padding:20px 0px;
}
@media screen and (max-width:960px) {
 .om-closenav {
  position:absolute;
  z-index:9999;
  left:0;
  top:0;
 }
 .om-movenext {
  position:absolute;
  z-index:9999;
  right:0;
  top:0;
 }
 .om-controlitems {
  width:100%;
 }
 .om-itemholder {
  width:100%;
 }
 }
.om-centerblock {
 display:inline-block;
}
.om-item {
 display:none;
}
.om-showitem {
 margin:5px;
 float:left;
 display:none;
}
/* END MblMetroMenu */
/* TILE BUTTONS */
/* Standar Buttons */
.tile-bt {
 text-align:center;
 cursor:pointer;
 width:90px;
 height:90px;
}
.tile-bt a {
 display:block;
 padding-top:12px;
 text-decoration: !important;
}
.tile-bt img {
 margin:0 auto 0 auto;
 padding-bottom:5px;
 height:48px;
 width:48px;
 position:relative;
 display:block;
}
.tile-bt span {
 font-size:12px;
 padding-bottom:10px;
 display:block;
}
.tile-bt:active {
 opacity:0.5;
}
/* End Standard Buttons */

/* Large Buttons */
.tile-bt-large {
 width:190px;
 height:90px;
 line-height:90px;
 text-align:center;
 cursor:pointer;
}
.tile-bt-large a {
 display:block;
 text-decoration: !important;
}
.tile-bt-large img {
 vertical-align: middle;
 margin:auto;
 padding:0px;
 position:relative;
 width:48px;
 height:48px;
}
.tile-bt-large span {
 vertical-align: middle;
 display:inline;
}
.tile-bt-large:active {
 opacity:0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile-bt-extralarge {
 text-align:center;
 cursor:pointer;
 width:190px;
 height:190px;
}
.tile-bt-extralarge a {
 display:block;
 padding-top:52px;
 text-decoration: !important;
}
.tile-bt-extralarge img {
 margin:0 auto 0 auto;
 padding-bottom:22px;
 height:80px;
 width:80px;
 position:relative;
 display:block;
}
.tile-bt-extralarge span {
 font-size:14px;
 padding-bottom:20px;
 display:block;
}
.tile-bt-extralarge:active {
 opacity:0.5;
}
/* End Extralarge Buttons */
/* END TILE BUTTONS */
/* SHADOW LIST */
.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {
 /*display:inline-block;*/
}
.shadow-white:hover {
 box-shadow:0px 0px 6px 3px #fff;
 -webkit-box-shadow:0px 0px 6px 3px #fff;
 -moz-box-shadow:0px 0px 6px 3px #fff;
 -o-box-shadow:0px 0px 6px 3px #fff;
 -ms-box-shadow:0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
 box-shadow:0px 0px 6px 3px #38D1F7;
 -webkit-box-shadow:0px 0px 6px 3px #38D1F7;
 -moz-box-shadow:0px 0px 6px 3px #38D1F7;
 -o-box-shadow:0px 0px 6px 3px #38D1F7;
 -ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.shadow-green:hover {
 box-shadow:0px 0px 6px 3px #AACA37;
 -webkit-box-shadow:0px 0px 6px 3px #AACA37;
 -moz-box-shadow:0px 0px 6px 3px #AACA37;
 -o-box-shadow:0px 0px 6px 3px #AACA37;
 -ms-box-shadow:0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
 box-shadow:0px 0px 6px 3px #E81750;
 -webkit-box-shadow:0px 0px 6px 3px #E81750;
 -moz-box-shadow:0px 0px 6px 3px #E81750;
 -o-box-shadow:0px 0px 6px 3px #E81750;
 -ms-box-shadow:0px 0px 6px 3px #E81750;
}
.shadow-black:hover {
 box-shadow:0px 0px 6px 3px #444;
 -webkit-box-shadow:0px 0px 6px 3px #444;
 -moz-box-shadow:0px 0px 6px 3px #444;
 -o-box-shadow:0px 0px 6px 3px #444;
 -ms-box-shadow:0px 0px 6px 3px #444;
}
/* END SHADOW LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }
/* End Solid Colors */
/* MISC */
.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
 color:#fff;
}
.dark-text {
 color:#1e1e1e;
}
.gradient {
 background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
 background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}
.margin-5 { margin:5px; } 

3- نقوم بالبحث عن content.width ونقوم بتغيير عرض الصفحة لـ 1130 وهذا لنضمن ظهور الاضافة بكامل محتوياتها بشكل سليم واذا لم تفضل تغيير عرض الصفحة لمدونتك يمكنك الاستغناء عن جزء من الإضافة مثلا. كما تحب! - اذا واجهت مشكلة ما ضعها فى تعليقك وسنساعدك إن شاء الله -

4- نقوم بحفظ القالب

5- نذهب الأن الى تخطيط Layout ثم نضيف أداة Java Script تحت هيدر المدونة تماما كما بالصورة التالية ونضع بداخلها الكود التالى - لا تنسى يمكنك بسهولة التعديل عليه من حيث الكلمات مثل الرئيسية أو فيسبوك وغيرها - ويمكنك أيضا تغيير رمز # بالرابط المراد توجيه الزائر اليه.

<!-- mblmetromenu --><div class="mblmetromenu">
<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatright MblMetroMenu"> <a href="http://www.abu-iyad.com/" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVtWnVIET-2G6atwXTOZuJpDjTCKaoEokclAUVyC36qvVCCw2zy5HhFPlucB4q-JSMeCJLzY2MSzXK84uGz7K6pXVF56fVbwxJVzqDEiM4016A1xBwwzRJi5ok3U6aS-DELUxzx7JqPlk/s1600/home.png" alt="" /><span class="light-text">الرئيسية</span></a></div>

<div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVDxNKkwVytJj6CyLL0apR7AmCwFacuNu_L-fVNAak5FL1w2hqkatZ86EBr2tYyfY9jUx_LrzENz47X7xFl_UDKEuYgnZi2QbvPAVzCm6_WysNAQxZfYY7hQvWJLFd34SW8B4jCPs66Tc/s1600/messanger.png" alt="" /><span class="light-text">عن المدونة</span></a></div>     

<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUPKqnZhQA_yjmIjFSF-uJULvwaf-aGfxBdLzR1ueNl1ZRN6Tv-2b3fufIQKAEcwcPDr3p3DIXHOZ9HGrfQp7CCWYfV0_qnRVVI2QvM_ZnKG0WJsHH4U82ZvkKfQgmeZlKAs-HATUz00I/s1600/rss.png" alt="" /><span class="light-text">الخلاصات</span></a></div>     

<div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSOs2sH8Xb8XgGkSZCIogCKvPd39KPG0WKZ0rIblIyqkMX6kO5-Y5e1YusBg8FY4IQo0LrhB3V5lL7MLGaPebsATqj5J04Zn64QS_Dd4iSnnvZ9D16eeTk8jq4S4A7UpYeR_w2Qz-Tg4s/s1600/search.png" alt="" /><span class="light-text">البحث</span></a></div>        

<div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0jdS8g5mkaUKMi5sqQAFR2k52uw05UhWGrsI05fGUTV5dW1oBv8fDLufiSQXZe23JcUMTzlJ0qibjAuYdxErapqIneVzYvipfsW8Rx055-z1IphwZ8PpU5txIO5b0zbx_p0iS7kjZAA8/s1600/mail.png" alt="" /><span class="light-text">اتصل بنا</span></a></div>       

<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWOx6ctBd9L8l4Owy-gUzOQrwONgYQZmKYV03aAIEZOXbR1hw9FHg9ILFbvB28acBXDgwIwT8vRCSIO7mTaoqlVtPbPAk3UOtc4BW-__UJnwB_kE5DyMobQ1J-ZmK8E4EY37j881fr3hY/s1600/help.png" alt="" /> <span class="light-text">مساعدة</span></a> </div>       

<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-un04YSY3d1RWzT1-JLdJE3cfeXPeye5pS-Z51t_uWbNJg2fEHqVDIIgT7YY6i3AkSJ0leRfA9k-4V9-wFXXiLz8zmviCRjg9YDU00yUNX1yJgfXw-ThB-Z3tKEH1L6mwBg1PciaJHuw/s1600/youtbe.png" alt="" /><span class="light-text">يوتيوب</span></a></div>       

<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3fVcEvjCKlvpztDm_m0d3Jvh6cBIQxeYC_BO9Pc0mDkcHSOQdt1wingbSE28sDsAmbI-IS4KpFHXB4Bn8aQPOsg7-UR6PIoibbVJS2xkeM_6y41_HvYBAfrvMMWuZdRe000WQn0KOgBw/s1600/face.png" alt="" /><span class="light-text">فيسبوك</span></a></div>       

<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDKtCVDL3XjezRbj4U2CZfLG82Qu6FMx_nQDUVGeqXjZV9quyOmvipG_61FMC4hn3kDsVFdzjvEsg_Z5yhAERE7RSu-aYtF5LjbFdW9nsOZA8NDo9Xs0N02b-7dwYT76119QdsvtS7ygg/s1600/photo.png" alt="" /><span class="light-text">صور</span></a></div>       

<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnSNHCVwi-pokBEclVKzB_07O2R1rzQDuBKG0Rn41U-R8uFyCxgDJWJ3L2Z0CLRSr3Esl5Rs9HikaMnpMe5vbo1QPxcNhzCIvloDKiFdMSGcAAQnvW1xAETuxkGU_pV5O1ak3OmbYTxXU/s1600/music.png" alt="" /><span class="light-text">قرآن كريم</span></a> </div>       

<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatright MblMetroMenu"><a href="http://www.abu-iyad.com/2010/01/Team-Work.html" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkpM8LJElXf4Q4qd93ykic8RUA79wlmxSyCk2rWYIUv8bB5bHzanTmt0euRGjB-s8ABr-BjVQzgGXKtSLLuu19UKm4wYCHjzqfP0-U_a2lEpyqtioNxO9ZeBzpfbaXms4FpXYNUEPV3GE/s1600/MBL.png" alt="" /><span class="light-text">فريق العمل</span></a></div> <!-- End MblMetroMenu -->  </div><!-- END mblmetromenu -->

6- قم بحفظ الأداة وقم بمعاينة قالبك الأن.

لاحظ: يمكنك التعديل على ألوان القائمة بكل سهولة عن طريق الكود الخاص بالـ CSS. وأى سؤال يمكنك التعليق وسندعمك بالحل إن شاء الله. الى اللقاء.

Résuméabuiyad