عماد عادل |
06-26-2012 07:22 PM |
سلايدشوا ذاتي يتميز بالأناقة والسرعة والخفة
السلام عليكم ورحمة الله وبركاته ... أرجوا أن تكونوا في تمام الصحة والعافية
اما بعد -> فبعد طلب أحد الأعضاء لسلايدشوا ذاتي مثل الذي وضعه في صورته ... أتيت لكم اليوم بهذا السلايدشوا الرائع الذي يتميز بالأناقة والسرعة والخفة والأكثر من هذا أنه معرب :) :) :)
أول شئ أريد أن أنوه إلى أن السلايدشوا من تصميم سامبلكس ديزاين ومن تعريب مدونة تقارب :)
لن أطيل كثيرا فقط نمر إلى الخطوات :
أولا : قم بأخذ نسخة احتياطية من قالب مدونتك :)
ثانيا : إذهب الى لوحة التحكم في مدونتك وادخل الى "القالب" ومن ثم "تحرير html" ومن ثم نقوم بتوسيع القالب ونبحث من خلال ctrl+f عن
كود بلغة HTML:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'/>
</b:section>
وضع فوقه /قبله الكود التالي :
كود بلغة HTML:
<!-- featured entries -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label9+"?max-results="+numposts4+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label9+"?max-results="+numposts4+"&orderby=published&alt=json-in-script&callback=showrecentposts4a\"><\/script>");
</script>
</ul>
</div>
</div></b:if><!-- end of #featured-slider -->
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[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>
ثم ابحث مجددا عن ]]></b:skin> وضع قبلها/فوقها مباشرة الكود الموجود في الاسفل :
كود بلغة HTML:
/* /Features Slider */
#featured-slider {
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
width:610px; /*width of featured content slider*/
height: 250px;
margin-bottom:10px;
}
#featured-slider .contentdiv{ /* do not change the name of class - The size of contentdiv is 495x270 (after excluding padding value) */
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
z-index:1;
width:380px;
background:#222;
}
#featured-slider .contentdiv img {
width:380px;
height:250px;
overflow:hidden;
}
#featured-slider .sliderPostPhoto { /* Wrapper for featured are photo and post title */
position:relative;
height: 250px;
width:380px;
overflow:hidden;
}
#featured-slider .sliderPostInfo { /* Post title and if enabled excerpt wrapper for featured slider */
position:absolute;
top:0;
left:0;
color:#ccc;
padding:20px 5px 10px;
background: url(http://img64.imageshack.us/img64/8492/bgtransparent.png);
font-size: 11px;
height:220px;
width:165px;
}
#featured-slider .sliderPostInfo p { /* Post excerpt style on featured slider */
color:#ccc;
font-size:12px;
padding-top:15px;
}
#featured-slider .featuredPostMeta { /* Post excerpt style on featured slider */
padding-top:15px;
}
#featured-slider .featuredPostMeta a { /* Post excerpt style on featured slider */
color:#ccc;
text-decoration:underline;
}
#featured-slider .featuredPostMeta a :hover{ /* Post excerpt style on featured slider */
text-decoration:none;
}
/* post titles by small thumbs on featured slider */
span.fea_thumb_title{
font-size:11px;
font-family:tahoma, verdana, sans-serif;
color:#ccc;
line-height:0.9em;
}
span.fea_thumb_title a{
color:#ccc;
}
span.fea_thumb_title a:hover{
color:#ccc;
}
#paginate-featured-slider { /* do not change the name of class - used to wrap thumbnails for featured area */
position: absolute; /*leave as is*/
right: 0; /*leave as is*/
top: 0; /*leave as is*/
z-index:1;
width:230px;
height:250px;
overflow:hidden;
background:#222;
}
#paginate-featured-slider ul {
width:505px;
padding-bottom:0;
list-style: none;
}
#paginate-featured-slider ul li {
display: block;
width:230px;
}
#paginate-featured-slider ul li a {
padding:7px 10px 5px 7px;
background:#52575C;
height:37px;
display:block;
border-bottom:1px solid #666;
overflow:hidden;
}
#paginate-featured-slider ul li a.last {
border-bottom:none !important;
}
#paginate-featured-slider ul li a:hover {
background:#444;
}
#paginate-featured-slider ul li a.selected {
background:#444;
}
#paginate-featured-slider .featured_thumb {
float:left;
margin-right:5px;
width:60px;
height:34px;
}
واخيرا ابحث عن </head> وضع قبله مباشرة الكود الموجود بالاسفل :
كود بلغة HTML:
<script src='http://tqarob.googlecode.com/files/contentslider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://lh5.googleusercontent.com/-pQy6rquGCYU/TY7S7pYsnbI/AAAAAAAAAR4/e7trx7iIEAQ/s1600/tqarobnews.png";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts4 = 5;
label9 = "اضافات بلوجر";
Title9 = "FEATURE";
function showrecentposts4(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts4 ; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["يناير","فبراير","مارس","أبريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="430" height="242" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><span class="featuredPostMeta">'+daystr+' | <a href="'+posturl+'">تابع القراءه »</a></span></div></div></div>';
document.write(trtd);
j++;
}
}
function showrecentposts4a(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts4 ; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["يناير","فبراير","مارس","أبريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li><a rel="'+i+'" class="toc" href="#"><img width="60" height="34" title="spain" alt="spain" class="featured_thumb" src="'+img[i]+'"/><span class="fea_thumb_title">'+posttitle+'</span></a></li>';
document.write(trtd);
j++;
}
}
//]]>
</script>
حسنا الان انتهينا وتبقى شئ واحد : واولا ان كان قالبك يحتوي على هذا الكود فلا ضرورة من اضافته
اذا نبحث عن وسم </head> واضف قبلها /فوقها الكود التالي :
كود بلغة HTML:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
|