زوار ومتابعي المدونة الكرام
السلام عليكم ورحمة الله وبركاته
في درسنا اليوم سوف نتعرف على طريقة تركيب سلايد شو على مدوناتنا ، وهذه الإضافة تعرّف زوار مدونتك بآخر مواضيع المدونة ، علاوة على ذلك تضيف هذه الإضافة لمسة جمالية أحترافية على مدونتك ، وهذه الإضافة لا تعمل تلقائي بل أنت سوف تنسق آخر مواضيع مدونتك وتضعها داخل هذه الإضافة .
- طريقة التركيب :
1- اختر لوحة التحكم من قالبك .
2- من لوحة التحكم اختر قالب ثم اضغط على تحرير قالب : HTML
3- ابحث عن الوسم :
]]></b:skin>
4- ضع الكود التالي فوقه.
<!--New Featured Slider From http://www.homeblog7.blogspot.com -->
.homeblog7-slider {
background: none repeat scroll 0 0 #FFFFFF;
height: 400px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 850px;
}
.homeblog7-slides-container {
}
.homeblog7-slides, .homeblog7-thumbnail, .homeblog7-prev-next, .homeblog7-nav {
width: 850px; /*Set The Width Of Slider Here*/
}
.homeblog7-slides, .homeblog7-thumbnail {
height: 280px; /*Set The Height Of Images Here*/
overflow: hidden;
padding-top: 0;
position: relative;
}
.homeblog7-title {
color: #FFFFFF;
font: bold 18px ge_ss_threeregular,Droid Sans;Arial,Helvetica,Sans-serif;
margin: 0;
padding: 0 0 2px;
text-shadow: 0 1px 0 #000000;
}
.homeblog7-title a, .homeblog7-title a:hover {
color: #FFFFFF;
text-decoration: none;
}
.homeblog7-content {
background: none repeat scroll 0 0 #111111;
bottom: 0;
left: 0;
opacity: 0.7;
overflow: hidden;
padding: 10px 15px 5px;
position: absolute;
right: 0;
}
.homeblog7-content p {
color: #FFFFFF;
line-height: 18px;
margin: 0;
padding: 0;
text-shadow: 0 1px 0 #000000;
}
.homeblog7-more, .homeblog7-more:hover {
color: #FFFFFF;
font-weight: bold;
}
.homeblog7-nav {
background: url("http://cdn.top4top.co/i_56a80e72fd1.png") repeat-x scroll 0 0 transparent;
height: 12px;
padding: 10px 0;
text-align: center;
}
.homeblog7-pager a {
background-image: url("http://cdn.top4top.co/i_91d682e9671.png");
background-position: 0 0;
cursor: pointer;
display: inline-block;
float: none;
height: 12px;
line-height: 1;
margin: 0 4px 0 0;
opacity: 0.7;
overflow: hidden;
padding: 0;
text-indent: -999px;
width: 12px;
}
.homeblog7-pager a:hover, .homeblog7-pager a.activeSlide {
background-position: 0 -112px;
opacity: 1;
text-decoration: none;
}
.itbfp-prev-next-wrap {
position: relative;
z-index: 200;
}
.homeblog7-prev-next {
bottom: 130px;
height: 37px;
left: 0;
position: absolute;
right: 0;
}
.homeblog7-prev {
background: url("http://cdn.top4top.co/i_0774b9d4f21.png") no-repeat scroll left top transparent;
float: left;
height: 37px;
margin-left: 14px;
margin-top: -180px;
opacity: 0.6;
width: 37px;
}
.homeblog7-prev:hover {
opacity: 0.8;
}
.homeblog7-next {
background: url("http://cdn.top4top.co/i_c412b0bbaa1.png") no-repeat scroll right top transparent;
float: right;
height: 37px;
margin-right: 14px;
margin-top: -180px;
opacity: 0.6;
width: 36px;
}
.homeblog7-next:hover {
opacity: 0.8;
}
<!--New Featured Slider From http://www.homeblog7.blogspot.com --> 5- ابحث عن الوسم :
</head>
6- ضع الكود التالي فوقه .
<!--New Featured Slider From http://www.homeblog7.blogspot.com -->
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(document).ready(function() {
jQuery('.homeblog7-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.homeblog7-next',
prev: '.homeblog7-prev',
pager: '.homeblog7-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
}
);
}
);
/* ]]> */
</script>
<script src=' https://googledrive.com/host/0BxFbqjck0GDdNkViX0FKeUNiWEU' type='text/javascript'/>
<script src='https://googledrive.com/host/0BxFbqjck0GDdTUR4dkhSRXBVUlU' type='text/javascript'/>
<script src='https://googledrive.com/host/0BxFbqjck0GDdZXpSelhkSTdoT2s' type='text/javascript'/>
<!--New Featured Slider From http://www.infotechbloging.blogspot.com -->
. 7- ابحث عن السطر التالي :
<div id='main-wrapper'>
8- ضع الكود التالي تحته .
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!--New Featured Slider From http://www.homeblog7.blogspot.com -->
<div class='homeblog7-slider clearfix'>
<div class='homeblog7-slides-container clearfix'>
<div class='homeblog7-slides'>
<!-- Slide 1 Code Start -->
<div class='homeblog7-slides-items'>
<div class='homeblog7-thumbnail'>
<a href='رابط مدونتك هنا'><img src='رابط الصورة هنا' /></a>
</div>
<div class='homeblog7-content-wrap'>
<div class='homeblog7-content'>
<h3 class='homeblog7-title'>
<a href=' رابط مدونتك هنا'>ضع وصف المشاركة مثل قوالب بلوجر، سيو </a>
</h3>
<p>
ضع هنا وصف للموضوع</div>
<div class='homeblog7-prev-next-wrap clearfix'>
<a class='homeblog7-next' href='#homeblog7-next'/>
<a class='homeblog7-prev' href='#homeblog7p-prev'/>
</div>
</div>
</div>
<!-- Slide 1 Code End -->
<!-- Slide 2 Code Start -->
<div class='homeblog7-slides-items'>
<div class='homeblog7-thumbnail'>
<a href='رابط مدونتك هنا'><img src='رابط الصورة هنا' /></a>
</div>
<div class='homeblog7-content-wrap'>
<div class='homeblog7-content'>
<h3 class='homeblog7-title'>
<a href='رابط مدونتك هنا'>ضع وصف المشاركة مثل قوالب بلوجر، سيو</a>
</h3>
<p>
ضع هنا وصف للموضوع </p>
</div>
<div class='homeblog7-prev-next-wrap clearfix'>
<a class='homeblog7-next' href='#homeblog7-next'/>
<a class='homeblog7-prev' href='#homeblog7-prev'/>
</div>
</div>
</div>
<!-- Slide 2 Code End -->
<!-- Slide 3 Code Start -->
<div class='homeblog7-slides-items'>
<div class='homeblog7-thumbnail'>
<a href='رابط مدونتك هنا'><img src='رابط الصورة هنا' /></a>
</div>
<div class='homeblog7-content-wrap'>
<div class='homeblog7-content'>
<h3 class='homeblog7-title'>
<a href='رابط مدونتك هنا'>ضع وصف المشاركة مثل قوالب بلوجر، سيو</a>
</h3>
<p>
ضع هنا وصف للموضوع
</p>
</div>
<div class='homeblog7-prev-next-wrap clearfix'>
<a class='homeblog7-next' href='#homeblog7-next'/>
<a class='homeblog7-prev' href='#homeblog7-prev'/>
</div>
</div>
</div>
<!-- Slide 3 Code End -->
<!-- Slide 4 Code Start -->
<div class='homeblog7-slides-items'>
<div class='homeblog7-thumbnail'>
<a href='رابط مدونتك هنا'><img src='رابط الصورة هنا' /></a>
</div>
<div class='homeblog7-content-wrap'>
<div class='homeblog7-content'>
<h3 class='homeblog7-title'>
<a href='رابط مدونتك هنا'>ضع وصف المشاركة مثل قوالب بلوجر، سيو</a>
</h3>
<p>
ضع هنا وصف للموضوع </p>
</div>
<div class='homeblog7-prev-next-wrap clearfix'>
<a class='homeblog7-next' href='#homeblog7-next'/>
<a class='homeblog7-prev' href='#homeblog7-prev'/>
</div>
</div>
</div>
<!-- Slide 4 Code End -->
</div>
<div class='homeblog7-nav'>
<span class='homeblog7-pager'/>
</div>
</div>
</div>
<div style='clear:both;'/>
<!--New Featured Slider From http://www.homeblog7.blogspot.com -->
</b:if>
ليست هناك تعليقات:
إرسال تعليق