إضافة "إخترنا لك" الموجودة في مدونة محترف بلوجر قمت بإنشائها اعتمادا على خبرتي المتواضعة في مجال تصميم وبرمجة المواقع، وبما أنني لا أبخل في المشاركة فقد خصصت هذه التدوينة الحصرية لشرح كيفية تركيب تلك الإضافة على مدونتك أو موقعك.
المدون
عصام محيميتاريخ النشر
6 فبرابر 2014التصنيف
البرمجة والتصميمتعريف مكتبة jQuery
jQuery هي أحد مكتبات لغة الجافاسكربت JavaScript حرة مفتوحة المصدر وهي من إبتكارات شركة موزيلا (Mozilla)، هدفها الأساسي هو اختصار العديد من النصوص البرمجية التي كان يكتبها المبرمج سابقا وكذلك تسهيل التعقيد الموجود في كتابة أكواد الجافاسكربت، كما تساعد في عمل التأثيرات الحركية علي موقع الويب.
التقنيات المستعملة لإنشاء تلك الإضافة هي مكتبة jQuery ولغة CSS، لذلك عليك أولا أن تتأكد من وجود رابط مكتبة جي كويري في قالب مدونتك. كيف ؟
- من لوحة التحكم الخاصة بمدونتك، إضغط Template وبعدها إختر Edite HTML
- إبحث عن jQuery بالضغط على Ctrl + F من لوحة المفاتيح.
إذا وجدت إحدى العبارات التالية : jQuery.js، jQuery.min.js، ... فاعلم أن قالب مدونتك يحتوي على مكتبة جي كويري وبالتالي يمكنك تجاهل هذه الخطوة والمرور إلى الخطوة الموالية.
- إذا لم تكن موجودة، إبحث عن الوسم <head> وضع أسفله مباشرة السطر التالي :
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
- من لوحة التحكم، إضغط Layout وفي المكان الذي تراه مناسبا للإضافة إضغط Add a Gadget.
- ستظهر لك نافذة تحتوي على أدوات بلوجر الرسمية، إختر HTML/JavaScript لإنشاء أداة جديدة.
- في حقل العنوان Title أكتب "إخترنا لك" على سبيل المثال.
- قم بنسخ الكود التالي وضعه في حقل المحتوى Content :
<script type="text/javascript">
$(document).ready(function() {
$('.feature-caption').css("bottom", "-45px");
$(".featured-posts li").hover(
function(){
$(this).find(".feature-caption").animate({bottom:"0"}, "slow");
},
function(){
$(this).find(".feature-caption").animate({bottom:"-45"}, "fast");
});
});
</script>
<style>
.pb-feature
{
width: 300px;
height: 225px;
}
.feature-caption
{
display:block;
position:absolute;
background: #3eb8b4;
bottom:0px;
width:100%;
color: white;
text-align: center;
}
.featured-posts li
{
width: 300px;
height: 225px;
display:block;
float: left;
position:relative;
overflow:hidden;
}
.featured-posts p
{
padding: 5px;
font-family: tahoma;
font-size: 13px;
text-align: center;
direction: rtl;
}
.featured-posts a
{
color: white;
text-decoration: none;
}
</style>
<div class="pb-feature">
<ul class="featured-posts">
<li>
<a href="http://www.th3problogger.com">
<img src="th3problogger.png" alt="th3problogger" nopin="nopin" height="225" width="300"/>
</a>
<div style="bottom: -70px;" class="feature-caption">
<p><a href="http://www.th3problogger.com">محترف بلوجر - إخترنا لك</a></p>
</div>
</li>
</ul>
</div>
- لتغيير طول وعرض الإضافة : قم باستبدال القيم التالية (300، 225) بما يناسبك.
- قيمة لون الشريط السفلي : 3eb8b4
- عنوان التدوينة : محترف بلوجر - إخترنا لك
- رابط الصورة : th3problogger.png
- أبعاد الصورة : نفس أبعاد الإضافة (300، 225)
- رابط التدوينة المختارة : http://www.th3problogger.com
- إضغط على الزر Save لحفظ الإضافة.
أرجو أن تكون هذه الإضافة قد نالت إعجابك، وإذا واجهتك أي مشاكل عند تركيبها لا تتردد في ترك تعليق بالأسفل وسأحاول مساعدتك قدر المستطاع. أما فيما يخص كيفية جعلها ثابتة عند تمرير الصفحة، فكما سبق وأن قلت في المقدمة " لا أبخل في المشاركة " فهناك تدوينة قادمة سأتطرق فيها إلى كيفية جعل أي إضافة ثابتة عند النزول إلى أسفل الصفحة.
اتمنى ان تضع لنا دروس لشرح طريقة تعريب قالب مثل القالب الحالي
ردحذفأكيد يا أخي، إن شاء الله سأنشر في هذه المدونة كل ما أنت بحاجة إليه لتصبح محترف بلوجر.
حذفشكرا أخي عصام على هده التدوينة الرائعة، و أيضا نشركك على هده الإضافة الجميلة
ردحذفجميل شكرا لك
ردحذفhttp://www.info5dev.com
شكرا على المعلومة و المجهود .
ردحذفممكن طلب أخ أريد رابط موقع يعطيني URL لصورة معينة المراد وضعها في المدونة من فضلك
مرحبا أخي
حذفإضغط بزر الماوس الأيمن على الصورة واختر Copy Image Location لنسخ url الخاص بها
شكراا لكم على هذه الجهود الجبارة
ردحذفhttp://sh1-1.blogspot.com/
جميل بارك الله فيكـ
ردحذفلدي مشكلة ممكن مساعدة وشكرا على الموضوع
ردحذفلدي مشكلة ف التركيب مائل لليمين
ممكن حل
شكرا ليك
ردحذفhttp://www.normaonline.info/
كيف اضيف ايضا تحت التدوينات مثل ..اخترنا لكم .. حلقات و مقالات..وفيديوهات مثل التي في قالب المحترف تحت التدوينات قسم لحلقات
ردحذفرائع يا اخى الكريم شرح سلسل واداء متميز
ردحذفhttp://eltgrbah.blogspot.com.eg/
ردحذفشكرا لك اخي على الاضافة الرائعة وبتوفيق (: nabil-pro.blogspot.com
ردحذفلو سمحت انا عندي مشكلة في المدونه الموضوعين جايين تحت بعض انا عايز كل موضوع في صفحة عشان اكمل مفيش حل ليها ؟ http://yourcomputer-program.blogspot.com.eg/
ردحذفانا عندي الحل ادخل علي التخطيط في المدونة وجيب رسائل المدونة و اكتب رقم واحد بدل رقم اثنينزي الصورة
حذفدي ادخل علي الرابط دا http://dross-pro.blogspot.com/p/blog-page.html
الشرح بالتفصيل
راجوا منكم زيارة مدونتي وتقييمها ولو بها اخطاء او نقص اخبار عبر البريد الالكتروني دا
ردحذفfareskhalid999@gmail.com
رابط المدونة :http://www.dross-pro.blogspot.com
تحميل رواية هيبتا pdf
ردحذفتحميل رواية هيبتا pdf جودة عالية
تحميل رواية هيبتا مسموعة
تحميل رواية هيبتا اليك كتابى
تحميل رواية هيبتا عصير الكتب
تحميل رواية هيبتا النسخه الاصليه
تحميل رواية هيبتا صوت
تحميل رواية هيبتا pdf برابط مباشر
تحميل رواية هيبتا للاندرويد
تحميل رواية هيبتا pdf اليك كتابى
تحميل رواية هيبتا
تحميل رواية هيبتا بي دي اف
تحميل رواية هيبتا ورد
تحميل وقراءة رواية هيبتا
تحميل رواية هيبتا نسخة جيدة
تحميل رواية هيبتا نسخة كاملة
تحميل رواية هيبتا pdf نسخة اصلية
تحميل رواية هيبتا مجانا
تحميل رواية هيبتا من عصير الكتب
تحميل رواية هيبتا مسموعة mp3
تحميل رواية هيبتا من موقع اليك كتابى
تحميل رواية هيبتا مجانا pdf
تحميل رواية هيبتا مما قرأت
تحميل رواية هيبتا ميديا فاير
تحميل رواية هيبتا مباشر
تحميل رواية هيبتا لمحمد صادق
تحميل رواية هيبتا للايفون
تحميل رواية هيبتا للكاتب محمد صادق
تحميل رواية هيبتا للايباد
تنزيل روايه هيبتا لمحمد صادق
تحميل رواية هيبتا pdf للموبايل
تحميل رواية هيبتا كاملة جودة عالية
تحميل رواية هيبتا فور شيرد
تحميل رواية هيبتا بوك فور ميديا
تحميل رواية هيبتا من ميديا فاير
روعة روعة شكرا لك http://al3abjony.blogspot.com
ردحذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذف