تم الكشف عن مانع الإعلانات

الإعلانات تساعدنا في تمويل موقعنا، فالمرجو تعطيل مانع الإعلانات وساعدنا في تقديم محتوى حصري لك. شكرًا لك على الدعم ❤️

U3F1ZWV6ZTQ0OTg0ODg5MzE5X0FjdGl2YXRpb241MDk2MTY3Mjk0NzE=

طريقة إضافة قائمة جانبية منبثقة إحترافية الإصدار الثاني لمدونات بلوجر

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

قبل كل شيء يمكنك معانية الإضافة على الموقع التالي.
  1. المعاينة : من هنا

طريقة التركيب :

قم بتحري القالب ثم ctrl+f وابحث عن وسم ]]></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='LinkList2' locked='false' title='الأقسام' type='LinkList'>
      <b:widget-settings>
        <b:widget-setting name='link-3'>http://</b:widget-setting>
        <b:widget-setting name='sorting'>NONE</b:widget-setting>
        <b:widget-setting name='text-1'>جديد التقنية</b:widget-setting>
        <b:widget-setting name='link-1'>http://</b:widget-setting>
        <b:widget-setting name='text-0'>حلقات حصرية</b:widget-setting>
        <b:widget-setting name='link-2'>http://</b:widget-setting>
        <b:widget-setting name='text-3'>شروحات</b:widget-setting>
        <b:widget-setting name='link-0'>http://</b:widget-setting>
        <b:widget-setting name='text-2'>الربح من الانترنت</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='LinkList1' locked='false' title='صفحات المدونة' type='LinkList'>
      <b:widget-settings>
        <b:widget-setting name='sorting'>NONE</b:widget-setting>
        <b:widget-setting name='text-1'>خدمات</b:widget-setting>
        <b:widget-setting name='link-1'>http://</b:widget-setting>
        <b:widget-setting name='text-0'>الابلاغ عن رابط</b:widget-setting>
        <b:widget-setting name='link-0'>http://</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='HTML5' 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/amnitech8&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='PopularPosts2' locked='false' title='المشاركات الشائعة' type='PopularPosts'>
      <b:widget-settings>
        <b:widget-setting name='numItemsToShow'>5</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_WEEK</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'> ا&#1614;مني </a>
</div>
</div>

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

<a><span class='openNavw' onclick='openNav()' title='قائمة جانبية'><i aria-hidden='true' class='fa fa-bars'/></span></a>
الاَن يمكنك الذهاب الى التخطيط بعد حفظ القالب طبعا و ستجد اربع نوافذ جديدة لوضع تخصيص القائمة بشكل مبسط جدا .
تعديل المشاركة
author-img

Moulai Amine

تعليقات
    6 تعليقات
    إرسال تعليق
    • Unknown photo
      Unknownأغسطس 09, 2017

      يا اخي لا يمكن نسخ الكتابات او السكربتات قم بحدف حماية الكتابة تلك

      إرسال تعليقحذف التعليق
    • aymen photo
      aymenأغسطس 09, 2017

      اخي لايمكن نسخ الكتابة

      إرسال تعليقحذف التعليق
    • غير معرفأغسطس 17, 2017

      أزال أحد مشرفي المدونة هذا التعليق.

      إرسال تعليقحذف التعليق
      • المذيع photo
        المذيعمايو 11, 2019

        تحميل قالب سمارتيك | من افضل قوالب بلوجر مجانية !
        هل تبحث عن قوالب بلوجر مجانية ؟ اقدم لكم اليوم قالب سمارتيك افضل قوالب بلوجر 2019 مجانية, قالب سمارتيك رائع جدا و يمكنك الحصول علي كثير من المميزات عن طريق هذا القالب و سوف يعطي لموقعك جمالية اكبر و يجعلك تظهر في محركات البحث
        مميزات القالب
        تصميم مميز يركز على تجربة المستخدم
        تم تصميم العمل بأحدث التقنيات
        متجاوب مع أغلب المتصفحات
        متجاوب مع جميع الأجهزة
        ألوان مميزة
        يدعم الإتصال المشفر https
        صفحة 404
        رابط تحميل القالب : https://www.almoh3arif.com/2019/05/smartech-blogger-template.html

        إرسال تعليقحذف التعليق
        الاسمبريد إلكترونيرسالة