يعتبر السلايد شو اظافة تعتبر من بلوجر و تعطي جمالية أكتر من رائعة للمظهر الخاص بالموقع الخاص بك ، لدى ادا كنت تريد هداه الاظافة (أسفله) ، اتبع الخطوات الاتية .
1-ابحت عن كلمة :
]]></b:skin>
2-قم بوضع الكود التالي فوقه :
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:390px}
#slides li{width:50%;height:100%;position:absolute;display:none;}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1) {
right: 0;
top: 0;
border-left: 10px solid rgba(226, 226, 226, 1)!important;
height: 390px;
}
#slides li:nth-child(2) {
right: 50%;
width: 25%;
height: 50%;
border-left: 10px solid rgba(226, 226, 226, 1)!important;
border-bottom: 10px solid rgba(226, 226, 226, 1)!important;
}
#slides li span.dy {
display: inline-block!important;
}
#slides li:nth-child(3) {
right: 75%;
width: 25%;
height: 50%;
border-bottom: 10px solid rgba(226, 226, 226, 1)!important;
}
#slides li:nth-child(4) {
right: 50%;
top: 50%;
width: 25%;
height: 50%;
border-left: 10px solid rgba(226, 226, 226, 1)!important;
}
#slides li:nth-child(5) {
right: 75%;
top: 50%;
width: 25%;
height: 50%;
}
#slides li h4 {
overflow: hidden;
bottom: 0;
color: #fafafa;
width: 100%;
text-align: right;
text-transform: uppercase;
height: 80px;
line-height: 55px;
right: 0;
margin-left: 0;
padding: 0 15px;
background-image: linear-gradient(transparent,rgba(0,0,0,0.83));
}
#slides li:nth-child(1) h4 {
font-size: 20px;
height: 90px;
}
#slides a {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
#slides img{display:block;width:100%;height:100%;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
background-position: 50% 40%;
background-repeat: repeat-x;
}
#slides h4 {
position: absolute;
bottom: 40px;
margin: 0;
font-size: 13px;
right: 10px;
padding: 0;
color: #f9f9f9;
z-index: 3;
line-height: 20px;
font-weight: normal;
text-align: right;
text-transform: uppercase;
}
#slides .label_text {
font-size: 12px;
color: #fff;
bottom: 10px;
z-index: 3;
right: 10px;
position: absolute;
padding: 3px 6px;
text-transform: uppercase;
}
span.autname {
display: none;
}
.label_text:before {
content: "\f073";
font: normal normal normal 14px/1 FontAwesome;
float: right;
display: block;
margin-top: 3px;
margin-left: 5px;
}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:50%}
#slides li:nth-child(2){top:50%;height:25%;right:0;width:50%}
#slides li:nth-child(3){right:50%;top:50%;width:50%;height:25%}
#slides li:nth-child(4){right:0;top:75%;height:25%;width:100%}
#slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
3-ابحت عن الوسم التالي :
</head>
4-قم بوضع الكود التالي فوقه :
<script type='text/javascript'>
//<![CDATA[
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",MonthNames:["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('')
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://afrikabuzzz.blogspot.com",
MaxPost:5,
idcontaint:"#featuredpost",
ImageSize:500,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
1-ابحت عن كلمة :
]]></b:skin>
2-قم بوضع الكود التالي فوقه :
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:390px}
#slides li{width:50%;height:100%;position:absolute;display:none;}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1) {
right: 0;
top: 0;
border-left: 10px solid rgba(226, 226, 226, 1)!important;
height: 390px;
}
#slides li:nth-child(2) {
right: 50%;
width: 25%;
height: 50%;
border-left: 10px solid rgba(226, 226, 226, 1)!important;
border-bottom: 10px solid rgba(226, 226, 226, 1)!important;
}
#slides li span.dy {
display: inline-block!important;
}
#slides li:nth-child(3) {
right: 75%;
width: 25%;
height: 50%;
border-bottom: 10px solid rgba(226, 226, 226, 1)!important;
}
#slides li:nth-child(4) {
right: 50%;
top: 50%;
width: 25%;
height: 50%;
border-left: 10px solid rgba(226, 226, 226, 1)!important;
}
#slides li:nth-child(5) {
right: 75%;
top: 50%;
width: 25%;
height: 50%;
}
#slides li h4 {
overflow: hidden;
bottom: 0;
color: #fafafa;
width: 100%;
text-align: right;
text-transform: uppercase;
height: 80px;
line-height: 55px;
right: 0;
margin-left: 0;
padding: 0 15px;
background-image: linear-gradient(transparent,rgba(0,0,0,0.83));
}
#slides li:nth-child(1) h4 {
font-size: 20px;
height: 90px;
}
#slides a {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
#slides img{display:block;width:100%;height:100%;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
background-position: 50% 40%;
background-repeat: repeat-x;
}
#slides h4 {
position: absolute;
bottom: 40px;
margin: 0;
font-size: 13px;
right: 10px;
padding: 0;
color: #f9f9f9;
z-index: 3;
line-height: 20px;
font-weight: normal;
text-align: right;
text-transform: uppercase;
}
#slides .label_text {
font-size: 12px;
color: #fff;
bottom: 10px;
z-index: 3;
right: 10px;
position: absolute;
padding: 3px 6px;
text-transform: uppercase;
}
span.autname {
display: none;
}
.label_text:before {
content: "\f073";
font: normal normal normal 14px/1 FontAwesome;
float: right;
display: block;
margin-top: 3px;
margin-left: 5px;
}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:50%}
#slides li:nth-child(2){top:50%;height:25%;right:0;width:50%}
#slides li:nth-child(3){right:50%;top:50%;width:50%;height:25%}
#slides li:nth-child(4){right:0;top:75%;height:25%;width:100%}
#slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
3-ابحت عن الوسم التالي :
</head>
4-قم بوضع الكود التالي فوقه :
<script type='text/javascript'>
//<![CDATA[
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",MonthNames:["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('')
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://afrikabuzzz.blogspot.com",
MaxPost:5,
idcontaint:"#featuredpost",
ImageSize:500,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
قم بوضع هدا الكود في المكان الدي تريد اظهار السلايد شو فيه :
<div id='featuredpost'/>
و الان مبروك عليك
ليست هناك تعليقات:
إرسال تعليق