 | |
|
تلقيت العديد من الطلبات حول كيفية تركيب سلايدر شو الحالي لمدونة المحترف وهأنا أقدم لكم الطريقة فالجميع يبحث عن هذا السلايدر التلقائي الأحترافي , فهو متوافق مع جميع المدونات وشكل مميز وأنيق يزيد من جمالية مدونتك , وما يميز القالب انه تلقائي يمكنك تشغيله عن طريق التسميات ولايحتاج التعديل اليدوي في السلايدر , فالسلايدر مكون من صورة كبيرة للموضوع مع عنوان الموضوع ومختصر قصير عن المشاركة تلفت أنتباه الزائر التي التدوينة , فهو سيضيف الى مدونتك الجمالية والأحترافية ولمسة رائعة من التصميم , هذه الطريقة الأفضل فهناك الكثير من اكواد السلايدر شو لكن أغلبها به مشاكل كثيرة ام الاكواد التي سنشرحها في هذه التدوينة خالية من الأخطاء تماما وتعمل بدون مشاكل بدون اطالة اترككم مع طريقة التركيب ,
في البداية قم بالتوجة الى لوحة تحكم بلوحر
ثم الى قائمة قالب قم أظغط على تحرير html
وقم بالبحث عن كود أغلاق </head> وقم باضافة الكود الأتي قبلة يمكنك تحميل الكود من هنا
<script>لاتنسى تغير almtwr.net بالتسمية التي تريد
//<![CDATA[
/* Script from:http://www.almtwr.net/ */
imgr = new Array();
imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
numposts1 = 6;
label1 = "almtwr.net";
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="alwansf"><a href="'+posturl+'"><img width="617" height="385" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="alwanip"><h6><a href="'+posturl+'">'+posttitle+'</a></h6><div class="alwand" >'+daystr+'</div><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}}
//]]>
</script>
قم بالبحث عن كود أغلاق </body> وقم بوضع فوقة أيضاً الكود الأتي يمكنك تحميل الكود من هنا
<script type="text/javascript" src="http://yourjavascript.com/917824114/slider.js"></script><script>لاضافة اكواد css قم بالبحث عن ]]></b:skin> وضع فوقة الكود الأتي يمكنك تحميل الكود من هنا
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>
/*--------------Slider-------------*/في النهاية قم بالبحث عن <div id='content-wrapper'> أو <div id='main-wrapper'> او في المكان الذي تريد اضافة السلايدر شو فيه وقم باضافة الكود تحته مباشرة يمكنك تحميل الكود من هنا ثم قم بالحفظ
#alwansd{
height: 276px;
margin: 0 auto;
padding: 18px;
background: #fbfbfb;
width: 1229px;
margin-right: -132px;
border-bottom: 2px solid #E6E6E6;
position: relative;
}
.alwanw{
position: relative;
height: 241px;
width: 78%;
margin: 0 auto;
}
.alwanw .contentdiv{
visibility: hidden;
opacity: 1;
position: absolute;
height: 240px;
}
.alwan-ps{
text-align: right;
float: left;
width: 490px;
height: 13px;
margin: 0 auto;
}
.alwan-ps .toc {
float: right;
font-size: 0;
width: 13px;
height: 13px;
background: #e74c3c;
margin-left: 8px;
border-radius: 60px;
}
.alwan-ps .selected {background: #95A5A6;}
.alwan-ps .prev ,.alwan-ps .next{
display:none;
}
.alwan-ps .next:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8KSDG3BuuUi9NTPtHYDrgjycb0P8HflLPUeYbW8-a4T4IzB0SJag_wJZw0qFu68kUJIXRKst10a0NiKU3wI39RUzqfilCzA5chvazPCHBtXD4f42Wr4W6JXS5p5D1ddpvIDTqDw_q6O8/s1600/next-h.png);}
.alwanip{
width: 486px;
float: left !important;
padding: 0 37px 0 0;
margin: 0 auto;
}
.alwanip a{
color: #2c3e50;
font: 19px DroidKufi-Bold;
margin: 0 auto;
line-height: 37px;
}
.post-body img {
margin: -1px 0 0 8px;
padding: 3px;
border: 1px solid #dfdfdf;
border-radius: 3px;
}
.alwanip h6{margin: 0;}
.alwanip h6 a:hover {color:#95A5A6;}
.alwanip .alwand{
color:#fff;
}
.alwanip p{
margin: 0 auto;
color: #95A5A6;
font-family: hacen_liner;
}
.alwansf {
float: right !important;
margin:0 auto;
}
.alwansf a img {
width: 435px;
height: 275px;}
.alwansf a img:hover{
}
.alwansf a img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
<div id='alwansd'>
<div class='alwanw' id='slider1'>
<script>//<![CDATA[
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>
اشترك في خدمة البريد ليصلك جديدنا
إرسال تعليق