زوار ومتابعي المدونة الكرام
أسعد الله أوقاتكم بكل خير ومحبة
في درسنا اليوم سوف نتعرف على إضافة مهمة وجميلة وأحترافية ، إضافة المشاركات الأخير على شكل سلايد شو ، وهذه الأضافة تعرف زوار مدونتك بآخر مواضيع المدونة .
- طريقة التركيب :
1-ادخل إلى مدونتك ثم اختر لوحة التحكم .
2- اختر من لوحة التحكم قالب ثم أختر تحرير قالب .
3- إبحث عن الوسم :
]]></b:skin>
4- ضع الكود التالي فوقه .
/* START EasySlider By homeblog7.blogspot.com */
#slide-container {
height: 360px;
position: relative;
width: 480px;
}
#slider {
height: 360px;
left: 25px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
width: 480px;
font-family: calibri;
}
.slide-desc {
background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color: #FFFFFF;
padding: 10px;
position: absolute;
right: 0px;
text-align: left;
top: 0;
width: 200px;
z-index: 99999;
}
.slide-desc h2 {
display: block;
}
.crosscol .widget-content {
position: relative;
}
#slider ul, #slider li,
#slider2 ul, #slider2 li {
margin: 0;
padding: 0;
list-style: none;
}
#slider2 {
margin-top: 1em;
}
#slider li, #slider2 li {
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width: 480px;
height: 360px;
overflow: hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev {
display: block;
width: 30px;
height: 77px;
position: absolute;
left: -30px;
text-indent: -9999px;
top: 71px;
z-index: 1000;
}
#nextBtn, #slider1next {
left: 520px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display: block;
height: 77px;
left: 0;
position: absolute;
top: 132px;
width: 30px;
z-index: 1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a {
display: block;
position: relative;
width: 30px;
height: 77px;
background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a {
background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
/* numeric controls */
ol#controls {
margin: 1em 0;
padding: 0;
height: 28px;
}
ol#controls li {
margin: 0 10px 0 0;
padding: 0;
float: left;
list-style: none;
height: 28px;
line-height: 28px;
}
ol#controls li a {
float: left;
height: 28px;
line-height: 28px;
border: 1px solid #ccc;
background: #DAF3F8;
color: #555;
padding: 0 10px;
text-decoration: none;
}
ol#controls li.current a {
background: #5DC9E1;
color: #fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
outline: none;
}
/* END EasySlider By homeblog7.blogspot.com */
4- بعد ذلك ابحث عن الوسم :
</body>
5- ضع الكود التالي فوقه .
<!-- Start easy content slider by homeblog7.blogspot.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<!-- End easy content slider by homeblog7.blogspot.com -->
6- بعد ذلك ادخل إلى تخطيط ثم إضافة أداة : HTML/JavaScript
7- ضع الكود التالي في صتدوق الأداة ثم إحفظ .
<div id="slider">
<script style="text/javascript" src="https://googledrive.com/host/0BxFbqjck0GDdbmhVUUxnZG5qRmM"></script>
<script style="text/javascript">
var numposts_gal = 6;
var numchars_gal = 150;
var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://homeblog7.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
- التعديلات :
- استبدل رابط مدونتنا برابط مدونتك .
0 Comments:
إرسال تعليق