اضافة CSS مميزة لبلوجر لعمل سلايدر متحرك للمقالات

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


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

    كنتيجة لذلك، كنت قد حصلت على طريقة مؤكدة لجعل القراء البقاء. الآن، ما إذا كنت تريد لتسليط الضوء على "وظائف مميزة"، على سبيل المثال إذا كانت مدونتك بها كثير من المقالات والمواضيع ومر عليها فترة كبيرة من الزمن, ولكن لاحظت ان قراء مدونتك لا يجدون مقالات خاصة بوسم معين بسهولة نظراً لعدد المقالات الكبير فى المدونة, وهذا بالضبط فائدة السلايدر المتحرك الذى سوف اعرضة عليكم عن طريق كتابة بعض اكواد ال CSS فى مدونة بلوجر.

    إذا اعزائى تابعوا الطريقة لتثبيت السلايدر المتحرك للمقالات

    1- انتقل إلى 'تخطيط' > انقر فوق الارتباط 'إضافة أداة ذكية' في منطقة الشريط الجانبي وقم بتحديد الأداة 'HTML/جافا سكريبت' من النافذة المنبثقة.

    2- إضافة الأكواد البرمجية أدناه داخل المربع الفارغ:

    <style type="text/css">
    ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://3.bp.blogspot.com/-1_Vnfz23h0E/V0m7kzHpgiI/AAAAAAAALlU/f763ScY-PBc2UnqNX3Tf20lyvHxtRo9qwCLcB/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
    .feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
    .feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
    </style>
    <div id="featuredbwidget"></div>
    <link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
    //<![CDATA[
    featuredbwidget({
    listURL:"http://www.modwinty.com/",
    featuredNum:9,
    listbyLabel:false,
    feathumbSize:350,
    interval:3000,
    autoplay:true,
    featuredID:"#featuredbwidget"
    });
    function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://3.bp.blogspot.com/-EOu4Rrgcryo/V0m8dV7MU1I/AAAAAAAALlg/4h5vQaHpQiMdkvtUdDbu0LtjJRvgPERYwCLcB/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');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.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$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.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
    //]]>
    </script>
    
    

    تعديلات الأكواد لتتماشى مع موقعك كالأتى:

    1. listURL - قم بتغير "http://www.modwinty.com/" الى رابط مدونتك.
    2. featuredNum - إضافة عدد المقالات للعرض في شريط التمرير
    3. listbyLabel - إذا كنت ترغب في عرض الوظائف حسب الفئة/التسمية، مثل الأزياء العلامة، فإنه ستتم كتابتها listbyLabel: "fashion"
    4. feathumbSize - حجم أو أبعاد الصورة بالبكسل
    5. interval - الوقت المستغرق لتغيير موضع الشرائح في ميلي ثانية
    6. autoplay - استبدال true ب false إذا كنت لا تريد أن تتغير الشرائح تلقائياً.

    3- انقر فوق الزر 'حفظ'. الآن وسوف ترى اداة widget مميزة وغاية فى الجمال عندما تعرض فى مدونتك.


    Modwinty
    @مرسلة بواسطة
    تقوم بعمل دروس وشروحات خاصة بمجال التكنولوجية والتقنيات الحديثة من خلال مدونتي وقناتي على اليوتيوب الى جانب تقديم حلول للمشاكل التقنية التي تفيد الزائر العربي

    X