اضافة قائمة جانبيه رائعه لمدونات بلوجر #1

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

معاينة وتحميل الأكواد

سوف تجد لملف الأكواد باسورد هذه هو wdbloog

معاينة تحميل

شرح التركيب

قم أولا بالبحث عن هذا الوسم]]></b:skin>ثم ضع فوقه الكود التالى .

#sidebar2 {float: right;overflow: hidden;}
#sidebar2 h2 {color: #7986CB;position: relative;display: block;margin: 10px 0;font-size: 17px;padding: 8px 0;height: 50px;line-height: 25px;font-weight: 500;letter-spacing: 1px;text-align: right!important;border-bottom: 2px solid #ccc;}
#sidebar2 h2::before {content: "";position: absolute;height: 2px;width: 32px;background-color: #7986CB;bottom: -2px;left: initial!important;right: 0;}
#sidebar2 h2:after {content: "\f00c";display: block;background-color: #7986CB;font-family: FontAwesome;height: 28px;width: 32px;line-height: 28px;font-size: 14px;text-align: center;border-radius: 2px;float: right;margin-right: 0;margin-left: 10px;color: #FFF;}
#sidebar2 .widget {margin-bottom: 20px;background-color: #fff;padding: 10px 15px 10px;width: 315px;float: right;}
.center-copy {float: right;width: 100%;text-align: center;padding-bottom: 20px;font-size: 16px;font-weight: 500;}
.center-copy a {color: #7986CB;}
.t-menu2{margin:0;padding:0;width: 100%;padding-top: 15px;}
.t-menu2 a {color: #000!important;float: right;font-size: 16px!important;font-weight: 500;width: 100%;padding-right: 20px!important;height: 50px;line-height: 45px;}
.t-menu2 a i {margin-left: 10px;}
.t-menu2 a:hover {color: #7986cb!important;;}
.openNavw {
  position: relative;
  z-index: 9999;
  height: 35px;
  display: block;
  float: left;
  line-height: 37px;
  font-size: 20px;
  color: #fff;
  background-color: #7B88CC;
  margin-top: 0;
  width: 35px;
  padding: 0 8px;
  margin-right: 3px;
}
.sidenav {height: 100%;width: 0;position: fixed;top: 0;right: 0;background-color: #FFF;overflow-x: hidden;transition: 0.5s;z-index: 99999999;padding-top: 65px;}
.sidenav .closebtn {position: absolute;top: 0;left: 0;font-size: 23px;}
.closebtn {position: relative;z-index: 9999;height: 65px;display: block;float: left;line-height: 55px;color: #fff;background-color: #7B88CC;width: 100%;padding: 0 20px 0 10px;}
.closebtn i {margin-left: 10px;}
#sidebar2 .widget-content ul li {color: #000;font-size: 18px;padding: 10px 0;font-weight: 500;}
#sidebar2 .widget-content ul li a:hover {color: #7986cb;}

الأن أبحث عن هذا الوسم</body>ثم ضع فوقه الكود التالى .

<script type='text/javascript'>
/*<![CDATA[*/
// mySidenav
function openNav() {document.getElementById("mySidenav").style.width = "350px";}
function closeNav() {document.getElementById("mySidenav").style.width = "0";}
/*]]>*/
</script>

الأن ايضا أبحث عن هذا الوسم<body>ثم ضع فوقه ايضا الكود التالى .
وأنا لم تجد الوسم أبحث عنه هكذا<body

<div class='sidenav' id='mySidenav'>
  <b:section id='sidebar2'>
    <b:widget id='LinkList202' locked='false' title='الأقسام' type='LinkList'>
      <b:widget-settings>
        <b:widget-setting name='link-3'>https://goo.gl/cQUZ9o</b:widget-setting>
        <b:widget-setting name='sorting'>NONE</b:widget-setting>
        <b:widget-setting name='link-4'>http://www.wdbloog.com/search/label/%D8%AD%D8%B5%D8%B1%D9%8A%D8%A7%D8%AA</b:widget-setting>
        <b:widget-setting name='text-1'>إضافات بلوجر</b:widget-setting>
        <b:widget-setting name='link-1'>https://goo.gl/hLGrgc</b:widget-setting>
        <b:widget-setting name='text-0'>قوالب بلوجر</b:widget-setting>
        <b:widget-setting name='link-2'>https://goo.gl/7YB4bn</b:widget-setting>
        <b:widget-setting name='text-3'>فوتوشوب</b:widget-setting>
        <b:widget-setting name='link-0'>https://goo.gl/zzZdKr</b:widget-setting>
        <b:widget-setting name='text-2'>دروش وشروحات</b:widget-setting>
        <b:widget-setting name='text-4'>حصريات</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>

<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
    </b:widget>
    <b:widget id='LinkList101' locked='false' title='صفحات المدونة' type='LinkList'>
      <b:includable id='main'>

<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
    </b:widget>
    <b:widget id='HTML505' locked='false' title='تابع المدونة على الفيسوك' type='HTML'>
      <b:widget-settings>
        <b:widget-setting name='content'>&lt;div class=&quot;fb-page&quot; data-href=&quot;https://www.facebook.com/wdbloog&quot; data-width=&quot;400&quot; data-height=&quot;245&quot; data-hide-cover=&quot;false&quot; data-show-facepile=&quot;false&quot; data-show-posts=&quot;true&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/ar_AR/sdk.js#xfbml=1&amp;version=v2.3&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <!-- 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:includable>
    </b:widget>
    <b:widget id='PopularPosts200' locked='false' title='المشاركات الشائعة' type='PopularPosts'>
      <b:widget-settings>
        <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
        <b:widget-setting name='showThumbnails'>true</b:widget-setting>
        <b:widget-setting name='showSnippets'>false</b:widget-setting>
        <b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
              </div>
            </b:if>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
          <div style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
    </b:widget>
  </b:section>
<a class='closebtn' href='javascript:void(0)' onclick='closeNav()'><i aria-hidden='true' class='fa fa-times'/> إغلق القائمة </a>
<div class='center-copy'>
جميع الحقوق محفوظة لـ 
<a expr:href='data:blog.homepageUrl'> عالم المدون </a>
 </div>
</div>

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

<a><span class='openNavw' onclick='openNav()' title='قائمة جانبية'><i aria-hidden='true' class='fa fa-bars'/></span></a>

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

مدونة أنيس تيتش | Anis Tetche

اضافة قائمة جانبيه رائعه لمدونات بلوجر #1

معاينة وتحميل الأكواد

شرح التركيب

وهكذا كان موضوع اليوم بالتوفيق للجميع فى أمان الله

لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق

Default

طريقة الحصول على بطاقة ماستركارد 💳 إفتراضية خاصة بك مجانا للشراء من الإنترنت و تفعيل البايبال - 2022