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

حصريا اضف الفوتوشوب الى موقعك الان وبكود صغير

هناك تعليقان (2):

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

شرح اضافة الكود اعمل صفحة جديدة سوي لها تحرير و غير من التاليف الى ال HTML . 
الكود :

<div dir="rtl" style="text-align: right;" trbidi="on">
<center>
<iframe align="middle" border="0" frameborder="0" height="600" name="ps" src="http://pixlr.com/editor/" width="600"></iframe></center>
</div>



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


اضافة القران الكريم الي المدونة

هناك 9 تعليقات:

اضافة القران الكريم الي المدونة

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


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

 <center>
<div id="container-main">
<a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> حمل مشغل الفلاش </div>
<script type="text/javascript" src="https://cnmu.googlecode.com/svn/trunk/cnmu-player.js"></script>
<script type="text/javascript">
var s1 = new SWFObject("https://cnmu.googlecode.com/svn/trunk/cnmu-player.swf","ply","160","20","9","#FFFFFF");
s1.addParam("allowfullscreen","false");
s1.addParam("allowscriptaccess","always");
s1.addParam("flashvars","file=http://50.22.217.209:9998/;stream.nsv&type=mp3&volume=70&autostart=false");
s1.write("container-main");
</script>
</center>

نسأل الله أن يكون هذا العمل خالصاً لوجهه وان يوفق الجميع الى ما يحب ويرضى 
دمتم في امان الله
انضم الينا 

درس تصميم إضافات بلوجر : إصنع كود تبادل إعلاني للبلوجر بنفسك وعدل عليه كما تشاء

هناك 19 تعليقًا:

السلام عليكم ورحمة الله تعالى وبركاته

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

ترقبوا هذا القالب في القريب العاجل :)

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

درسنا اليوم هو حول

صنع كود تبادل إعلاني للبلوجر بنفسك وعدل عليه كما تشاء

الكود لا يحتاج إلا للـ HTML  طبعا


فل نتابع الشرح

الفكرة سهلة يتم عملها إنطلاقا من الجداول فقط

اولا نكتب كود الجول هكذا

    <table dir='rtl'>
      <tr>
        <td>خلية 1</td>
        <td>خلية 2</td>
      </tr>
      <tr>
        <td>خلية 3</td>
        <td>خلية 4</td>
      </tr>
    </table>
الجدول مكون من أربع خلايا

للمعاينة ستظهر هكذا


أولا نبدأ بشرح الوسوم

الوسم Table : هو وسم خاص بالجداول وهو المبدأ الرئيسي للجدول يبدأ بـ <table> ثم يغلق بـ <table/>

الوسم Tr : تعني "table row" وهي العنصر الذي تبدأ من خلاله الصفوف وتنتهي يبدأ بـ <tr> ثم يغلق بـ <tr/>

 الوسم Td : هي اختصار "table data". هذا الوسم يبدأ وينهي كل خلية في صفوف الجدول يبدأ بـ <td> ثم يغلق بـ <td/>

الآن كل هاته الأشياء منطقية وباتت واضحة بالنسبة لكم  لكن لنتعمق اكثر

الـ Td كمثال هي عبارة عن مصفوفات أفقية يعني كلما أضفنا عنصر Td يضاف أفقيا للعمود الأفقي فقط
أما الـ Tr فهو عبارة عن مصفوفة عمودية يعني كلما أضفنا عنصر Td يضاف العنصر أفقيا للعمود العمودي فقط
 صممت هاته الصورة لتوضح لكم الفكرة بشكل أفضل وأكثر بساطة


بعدما لاحظت الصورة الآن اصبحت تعلم اننا إذا أردنا مثلا إضافة إعلان على اليمين او اليسار مثلا ، سنضيف حقل td
أما لو أردنا إضافة إعلان فوق او تحت ، سنضيف حقل tr

لاتنسى هاته القاعدة

حقول td داخل حقول tr داخل حقل table

أمثلة بصور للمعاينة الحية

مثال 1 : إضافة خلية أي " إعلان " على المين او اليسار بالنسبة للكود الأول فإن الكود سيكون هكذا

    <table dir='rtl'>
      <tr>
        <td>خلية 1</td>
        <td>خلية 2</td>
        <td>الخلية المضافة</td>
      </tr>
      <tr>
        <td>خلية 3</td>
        <td>خلية 4</td>
      </tr>
    </table>
للمعاينة



الخلية المضافة قمت بإحاطتها باللون الاخضر


مثال 2 : إضافة خلية أي " إعلان " فوق او تحت بالنسبة للكود الأول فإن الكود سيكون هكذا

    <table dir='rtl'>
      <tr>
        <td>خلية 1</td>
        <td>خلية 2</td>
      </tr>
      <tr>
        <td>خلية 3</td>
        <td>خلية 4</td>
      </tr>
      <tr>
        <td>الخلية المضافة</td>
      </tr>
    </table>
للمعاينة


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

مثلا لدي هاته الصورة وهي التي سأعمل بها


لنقم الآن بإضافة وسوم أخرى ليعمل معنا الكود

وسم a وهو رابط الإعلان أي المدونة المعلن لها

بداخله المتغير href خاص باستدعاء الرابط

مثال

<a href='رابط المعلَن لها هنا'></a>

وسم img أي صورة الإعلان

بداخلها المتغيرات src و alt و title  المتغير الاول فهو خاص باستدعاء الصورة اما الثاني سيعوضها بما سنكتبه داخله في حال تلفت الصورة والثالث أي عنوان المعلن لها مثلا

مثال

<img src='رابط صورة المعلَن لها هنا' alt='وصف الصورة في حال تلفت' title='مثلا عنوان المدونة المعلَن لها' />
الآن لندرج هاته الوسوم داخل الجداول لإنتاج كود تبادل إعلاني

تذكر هكذا سنعمله

اولا

<table>

ثم

<tr>

ثم

<td>

ثم

<a>

ثم

<img />

 ثم ننهي الوسوم اي هكذا

أي هكذا

    <table dir='rtl'>
      <tr>
        <td><a href='رابط المعلَن لها هنا'><img src='رابط صورة المعلَن لها هنا' alt='وصف الصورة في حال تلفت' title='مثلا عنوان المدونة المعلَن لها' /></a></td>

      </tr>
    </table>
 
لكن هذا الكود فقط لإعلان واحد الآن سيكون الكود النهائي لأربع إعلانات فقط



لكن بدون صور حتى الأن فشاهد ماذا سيحدث حيث هنا تعمل خاصية المتغير alt الذي تحدث عنه سابقا
 
    <table dir='rtl'>
      <tr>
        <td><a href='رابط المعلَن لها هنا'><img src='رابط صورة المعلَن لها هنا' alt='وصف الصورة في حال تلفت' title='مثلا عنوان المدونة المعلَن لها' /></a></td>

        <td><a href='رابط المعلَن لها هنا'><img src='رابط صورة المعلَن لها هنا' alt='وصف الصورة في حال تلفت' title='مثلا عنوان المدونة المعلَن لها' /></a></td>
        </tr>
      <tr>
        <td><a href='رابط المعلَن لها هنا'><img src='رابط صورة المعلَن لها هنا' alt='وصف الصورة في حال تلفت' title='مثلا عنوان المدونة المعلَن لها' /></a></td>
        <td><a href='رابط المعلَن لها هنا'><img src='رابط صورة المعلَن لها هنا' alt='وصف الصورة في حال تلفت' title='مثلا عنوان المدونة المعلَن لها' /></a></td>
        </tr>
    </table>

 عند معاينتها على المتصفح ستظهر هكذا

أرأيت تمت كتابة الوصف الذي كتبناه داخل المتغير alt 
ملحوظة : لهذا فيجب عليك ان تضع وصفا محاكيا لما في الصورة بالمتغير alt حتى ولو في شروحاتك فهي مهمة جدا

الآن حان وقت إضافة الصورة ليصبح بالشكل الكامل

 نفس الكود اعلاه مع إضافة الصورة والروابط والوصف والعنوان فقط

    <table dir='rtl'>
      <tr>
<td><a href='http://arabetutorial.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyF09dxEGeLcYuhELauTyKUL1O1ds1T_SYQJfoU7qS0JDyvN0zYjCUXr46LjTlngZmlhTJqTPsHgAeU5Pyv535tR-HmTvpK97vA-OdGj7gMXS4-R9Y3oM35lFmg5SilSmqg2THBGUZngk/s1600/ad100.png' alt='أعلن معنا بالمدونة' title='المدونة التعليمية للحاسوب' /></a></td>

<td><a href='http://arabetutorial.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyF09dxEGeLcYuhELauTyKUL1O1ds1T_SYQJfoU7qS0JDyvN0zYjCUXr46LjTlngZmlhTJqTPsHgAeU5Pyv535tR-HmTvpK97vA-OdGj7gMXS4-R9Y3oM35lFmg5SilSmqg2THBGUZngk/s1600/ad100.png' alt='أعلن معنا بالمدونة' title='المدونة التعليمية للحاسوب' /></a></td>
         </tr>
      <tr>
<td><a href='http://arabetutorial.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyF09dxEGeLcYuhELauTyKUL1O1ds1T_SYQJfoU7qS0JDyvN0zYjCUXr46LjTlngZmlhTJqTPsHgAeU5Pyv535tR-HmTvpK97vA-OdGj7gMXS4-R9Y3oM35lFmg5SilSmqg2THBGUZngk/s1600/ad100.png' alt='أعلن معنا بالمدونة' title='المدونة التعليمية للحاسوب' /></a></td>
<td><a href='http://arabetutorial.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyF09dxEGeLcYuhELauTyKUL1O1ds1T_SYQJfoU7qS0JDyvN0zYjCUXr46LjTlngZmlhTJqTPsHgAeU5Pyv535tR-HmTvpK97vA-OdGj7gMXS4-R9Y3oM35lFmg5SilSmqg2THBGUZngk/s1600/ad100.png' alt='أعلن معنا بالمدونة' title='المدونة التعليمية للحاسوب' /></a></td>
        </tr>
    </table>

وسيظهر بهذا الشكل بالمتصفح

 
الآن أصبح لدينا كود تبادل إعلاني جاهز نقوم بإضافته للبلوجر إما عبر إضافة اداة او مباشرة داخل القالب

تخصيص الكود فوق
 
بالأحمر رابط المدونة المعلَن لها

بالأزرق رابط الصورة

بالأخضر وصف الصورة

بالبرتقالي عنوان المدونة المعلَن لها

إلى هنا نصل غلىنهاية هذا الدرس الذي تطلب مني مجهودا جبار فأرجوا التعليق كما انني حذفت الـCapatcha
لسهولة التعليق وأي استفسار انا موجود واحب ان اذكركم انه مازل في جعبتي الكثير لكم إخواني الكرام
لإثراء المحتوى العربي من جهة منصة البلوجر

تحياتي والسلام عليكم ورحمة الله تعالى وبركاته








 

برنامج swish max 4 كامل + الشرح بالفيديو

هناك 7 تعليقات:

بسم الله الرحمن الرحيم 

جايب لكم اليوم برنامج swish max 4  مع شرح التثبيت بالفيديو 

وكل ما اتمنى منكم الاشتراك في اليوتيوب و تويتر و الفيسبوك و زوروا المدونة

بسم الله نبدأ :
_________________________________________


 swish max 4 
_________________________________________


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

مفاهيم ومصطلاحات أساسية يجب أن نعرفها بالسويش ماكس :
أ - Scene
 وهي : المشاهد ( السينات ) و وظيفتها تقسيمية . وكل فليم فلاشي يكون مقسم لعدة مشاهد ( سينات ) .
ب - Sprite
 وهي : السبيرات ويمكن إضافتها بداخل المشاهد وهي تعتبر كمشاهد مصغرة ومنفصلة عن بقية الكائنات داخل المشهد .
ج - TimeLine
 وهو : شريط الوقت أو شريط الزمن وهو يتكون من عدد لانهائي من الـ Frames ( الفريمات ) ، و شريط الوقت هو الذي نقوم بإضافة المؤثرات والحركات عليه ، والذي توجد عليه جميع المؤثرات ( Effects ) المختارة للكائنات .
د - Effects
 وهي : الحركات والمؤثرات المختلفة التي توضع للكائنات ، ويتم التحكم بها إما عن طريق الـ Events أو عن طريق الـ Action Script
هـ - Events 
وهي : وهي الأحداث من الأزرار Buttons أو السبيرات Sprite وغيرها ...
و - Objects وهي : الكائنات من صور وأشكال وأصوات وأزرار ونصوص


مميزات النسخة الاخيره :
-1 الآن في سويتش ماكس 4 أصبح الصوت كما أنه ستيديو تستطيع اللعب بالصوت

2- أصبح تصميم الويب في سويتش ماكس احترافي وتستطيع إنشاء موقعك الفلاشي باحتراف وزيادة الخصائص

3- زيادة أكواد السكربت فالآن خاصية السكربت أصبحت تقبل أنواع عديدة من الأكواد كأكواد من نوع php أو html أو جافا سكربت

4- خاصية التصدير أصبحت أكثر احترافية من ذي قبل فالآن تستطيع تصدير عملك HD عالية الصيغة +دمج مقاطع الفيديو

5- عندما يقفل البرنامج ما عليك سوا التوجه إلى مجلد البرنامج على المسار التالي:
وستجد ملف باسم error
قم بفتح الملف وستجد العمل الذي قمت به مؤخرا
C:\Program Files\Swish Max4


_________________________________________



_________________________________________
ONLY $149.95

مجاني لعيونكم :)
_________________________________________

للتحميل اضغط على الصورة الموقع المفضل لك
          
          
_________________________________________


تابع الشرح بالفيديو


في الختام اتمنى ان الموضوع ان ينال على اعجابكم و ان الشرح واضح لا غبار عليه 
واي استسفار انا حاضر 

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

هناك 14 تعليقًا:

السلام عليكم أخوتي الكريم

أعلن عن 

اقتراب دورة تطبيقية لتصميم قالب بلوجر احترافي عبر حلقات فيديو

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

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


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

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

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

برنامج Adobe Dreamweaver CS6 كامل + الشرح بالفيديو *تم اضافة الشرح

هناك 21 تعليقًا:

بسم الله الرحمن الرحيم 

جايب لكم اليوم برنامج Adobe Dreamweaver CS6 مع شرح التثبيت بالفيديو 

وكل ما اتمنى منكم الاشتراك في اليوتيوب و تويتر و الفيسبوك و زوروا المدونة

بسم الله نبدأ :
_________________________________________


Adobe Dreamweaver CS6
_________________________________________

برنامج  Adobe Dreamweaver CS6 بحجم 273 mb 
هو برنامج تصميم المواقع والويب بل
انه برنامج تطوير الويب الحقيقي تجد فيه مكونات وادوات CSS وتجد فيه مزايا كبيرة للاجاكس Ajax
البرنامج هو الافضل لكل من لا يستطيع البرمجة في لغات البرمجة واهمها HTML وهو البرنامج الذي يسهل عليك عمل الصفحات المعقدة والمترابطة .
 تدعم النسخ الحديثة لغات العديد من لغات تطوير الويب وإطارات العمل،
 مثل: java script , css asb.net , php
كغيره من برامج تحرير صفحات الويب، كما يتيح أيضا إنشاء "إمتدادات" لأداء مهام ووظائف إضافية عادة تستخدم html و javascript .
 هذا بالإضافة إلى إمكانية معاينة الصفحة في العديد من المتصفحات،‌ بشرط أن تكون مثبتة على الحاسوب المستخدم.

_________________________________________



_________________________________________


مجاني لعيونكم :)
_________________________________________

للتحميل اضغط على الصورة 

_________________________________________


تابع الشرح بالفيديو



في الختام اتمنى ان الموضوع ان ينال على اعجابكم و ان الشرح واضح لا غبار عليه 
واي استسفار انا حاضر 

الدرس الرابع : العلامات الشرطية المستعملة بقوالب بلوجر

هناك 16 تعليقًا:

السلام عليكم ورحمة الله تعالى وبركاته
سعدت بلقائكم في درس من أكثر الدورات إقبالا وبحثا

درسنا اليوم هو 
تعريف حول الوسوم الشرطية المستعملة بقوالب بلوجر


مقدمة الدرس


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

الشرط  b:if>

فإذا نظرت إلى محتوى قالبك ستجد انه لايخلوا ابدا من هذا الوسم
فحسب ملاحظتي انه خاص فقط ببلوجر عبر تحليلي الشخصي
الحرف "b" : يرمز لبلوجر
و "if" : اداة شرطية وهي "إذا"

هاته العلامات سنشرحها بمفهوم منطقي وبسيط وهي إما لتنفيد أمر أو عدة  أوامر أو عدم تنفيدها

بالنسبة لوسم بلوجر سيكون بهذا الشكل مع إضافة if الشرطية

<b:if ......... >
</b:if>

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

<b:if cond='condition == X'>
أظهرني عندما يتحقق الشرط ويساوي القيمة X
</b:if>
يعني عندما سيتحقق الشرط ويساوي القيمة X فإن الأمر يصبح صحيحا وبالتالي ستم تنفيده مباشرة
أما غذا لم يتحقق الشرط فإن الامر سيتم تجاهله مباشرة

لكن مثلا إذا أردنا إنشاء اكثر من امر فإننا نضيف هاته العلامة الشرطية بعد كل شرط
وهي esle الذي يتم إضافته بدل if

مثال

<b:if cond='condition == X'>

    <b:if cond='condition == Y'>
    أظهرني في حال تحقق الشرط واي
    </b:if>
  
<b:else/>
أظهرني في حال عدم تحقق الشرط أكس
</b:if>
الآن يمكنك ملاحظة مالذي سيقع
 أي أنه إذ لم يتحقق الشرط الاول فالشرط سيعتبر ملغيا وسيتجاهله المتصفح
وبالتي سيحقق الأمر الذي بعده مباشرة

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

أداة الاشتراك فى المواقع الاجتماعية ذات نمط الوردبرس ببلوجر

هناك 3 تعليقات:

السلام عليكم و رحمة الله تعالى و بركاته 

بسم الله و الحمد لله و الصلاة و السلام على رسول الله و بعد:-

اليوم أقدم لكم أداة الاشتراك فى المواقع الاجتماعية
و  لاشك أنك شكل الاداة سوف تلفت انتباه الزوار لكى يلقوا نظرة على صفحة الفيس بوك الخاصة بك أو تويتر أو google+  .......إلخ

تتبع الخطوات التالية لإضافة الاداة الى مدونتك




1-اذهب الى لوحة التحكم فى مدونتك
2- التخطيط >>  اضافة أداة >> Html/java script
3-قم بلصق الكود التالى فى الاداة 
ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
<style type="text/css">
.btnt-chronicl-social {  width: 320px;  margin: -10px;  }
.btnt-chronicl-social ul {  margin: 0;  padding: 0;  }
.btnt-chronicl-social ul li {  list-style:none;   padding: 0; text-transform: none; }
.btnt-chronicl-social ul li a {   color: #fff;   display:block;  }
.btnt-chronicl-social ul li a:hover {  color: #c9c9c9;  background-color: #333;   }
.btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
</style>

<div class="btnt-chronicl-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/technawy">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/eng17ah">تابعنى على تويتر</a></li>
<li><a class="facebook" href="https://www.facebook.com/tethnia4you">تابعنا على فيس بوك Facebook</a></li>
<li><a class="google" href="https://plus.google.com/116206173797368082294/">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/in/eng17ah">اتصل بى من خلال LinkedIn</a></li>
</ul>
</div>
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ


* قم بتغيير الرقم 320 بالعرض المناسب لمدونتك
* قم بتغيير الكلمات التى باللون البرتقالى بإسم المستخدم الخاص بك على شبكات التواصل الاجتماعى

انتهى الدرس و الحمد لله و اتمنى أن تعجبكم الاداة 

ولا تنسونا من صالح دعائكم و السلام عليكم و رحمة الله تعالى و بركاته

إضافة مشغل صوتى لتشغيل بعض الملفات الصوتية ليستمع إليها من يتصفح مدونتك

هناك 3 تعليقات:

السلام عليكم و رحمة الله تعالى و بركاته 

بسم الله الرحمن الرحيم و الحمدلله رب العالمين و الصلاة و السلام على أشرف المرسلين و بعد:-

فى أول تدوينة لى فى المدونة
سأشرح لكم بمشيئة الله طريقة إضافة مشغل صوتى  لتشغيل بعض الاغانى أو الملفات الصوتية التى تضعها انت  ليستمع إليها زوار مدونتك و من يتصفح مدونتك
الشرح فيديو
أترككم مع الشرح :



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

إضافة طائر تويتر الى مدونتك

هناك 4 تعليقات:

السلام عليكم و رحمة الله تعالى و بركاته 

بسم الله و الحمدلله و الصلاة و السلام على رسول الله و بعد:-

اليوم بمشيئة الله تعالى سوف اشرح لكم 

كيفية اضافة طائر تويتر إلى مدوناتكم 


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

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

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

اليوم أتيت اليكم بأداة (( طائر تويتر )) و هى جذابة بما فيه الكفاية لكى تجعل الزوار يتتبعونك فى تويتر 


كيفية اضافة طائر تويتر


1-بلوجر >> قالب >> تحرير html

2-ابحث عن
    </body>  
ثم أضف الكود التالى بعده مباشرة 
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

<script src='http://yourjavascript.com/1523826141/Flying twitter bird.js' type='text/javascript'>
</script> 
<script type='text/javascript'> var twitterAccount = "eng.ah17"; var tweetThisText = " <data:blog.pageTitle/>: <data:blog.url/> "; tripleflapInit(); </script> 
<span style='font-size:11px;position:absolute;'/><a href='http://arabetutorial.blogspot.com/' target='_blank'>Twitter Bird Gadget</a> 
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
* استبدال eng.ah17 بإسم المستخدم الخاص بك فى تويتر
 *احفظ القالب الخاص بك
.* اذهب الى مدونتك وستجد الطائر يحلق فى أرجائها
* إذا كنت تواجه أى صعوبة فى تركيب الاداة أو الاستفسار عن شىء فلا تترد فى ترك تعليقك فى الاسفل و سيتم الرد عليه سريعا إن شاء الله



شكرًا لكم و السلام عليكم و رحمة الله تعالى و بركاته 

جميع الحقوق محفوظة لمدونة المدونة التعليمية للكومبيوتر 2013

تصميم : بويردن