إضافة رائعة بتقنية jQuery لمدونات بلوجر
للمعاية الاضافة أولا ولكن ليس متقنة لان المعاينة بقالب قوائمه قصيرة
الخطوة 1إستدعاء مكتبة جي كوري
تعريف مكتبة jQuery
jQuery هي أحد مكتبات لغة الجافاسكربت JavaScript حرة مفتوحة المصدر وهي من إبتكارات شركة موزيلا (Mozilla)، هدفها الأساسي هو اختصار العديد من النصوص البرمجية التي كان يكتبها المبرمج سابقا وكذلك تسهيل التعقيد الموجود في كتابة أكواد الجافاسكربت، كما تساعد في عمل التأثيرات الحركية علي موقع الويب.
التقنيات المستعملة لإنشاء تلك الإضافة هي مكتبة jQuery ولغة CSS، لذلك عليك أولا أن تتأكد من وجود رابط مكتبة جي كويري في قالب مدونتك. كيف ؟
- من لوحة التحكم الخاصة بمدونتك، إضغط Template وبعدها إختر Edite HTML
- إبحث عن jQuery بالضغط على Ctrl + F من لوحة المفاتيح.
إذا وجدت إحدى العبارات التالية : jQuery.js، jQuery.min.js، ... فاعلم أن قالب مدونتك يحتوي على مكتبة جي كويري وبالتالي يمكنك تجاهل هذه الخطوة والمرور إلى الخطوة الموالية.
- إذا لم تكن موجودة، إبحث عن الوسم <head> وضع أسفله مباشرة السطر التالي :
- من لوحة التحكم الخاصة بمدونتك، إضغط Template وبعدها إختر Edite HTML
- إبحث عن jQuery بالضغط على Ctrl + F من لوحة المفاتيح.
إذا وجدت إحدى العبارات التالية : jQuery.js، jQuery.min.js، ... فاعلم أن قالب مدونتك يحتوي على مكتبة جي كويري وبالتالي يمكنك تجاهل هذه الخطوة والمرور إلى الخطوة الموالية.
- إذا لم تكن موجودة، إبحث عن الوسم <head> وضع أسفله مباشرة السطر التالي :
الخطوة 2إضافة أداة جديدة
- من لوحة التحكم، إضغط Layout وفي المكان الذي تراه مناسبا للإضافة إضغط Add a Gadget.
- ستظهر لك نافذة تحتوي على أدوات بلوجر الرسمية، إختر HTML/JavaScript لإنشاء أداة جديدة.
الخطوة 3كود الإضافة
- في حقل العنوان 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.alam3arb.com/">
<img src="http://www.shy22.com/upfilpng/rzx42517.png" alt="ALam3arb" nopin="nopin" height="225" width="300">
</a>
<div style="bottom: -45px;" class="feature-caption">
<p><a href="http://www.alam3arb.com/"> عالم العرب - إخترنا لك</a></p>
</div>
</li>
</ul>
</div>
-----------------------------------------------------------------
- لتغيير طول وعرض الإضافة : قم باستبدال القيم التالية (300، 225) بما يناسبك.
- قيمة لون الشريط السفلي : 3eb8b4
- عنوان التدوينة : عالم العرب - إخترنا لك
- رابط الصورة : http://www.shy22.com/upfilpng/rzx42517.png
- أبعاد الصورة : نفس أبعاد الإضافة (300، 225)
- رابط التدوينة المختارة : http://www.alam3arb.com/
- إضغط على الزر Save لحفظ الإضافة.
- قيمة لون الشريط السفلي : 3eb8b4
- عنوان التدوينة : عالم العرب - إخترنا لك
- رابط الصورة : http://www.shy22.com/upfilpng/rzx42517.png
- أبعاد الصورة : نفس أبعاد الإضافة (300، 225)
- رابط التدوينة المختارة : http://www.alam3arb.com/
- إضغط على الزر Save لحفظ الإضافة.
أرجو أن تكون هذه الإضافة قد نالت إعجابك، وإذا واجهتك أي مشاكل عند تركيبها لا تتردد في ترك تعليق بالأسفل وسأحاول مساعدتك قدر المستطاع.فيمكنكم اطلاع على التدوينة السابقة او اضافة السابقة الذي طرحناها اضافة رائعة للبلوجر ( أكتب معنا ) بشكل جميل.
عصام محيمي
تعليقات