الأحد، 27 ديسمبر 2015

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

بقلم: BR MED يوم الأحد، 27 ديسمبر 2015 القسم : | 0 التعليقات
أداة إقرأ المزيد أو ما يسمى read more، من الإضافات الضرورية في المدونات أو المواقع مهما كان نوعها، فهي تتحكم في حجم المحتوى الذي يظهر في الصفحة الرئيسية و بحيث يتم تلخيص المواضيع في عدة كلمات أو جمل يتم التحكم فيها من خلال عدد الأحرف التي تريد الظهور، بالأضافة إلى التحكم في إرتفاع و عرض الصور المصغرة للموضيع img thumbnail ، هذا كله يجعل مظهر المدونة متناسق مع عرض عدد أكبر من التدوينات في مساحة أقل ، ليكون سهل على الزائر تصفح المواضيع بكل سهولة.
و لكن المشكلة هي أن أغلب هذه السكريبتات بها أخطاء ، مما يجعل هذه الإضافة تطبق حتى على الصفحات الثابتة بالمدونة ، أما اليوم فقد أصلحت المشكل و قمت بجلب هذا السكريبت السهل في التركيب كي لا أطيل عليكم ننتقل للشرح.

1- نذهب للوحة التحكم بلوجرثم القالب ثم تحرير html . (خد نسخة إحتياطية )
2- ننقر و سط الأكواد ثم ننقر على الزرين ctrl و f دفعة واحدة ، ينبثق مربع البحث و نبحث عن الكود التالي: <data:post.body/> 
ملاحظة : قد تجد أكثر من واحد الأخير هو المقصود.
3- نستبدل الكود الذي وجدناه بهذا الكود :
<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script> <span class='readmore' style='float:right;'><a expr:href='data:post.url'>إقرأ المزيد »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
4- الآن نقوم بالبحث عن الوسم    </head> و نقوم بلصق هذا الكود قبله مباشرة:
<script type='text/javascript'>posts_no_thumb_sum = 490;posts_thumb_sum = 400;img_thumb_height = 160;img_thumb_width = 180;</script><script type='text/javascript'>//<![CDATA[function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID, pURL, pTITLE){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = posts_no_thumb_sum;if(img.length>=1) {imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';summ = posts_thumb_sum;}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}//]]></script>
<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><style type='text/css'>.post-footer {display: none;}.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;} .readmore a {text-decoration: none; }</style></b:if></b:if>

تعديلات على الكود:
بالنسبة لهذا الكود فهو يجعل الصورة في اليمين إذا أردت العكس قم بتغيرright ب left   و قم بتغيرleft ب right .
يمكنك أيضا تغير هذه التفاصيل:
490 عدد أحرف النص في حالة عدم وجود صورة
400 عدد أحرف النص مع وجود الصورة
160 إرتفاع الصورة
180 عرض الصورة
ثم قم بحفظ القالب
إنتهى الدرس أي إستفسار لاتتردد في ترك تعليق ، دمتم بود .
إقرأ البقية

السبت، 6 ديسمبر 2014

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

بقلم: BR MED يوم السبت، 6 ديسمبر 2014 القسم : | 1 التعليقات
السلام عليكم و رحمة الله وبركاته.
متابعي ورشة مدون الأوفياء في تدوينة اليوم سنتطرق إلى كيفية جعل خلفية مدونتك "background website" تتغير حسب صفحات مدونة بلوجر الخاصة بك ، هذه الإضافة تمكنك من إختار خلفية خاصة لأي صفحة إنطلاقا رابطها، و إعتمد في هذا الدرس الكود الرابع الذي شرحناه في تدوينة التحكم في إخفاء و إظهار الأدوات. عموما كي لا أطيل عليكم ننتقل إلى الشرح.


1- نذهب لوحة التحكم ثم قالب يفضل أخد نسخة إحتياطية للقالب حتى مع سهولة الدرس، بعد ذلك إنقر على تحرير html .
2 - إنقر وسط الأكواد ثم إبحث عن الوسم :   </head>   بالإستعانة بالزرين ctrl+f .
3 - ضع هذا الكود فوقه مباشرة:
<b:if cond='data:blog.url == &quot;http://warch-mo.blogspot.com&quot;'>
<style>
body {
    background-image: url(رابط الخلفية المباشر);
    background-position: center;
    background-repeat: repeat;
    background-attachment: fixed;
}
</style>
</b:if>
مكان الرابط الأحمر ضع رابط الصفحة الذي تريد تخصيصه بخلفية معينة.
مكان عبارة "رابط الخلفية المباشر" ضع رابط الصورة أو الخلفية التي تحب.
يمكنك تكرار وضع الكود عدة مرات مع تغير الروابط دائما بما يناسبك.
كما يمكنك جعل للصفحات التابثة خلفية موحدة و لصفحات المواضيع خلفية أخرى موحدة . فقط قم بزيارة موضوع إخفاء و إظهار أدوات بلوجر لتعلم أكثر طريقة العمل.

هذه بعض الخلفيات إن أعجبتكم 


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

الاثنين، 1 ديسمبر 2014

كيفية رفع الأكواد البرمجية على Google Code والحصول على رابطها المباشر

بقلم: BR MED يوم الاثنين، 1 ديسمبر 2014 القسم : | 0 التعليقات
السلام عليكم ورحمة الله وبركاته
تقريبا لا يخلو أي قالب بلوجر  أو أي قالب أخر من ملفات أكواد، فأكواد الجيكوري و الجافا سكريبت و css و غيرها من الأكواد، فهي تحتاج أن ترفع  على سيرفرات على الأنترنيت ، و توجد هذه السيرفرات بكثرة وأفضلها هي خدمة google code و هي مقدمة من العملاق جوجل مما يتبث جودة الخدمة وإحترافيتها.
يمكنك مشاهذة الفيديو لمعرفة طريقة رفع ملفات الأكواد البرمجية، و الحصول على الرابط المباشر.

رابط موقع  الرفع: Google Code
رابط تحميل البرنامج: Tortoise SVN
بالتوفيق للجميع أي إستفسار إترك تعليق،في أمان الله
إقرأ البقية

الأربعاء، 19 نوفمبر 2014

أكواد التحكم في إخفاء و إظهار الأدوات في صفحات المدونة

بقلم: BR MED يوم الأربعاء، 19 نوفمبر 2014 القسم : 2 التعليقات
السلام عليكم ورحمة الله وبركاته
في مجال التدوين أو تنسيق القوالب يضطر الشخص للتعديل على أشياء كثيرة من أجل تحسين صورة و أداء مدونته أو موقعه مثل ضبط مكان الأضافات، الصور، الروابط، الستايل،  و جعلني أقوم بنشر هذه التدوينة هي كثرة الأسئلة حولها حيث دائما يتم سألي كيف يتم ذلك؟ و كيف يمكنني ذاك؟ قررت جمع هذه الأكواد التي تعتبر من الأولويات التي يجب على المدونين و مدراء المواقع ضبطها.
هذه الأكواد هي كالأتي
هذه المجموعة تخص إظهار الأدوات في صفحة معينة فقط
إظهار الأداة في الصفحة الرئيسية فقط
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
جعل أكواد الأداة هنا
</b:if>
إظهار الأداة في صفحات التدوينات فقط
 <b:if cond='data:blog.pageType == "item"'>
جعل أكواد الأداة هنا
</b:if>
إظهار الأداة في الصفحات الثابتة فقط
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
جعل أكواد الأداة هنا
</b:if>
إظهار الأداة في رابط معين
 <b:if cond='data:blog.url == "رابط الصفحة"'>
جعل أكواد الأداة هنا
</b:if>
هذه الأكواد كلها تتحكم في إظهار الأدوات و الإضافات حسب المكان الذي خصص لها من طرف الكود.الآن سوف نرى طريقة عكس هذه الأكواد أو جعلها مخصصة لإخفاء الأدوات في منطقة صفحة معينة فقط.و ذلك بطريقة سهلة كل ما عليك هو إستبدال الرمز (=) الأحمر الموجود داخل الكود بـ علامة التعجب (!) ليصبح شكل الكود كما يلي:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
جعل أكواد الأداة هنا
</b:if>
مثلا هذا الكود الذي قمنا بإنشائه هو يقوم بإخفاء الأدوات من الصفحة الرئيسية فقط و بالتالي يمكنها الظهور في مجمل الصفحات الأخرى.
أما طريقة إستخدامها على الإضافات فهي سهلة جدا إذا كانت الأداة التي تود التحكم بها بانر أو شفرة إعلانية أو أكواد سلايدر مثلا فكل ما عليك فعله هو إستبدال عبارة "جعل أكواد الأداة هنا" بكود البانر أو الأعلان .
أما بالنسبة للأدوات التي تضاف من صفحة التخطيط فما عليك هو التوجه للقالب و البحث عن إسم الأداة ستجد أسفلها هذا الكود:
<b:includable id='main'>
ثم بعده مباشرة سوف نضع السطر الأول من الكود الذي نرغب أن نطبقه على الأداة ، بعد ذلك سوف ننزل قليلا سوف نجد هذا الكود:
<b:include name='quickedit'/>
ثم نضع مباشرة الوسم </b:if> الموجود بالسطر الثالت من الكود المستعمل
 في بعض الأحيان سوف تجد الوسم : </div> بعد <b:include name='quickedit'/> و بالتالي سوف نضع وسم الإغلاق </b:if>
يمكنك الأعتماد على هذا الفيديو
 هذا كل ما في موضوع اليوم بالتوفيق للجميع في أمان الله
إقرأ البقية

الجمعة، 7 نوفمبر 2014

أهم قواعد جعل قوالب بلوجر متجاوبة مع جميع الأجهزة

بقلم: BR MED يوم الجمعة، 7 نوفمبر 2014 القسم : | 2 التعليقات
السلام عليكم و رحمة الله وبركاته 
في زماننا هذا قد نلاحظ كيف إقتحمت الأجهزة الذكية عالمنا ، سواء الهواتف الذكية ، الألوح أو حتى الحواسيب المحمولة، و قد بسطت للكثيرين كل ما كان يقتصر على الحواسيب ، فالولوج للإنترنيت و تصفح المواقع أصبح في متناول الجميع في كل وقت وكل مكان فيمكن لأي شخص ركوب الحافلة للذهاب للجامعة أو للعمل مثلا ، و يستغل الوقت لتصفح موقعك إن كان من المهتمين بما تقدمه ، غالبا المواقع الإخبارية التي إحتلت مكان الجرائد ، و مع إزدياد عدد مستخدمين هذه الأجهزة أصبح مدراء المواقع يسعون وراء جعل قوالب مواقعهم و مدوناتهم متجاوبة  مع كل الألواح و الهواتف بمختلف مقاسات الشاشة و اليوم سوف نرى طريقة جعل القالب متجاوب ، أو ما يعرف ب "Responsive design" و ذلك بتقنية css3 ، والآن على بركة الله، ننتقل إلى الدرس
أولا نقوم بالبحث عن الوسم <head>
ثم نضع هذا الكود بعده مباشرة
<meta content='width=device-width, initial-scale=1.0, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes' name='viewport'/>

الآن نبحث عن هذا الوسم ]]></b:skin>
ثم نضع فوقه مباشرة هذا الكود:
Responsive styles
******************************************/
@media screen and (max-width : 1280px) {
/* CSS FOR NETBOOK AND DESKTOP ------------*/
}
@media screen and (max-width : 1024px) {
/* CSS FOR TABLETS ------------*/
}
@media screen and (max-width : 768px) {
/* CSS FOR SMALL TABLETS ------------*/
نمودج الألواح الصغيرة
}
@media screen and (max-width : 640px) {
/* CSS FOR IPHONE ------------*/
}
@media screen and (max-width : 480px) {
/* CSS FOR MOBILES ------------*/
}
@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
نمودج الهواتف الصغيرة
}
/***************************************************
 إن دققت النظر في هذا الكود سوف تلاحظ أنه يحتوي على عناصرمختلفة مقاسات مختلفة منها سطح المكتب ثم الألواح ثم الألوح الصغيرة ثم الأيفون ثم الهواتف ثم الهواتف الصغيرة في الأخير و هي بمقياس 320px كأقصى عرض.

*شاهد بعض أحجام الشاشات 
iPhone 5 portrait · width: 320px
iPhone 5 landscape · width: 568px 
  iPhone 6 portrait · width: 375px
iPhone 6 landscape · width: 667px 
iPhone 6 Plump portrait · width: 414px 
iPhone 6 Plump landscape · width: 736px 
Crappy Android portrait · width: 240px 
 Crappy Android landscape · width: 320px
Android (Nexus 4) portrait · width: 384px 
 Android (Nexus 4) landscape · width: 600px
 iPad portrait · width: 768px
iPad landscape · width: 1024px
========== 
portrait = عمودي
landscape =  أفقي
=================
الأن سنقوم بالتجربة على شاشة الهواتف الصغيرة، ماسنفعل هو التعديل على أهم المقاسات لعناصر البلوجر وهي كالأتي:
 body : وهو جسم القالب الرئيسي.
outer wrapper : وهو الغلاف الخارجي وداخله توجد كل العناصر.
header : وهو الجزء العلوي من القالب.
main wrapper : وهو الجزء المجمع للتدوينات في  الرئيسية .
post : وهو  التدوينات المصغرة.
sidebar : وهو الشريط الجانبي الذي يحتوي على العديد من الإضافات.
footer : وهو الجزء السفلي من القالب ويسمى أيضا بذيل الموقع نجد به بعض الأضافات أو حقوق القالب.
قد تختلف تسمية المعرفات من قالب إلى أخر لدى أطلب منكم مراجعة عناصركم بشكل دقيق فمثلا لا نجد sidebar ولكن نجد sidebar1 أو sidebar-warpper
الآن سوف نقوم بتحديد أي قياس للشاشة للعمل عليه مثلا أريده أن يكون مناسب للألواح الإلكترونية الصغيرة
شاهد المثال:
#outer-wrapper{width:768px;margin:0px auto;padding:0;overflow:hidden;}
#header{width:768px;margin:0 auto;padding:0;float:none}
#main-wrapper{width:768px;float:right;margin:0;padding:0;overflow:hidden;}
#footer{width:768px;float:none;margin:0 auto;padding:0;overflow:hidden;}
#sidebar-wrapper{width:768px;margin:0 auto; float:none;}
.post{  width:320px ;margin:0 auto;}
إنتبه لمقاسات العرض لم تتجاوز 768px كحد أقصى
كما قلت سابقا المعرفات التي إعتمدتها في هذا النموذج يمكن أن تجدها مغايرة لنمودجك ، فيمكنك التعديل على المعرفات بهذا المثال
 كما يمكنك أن تعدل على القوائم و الشعار و أجزاء ثانوية تختلف من قالب إلى أخر، كما يمكنك أيضا إخفاء أي جزء من القالب في الحقيقة قد يكون الدرس صعب لدى أنصحك بأن تكون لديك دراية ولو قليلة  بلغة html و css3 .

هذا نمودج الهواتف الصغيرة
#outer-wrapper{width:320px;margin:0px auto;padding:0;overflow:hidden;}
#header{width:320px;margin:0 auto;padding:0;float:none}
#main-wrapper{width:320px;float:right;margin:0;padding:0;overflow:hidden;}
#footer{width:320px;float:none;margin:0 auto;padding:0;overflow:hidden;}
#sidebar-wrapper{width:320px;margin:0 auto; float:none;}
.post{  width:320px ;margin:0 auto;}
 عند إختيار النمودج الخاص بنا نقوم بوضع  أكواده في المكان المناسب مثلا هذا الأخير نضعه مكان عبارة نمودج الهواتف الصغيرة بالكود السابق بعد مسح العبارة طبعا و أي تعديل أو إضافة ستقوم بوضعها مع الأكواد في نفس القسم.
يمكنك الإعتماد على هذا الموقع لمعاينة الشكل موقعك في مختلف الأجهزة
mobile responsive
أو يمكنك تصغير نافدة المتصفح بشكل يدوي للمعاينة
كان هذا هو درس اليوم  أي إستفسار أنا في الخدمة ما عليك سوى ترك تعليق
أتمنى التوفيق للجميع في أمان الله
إقرأ البقية

السبت، 19 يوليو 2014

أفضل أكواد الميتا تاج ستجعل مدونتك في الصدارة

بقلم: BR MED يوم السبت، 19 يوليو 2014 القسم : 0 التعليقات
السلام عليكم ورحمة الله وبركاته
لاشك أن سمعت مسبقا أكواد الميتا أو الميتاتاج "meta tag" وهذي الأكواد إن أردنا أن نقرب المعنى أكثر تلعب دور بطاقة التعريف بالنسبة لموقعك أو مدونتك بحيث هذه الأكواد تقدم معلومات لعناكب محركات البحث مثل جوجل مثلا مما يجعل موقعك يتخد المكان الذي يستحقه في الأرشفة .
المهم اليوم أحضرت هذا الكود الأفضل و الأنسب على الإطلاق لن تجده في مكان أخر كنت أدردش مع مدون فرنسي و راسلني به ^_^ . واليوم أطرحه لكم من أجل الأستفادة منه. اليوم أدركت لماذا المواقع الفرنسية لها مكانة مرموقة لدى محركات البحث بالرغم من أن الذين يتكلمون اللغة الفرنسية لا يتجاوزن %2 من سكان العالم.
 طريقة التركيب
1- نذهب للوحة التحكم بلوجر
2- ثم ننقر على القالب (خد نسخة)
3- تحرير html
4- ثم نبحث عن هذا الوسم <head>
نقوم بمسح الأكواد التي بينه وبين الوسم التالي
<b:skin>
ولكن المرجو الحذر من مسح كود الخطوط من أجل توضيح أكثر يأتي على هذا الشكل و قد يكون أكثر من واحد وبأسماء مختلفة في أخر الرابط كما تلاحظون
<link href='https://dl.dropboxusercontent.com/s/a2i96u2mu00z22n/GESSTwoLight.css' rel='stylesheet' type='text/css'/>

بعد مسح تلك الأكواد نقوم بوضع هذه مكانها مع تعديل الكلمات باللون الأحمر:
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta content=' وصف المدونة' name='description'/>
    <meta content='كلمات , دلالية' name='keywords'/>
    <meta content='رابط بانر' name='og:image'/>
    <meta content='global' name='distribution'/>
    <meta content='10 days' name='revisit'/>
    <meta content='10 days' name='revisit-after'/>
    <meta content='document' name='resource-type'/>
    <meta content='all' name='audience'/>
    <meta content='general' name='rating'/>
    <meta content='all' name='robots'/>
    <meta content='index, follow' name='robots'/>
    <meta content='إسمك بالإنجليزية' name='author'/>
    <meta content='ar' name='language'/>
    <meta content='بلدك بالإنجليزية' name='country'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title><data:blog.pageName/></title>
    <b:else/>
    <title><data:blog.pageTitle/></title>
    </b:if>
ملحوظة : وصف المدونة يجب أن يكون جملة مفيدة وسليمة لا تتعدى 150 حرف، الكلمات الدلالية أو المفتاحية ضروري أن تفصل بينها بفاصلة ,
هذا كل ما في موضوع اليوم أتمنا لكم التوفيق
إقرأ البقية