السلام عليكم ورحمة الله تعالى وبركاته ، مرحبا بكم أحباءنا الكرام في تدوينة جديدة بعد هذا الغياب عن تقديم كل ما هو جديد في عالم التدوين ،تلقيت عدة رسائل تسألني عن طريقة تركيب خاصية الصور المنبثقة 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>

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

Résuméabuiyad

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحرير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- درجة الميلان عند وضع مؤشر الماوس على الصورة .


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

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

Résuméabuiyad

السلام عليكم ورحمة الله ، مرحبا بكم مجددا في موضوع جديد ،اليوم سوف  نتعرف على إضافة جديدة تسمح بإظهار لزائر مدونتك ،عنوان 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 ثم قم بلصق إحدى الأكواد السابقة .
أتمنى أن تنال إعجابكم ،دمتم بود

Résuméabuiyad

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

الآن نتوجه لتطبيق الإضافة على مدونتك
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحرير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
قم بحفظ القالب
أتمني أن تكونوا قد إستفدتم من هذا الإضافة الجديدة ،في إنتظار آرائكم وإستفساراتكم ،دمتم بود

Résuméabuiyad

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

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

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

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

 

 

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

 

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

 

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

 

 

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

مباشرة اسفل

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

 

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

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

<style/>

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

 

 

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

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

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

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

Résuméabuiyad

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

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

قم بالتوجه إلى موقع 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

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

Résuméabuiyad

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

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

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

]]></b:skin>

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

/*---------- bubble tooltip -----------*/       

a.tt{        

    position:relative;        

    z-index:24;        

    color:#3CA3FF;        

    font-weight:bold;        

    text-decoration:none;        

}        

a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/       

a.tt:hover{ z-index:25; color: #aaaaff; background:;}        

a.tt:hover span.tooltip{        

 display:block;        

 position:absolute;        

 top:0px; left:0;        

 padding: 15px 0 0 0;        

 width:200px;        

 color: #993300;        

 text-align: center;        

 filter: alpha(opacity:90);        

 KHTMLOpacity: 0.90;        

 MozOpacity: 0.90;        

 opacity: 0.90;        

}        

a.tt:hover span.top{        

 display: block;        

 padding: 30px 8px 0;        

 background: url(http://img132.imageshack.us/img132/4946/bubblethumb.gif)

no-repeat top;        

}        

a.tt:hover span.middle{ /* different middle bg for stretch */        

 display: block;        

 padding: 0 8px; 

 background: url(http://img571.imageshack.us/img571/2558/bubblefillerthumb1.gif)

repeat bottom;        

}        

a.tt:hover span.bottom{        

 display: block;        

 padding:3px 8px 10px;        

 color: #548912;        

 background: url(http://img132.imageshack.us/img132/4946/bubblethumb.gif)

no-repeat bottom;        

}

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

<a class="tt" href="http://abu-iyad.blogspot.com" target="_blank"><img class="tt" src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" /><span class="tooltip"><span class="top"></span><span class="middle">مرحبا بكم على مدونة أبو إياد ،دروس،إضافات بلوجر وكل ما هو جديد في عالم التدوين .</span><span class="bottom"></span></span></a>

 ولتطبيق نفس العملية علي نص (كلمة أو جملة ) نستعمل هذا الكود :

<a class="tt" href="http://abu-iyad.blogspot.com" target="_blank">  مدونة أبو إياد<span class="tooltip"><span class="top"></span><span class="middle">مرحبا بكم على مدونة أبو إياد ،دروس،إضافات بلوجر وكل ما هو جديد في عالم التدوين</span><span class="bottom"></span></span></a>

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

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

 ولأي إستفسارات المرجو ترك تعليقاتكم في أسفل الموضوع

Résuméabuiyad