404
الصفحة او الكلمة التي تبحث (ي) عنها لا يوجد ما يطابقها

الأربعاء، 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 تعليقًا:

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

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

ممكن تساعدني على اضافاتها في مدونتي

شكراا على مجهوديك الكبير

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

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

اضافة رائع واصل التألق

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

اضافة جميلة شكرا لك

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

شكرا لك
ولك المرة القادمة لا تقوم بنشر روابط

اخى ممكن الموجوده حليا

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

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

إتصل بنا

الإسم الكريم البريد الإلكتروني مهم الرسالة مهم
جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر