-->
29320988785530044
recent
أخبار ساخنة

إضافة سلايد شو أحترافي لجميع قوالب بلوجر

في الملعب
الرئيسية
الخط

إضافة سلايد شو أحترافي لجميع قوالب بلوجر

السلام عليكم ورحمة الله وبركاته مرحبا بكم اخواتي في الله في مدونة التقني و الذي تـهتم بكل ما هو جديد في الـتقنية ونرجــوا منكم زيارتنا مرة اخري والان سنـــتـعرف الـــيــوم علي طريقة إضافة سلايد شو أحترافي لجميع قوالب بلوجر وحيث ان هذا الأضافة رائعة جدآ وجميلة وتعطي شكل رائع للمدونة وهيا عبارة عن كود بسيط يمكنك
إضافة سلايد شو أحترافي لجميع قوالب بلوجر
إضافة سلايد شو أحترافي لجميع قوالب بلوجر
اضافتة في موقعك او مدونتك وهيا لاتثقل القالب لانها كود بسيط ولا يتطلب منك اي تغير فقط تغير بسيط سنتعرف معا كيفية تركيبة بكل سهولة ان شاء الله اتمني منكم مشاركة الموضوع معا الاصدقاء لكي يستفيد الجميع بإذن الله
طريقة تركيب سلايد شو لجميع قوالب بلوجر :
  1. نذهب الي لوحة تحكم بلوجر 
  2. ثم الي تبويب التخطيط
  3. ثم اللي اضافة اداة
  4. ثم نضف اداة (HTML/JAVASCRIPT)
  5. ثم نضف الكود التي سوف اتركة لكم بالأسفل
  6. مع التعديل علي الكود بأستبدال (https://www.tegnai.com)
  7. الأن اضغط علي "حفظ" ومبروك عليك الأضافة الجديدة ♥
كود السلايد شو :
<style type="text/css">
#top-main{position:relative}
#top-main .widget{border:0;padding:0 0 22px}
#top-main h2{position:absolute;left:-9999px}

#slides li {
display: none;
background-color: white;
padding: 4px;
border: 1px solid #CECECE;
-webkit-border-radius: 3px;
margin-top: 0;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
position: absolute;
}
#slides li:nth-child(1) .overlayx {
background-position: 0 0;
}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:20;margin:0;list-style:none;position:relative}
#slides ul{height:275px}
#slides li{width:49.9%;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){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{width:100%;height:100%}
#slides .overlayx {
position: absolute;
top: 0;
left: 0;
border: 4px solid #fff;
width: 100%;
height: 100%;
z-index: 2;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Z2ZBU4_lR9rmJeVgKtKc6SKrZAoxYkTlA5HRTx4S5BzLG8WI6Uu-NgKmUMRKrELlVxQOaf5y9fjfl1ljCwOcOhvWv9e2Hdj9tI_NZe0YudUM600RPLsQyAoD3oqro55tKapg4VhOMwU/s1600/cnmubg-fade.png);
background-position: 70% 70%;
background-repeat: repeat-x;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#slides h4{position:absolute;bottom:25px;width:100%;padding:0 10px;margin:0 -5px;font-size:14px;z-index:3;color:white;text-shadow:0 1px 2px #918F8F}
#slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:14px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin: 0px auto;text-align: center;width: 10%;}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}

#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/AVvXsEg9Z2ZBU4_lR9rmJeVgKtKc6SKrZAoxYkTlA5HRTx4S5BzLG8WI6Uu-NgKmUMRKrELlVxQOaf5y9fjfl1ljCwOcOhvWv9e2Hdj9tI_NZe0YudUM600RPLsQyAoD3oqro55tKapg4VhOMwU/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://www.tegnai.com/",
MaxPost:15,
idcontaint:"#featuredpost",
ImageSize:300,
interval:7000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
وبعد أضافة الكود الأن اضغط علي "حفظ" ومبروك عليك الأضافة الجديدة ♥ ولاتنسا تغير اللي باللون الأحمر برابط موقعك لكي يعرض مواضيع موقعك واتمني ان ينال أعجابكم ان شاء الله والسلام عليكم ورحمة الله وبركاتة
ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

نموذج الاتصال
الاسمبريد إلكترونيرسالة