اضافة سلايدر شو احترافي

السلام عليكم اخواني , سنتطرق اليوم في هذه التدوينه الى كيفية اضافة سلايد شو Slidershow احترافي لمدونات بلوجر بطريقه سهله جدا ومميزه حيث تعتمد هذه الاضافه على كود الجافا سكريب , يعني تقدر تضيف هذا السلايد شو الى مدونتك بخطوه واحده فقط وهي اضافة اداهHTML/JavaScript , مايميز هذا السلايد شو انه يضفي لمسة جميلة على المدونات حيث يساهم بشكل كبير في إثارة انتباه الزائر إلى أكثر المواضيع أهمية. الأمر بسيط جدا و سأحاول تبسيطه أكثر قدر الإمكان ان شاء الله.

طريقة الاضافة:

انتقل إلى لوحة تحكم مدونتك

.في المكان الذي تريد عرض السلايد شو HTML/Javascript إختر "تخطيط" ثم إضافة أداة ثم اختر

والآن الصق داخل المستطيل الكود التالي

ملاحظة: ابحث في الكود رابط الوقع الخاص بنا واستبدله برابط موقعك الخاص

</div>
<div style='clear: both;'/>
    <div class='row' id='content-wrapper'>

#slides .overlayx {
position: absolute;
top: 0;
left: 0;
border: 4px solid white;
width: 100%;
height: 100%;
z-index: 2;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPIu8uNI0EZ785YW-lpGo2hCa3FSX80xO1qzpo2K7hBh9KuHczDAQBKFmQkKfeWQ5ybu8gNHcdX73h3z1RY06uZl-4_YZlD4VRGA9hpanWRQluHPpG3xcr-14Gwie74zrCF0YWw4PV6qo/s1600/cnmubg-fade.png);
background-position: 60% 60%;
background-repeat: repeat-x;
}
</style>
<div id="featuredpost">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"#featuredpost",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://softglad.at.ua/images/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],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="nextx">next</a><a href="#" id="prevx">prev</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();
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"https://zgoum-tech.blogspot.com/",
MaxPost:20,
idcontaint:"#featuredpost",
ImageSize:300,
interval:7000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

معاينة اضغط للمعاينة

اضافة سلايدر شو احترافي

طريقة الاضافة:

ملاحظة: ابحث في الكود رابط الوقع الخاص بنا واستبدله برابط موقعك الخاص

تعليقات

إبحث في المدونة

إعلان فوق

إعلان تحت

إجمالي مرات مشاهدة الصفحة

الأرشيف

التسميات

نموذج الاتصال