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

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

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

<b:widget id='HTML5' locked='false' title='عنوان الأداة' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h3 class='title'><data:title/></h3>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

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

1:19 ص

مزيد من المعلومات »

• • فيسبوك
  • تويتر
  • غوغل بلس

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).

</head>

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

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/trunk/read-more-left.js' type='text/javascript'/>

الصورة في يمين النص

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/read-more-right.js' type='text/javascript'/>

وإذا رغبت في ظهور الصورة في الوسط قم بلصق الكود التالي :

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/trunk/LireLaSuiteCentre0.js' type='text/javascript'/>

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

<data:post.body/>

ثم قم بإستبدالة بهذا الكود :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/><data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>إقرأ المزيد...</a></span>
<a href='http://abu-iyad.blogspot.com/2010/07/read-more-for-blogger.html' style='display:none;'>Résumé</a><a href='http://abu-iyad.blogspot.com' style='display:none;'>abuiyad</a> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
</b:if>

يمكنك تبديل كلمة "إقرأ المزيد" ذات اللون الاحمر في الكود السابق بكلمة أخرى حسب رغبتك أو تبديلها بصورة مثل هذه :

وذلك بإستبدال عبارة إقرأ المزيد.. بالكود التالي :

<img src="https://sites.google.com/site/lightbox007/photo/readmore.jpg" title="إقرأ المزيد" alt="إقرأ المزيد"/>

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

8:47 م

مزيد من المعلومات »

• • فيسبوك
  • تويتر
  • غوغل بلس

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

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

قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).

</body>

 ثم قم بلصق الكود التالي قبله :

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

الآن قم بالبحث عن هذا الكود :

<data:post.body/>

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<g:plusone expr:href='data:post.url' size='tall'/>
</b:if>

ملاحظة : يتوفر زر1+ على 4 قياسات حيث يمكنك إختيار القياس المناسب لك وذلك بإستبدال الكلمة tall  من الكود بأحد القياسات الموجودة في الصورة أسفله  .

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

5:45 م

مزيد من المعلومات »

• • فيسبوك
  • تويتر
  • غوغل بلس

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

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

قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F )

<div class='post-header-line-1'/>

ثم قم بلصق هذا الكود أسفله :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a Width='600px' class='twitter-follow-button' data-align='right' data-button='grey' data-lang='en' data-link-color='#EB4C07' data-show-count='true' data-text-color='#000000' href='http://twitter.com/Abuiyad007'>تابعني على التويتر</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</b:if>

وأخيرا قم بحفظ القالب 

وللمعاينة قم بالضغط على الزر أسفله :
follow me


يمكنك كذلك وضع الزر  في أسفل كل تدوينة وذلك بلصق الكود السابق أسفل هذا الكود :

<data:post.body/>

4:32 م

مزيد من المعلومات »

• • فيسبوك
  • تويتر
  • غوغل بلس

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

1.قم بالبحث عن الوسم :

<body>

ثم قم بلصق هذا الكود قبله مباشرة :

<script type='text/javascript'>
//<![CDATA[
function badwordfilter(ID){
var comm = document.getElementById(ID);
var comment = comm.innerHTML;
var reBadWords = /الكلمة مسيئة2|الكلمة مسيئة1/gi;
comment1 = comment.replace(reBadWords, "****");
comm.innerHTML = comment1;
comm.style.display = "block";
}
//]]>
</script>

ملاحظة : يمكنك إضافة أكثر من كلمة في الكود وهي الكلمات ما لون باللون الأحمر شرط أن يكون هذا الرمز | الفاصل بين كل كلمة وأخرى ،لتكن على هذا الشكل  : .|.....|......|الكلمة السيئة4|الكلمة السيئة3|الكلمة السيئة2|الكلمة السيئة1
وبطبيعة الحال من دون كتابة الأرقام

2.الآن قم بالبحث عن هذا الكود (إبحث عن ما لون باللون الأزرق لتجد الكود):

<p><data:comment.body/></p>

إن وجدت أكثر من واحد فالكود الأول هو المقصود :

3.ثم قم بإستبدال الكود كاملا بهذا الكود :

<p>
 <div expr:id='data:comment.id' style='display:none;'>
 <data:comment.body/>
 </div>
 <script type='text/javascript'>badwordfilter(&quot;<data:comment.id/>&quot;);</script>
</p>

4.وأخيرا قم بحفظ القالب .

ملاحظة هامة : المرجو عدم تجريب هذه الإضافة على مدونتي ،وعدم كتابة أي كلمة مسيئة في التعليقات ،فالإضافة غير مركبة على مدونتي وشكرا 

6:02 م

مزيد من المعلومات »

• • فيسبوك
  • تويتر
  • غوغل بلس

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

تطبيق الإضافات :
1.قم بإضافة القائمة العلوية التي تقوم بإظهار وإخفاء 3 إضافات في وقت واحد من هنا ،لكن لا تقم بتطبيق المرحلة الخامسة والأخيرة والتي يطلب منك إضافة كود بعد الوسم body
2.قم بالبحث عن الوسم :

<body>

ثم ضع تحته هذا الكود

<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<div class='left'>
<b:section class='left' id='left' maxwidgets='4' showaddelement='yes'>
</b:section>
</div>
<div class='left'>
<b:section class='center' id='center' maxwidgets='4' showaddelement='yes'>
</b:section>
</div>
<div class='left right'>
<b:section class='right' id='right' maxwidgets='4' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>الإدارة</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' id='open'>إظهار</a>
<a class='close' id='close' style='display: none;'>إخفاء</a>
</li>
<li class='right'/>
</ul>
</div>
</div>

3.قم بالبحث عن الوسم :

]]></b:skin>

ثم ضع فوقه هذا الكود :

ul.adminbar
    {      background-color:#F5EDE3;
        border:1px solid #F5EDE3;
        margin-bottom:8px;
        padding:5px 5px 0;
    }
    ul.adminbar li {
        background-color:#E6DAC9;
        border:1px solid #999999;
        list-style:none outside none;
        margin-bottom:6px;
        outline:1px solid #D0CBE5;
        padding:12px 0px 20px 50px;
}
    ul.adminbar li a
    {      display:block;
        color:#333333 !important;
        text-shadow:1px 1px 0 #fff;
        text-decoration:none;
        font-size:20px;
        height:27px;
        margin:0 0 0 15px;
    }
    a.dashboard
    {      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe8C7BBDpl-uqv0xy9S3sHZ34YvvTLW6WH5eWAf4C3-6V77AUjAtpj6BL6-CeDyAqUi0KRcwiy8mM-ufrnm4DeQ1kmwDHfejiOAKjyAs804P2TmOKI7HCKUyDMunZO9uSUZbnv-5HcRPP-/s1600/dashboard.png) no-repeat 0px 0px;
        padding:4px 0 2px 47px;
    }
        a.settings
    {      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm6BJ8AYldmd2OsbeaHrL0gGFiK7ltJV10F4kJlH2th646u9pRwnxbvKGEjA1walCyO4Mrwf0RELmFGLPLuYzmd8rVO-VpEqLc58-OfqvHzFPW14LmfpzyyE3xYDMP5AH79TBX7nVFi6jp/s1600/setting+blogger.jpg) no-repeat 0px 0px;
        padding:5px 0 0 47px;
    }
        a.layout
    {      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeGfWZu-hHoOKVxkqnQuZaHdPQ9jt_kCVXhh4L4gOx_ZxE31Wf5C6VHEQA8AP_6Q9MpH3EHZtJ6K6g7Zw_SzfV9WiDSh6i3s8kw88rHm37v1MmrBD1ck_KgV2qT1t8jKjCKUGsOh7sFyya/s1600/3anasir.jpg) no-repeat 0px 0px;
        padding:5px 0 0 47px;
    }
        a.editpost
    {      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeR2F1rh2BmuA6VJVuRJaM4LtOAJRYQnn_gc0F2l6yULYrkS3jNyMWSm1KzbPQhE1qK5_ztmKQVd3CnljUINMZZOUWvArBjtPoP_fAL4ccnt0EPofi4g_gl-glflC3DIHE9oa6qTUcbnrJ/s1600/edit.png) no-repeat 0px 0px;
        padding:5px 0 0 47px;
    }
        a.newpost
    {      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZJGxqerYJx4w3aMZfY5NamyOwo-Amzu2_zDljVUghCrQznd-1xzdGZdhocg1ukBc9ahzT4GCJYdVu_jG0woMVuiGEpWDjPk3Usr0AbyIfv7xiqc9CNa2Zi66s0VJz7ZmmqkRv589csc_T/s1600/add+message+blogger.png) no-repeat 0px 0px;
        padding:5px 0 0 47px;
    }
    a.statistic
    {      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUiWOzL-4mybm2uCGsjdyqAcZY3Sw7Pt9KFufisKFXOWQx1tzeWfy2njC4WiIlbB8dHiJQTn9_my910lPbRzaNL_-uP9JYjxR0O3FxJI_kk9s5cXrNC8ku6LZcNmbt75mCyzl_dWtkpChv/s1600/Statistics+blogger.png) no-repeat 0px 0px;
        padding:5px 0 0 47px;
    }

4.توجه إلى تصميم مدونتك سوف تلاحظ أنه تمت إضافة 3 قوائم لإضافة أداة جديدة فوق هيدر المدونة
5.الآن سوف نقوم بإضافة القوائم في الأدوات الجديدة التي تم إنشؤها
6.القائمة العلوية :
-قم بإضافة هذا الكود في أداة جديدة .

<ul class="adminbar">
<li><a class="layout" href="http://www.blogger.com/rearrange?blogID=xxxxxxxxxx" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlxm6qgaoqstXXNTAPw330Sz3EIsq_7jW9XD9eZFNmhabXCzmJTUL8RL3oXLd2b3WQkHUpxe0aS3ca6elbymwPnORZH5l2AGHdKniDZ7A0_bI8vlGKeAF6qaVQfAxFY3IMHvbgaaCmats/s1600/tasmim.png" title="" alt=""/>
</a></li>
<li><a class="statistic" href="http://www.blogger.com/stats2.g?blogID=xxxxxxxxxx" target="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3deQBY64gqErOhyphenhyphenTLf_aXy38stJjOP62yXHV0J9BR-1qqvwJsO6Ch9g8YQ4rYBPLTRU_9LSI70gh6gPZaf6zjqyAg9TaKebGcPH9d1TOJbmjl7EmF6lHzTJnU6DooTphBKPsD8iEcR7E/s1600/statistic.png" title="" alt=""/>
</a></li>
</ul>

القائمة الوسطى :
-قم بإضافة هذا الكود في أداة جديدة .

<ul class="adminbar">
<li><a class="editpost" href="http://www.blogger.com/posts.g?blogID=xxxxxxxxxx" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxnAdpBGFBpRVx7vwI0mwwl_LA3Ci0J_TOS6tNtNa89JELEiME6vmWRzm00PomCzv81a3s7KLMKocbHiI0_HgtBf_XwTJgdaTUB2mkwCz2-9iSZp1Sa3xnQNQN9lB2o6hvlN_2rqXvFb4/s1600/edit+message.png" title="" alt=""/>
</a></li>
<li><a class="newpost" href="http://www.blogger.com/post-create.g?blogID=xxxxxxxxxx" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLBKGw4foJjf-2kYsxNyDgrtACczJkPj6Qf0mYuO0GzzwFxvyZXtwtlPbbZn6sJngRglG3XHmfvfYCZgB_qjj-yIMjVafO9FOBMwTXDLqop9n_6yx9iEXrh5MSOXtQnf65iEQ2x_JX9JI/s1600/new+message.png" title="" alt=""/>
</a></li>
</ul>

القائمة السفلية :
-قم بإضافة هذا الكود في أداة جديدة .

<ul class="adminbar">
<li><a class="dashboard" href="http://www.blogger.com/home" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrXKoqhRbUtIIXFVHDktQdfNjrfXePjZTuJXx49A8doEJbQ-lserKNK5ZOJ43wBzgVdb8-PxsJ7IoFxLyidA9aY0qga9OOiXzcwaJxwVhDnfswQwxzrqe3xyz-zOxpzTZ78j1T94gkDkw/s1600/lawa77a2.png" title="" alt=""/></a></li>
<li><a class="settings" href="http://www.blogger.com/blog-options-basic.g?blogID=xxxxxxxxxx" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG9sMg2BEkFaWfXwPclqBMcYnQj7LiYEa3SbFdrCZfTK6tZX6hZ7NuWe-jEfrbyT8E4fTJAOSORF3BHo25tk2z6lAjeR_fd6VEprRVbVXKS4azahg-2sDVBJ0kXSr75_mCYt9lr3uo2Hk/s1600/setting2.png" title="" alt=""/>
</a></li>
</ul>

7.عند إضافتك لجميع القوائم لا تنسى أن تقوم بإستبدال xxxxxxxxxx من جميع أكواد الإضافات الثلات برقم تعريف مدونتك،وللحصول على هذا الرقم كما هو موضح أسفله .

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

5:28 م

مزيد من المعلومات »

• • فيسبوك
  • تويتر
  • غوغل بلس

السلام عليكم ورحمة الله تعالى وبركاته ، مرحبا بكم أحباءنا الكرام في تدوينة جديدة بعد هذا الغياب عن تقديم كل ما هو جديد في عالم التدوين ،تلقيت عدة رسائل تسألني عن طريقة تركيب خاصية الصور المنبثقة Jquery Lightbox والآن أتيت لكم بالجديد ،فكثير منكم من قام بتطبيق العديد من المحاولات لهذه الإضافة في مدونته لكن بدون فائدة وما يزيد الطين بلة هو يجب تعديل كودHTML  لكل صورة علي حدة ووضع الجملة rel="lightbox" title="Your image Caption"  بعد الوسم" a>" الذي يخص الصورة ،أما الآن مع الخاصية الجديدة التي أتيت لكم بها  تقوم بتفعيل الصور المنبثقة لجميع الصور التي تحتوي عليها المدونة بصفة تلقائية ولا داعي لإضافة أي شيء على كود الصورة ,ولمعاينة هذه الإضافة قم بالضغط على الصورة أسفله .

والآن بعد أن قمت بمعاينة الإضافة سوف نتوجه إلى التطبيق على المدونة ما عليك سوى البحث عن الوسم :

</body>

ثم قم بلصق الكود التالي قبله مباشرة :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<style type='text/css'>
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>
<script src='http://lightboxabuiyad.googlecode.com/svn/jquery.lightbox-0.4.js' type='text/javascript'/>
<link href='http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
$(function() {
$(&#39;a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)&#39;).lightBox();
});
</script>

هل ترون كم الأمر بسيط ،ومبروك عليكم جميعا مع متمنياتي لكم بمتابعة ممتعة  .

7:53 م

مزيد من المعلومات »

• • فيسبوك
  • تويتر
  • غوغل بلس

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F )

]]></b:skin>

ثم قم بوضع الكود التالي قبله

.post img {-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
}

.post img:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}

يمكنك التحكم في درجة ميلان الصور كما تريد وبإتجاهها كذلك  سواء على اليسار أم على اليمين وذلك بإستبدال الرمز (+) بالرمز( -) والعكس، حيث تمثل القيمة 2deg+ درجة الميلان قبل وضع مؤشر الماوس  وتمثل كذلك القيمة  1deg- درجة الميلان عند وضع مؤشر الماوس على الصورة .


والتتيجة تكون الصورة على هذا الشكل .

هذا كل شيء ،أتمني أن تعجبكم هذه الإضافة،في إنتظار آرائكم وإستفساراتكم حول الموضوع .

9:02 م

مزيد من المعلومات »

• • فيسبوك
  • تويتر
  • غوغل بلس

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

لا تقلق فإنك وحدك من يراها ،كما قلت سابقا .
الآن نتوجه لتطبيق الإضافة على مدونتك
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.

<data:post.body/>

ولوضع الإضافة أسفل كل تدوينة قم بلصق الكود التالي بعده :

<p><span style="text-align:center; display: block;"><a href="http://www.abu-iyad.com/2010/12/ip-address-widget-for-your-blogger.html"><img src="http://www.wieistmeineip.de/ip-address/?size=468x60" border="0" width="468" height="60" alt="IP" /></a><br /><small><a href="http://www.abu-iyad.com/2010/12/ip-address-widget-for-your-blogger.html"></a></small></span></p>

يمكنك وضع شكل آخر لإضافة على هذا الشكل  :

وذلك بلصق الكود التالي بدلا من الكود السابق

<p><span style="text-align:center; display: block;"><a href="http://www.abu-iyad.com/2010/12/ip-address-widget-for-your-blogger.html"><img src="http://www.wieistmeineip.de/ip-address/" border="0" width="125" height="125" alt="IP" /></a><br /><small><a href="http://www.abu-iyad.com/2010/12/ip-address-widget-for-your-blogger.html"></a></small></span></p>

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

1:45 ص

مزيد من المعلومات »

• • فيسبوك
  • تويتر
  • غوغل بلس

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

الآن نتوجه لتطبيق الإضافة على مدونتك
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

ثم قم بلصق الكود التالي تحته مع إدخال إسم الكاتب ورابط الصورة الخاصة به

<b:if cond='data:post.author == "إسم الكاتب الأول"'>
<span class="author"><img src="رابط صورة الكاتب الأول"/></span>
</b:if>
<b:if cond='data:post.author == " إسم الكاتب الثاني"'>
<span class="author"><img src="رابط صورة الكاتب الثاني"/></span>
</b:if>
<b:if cond='data:post.author == " إسم الكاتب الثالث"'>
<span class="author"><img src="رابط صورة الكاتب الثالث"/></span>
</b:if>

ملاحظة : يمكنك زيادة  عدد مؤلفي المدونة كما تريد وذلك بإضافة هذا الكود وإعادته في عدد المرات المراد زيادرها تحت الكود السابق.

<b:if cond='data:post.author == " إسم الكاتب "'>
<span class="author"><img src="رابط صورة الكاتب "/></span>
</b:if>

ملاحظة هامة : يجب أن يكون إسم الكاتب نفسه الإسم الموجود في لائحة مؤلفين المدونة والذي يمثل إسم تعريف المدون.

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

]]</b:skin>

ثم قم بلصق الكود التالي قبله :

.author img{
padding: 0;
 float: left;
 border: none;
margin: 0 10px 10px 0;
}

يمكنك التعديل على الأبعاد  0 0px 10px 10px لإجاد المكان المناسب لتموضع صورة الكاتب في المدونة,ويمكنك كذلك وضع صورة الكاتب على اليمين وذلك بإستبدال الكلمة left  بالكلمة right
قم بحفظ القالب
أتمني أن تكونوا قد إستفدتم من هذا الإضافة الجديدة ،في إنتظار آرائكم وإستفساراتكم ،دمتم بود

3:11 م

مزيد من المعلومات »

• • فيسبوك
  • تويتر
  • غوغل بلس

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

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

نقوم باختيار الشكل المناسب لنا ,على سبيل المثال اخترنا ھذا الشكل :

سوف نجد اسفل الشكل ضمن تبويب (Universal) الكود الخاص بهذا المؤشر
نقوم نسخه

 

 

بعد اختيار الشكل المناسب
نذھب الى مدونة بلوقر ونقوم بتسجيل الدخول لحسابنا
ثم بعد ذلك نذھب الى (لوحة التحكم الرئيسية) ثم (تصميم) ثم (تحرير Html)

 

نقوم بتفعيل حقل (توسيع قوالب عناصر واجهة المستخدم)

 

الان نضغط على (Ctrl+F) ونبحث على ھذا الكود

 

 

الان نقوم بلصق كود المؤشر الذي نسخناه من موقع cursors-4u

مباشرة اسفل

كما ھو موضح في الصورة

 

  بعد ذلك نقوم بحذف الجزء الزائد من الكود وھو ليبل (label)
 اعلاني لموقع (cursors-4u)
يظهر في أعلى واجهة المدونة
ھذا ھو

ملاحظة : الجزء الزائد عادتاً يبدأ مباشرة بعد

<style/>

فنقوم بتحديد كود الليبل الاعلاني ونحذفه
كما ھو موضع في الصورة

 

 

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

الان نضغط على (حفظ القالب) ليتم حفظ التغييرات.

ولتحميل الموضوع على شكل ملف بصيغة PDF
إضغط على زر التحميل

مع تحيات مدونة أبو إياد
http://www.abu-iyad.com/
بالتعاون مع مدونة وَذَكِّرْ
http://wthaker.blogspot.com/

7:08 ص

مزيد من المعلومات »

• • فيسبوك
  • تويتر
  • غوغل بلس

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

وهذا مثال على صندوق البحث المخصص للمدونة ،وللمعاينة قم بكتابة مثلا : كلمة "إضافة" في صندوق البحث ثم إضغط على كلمة "بحث"

قم بالتوجه إلى موقع Google Custom Search  للتسجيل ،ثم قم بتتبع المراحل الآتية من خلال الصور أسفله.

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

3.عندما تظهر لك الصفحة التالية ،قم بالصغط على الزر Next لأننا سوف نقوم بتنسيق صندوق البحث في ما بعد .

4.في هذه المرحلة ،قمنا بالحصول على كود صندوق البحث ،لكننا سوف نقوم ببعض التعديلات عليه قبل نسخه وذلك بالضغط على الإختيار look and feel .

5.في هذه المرحلة سوف نقوم بوضع علامة على  الإختيار "google-hosted page" وذلك للحصول على صفحة النتائج مشابهة لمحرك البحث جوجل.
*يمكننا التعديل علي الستايل الذي نريد أن يظهر به ويمكننا أيضا إضافة صورة لشعار المدونة وذلك من الإختيار Logo .
*نقوم بحفظ التغييرات ثم نضغط على الزر Get code  للحصول على الكود .

6.سوف نحصل على الكود بهذا الشكل ،نقوم بإضافته من تصميم المدونة ثم إضافة أداة html/javascript

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

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

حيث يكون رابط خريطة المدونة على هذا الشكل،مع تبديل ما لون بالأحمر برابط مدونتك.

http://www.abu-iyad.com/atom.xml?redirect=false&start-index=1&max-results=500

أتمنى أن تكونو قد إستفدتم من هذا الدرس ،ولأي إستفسارات أو تعقيب على الموضوع ،المورجوا ترك تعليقاتكم لأجيب عليها في أقرب وقت ممكن ،إنشاء الله

8:15 ص

مزيد من المعلومات »

• • فيسبوك
  • تويتر
  • غوغل بلس