سلايد شو غاية في الروعة بتصميم انيق واحترافي

السلام عليكم ورحمة

الله وبركاته

في هذه التدوينة سوف اقدم لكم اضافة جميلة يحتاجها كل مدون لابراز محتوى موقعه ويجب عليك ان تتوفر عليها بنفسك هذه الاضافة سلايد شو فريد من نوعه بالوان مريحة ومتناسقة تم تصميمه ليتلائم مع المدونات المعلوماتية والتعليمة العربية ليعمل دون مشاكل واخطاء

-----------------------------------------------------

لن اطيل عليكم اترككم مع طريقة التركيب واتمنى ان تعجبكم الاضافة

____________

طريقة التركيب:

توجه الى القالب ثم تحرير html

ابحث عن ]]></b:skin> وضع فوقه الكود التالي :

#alwansd{height: 186px;background:#fff;border-top: 3px solid #dddddd;box-shadow: 0 2px 2px rgb(209, 209, 209); margin: 0 0 20px 22px;padding:14px;}
.alwanw{position: relative;height: 163px;}
.alwanw .contentdiv{visibility: hidden;position: absolute;height: 96%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;}
.huhusf {
float: right !important;
width: 100px !important;
}
.huhusf img {
width: 238px;
height: 156px;
margin-top: 29px;
}
.huhuip {
width: 440px;
padding: 0 !important;
bottom: 0;
float: left !important;
margin-right: 153px;
}
.huhuip a {
color: #FFFFFF;
font-size: 17px;
margin-right: 53px;
padding: 0px;
line-height: 36px;
}
.huhuip h6 {
background: #34495E;
width: 722px;
border-left: 3px solid #0894D8;
margin-right: -253px;
border-right: 3px solid #0894D8;
margin-top: -10px;
}
h6:before {
content: '\f005';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
top: -10px;
bottom: 130px;
right: 0px;
position: absolute;
padding: 0.4px 13px;
background: #0894D8;
color: #fff;
line-height: 37px;
border-left: 3px double #FFFFFF;
}
.huhud {
padding: 7px 29px 6px 6px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIikV2EgIIxkkt7vPWOpIba4PG-xckazHOoeIcQ5f4XKj3E1bZzq70z1m6Ev1PRkbHJuRZwvSPZPbiwlyqtbjGZPArbM-cbwwv3gcim32wLfhB8_JXkQdElI6vdcBUCIThlDkGOzA62s1u/w13-h12-no/date.png) #f7f7f7 right 10px center no-repeat;
width: 100px;
margin-right: -4px;
margin-top: 120px;
}
.huhuip p {
font-size: 13px;
margin-right: -4px;
color: #34495E;
margin-top: -144px;
line-height: 30px;
width: 468px;
padding-right: 11px;
}
.alwan-ps{ float: left;
width: 63px;
height: 27px;
margin: -12px -1px;}
.alwan-ps a{display:none;}
.alwan-ps .next {float:right;width: 27px;height: 27px; font-size:0px;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUte5QmzS9yzc5JplEiqo5Vmmq1n78i-ZUfzRUD4l1JfJ1EobnJBg2losa-cZH5vu_InQOlnDhoaIjA3who2hmfgMqJmVrWpPKBjxnCkKu-qGxEjnedoRuwDKk0nOyZo13Ff4h-f9ClSU/s1600/p-slidshowe.png) -30px 0px }
.alwan-ps .prev {float:left;width: 27px;height: 27px;font-size:0px;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUte5QmzS9yzc5JplEiqo5Vmmq1n78i-ZUfzRUD4l1JfJ1EobnJBg2losa-cZH5vu_InQOlnDhoaIjA3who2hmfgMqJmVrWpPKBjxnCkKu-qGxEjnedoRuwDKk0nOyZo13Ff4h-f9ClSU/s1600/p-slidshowe.png) 0px 0px}
.alwan-ps .next:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUte5QmzS9yzc5JplEiqo5Vmmq1n78i-ZUfzRUD4l1JfJ1EobnJBg2losa-cZH5vu_InQOlnDhoaIjA3who2hmfgMqJmVrWpPKBjxnCkKu-qGxEjnedoRuwDKk0nOyZo13Ff4h-f9ClSU/s1600/p-slidshowe.png) -30px 0px }
.alwan-ps .prev:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUte5QmzS9yzc5JplEiqo5Vmmq1n78i-ZUfzRUD4l1JfJ1EobnJBg2losa-cZH5vu_InQOlnDhoaIjA3who2hmfgMqJmVrWpPKBjxnCkKu-qGxEjnedoRuwDKk0nOyZo13Ff4h-f9ClSU/s1600/p-slidshowe.png) 0px 0px}
.alwanip{width: 340px;padding: 0 !important;bottom: 0;float: left !important;margin-right: 180px;}
.alwanip a{color:#737373;font: 17px droidkufi-bold;margin:0;padding:0;line-height: 26px;}
.alwanip h6{margin:0;}.alwanip h6 a:hover {color:#e74c3c;}.alwanip p{font-size: 13px;margin: 0;color: #8c8d8d;line-height: 26px;}.alwansf a img{float: right !important; }.alwansf {float: right !important; width:100px !important;}
.column-center-outer {
width: 100%;
}

بعدها ابحث عن </head> وضع فوقه الكود التالي :

<script>
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";
showRandomImg = true;
aBold = true;
summaryPost =280;
numposts1 = 10;
label1 = "windows"
function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;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;
var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];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="huhusf"><a href="'+posturl+'"><img width="188" height="161" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="huhuip"><h6><a href="'+posturl+'">'+posttitle+'</a></h6><div class="huhud" >'+daystr+'</div><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}}
</script>

بعدها ابحث عن </body> وضع فوقه الكود التالي :

<script src='https://7ae2cdc5b837344ac049c2d9744662a61cd534a5.googledrive.com/host/0B1NQlV8aQ963S05nU3lFWmpTU2c' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});});//]]></script>
<script>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: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[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>

بعدها ابحث عن <div id='main-wrapper'> وضع اسفله الكود التالي :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='alwansdsd'>
<div class='alwanw' id='slider1'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class='alwan-ps' id='paginate-slider1'>
</div>
</div>
</b:if>

اورتيلكس للمعلوميات

Pages

سلايد شو غاية في الروعة بتصميم انيق واحترافي

سلايد شو غاية في الروعة بتصميم انيق واحترافي

المتابعون

معلومات عن التدوينة

تابعونا عبر المواقع الاجتماعية

اعلن هنا مجانا

صاحب المدونة

مؤلف ؟

تبادل اعلاني

زوارنا حول العالم