السلام عليكم
في درسنا اليوم سأقدم لكم اضافة جميلة جدا ومن تصميمي الخاص
هذه الاضافة جميلة جدا وأنيق وهي عبارة عن نافذة اخترنا لكم
يمكنكم من خلالها اضافة موضوع في القائمة الجانبية للمدونة
اترككم مع المعاينة
معاينة الاضافة
التقنيات المستعملة لإنشاء تلك الإضافة هي مكتبة jQuery ولغة CSS، لذلك عليك أولا أن تتأكد من وجود رابط مكتبة جي كويري في قالب مدونتك. كيف ؟
- من لوحة التحكم الخاصة بمدونتك، إضغط Template وبعدها إختر Edite HTML
- إبحث عن jQuery بالضغط على Ctrl + F من لوحة المفاتيح.
إذا وجدت إحدى العبارات التالية : jQuery.js، jQuery.min.js، ... فاعلم أن قالب مدونتك يحتوي على مكتبة جي كويري وبالتالي يمكنك تجاهل هذه الخطوة والمرور إلى الخطوة الموالية.
- إذا لم تكن موجودة، إبحث عن الوسم <head> وضع أسفله مباشرة السطر التالي
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
ومن لوحة التحكم بلوجر تخطيط اضافة اداة
<script type="text/javascript">- لتغيير طول وعرض الإضافة : قم باستبدال القيم التالية (300، 225) بما يناسبك.
$(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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_nqvJX3eG3bMPAYTFd3necf6AkcFtz4tU09B1OTDG0yhUZ-Bq-uvHT0imp2WqwtnL2cqrjl5pD2kQqbx6nlu6uD4RtpZEUQVY7UQtqldsK82BwrJhqk30wHFTUSOwMluLWJ4Rht2ZA4/s1600/%D8%AD%D8%B5%D8%B1%D9%8A%D8%A7+%D8%BA%D9%8A%D8%B1+%D8%B4%D9%83%D9%84+%D8%A7%D9%82%D8%B1%D8%A3+%D8%A7%D9%84%D9%85%D8%B2%D9%8A%D8%AF.jpg" alt="th3problogger" nopin="nopin" height="225" width="300" />
</a>
<div style="bottom: -45px;" class="feature-caption">
<p><a href="http://blogbzm.blogspot.com/2014/02/blog-post_1311.html">حصريا غير شكل اقرأ المزيد</a></p>
</div>
</li>
</ul>
</div>
- قيمة لون الشريط السفلي : 3eb8b4
- عنوان التدوينة : حصريا:غير شكل اقرأ المزيد
- رابط الصورة : bouzouma.png
- أبعاد الصورة : نفس أبعاد الإضافة (300، 225)
- رابط التدوينة المختارة : http://blogbzm.blogspot.com/2014/02/blog-post_1311.html
أرجو أن تكون هذه الإضافة قد نالت إعجابك
من فضلك اضغظ لايك لمشاهدة لينك التحميل
واو مشكور ع الشرح
ردحذفجميل اخي (h)
ردحذفوالله اسعدني مروركم وافرحني تعليقكم شكراااا
ردحذف