الأربعاء، 9 أغسطس 2017

100 100 100

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

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

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

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

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

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

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

    ردحذف

مواضيع حصرية

...
لن تجد مثلها على أي موقع اَخر

Whatsapp Button works on Mobile Device only