اليوم باذن الله سنتطرق الى كيفية اضافة صفحة الخلاصات في المدونة بطريقة انيقة و جذابة كما انها لا تاخد حيزا كبيرا من المدونة بل و تعطيها رونقا خاصا و احترافية اكبر كما انها تساعد الزائر في الوصول الى رابط الخلاصات الخاص بك بسرعة كبيرة
يمكنك مشاهدة مثال حي و واقعي للاضافة من خلال مدينة التدوين حيث يظهر جزء في الاعلى اسود اذا مررت الماوس عليه تظهر جانب من ايقونة الخلاصات كما بالصورة السابقة
اذا اردت الحصول على الاضافة قم بالذهاب الى القالب ثم تحربر الـHTML و ابحث عن الكود التالي:
اذا اردت الحصول على الاضافة قم بالذهاب الى القالب ثم تحربر الـHTML و ابحث عن الكود التالي:
و اضف قبله الكود التالي :</head>
و الان قم بالبحث عن الكود التالي:float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .back-img {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;z-index:98;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmbiSTFIaDpynQhJgi7CatQoXEn3ZbzQSR0DoMsIy_E1B0HQPxZSegqond7a17Z-Z4bsed2ZICwcFgPUd0DDiqF8wEj0sM6BSGifSmp1UiO49vAdqREpXhpsTkU17u0zJr6rT_FNiIFIQ/s1600/rss.png) no-repeat right top #fff;
}
</style><a href='http://city-bl.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzcogKnIai0lkuL4DLJ0qeKbCL37V0hsSRpnYAfqcrv3vgVJeobWYwyvgIeqA3sB1peaktniLVxUqqCe_335VJO6evygnb5UHu-S5DYBfhmbkP8PHJJrRnLfCxDoTotG3X6QOzTV0KvyM/s1600/1x1juice.png'/></a><script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .back-img").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".back-img").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>
و اضف الكود التالي بعده:<body>
<div id='pageflip'>
<a href=' http://feeds.feedburner.com/city-bl '><img alt='netoops blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcgkf1iVh8eYZxP8zMimotxzhu8I-HHAvLri6mLz3vaWd1Ggs7lESDGrk92pRpt_w9MDmrSNuXiUUs8XnpjAIr5AbCMw3l9kI2949QurnEEYu1w-WdL9YpQifGf-oVIxhmXwvvrPyn31Bh/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>
قم بتغيير ما باللون الاحمر الى ما يناسب رابط الخلاصات الخاص بك و احفظ التغييرات و مبروك عليك الاضافة.
0 التعليقات: