أخر المقالات
تابعـني
إشترك معنا ليصلك جديد الموقع

بــريدك الإلكترونى فى أمان معنا

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

الزيارات:
كود فانوس رمضان بصيغة Gif

    لا يــوجد تعـــليقات

السلام عليكم ورحمة الله وبركاتة
بمناسبة شهر رمضان الكريم جئتكم بكود فانوس رمضان المتحرك (Gif)
هذا الكود جميل ومتحرك بطريقة Gif ويعطي رونقا خاصا للمدونة، وذلك لتهنئة زوار مدونتك بقدوم شهر رمضان الكريم بشكل احترافي.
طريقة تركيب الإضافة :
1- لوحة تحكم.
2- القالب.
3-  بحت عن كود :
<body>
4-  ضع الكود التالي قبله او بعده :
body:before {
    content: &#39;&#39;;
    width: 200px;
    height: 195px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisw4wR9xAim_OoJWjgdFGDGKXQ9Hqbwd_6R39DfTqTMTCpBjbNf0fzsbkzdJcw-LZXOBj0OrCQlcx9lrPOlxVFljhPQtQUbDIXIVcYdzUs-sYoxR2wL2-4vejsdjxNr3lUmTXynjq2OsE/s1600/Ramdan.gif) top left no-repeat;
    position: absolute;
    left: -10px;
    top: -15px;
    z-index: 5;
}

body:after {
    content: &#39;&#39;;
    width: 164px;
    height: 240px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfEoNshsTPFGxKaML0X9076-ITgu0q4yK74orUT8TGNtMSVdxLTycYOym1YcmNW-2mGJUgIdxe6zl4TddAnSYg6pZXYtrK1R2b0yYUCRLDFfERwohUbbrjxykPsaFoGml2vpmOBV0SgNU/s1600/2e.png) top left no-repeat;
    position: absolute;
    left: -2px;
    top: -2px;
    z-index: 4;
}
</style>
5-  قم بحفظ النموذج
اتمنى ان تنال اعجابكم ورمضان مبارك كريم

اقرء المزيد

الزيارات:
كود ذكر المصدر عند النسخ

    لا يــوجد تعـــليقات

السلام عليكم ورحمة الله وبركاته
أهلاً ومرحباً بزوار ومتتبعي شبكة عدناني
درس اليوم هو كود ذكر المصدر لحماية منشورات مدونتك و تنبيه كل من ينسخ من تدويناتك أن ينسخ المصدر.
هاته إضافة تسهل علي الزائر الذي يقوم بنسخ منشوراتك ذكر مصدر الموضوع.
طريقة التركيب
1- إذهب إلي تحرير قالبHTML
2- ضع علامه في خانة توسيع القالب
3- إحفظ نسخه إحتياطيه من القالب "كالعاده" 
4- إبحث عن الكودالتالي :
</head> 
5- ضع الكود فوقه مباشرة
<!-- كود ذكر المصدر --> 
<script type='text/javascript'>
        if(document.location.protocol==&#39;http:&#39;){
         var Tynt=Tynt||[];Tynt.push(&#39;d-PytMlMWr4j7madbi-bnq&#39;);Tynt.i={&quot;ap&quot;:&quot;المصدر| شبكة عدناني&quot;};
         (function(){var s=document.createElement(&#39;script&#39;);s.async=&quot;async&quot;;s.type=&quot;text/javascript&quot;;s.src=&#39;http://tcr.tynt.com/ti.js&#39;;var h=document.getElementsByTagName(&#39;script&#39;)[0];h.parentNode.insertBefore(s,h);})();
        }
//for more visit www.3adnani.com
</script>
<!-- كود ذكر المصدر -->
6- إحفظ القالب وعاين الإضافه بنفسك

اقرء المزيد

الزيارات:
كود مشغل Mp3 للبلوجر

    لا يــوجد تعـــليقات

السلام عليكم ورحمة الله تعالى وبركاته
اليوم سنتطرق في هدا الدرس الجديد الى كيفية إدماج مشغلات Mp3 بدون فلاش او ريال بلايير....
مشغلات MP3 للويب أو لبلوجر متعددة وكثيرة لكن قليلة هي المشغلات المميزة التي تجمع بين الخفة وامكانية التنسيق، الاضافة الجديدة عبارة عن كود بسيط ماعليك سوى تحميل mp3 الخاصة بك باحدى مواقع تنزيل ملفات mp3 للحصول على رابط ملف mp3 مباشر.
 وضعت هدا الكود للاستفادة منه نظراً لان البعض قد يسئ إستخدام هذا النوع من الإضافات وأنا برئ من اى شخص سيستخدم تلك الإضافات فيما يغضب رب العالمين لذلك حاول ان يكون إستخدامك لها في نشر ما ينفع الناس.
طريقة التركيب
1- المشاركة
2- تبويب HTML
3- تركيب الكود في المشاركة
4- نشر



<audio src="song.mp3" controls="controls">



Your browser does not support the audio element.



</audio>
song.mp3 : غيره برابط ملف mp3 مباشر
معاينة
بعض سور القران واناشيد اتمنى ان تنال إعجابكم

اقرء المزيد

الزيارات:
كود تاثير اللمعان على شعار المدونة

    لا يــوجد تعـــليقات

بسم الله الرحمان الرحيم
اليوم نقدم لكم هذه الإضافة الرائعة، التي ستضيف على شعارك لمعانا يجعله أكثر إحترافية بدون الحاجة إلى العمل عليه بالفوطوشوب وتحميل صورة صعبة التحميل على مدونتك إلخ..
بدون أن نطيل عليكم نترككم مع شرح الإضافة
طريقة التركيب
للمعاينة هذه الإضافة تختلف لقالب لآخر، في البداية ستذهب إلى
1- قالب المدونة قم بحفظ نسخة احتياطية لقالبك
2- ابحث باستخدام ctrl+f عن هذا الكود
</body>
3- ثم تضيف قبله مباشرة هذا الكود

<!-- Start logo effect -->



<script src='https://trollvlhcv.googlecode.com/svn/trunk/fortroll/jquery-1.7.min.js' type='text/javascript'/>



<script src='https://trollvlhcv.googlecode.com/svn/trunk/fortroll/trolllg.js' type='text/javascript'/>



<!-- initialize the plugin -->



<script>



jQuery(document).ready(function () {



$(".peShiner").peShiner();



})



</script>



<!-- End logo effect-->
4- ثم بعدها إبحث عن الكود التالي
<div id='header-inner'>
كل مدونة لها كود خاص بالصورة المهم انا لدي header-inner كل ماعليك البحت عن رابط شعارك بالقالب
ستجده على الشكل التالي
ستغير الكود الذي تم تحديده في الصورة بالكود التالي الذي تراه مناسب لمدونتك

التأثير الناري

<div class='peShiner'>



<a expr:href='data:blog.homepageUrl' style='display: block'>



<img data-color='fireHL' data-duration='3' expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>



</a>



</div>
اللون السمائي

<div class='peShiner'>



<a expr:href='data:blog.homepageUrl' style='display: block'>



<img data-color='oceanHL' data-duration='3' expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>



</a>



</div>
اللون الأسود

<div class='peShiner'>



<a expr:href='data:blog.homepageUrl' style='display: block'>



<img data-color='black' data-duration='3' expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>



</a>



</div>

الان اضغط على حفظ وشاهد مدونتك

اقرء المزيد

الزيارات:
كود أداة "جدول المباريات العالمية"

    15 تعــــليق

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


 طريقة تركيب الاداة
  1- لوحة التحكم بلوجر.
  2- تخطيط.
  3- إضافة أداة HTML/JavaScript .
  4- ضع هذا الكود في الحقل:
<div class='widget-content'>
<iframe width="296" height="470" src="http://www.hibasport.com/livematch.php" frameborder="0" allowfullscreen=""></iframe>
</div>
<div class='clear'>
</div>
  5- ثم قم بحفظ الأداة
أتمنى أن أكون قد أفدتكم لا تنسو دعمنا بتعليق والدعاء لوالدي بالمغفرة ولجميع المسلمين
دمتم في رعاية الله.

اقرء المزيد

الزيارات:
كود إضافة خاصية التلميح أو Tooltip

    2 تعــــليق

السلام عليكم ورحمة الله تعالى وبركاته
اليوم اقدم لكم طريقة اضافة خاصية التلميح او tooltip لمدونة بلوجر وهي تساعد علي معرفة عناوين الصفجات والأقسام والصور والكتير حيت تلمح للزائر عند وضعه الماوس عنوان الصفحة  او عنوان الاٌسام
وتتميز هاته الاضافة بخاصيات:before وafter ويمكنك تعديلها افقيا، عموديا، يمينا، يسارا.
نبقى مع طريقة التركيب
طريقة التركيب الإضافة
1- لوحة التحكم بلوجر.
2- قالب.
3- تحرير HTML .
4- نبحث عن الكود:  ]]></b:skin>
5- ضع بعده التالي:
<style type='text/css'>
/* tooltip------------------------------------- */
[data-tooltip]:before {
    position: absolute;
    top: 145%;
    left: 125%;
    margin-bottom: 5px;
    margin-left: -90px;
    padding: 5px 0px 5px 0px;
    width: 80px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #000;
    background-color: #b44;
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
}
[data-tooltip]:after {
  position: absolute;
  top: 126%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-bottom: 5px solid #000;
  border-bottom: 5px solid #b44;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: &quot; &quot;;
  font-size: 0;
  line-height: 0;
}
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
/* tooltip------------------------------------- */
</style>

اضافة وسم data-tooltip في اي رابط او صورة او زر وهو عنوان اللإضافة.
متلا
<li><a data-tooltip='فهرس' href='http://3adnani.com/p/blog-page_83.html' rel='dofollow' target='_blank'></a> </li>
اتمنى انت تنال اعجابكم ولا تنسونا بصالح الدعاء لي و لوالدي واخواني وجميع المسلمسن

اقرء المزيد

الزيارات:
كود تغيير شريط scroll bar

    لا يــوجد تعـــليقات

السلام عليكم ورحمة الله تعالى وبركاته
في هدا الدرس الدي سنريكم طريقة تغيير شريط التمرير أوscroll bar لمدونتك في البلوجر الى شكل احترافي جديد.
شريط التمرير أو ما يعرف ب scroll bar هو داك الشريط الدي يوجد بجانب الشاسة يتم عن طريقه  تنزيل الصفحات  او الصعود بها كما انه يوضح للقارئ طول الصفحة وتحديد كم تبقى لك من القراءة.
طريقة تركيب الإضافة
1- لوحة التحكم بلوجر.
2- قالب.
3- تحرير HTML .
4- نبحث عن الكود:
<style>
 /* css from:http://3adnani.com// */
::-webkit-scrollbar-thumb:horizontal{
height:10px;
background-color:#CCC;
}
::-webkit-scrollbar-thumb:vertical{
width:8px;
background-color:#B44;
box-shadow:1px 1px 4px rgba(0,0,0,0.16);
}
::-webkit-scrollbar{
width:8px;
height:5px;
background:#CCC;
box-shadow:inset 1px 1px 4px rgba(0,0,0,0.13);
}
</style>
ادا اردت تغيير شريط اللون الرمادي بلون اخر غير فقط رمز اللون بالازرق
ادا اردت تغيير شريط اللون الاحمر بلون اخر غير فقط رمز اللون الاحمر

اقرء المزيد

الزيارات:
اضافة روابط الكود الخاصة بك من خلال موقع Google code

    لا يــوجد تعـــليقات

سنتطرق في موضوعنا اليوم لخدمة Google Code ومميزاتها وطريقة حفظ ملفات الجافا فيها (استخدام Google Code لحفظ ملفات الجافا بروابط مباشرة)
 Google Code يساعدك في رفع ملف CSS و HTML.... ويحفظها عن طريق رابط خاص بك أي اي كود قمت بخلقه يتم ربطه برابط خاص بك إدا حدفت هدا الرابط أكيد لن يشتغل الكود.
كما أنه يقوم بحفظ ملفات ورقة الأنماط CSS وغيرها من أنواع الملفات مثل الصور، وصفحات الويب HTML, وغيرها؛ رغم أنه بالإمكان رفعها بنفس الطريقة بدون مشاكل إلا أنها لن تعمل بعد رفعها ولن تحقق الغرض إذا أردت أن تربطها بقالب مدونتك كإضافة أو كورقة أنماط للمدونة ــ بل اسوأ من ذلك أنها ستضللك وتجعلك تشك في الإضافة أو قالب المدونة فتقضي وقتاً طويلاً تبحث عن الخلل في المكان السليم.
I لماذا لا تعمل ملفات CSS مباشرة عند حفظها في  Google Code؟! وماهو الحل؟
خدمة  Google Code موجهة في الأصل لأصحاب المشاريع البرمجية المختلفة, وهي بالتأكيد ليست خدمة استضافة ملفات مواقع, فعندما ترفع ملف CSS أو HTML فإن  Google Code سيعتبرها ملفات خام ولن يفهمها كما فهمتها أنت فيعتبرها مجرد ملفات خام لا لون لها ولا طعم ولا رائحه,
مثلاً
لو قمت برفع ملف اسمه index.html ثم نسخت رابطه في المتصفح لن يتم استعراضه على أنه صفحة ويب بل مجرد ملف خام سيسالك المتصفح هل تريد حفظه أم لا!.
بتعبير أعمق قليلاً: المتصفحات عندما تتعامل مع الملفات تبحث في الخادم المستضيف لهذه الملفات عن بروتوكل اسمه (MIME) يعرّف بامتدادات الملفات وهو الذي يحدد نوع الملف المُستعرض فيخبر المتصفح أن هذا الملف عبارة عن ملف نصي HTML، أو ملف نصي CSS، أو ملف تنفيذي exe .. وهكذا. و Google Code لا يفعل هذا إلا بالطريقة التي سنبينها لاحقاً بمشيئة الله.
(إذا كنت تملك استضافة خاصة ستجد زر خاص باسم mime type وسترى أن هناك العديد من تعريفات الملفات ..)
والحل أيها الكريم أن نتعامل مع  Google Code كأننا أصحاب مشروع!.
 Google Code يوفر ثلاثة أنظمة لإدارة المشاريع غايتها تنظيم المشروع وحفظ إصداراته والتعديلات التي أجريت عليه من قبل مطوريه وهي: (Git) و (Mercurial) و (Subversion). وسنعتمد على الأخير الا وهو (Subversion). وحتى نصل اليه من خلال الحاسب الآلي سنتسخدم أحد البرامج المتخصصة.
لا يهمنا هنا فهم هذه الأنظمة ولا كيف تعمل نريد أن نقتطف من هذا المجال فقط ما يحقق هدفنا وهو كما سترى في غاية اليسر، وهذه المعلومات التي قد تربك البعض أوردتها فقط لفهم القضية ليس إلا.
{إذاً الخلاصة لنرفع ملفاتنا إلى  Google Code سنتعامل مع نظام التحكم بالمشاريع المسمى (Subversion) من خلال برنامج اسمه (TortoiseSVN) يعمل على بيئة ويندوز وهناك بالطبع برامج للأنظمة الأخرى}

 II فتح حساب في Google Code واختيار نظام التحكم المناسب
1. لفتح حساب في  Google Code الدهاب الى الموقع https://code.google.com/ سنشرح في وقت لاحق كيفية التسجيل لمن لا يعرف القيام بذلك
2. دعنا نتأكد أن نظام التحكم بالمشروع لديك هو subversion:
    توجه الى صفحة المشروع.
    اختر التبويب الرئيسي “Administer”.
    ثم اختر التبويب الثانوي “Source”.
    تأكد أن كلمة (Subversion) مكتوبة بجانب العبارة “Version control system”
    إذا لم تكن هي الكلمة ، فقم بالضغط على الزر “Subversion” ليتحول المشروع اليه. انظر الصورة:
III الحصول على بيانات حساب المشروع (الرابط – اسم المستخدم ــ كلمة المرور)
هذه البيانات مطلوبة حتى ندخل على حساب المشروع من خلال البرنامج كما سنرى لاحقاً، افتح ملف نصي لنحفظ فيه البيانات حتى نرجع اليه بسهولة فيما بعد، مسالة تنظيمية ليس إلا.
    توجه إلى صفحة المشروع.
    اختر التبويب الرئيسي “Source”
    ستظهر لك البيانات كما في الصورة:
1. انسخ رابط المشروع إلى الملف النصي. (لاحظ أن اسم مشروعي adnanos)
2. انسخ اسم المستخدم إلى الملف النصي. (لاحظ أنه مجرد عنوان البريد الذي فتحت من خلاله المشروع).
3. لرؤية كلمة المرور اضغط على “googlecode.com password” ستظهر لك في صفحة جديدة، انسخها أيضاً إلى الملف النصي.
الآن تحصلنا على البيانات الضرورية للتخاطب مع المشروع من خلال البرنامج كما سنبينه لاحقاً إن شاء الله.

IV تثبيت برنامج TortoiseSVN  Turtle
- برنامج TortoiseSVN أفضل برنامج مجاني بالنسبة لنظام ويندوز، يمكنك الحصول عليه من الموقع الرسمي باتباع هذا الرابط، هناك نسختان  32 بت و 64 بت اختر النسخة التي توافق نوع نظامك.
- قم بتثبيت البرنامج
- بعد تثبيت البرنامج سوف لن يظهر في قائمة البرامج، بل سيدمج مع مستكشف الملفات الخاص بويندوز، وهذا يعني أنك تستطيع تشغيله من أي مكان خلال ويندوز. فبرنامج Tortoise عبارة عن منفذ شيل shell extension.
V إعداد برنامج TortoiseSVN وتعريف امتدادات الملفات
في الفقرة I أشرت إلى أن بروتوكول MIME هو المسؤول عن تعريف الملفات للمستعرضات لتفهمها حسب امتدادتها.
هناك ميزة رائعة في نظام التحكم بالمشاريع Subversion اسمها auto-props تعرف امتدادت الملفات تلقائياً، كل ما علينا الآن هو إضافة أنواع الملفات التي نريد أن نستضيفها في Google Code إلى برنامج TortoiseSVN لمرةٍ واحدةٍ فقط.
   اضغط بزر الفأرة الأيمن في أي مكان ثم اختر “TortoiseSVN” من القائمة.
   - ثم اختر “Settings”. ستظهر نافذة الإعدادت.
   - اضغط على الزر “Edit”
   - سينبثق ملف نصي بواسطة برنامج الدفتر.
   - قم باختيار كامل النص بالضغط على الزرين: Ctrl+A
   - احذف كل شيء، واترك الملف مفتوح.
   - الآن! افتح هذا الرابط (هنا).
   - قم باختيار كامل النص بالضغط على الزرين: Ctrl+A وانسخه بالضغط على الزرين Ctrl+C
   - عُد الى الملف النصي والصقه كاملاً Ctrl+V.
   - احفظ الملف ووافق على التغييرات.
    انتهى!
وبهذا انتهينا إعداد كل شيء ، ونستطيع البدء في استخدام برنامج Tortoise لرفع ملفاتنا إلى Google Code مباشرة.

VI طريقة رفع الملفات إلى Google Code بواسطة برنامج Tortoise  
الجميل في Google Code أنك تستطيع أن ترفع مجلد بكامل محتوياته مثل DropBox، وهذه ميزة عظيمة فعندما ترفع إضافة مكونة من: ورقة أنماط CSS وملفات جافا وصور فلن تكون مضطراً لتعديل روابط الصور في ملف CSS ولا روابط ملفات الجافا. فقط ارفع المجلد كما هو وجرب إضافتك.
افتح ملف بيانات حسابك في Google Code الذي أنشاته في الفقرة III والمكون من:
       رابط المشروع
       واسم المستخدم
       وكلمة المرور
اضغط بزر الفأرة الأيمن في أي مكان ثم اختر “TortoiseSVN” من القائمة.
 اختر من القائمة المنسدلة “Repo-browser” (تعني استعراض مخزن المشروع)
ستظهر نافذة صغيرة انسخ فيها رابط المشروع. واضغط OK.
ستظهر نافذة مخزن المشروع (ستكون بطيئة وربما ستقرأ عدم استجابة .. تجاهل ولا تغلق النافذة)
اضغط من القائمة اليسرى مجلد “Trunk” (يُعتبر هو المجلد الرئيسي)
الآن اضغط بزر الفأرة الأيمن في المربع الأيمن، واختر “Add file” لرفع ملف أو “Add folder” لرفع مجلد بكامل ملفاته. ويمكنك أيضاً استخدام ميزة السحب والإفلات.
ستظهر نافذة تطلب منك كتابة وصف للملفات أكتب أي شيء.
ثم ستظهر نافذة تطالبك باسم المستخدم وكلمة المرور. أدخلهما وضع علامة صح عند الخيار “Save authentication” حتى لا يطالبك كل مرة.
  الآن انتظر … حتى ينتهي.
    يمكنك الآن التوجه لمجلد ملفاتك عبر المتصفح من خلال رابط المشروع.

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

اقرء المزيد
الاشتراك في: الرسائل ( Atom )

 

جميع حقوق القالب محفوظة © 2015 شبكة عدناني - تطوير شبكة عدناني