مساحة أعلانية

[اكواد][slider]
‏إظهار الرسائل ذات التسميات اضافات بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات اضافات بلوجر. إظهار كافة الرسائل

طريقة اضافة وذكر الاشخاص على قوقل بلس في التدوينه | add others from google Plus on blog

بسم الله الرحمن الرحيم
يمكنك الان بهذه الطريقة الجميله ان تضيف بعض الاشخاص للتدوينه
فمثلآ نريد ان نذكر شخص على قوقل بلس في هذه التدوينه بدون عناء نسخ رابطه او البحث عنه
كل مافي الامر ذكر اسمه في التدوينه مع علامة { + }
مثال على ذالك : +سعودي حريف 
يجب أن تضع اولا علامة { + } ثم كتابة اسم الشخص مباشره
لاتضع مسافه بين ال { + } واسم الشخص
يجب ان تكتب الاسم مباشره بعد العلامة ليظهر لك الشخص
وبهذه الطريقة تتجنب عناء البحث عن الاشخاص ولصق روابطهم 
ومما يسهل عليك ذكر مجموعه كثيرة من الاشخاص بنفس الوقت 

اضافة الاشخاص في التدوينات من قوقل بلس


شاركنا برأئيك عن هذه الطريقة واسئلتك لتناقش بها للجميع 

الموقع الضخم thimble mozilla لتعلم CSS و HTML و JavaScript

موقع thimble من mozilla يتيح لك التعلم لغات CSS و HTML و JavaScript بشكل كبير وفعال 
فهو يستطيع ان يجعلك ان تحرر الأكواد وتضيف ماتشاء اليه وهناك خيارات كثيره ومتعدده 
فهو من المحررون الأنسب لهذه اللغات وسهولة تعلمها بسهوله وسرعه 
فأذا كنت من هواة تصميم المواقع فيجدر بك تجربة هذا الموقع الجميل
ونحن في مدونة سعودي حريف نقوم بشرح الاكواد لسهولة فهمها ولمعرفة كيفية عملها 
وبهذا الموقع thimble تستطيع ان تطبق عليه دروسنا بكل بساطة ودقه
فهو يسهل عليك الحصول على اكواد الالوان وايضا يعلمك اختيار الوسوم المناسبه لك

Mozilla Thimble

وهذا الفيديو من موقع thimble الرسمي لشرح كيفية عمل الموقع : 


وفي الختام شاركنا رأئيك عن اداء الموقع ومايقدمه للجميع
لغة البرمجه لاتقتصر على CSS و HTML فقط

لغة البرمجه لاتقتصر على CSS و HTML فقط

لغة المبرمجة لاتقتصر على CSS و HTML فقط فهناك لغات عديده يمكن للمبرمجيون استخدامها لتطوير المواقع 
فلغة البرمجه CSS و HTML هما يشكلون هيكل واسلوب الموقع او المدونه فقط فكلنا نعرف ان لغة البرمجه CSS 
هي لإعطاء الموقع او المدونه شكلاً خلابأ وهي اللغة التي تعتمد عليها قوالب فلات الأنيقه والقوالب التقنيه 
فأي مصمم للمواقع الاحترافيه بجمالها يستخدم الـ CSS بكثره في القالب عند التصميم 
لكن هناك عديده للغه البرمجه مثل CSS3 و HTML3 وهناك مواقع عده تعلم هذه اللغات 
فهو يقدم دوره قصيرة لتعلم هذه اللغات 
F24db8eef05107e9c857863309ae7cb2a6f3b560 صورة البطل الرئيسي


ويمكنك تعلم الكثير من خلاله وايضا لاتنسى بأن هنالك العديد من اللغات البرمجه غير CSS  و HTML 
فهناك لغات برمجه للبرامج والأجهزه وحتى المواقع فالبرمجيات تختلف 

شرح كيفية عمل أكواد الصور في قوالب بلوجر Codes Images

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

ماهي أكواد الصور
أكواد الصور هي مجرد أكواد تساعدنا في وضع معايير للصورة كعرضها وطولها ورابطها والتحكم بها 
وهنا يجب علينا ان نركز في هذه الأكواد وسنوضح كل كود ماهي وظيفتة وكيف يتم أستخدامه بمنتهى الدّقة
لكن أولا يجب أن نشرح عملية كود الصور الأساسي وهي كالتالي
<img src="myimage.jpg" alt="My Image">
الكود السابق هو الكود الأساسي لأي صورة عندما تريد إضافة صورة طبيعية أستعن بالكود السابق
والان سنوضّح بعض طرق الوظائف لأكواد الصور التي ستخدمنا في تكويد القوالب وهذه قائمة بوظائف أكواد الصور
وظائف أكواد الصور

الوصفبعض الوظائف
العنوان - عندما تضيف هذه الوظيفة سيظهر عنوان مُنبثق للصورهTitle
الأي دي - الرقم التعريفي للصوره ( يتم أنشائه تلقائياً )ID
الستايل - اذا كنت تريد اضافة بعض الأكواد التجميلية يمكنك من هذه الوظيفهStyle
عنوان الصورة في القالب HTMLAlt
الذهاب عبر الضغط لرابط الصورةOnClick
اضافة ترجمة للصورهTranslate
استخدام الخريطة IsMap
استخدام الخريطةUseMap
عرض الصورة ( تضيف هذه الوظيفه لكود الستايل )Width
طول الصوره ( تضيف هذه الوظيفه لكود الستايل )Height
المسار للصوره ( ضع هنا المسار المُؤدي للصورة كرابط وغيره )Src
بعض الأمثله لإستعمال وظائف أكواد الصور

<------------------------ الكود الأصلي------------------------>
<img src="myimage.jpg" alt="My Image">

<------------------------ التعديل على مسار وعرض وطول وعنوان الصوره------------------------>
<img
src="myimage.jpg"
alt="My Image"
width="100px"
height="50px">

<------------------------ التعديل على عنوان و ستايل الصوره ومسارها------------------------>
<img
src="myimage.jpg"
alt="My Image"
style="width:190px;height:79px;">

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

شرح كيفية عمل أكواد الـData في قوالب بلوجر

لدينا في عالم التدوين أنواع كثيرة من الأشخاص الذين هم عبارة عن 
مدونين ومبرمجين والذين يريدون التكويد والذين يريدون التصميم
وكل هؤلاء الأشخاص الذين يملكون المدونات يجب أن يعرفو ماهو الـ Data
How To use Data

تعريف الـData:
بدايتاً الـData عمله هو استدعاء الأشياء التي تريدها بدون تحديد مصدرها
أي أن تستدعي العنوان بدون لاتضع رابط العنوان ، فهو يستدعي العنوان ويظهر العنوان بدون لايظهر الـData في المدونة
شرح أكثر :
فعلى سبيل المثال نريد أن نقوم بتكويد قالب ويجب أن نضع الأكواد ليكتمل القالب
لكن هنا نريد أن نضع أكواد الـData الخاص  بعناوين المواضيع بدون لانضع روابطها 
مالفرق بين الأكواد والروابط ؟
الأكواد: عندماً تضع الأكواد الـData الخاصه بالمواضيع فأنت حددت جميع المواضيع بدون أستثناء أي عندما تضيف مواضيع جديدة فأنت غير مجبر بإضافة أكواد جديدة للمواضيع الجديدة فأكواد الـData هي متخصصة بجميع المواضيع
الروابط: عندماً تضع الروابط الخاصة بالمواضيع فأنت حددت مواضيع مُعينة فقط لاغير وهنا لن تظهر أي مواضيع أنت لم تضع روابطها وهذا تأثير سلبي للموقع أو للمدونة في أكواد الروابط غير متخصصة بجميع المواضيع فقط في مواضيع مُعينة
كيفية عمل الـData:
الـData يعمل داخل أكواد الـincludable فقط
ولـData أيضاً Tags فهي تحدد نوعية الشئ الذي تريدة
فعلى سبيل المثال نريد أن نحدد عناوين المواضيع فسنضع Tag:
<data:post.title/>
يجب أن تلاحظ بأن كتبناً أولا الـData وبعدهاً كتبنا الـTag الذي نريدة وهو عناوين الموضيع
قائمة الـTags
الوصفTags
إظهار أسم كاتب الموضوع'data:top.showAuthor
إظهار عبارة " أرسلت من قبل " data:top.authorLabel
إظهار تاريخ الموضوع من إنشائة'data:top.showTimestamp
إظهار عبارة " في " قبل تاريخ الموضوعdata:top.timestampLabel
أظهار كلمة " تعليق " قبل عدد التعليقاتdata:top.commentLabel
أظهار كلمة " تعليقات " قبل عدد التعليقاتdata:top.commentLabelPlural
نوع الصفحة اذا كانت أرشيف او صفحة ثابتة يحدد نوعهاdata:blog.pageType
تحديد الموضوع ( الأي دي للموضوع )data:post.id
أظهار عنوان الموضوعdata:post.title
إظهار رابط الموضوعdata:post.link
رابط الموضوعdata:post.url
الأشياء في الموضوع ( كالعنوان والتسمية والتعليقات )data:post.body
تاريخ الموضوعdata:post.timestamp
السماح بالتعليقاتdata:post.allowComments
رابط التعليق أو التعليقاتdata:post.addCommentUrl
الذهاب للتعليقات عبر الضغط عليهاdata:post.addCommentOnclick
أظهار عدد التعليقاتdata:post.numComments
نموذج البريد الأكترونيdata:post.emailPostUrl
عبارة لنموذج البريد الأكتروني (كرسالة للزائر تلمح له ان هذا هو النموذج البريد الأكتروني )data:post.emailPostMsg
التسميات في الموضوعdata:post.labels
أظهار عبارة " التسميات " قبل نوع التسمياتdata:postLabelsLabel
الذهاب للمواضيع التي توجد بها تسمية مُعينةdata:label.url
أظهار أسم التسميةdata:label.name
أاضافة هذا الكود اذا كانت التسمية هي أخر تسمية في الصفحةdata:label.isLast

كيفية أستعمال الـTags في الأكواد:
تستخدم الـTags في ثلاث وسوم مُعينة وهي كالأتي 
وسم b:if> و وسم b:loop> و وسم a>

كيفية أستعمال الـTags في وسم الـb:if> :
   <b:if cond='data:Data Tag'>
<!--محتوى الأكواد داخل الوسم -->
</b:if>
وعندما تريد أن تضيف Tag في وسم الـb:if>
فقط نُغير الـ Tag Data الى أي Tag نريدة من قائمة الـ Tags

كيفية أستعمال الـTags في وسم الـb:loop> :
      <b:loop values='Data Tag' var='Tag'> 
< <!-- محتوى الأكواد داخل الوسم -->
      </b:loop>
وعندما تريد أن تضيف Tag في وسم الـb:loop>
فقط نُغير الـ Data Tag  الى أي Tag نريدة من قائمة الـ Tags


كيفية أستعمال الـTags في وسم الـa> :
         <a expr:href='Data Tag url rel='Tag'><data Tag/></a>
ملاحظة: هذا الوسم  يشير الى رابط (عندما تضع تاج التسمية في داتا تاج فيذهب لرابط التسمية) فقط

وعندما تريد أن تضيف Tag في وسم الـa>
فقط نُغير الـ Data Tag  الى أي Tag نريدة من قائمة الـ Tags 
بالنسبة لـData Tag url قم بأختيار Tag يوجد فيه كلمة Url من قائمة الـTag فقط!

{ حلول المشاكل } مشكلة طول المواضيع في بلوجر Codes | 2015


حل لمشكلة طول عرض المواضيع
أي تكون المواضيع ذات طول طويل جداً في المدونة بدون سبب وتظهر فجأة في المدونة
الكثير من واجهة هذه المشكلة قام بالبحث عن المشكلة في تحرير القالب 
أو بعض الأحيان القالب لم يتم التعديل علية لتظهر هذه المشكلة 
الان سنتعلم كيفية حل هذه المشكلة بدون أدنى تعديل للقالب !
فقط نقوم بإضافة كود يساعدنا في :
  1. تعديل عرض المواضيع وطولها
 وهذا هو المطلوب لحل هذه المشكلة التي تجعل المدونة بشكل غير لائق أي تزيد من طولها 
وهذا يجعل الزائر يمل من المدونة ويظن أنها غير صالحة 
وهناك عوائق تواجة الزوار من هذه المشكلة 
  1. البطئ في تحميل المدونة بسبب طول المواضيع وتحميل الصور وأكواد المواضيع
  2. جعل المدونة غير صالحة بنظر الزائر ويخرج منها
والان نأتي للأهم وهو حل المشكلة :
أذهب للقالب > تحرير HTML
أبحث عن 
</head>
وأضف فوقة 
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
    var width         = 200;
    var height        = 170;
    var placeholder    = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI7rRinwCNFvuosG-S1F6lD2OzeCmCrBOvnIHQHl3w76R9gzhqhG-KCXWQ9em4DkdMCzNZSI51WDlCdESKCoI36kN0t1ys6ktXMsTb0Ggb7k3H-vOyAsy67q5TV-qvbF6Dgbu50cMQ6WU/s1600/no-thumb.png';
    var margins     = "0px 0px 10px 10px";
    var fitThumb                 = 1;
    var titleTopPadding            = 5;
    var titleBottomPadding        = 8;
    var titlerightleftPadding    = 5;
    var titlePadding = titleTopPadding + 'px ' + titlerightleftPadding + 'px ' + titleBottomPadding + 'px ' + titlerightleftPadding + 'px';
    $('.post-body').each(function(n, wrapper){
        var wrapper         = $(wrapper);
        var image         = $(wrapper).find('img').first();
        var link         = wrapper.parent().find('h3 a');
        var linkURL         = link.attr('href');
        var linkTitle        = link.text();
        $(link).remove();
        wrapper.empty();
        if (image.attr('src')) {
            var thumbHeight = image.attr('height');
            var thumbWidth = image.attr('width');
            var thumbParent = $(image).parent();
            wrapper.append(thumbParent);
            if (fitThumb) {
                image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width + '-c')});
                image.attr('width',width).attr('height',height);
            } else {
                image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width)});
                image.attr('width',width);
                var changeHeight = (thumbHeight/thumbWidth * width).toFixed(0);
                image.attr('height',changeHeight);
            }
         
        } else {
            var image = $('<img>').attr('src',placeholder).attr('height',height).attr('width',width);
            var thumbParent = $('<a>').append(image).appendTo(wrapper);
        }
        thumbParent.attr('href',linkURL).css('clear','none').css('margin-right','0').css('margin-left','0').addClass('postThumbnail');
     
        var thumbTitle = $('<div>').prepend(linkTitle).css('padding',titlePadding).css('opacity','0.9').css('filter','alpha(opacity=0.9)').css('width',width).appendTo(thumbParent);
        var ptitleHeight = thumbTitle.height();
        var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding);
        thumbTitle.css('margin-top','-'+summary+'px');            wrapper.css('float','right').css('height',height).css('width',width).css('margin',margins).css('overflow','hidden');
    });
    $('#blog-pager').css('clear','both');
});
function hideLightbox() {
    var images = document.getElementsByTagName('img');
    for (var i = 0 ; i < images.length ; ++i) {
        images[i].onmouseover=function() {
            var html = this.parentNode.innerHTML;
            this.parentNode.innerHTML = html;
            this.onmouseover = null;
        };
    }
}
if (window.addEventListener) {
    window.addEventListener('load',hideLightbox,undefined);
} else {
    window.attachEvent('onload',hideLightbox);
}
//]]></script>
<style>
.post {
border-bottom: 0 dotted #E6E6E6;
margin-bottom: 0;
padding-bottom: 0;
}
h2,.post-footer {
display:none;
}
a.postThumbnail div {
text-decoration: none; color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: capitalize;
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#7d7e7d&#39;, endColorstr=&#39;#0e0e0e&#39;,GradientType=0 );
}
a.postThumbnail:hover div {
display: block;
}
.post-body img {
background-color: transparent;
border: 1px solid transparent;
padding: 0px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.post-body img:hover {
-ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=70)&quot;;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
</style>
</b:if>
</* Codes posts saudi-7reeef */ >
تعديلات الكود :
var height        = 170;   = طول الموضوع وهذا الأهم 
     var width         = 200; = عرض الموضوع
للمزيد من الحلول قم بالأنضمام للمدونة
‏إظهار الرسائل ذات التسميات اضافات بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات اضافات بلوجر. إظهار كافة الرسائل

طريقة اضافة وذكر الاشخاص على قوقل بلس في التدوينه | add others from google Plus on blog

طريقة اضافة وذكر الاشخاص على قوقل بلس في التدوينه | add others from google Plus on blog

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

الموقع الضخم  thimble mozilla  لتعلم CSS و HTML و JavaScript

الموقع الضخم thimble mozilla لتعلم CSS و HTML و JavaScript

موقع thimble  من mozilla  يتيح لك التعلم لغات CSS و HTML و JavaScript بشكل كبير وفعال  فهو يستطيع ان يجعلك ان تحرر الأكواد وتضيف ماتشاء ... اقرا المزيد
لغة البرمجه لاتقتصر على CSS و HTML فقط

لغة البرمجه لاتقتصر على CSS و HTML فقط

لغة المبرمجة لاتقتصر على CSS و HTML فقط فهناك لغات عديده يمكن للمبرمجيون استخدامها لتطوير المواقع  فلغة البرمجه CSS و HTML هما يشكلون هي... اقرا المزيد

شرح كيفية عمل أكواد الصور في قوالب بلوجر Codes Images

شرح كيفية عمل أكواد الصور في قوالب بلوجر Codes Images

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

شرح كيفية عمل أكواد الـData في قوالب بلوجر

شرح كيفية عمل أكواد الـData في قوالب بلوجر

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

{ حلول المشاكل } مشكلة طول المواضيع في بلوجر Codes | 2015

{ حلول المشاكل } مشكلة طول المواضيع في بلوجر Codes | 2015

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

فيديوهات

صور