اَمني للمعلوميات اَمني للمعلوميات
حصريات

آخر الأخبار

حصريات
random
جاري التحميل ...

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

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

قبل كل شيء يمكنك معانية الإضافة على الموقع التالي.
  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>
الاَن يمكنك الذهاب الى التخطيط بعد حفظ القالب طبعا و ستجد اربع نوافذ جديدة لوضع تخصيص القائمة بشكل مبسط جدا .

عن الكاتب

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

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

      حذف
  2. اخي لايمكن نسخ الكتابة

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

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

    ردحذف

التعليقات



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

إتصل بنا

عن الموقع

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

حمل تطبيقنا !

Get it on Google Play

تغريداتي

جميع الحقوق محفوظة

اَمني للمعلوميات