تركيب slideshows لمدونة بلوجر رقم 2

مكتبة الدروس
دروس مدونة بلوجر

تركيب عارض الشرائح لمواضيعك بطريقة بسيطة

أولاً : انتقل الى https://www.blogger.com

ثانياً : نختار تخطيط >> اضافة أداة >> نختار HTML/JavaScript

ثالثاً : نضع الكود التالي

<script src="http://dl.dropboxusercontent.com/s/d8yagy0po185cll/contentslider-n-b-l-t-r.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/hge1mqatia1bydw/n17-content-slider-026.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 5px solid #333333;
border-bottom-width: 5px;
width: 565px; /*width of featured content slider*/
height: 175px;
margin-left:15px;
}
.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
padding: 5px;
background: #FFFFCB;
width: 555px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
margin-top:0px;
}
.pagination{
width: 555px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: #333333;
padding: 5px 10px;
margin-top:-3px;
height:30px;
margin-left:15px;
}
.pagination a{
padding: 0 5px;
text-decoration: none;
color: #000;
background: #AAAAAA;
}
.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FFF;
}

</style>



<div class="sliderwrapper" id="slider1">
<div class="contentdiv">
<img height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyYDPHcnfMRD9qAusPhFjibs7GINm6cM1pnwB6MIyE5OT_f0JDRNOgf7pDmWSGN8w9mTrC1gHMeZaof3jjC-JRw7rCtaZsc3GhVG8iQH1c3hZ44WvoPxFC-LoLnk5ejcIi3bPT2gGn-Yo/s1600/4.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="230" />
<h2><a href="رابط موضوع 1" target="_blank">عنوان الموضوع رقم 1</a></h2>وصف الموضوع رقم 1
</div>
<div class="contentdiv">
<img height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3pAQkKVmEIfhB2JE3fWC64LnoFmCBS17D60EbViuFwYCbB9gAlZeMOETVYbhac_KaOh9nlPxMgb5o2h1Csp8cqb0Gzl-w8lmgHpl_AewpMVGZhyphenhyphenML3EjPaOi9a9wP0E9Skr5TKS3Jjow/s1600/2.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="230" />
<h2><a href="رابط موضوع 2" target="_blank">عنوان الموضوع رقم 2</a></h2>وصف الموضوع رقم 2
</div>
<div class="contentdiv">
<img height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix1J2DXxEjPJFiQTR1Ab2ss2dO0dcdKqZmdhPf-USQmx2r-G7h6BXsTKT3lQbmlLPU_uqhGq3O44_-g_s3YoVt6-XcAu6R-5ybdnbkaApha05FCsZP0QHsgPM_Q5o448lPo0g7KaZy14s/s1600/3.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="230" />
<h2><a href="رابط موضوع 3" target="_blank">عنوان الموضوع رقم 3</a></h2>وصف الموضوع رقم 3
</div>
<div class="contentdiv">
<img height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyYDPHcnfMRD9qAusPhFjibs7GINm6cM1pnwB6MIyE5OT_f0JDRNOgf7pDmWSGN8w9mTrC1gHMeZaof3jjC-JRw7rCtaZsc3GhVG8iQH1c3hZ44WvoPxFC-LoLnk5ejcIi3bPT2gGn-Yo/s1600/4.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="230" />
<h2><a href="رابط موضوع 4" target="_blank">عنوان الموضوع رقم 4</a></h2>وصف الموضوع رقم 4
</div>
<div class="contentdiv">
<img height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9brbNK83fKHYcUCwfkTRjwvQCb9KJ5XWESgEQWEKEmpDnxtj26uhrfoTJmSUBWvzdV1QN1nyjvEpKqRouTw-Po-iSk26Qf3GhaIZuIfq6ER8lJ88MmsSHI8MEmXZxOCHqOrT1zadhTUQ/s1600/1.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="230" />
<h2><a href="رابط موضوع 5" target="_blank">عنوان الموضوع رقم 5</a></h2> وصف الموضوع رقم 5
</div>
</div>
<div class="pagination" id="paginate-slider1">
</div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["السابق", "التالي"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>

قم بالتعديل كما هو موضح بالكود 

ملاحظة : لإجراء بعض التعديلات على لون الخلفية ولون الخط

1) لتغيير لون الخلفية  background: #FFFFCB

  

2) لتغير لون الإطار  solid #333333 

   أيضاً

background-color: #333333 

انتهى

شارك الموضوع