اضافة سلايد شو المحترف الجديد تلقائي بلوجر 2015

اضافة سلايد شو المحترف الجديد الى مدونات البلوجر

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

في البداية قم بالتوجة الى لوحة تحكم بلوحر
ثم الى قائمة قالب قم أظغط على تحرير html
وقم بالبحث عن كود أغلاق </head> وقم باضافة الكود الأتي قبلة يمكنك تحميل الكود من هنا

<script>
//<![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>

لاتنسى تغير almtwr.net بالتسمية التي تريد
قم بالبحث عن كود أغلاق </body> وقم بوضع فوقة أيضاً الكود الأتي يمكنك تحميل الكود من هنا

<script type="text/javascript" src="http://yourjavascript.com/917824114/slider.js"></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>

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

/*--------------Slider-------------*/
#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/AVvXsEi8TK9qlGSuI2teaBz6uDDPGtaz8R9HvkvJ-pJ8yic3xj1Xtls2stRm1CX3W5KVE_N9k6jTP10cUBeuK4VyXYnnxonfGlxc6-7lchC_2me1sBnDXBV3x_n8_a9kXPZ62R4-Ro_zuJKzyh4/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='content-wrapper'> أو <div id='main-wrapper'> او في المكان الذي تريد اضافة السلايدر شو فيه وقم باضافة الكود تحته مباشرة يمكنك تحميل الكود من هنا ثم قم بالحفظ

<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>