Lessons 4 bloggers

اليكم الطريقة :

1 : صندوق الاكواد , اتبع المسار الاتى
لوحة التحكم - التخطيط - تحرير هتمل
dashboard > layout > template > edit html

2- ابحث عن

]]></b:skin>

ومباشرة فوق هذا السطر الصق الاكواد الاتية

/*
Slideshow style rules.
*/
#contentSlide {
border: 1px solid #000;
background:#212421;
height:263px;
padding:10px 0;
}
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlTPJpS_axI/AAAAAAAABYA/JS60KVWJ9GQ/bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KH99FgI/AAAAAAAABZM/e9gXvHjzltU/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KMpFpxI/AAAAAAAABZQ/a207Rx0XuiU/control_right.jpg) no-repeat 0 0;
}

.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#212421;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
padding: 1px;
background-color: #212421;
border: 1px solid #999;
}

وتحت الكود السابق الصق القطعة الاتية

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var currentPosition=0;var slideWidth=560;var slides=$('.slide');var numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>
</script>

3- احفظ القالب

4- انشأ اداة جديده من نوع هتمل جافاسكريبت HTML/Javascript من صفحة عناصر المدونة , عن طريق الضغط على كلمة : اضافة اداة جديده add a page element

5- الصق فيها الكود الآتى :

<!-- Slideshow HTML -->
<div id="contentSlide"><div id="slideshow">
<div id="slidesContainer">

<div class="slide">
<h2>Free Domain Name</h2>
<p><a href="http://tinyurl.com/nlqnby"><img alt="Free Domain Name" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJEBAo7jm92_XNs0jYk3UWX9p7urVK-cK-pMtXEZsIg3sCyq4wzSOxJNv6OOzztlG_mGp-HNAIINdJgRVk8IxKe0lzBBFZpvFTcLIo0ad7BOBPi8wYmEk_tNCjoOzbAnGt9c8YBRL8c98/" height="145"/></a>CO.CC has become the world's #1 choice for free domains by providing innovative, competitively-priced products, delivering the highest quality customer service, and by always appreciating and listening to its customers!</p>
</div>

<div class="slide">
<h2>Free Web Hosting</h2>
<p><a href="http://www.000webhost.com/173265.html"><img alt="Free Web Hosting" width="215" src="http://www.000webhost.com/images/banners/120x120/banner1.gif" height="145"/></a>000webhost.com ($0.00 webhost), is an industry leader in providing top class free web hosting services without advertising! There are no hidden costs, no adverts, and no restrictive terms. Lighting fast speeds, maximum reliability and fanatical user support are just a few of the features you'll receive with our service.</p>
</div>

<div class="slide">
<h2>Make Money on Twitter</h2>
<p><a href="http://revtwt.com/index.php?id=18676"><img alt="Make Money on Twitter" width="215" src="http://revtwt.com/images/TwtAd_referral02.jpg" height="145"/></a>You enjoy tweeting with your friends, but wouldn't it be great to make a little extra cash on the side while you post on Twitter? RevTwt has the solution: we give you links to post on your Twitter account, and you earn money each time someone clicks on your link!</p>
</div>

<div class="slide">
<h2>Monitize Your Blog</h2>
<p><a href="http://www.bidvertiser.com/bdv/bidvertiser/bdv_ref.dbm?Ref_Option=pub&Ref_PID=232687"><img alt="Monitize Your Blog" width="215" src="http://www.bidvertiser.com/BidVertiser/images/Referral/p/ref_125x125_yellow_pbl.gif" height="145"/></a>
Pay per click advertising - online advertising directly on sites of your choice, internet marketing solution for online advertisers.</p>
</div>

<div class="slide">
<h2>Upload And Earn</h2>
<p><a href="http://www.ziddu.com/register.php?referralid=%28y%5DtNG;Z%7EQ%7C"><img alt="Upload And Earn" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ6H6ivT0ZzGtHOVaPruyfvxoHjnGFrCEO4w9Rp1fxfKx4OzTLkJg0b-4iQFnTTayjMQzsqnYtW2g03cTkdkJLXPi-7iohP_Wx5t0AW5NCJzGIEEQDwAjnQ_hqzJTClhQs9hLSDi2VXH8/" height="145"/></a>Ziddu is a complete Free file hosting system which offers services like Free Web Hosting, Image hosting & Free Web Space. Ziddu users can play,watch,share ...
</p>
</div>

</div>
</div></div>
<!-- Slideshow HTML -->

اخيرا : احفظ , وتاكد من النتيجة

اكتب ايميلك هنا