4 0 4
نعتذر , لا نستطيع ايجاد الصفحة المطلوبة الصفحة الرئيسية

الأربعاء، 16 مارس، 2016



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

* معاينة القائمة الشكل الأول يوجد فى مدونتى عالم المدون


* معاينة القائمة الشكل الثانى يوجد بقالب أذهل الخاص بالمدنة



* ناتى الأن للاكواد الخاصة بكل قائمة أولاً قوم بأخذ نسخة أحتياطية من قالب مدونتك تجانب لاى مشاكل


الشكل الأول



* نقوم بالبحث عن هذا الكواد   ]]></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: #565656;color: #FFF;margin-bottom: 15px;height: 250px;}
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: #E4860D;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
--------------------------------------*/

  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>

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

الشكل الثانى


* طريق التركيب مثل الشكل الأول لا تختلف فى اى شى

* الأكواد الخاصه بالقائمة كما قلنا التركيب مثل الشكل الأول هذا الكود يضاف فوق  ]]></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: 10px 0;}
li.wdbloog-item {float: right;width: 23.411017%;margin-left: 15px;background: #565656;color: #FFF;margin-bottom: 15px;height: 225px;}
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: 36% 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: -106px;font-size: 0.8rem;margin-top: -225px;}
.wdbloog-info span.publish-date {padding: 6px 20px;background-color: #E4860D;font-size: 15px;display: none;}
.wdbloog-info a.comments {background-color: #E83E3B;padding: 4px 12px;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;display: none;}
i.fa.fa-clock-o.icon {margin-left: 5px;}
.wdbloog-info a.comments:before {content: '';border-bottom: 4px solid transparent;border-left: 4px solid transparent;border-right: 4px solid #e83636;border-top: 4px solid #e83636;position: absolute;bottom: -12px;right: 0px;}
/*wdbloog*/
* الكود الثانى يضاف فوق   </body>  

* الكود الأخير الخاص بأظهار القائمة الثانية كما فى القائمة الأول يمكنك أن تقوم بوضوع الكود فى المكان الذى تراه مناسب فى مدونتك واذا  تريد إضافة مثل مدونة عالم المدون تقوم بوضعه فوق رسائل المدونة الألكترونية 

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

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


واذا واجهتك  اى مشكلة فى تركيب اى شكل من الشكلين او تريد التعديل على اى شئ يخص الوان القائمة فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)

شارك التدوينه
تنبية هام

هناك 28 تعليقًا :

  1. الردود
    1. شكرا لك هناك المزيد من الأضافت فاتبعنا

      حذف
  2. اضافات جميل الله يوفقك واتمنى ان تواصل الى المام يا اخي

    ردحذف
  3. ممكن تساعدني على اضافاتها في مدونتي

    ردحذف
    الردود
    1. اوك اخى ما الذى تريده

      حذف
    2. انك تساعدني على اضافتيها الى مدونتي جزاك لله خيراا

      حذف
  4. شكراا على مجهوديك الكبير

    ردحذف
  5. ممكن تساعدني على اضافاتيا الى مدونتي جزاك الله خيراا

    ردحذف
  6. اضافة رائع واصل التألق

    ردحذف
  7. ممكن اخي ضيفها لي على المدونة وشكراا

    ردحذف
  8. اضافة جميلة شكرا لك

    مدونة ويب العربي http://web3r.blogspot.com/

    ردحذف
    الردود
    1. شكرا لك
      ولك المرة القادمة لا تقوم بنشر روابط

      حذف
  9. اخى ممكن الموجوده حليا

    ردحذف
    الردود
    1. حسنا اخى سوف تكون فى موضوع على المدونة غدا ان شاء الله

      حذف

شارك بتعليق على

مواقع صديقة سوف تفيدك
عرب جيك MAX SEO TOOLS ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا
ALL RIGHTS RESERVED, 2016 WDBLOOG , POWERED BY BLOGGER , DESIGN BY WDBLOOG