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

الأحد، 2 يوليو، 2017

اضافة قائمة جانبيه رائعه لمدونات بلوجر #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>


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


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


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

شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

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

اخى انا بصمم قالب بلوجر وهذا المعاينه للقالب الذى اصممه وقمت ب اظهار المواضيع ولكن انا اريد ان تظهر على شكل شبكه ماذ افعل ومع العلم انى قمت ب اطافه اكواد cssولم يحدث شى ممكن تبعتلى الاكواد او تاخذ القالب وتفعلها انت ارجووووووووووووووووووووووووووووووك

حسنا أخى الفاضل لا مشكلة
ولكن اين هو رابط معاينة المدونة

أخى عليك أول وضع خاصية أقرا المزيد والتى هى فى هذا الموضوع
http://www.wdbloog.com/2017/06/seo-google-yahoo-analytics-blogger.html
وبعد ذلك أرسل لى معاينة من جديد

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

فى خدمتكم أخى الفاضل

موضوع قوي وشيق واعتقد من اقوى المواضيع

ولكن لا يمكن نسخ الاكواد !

يمكنك أخى تحميل الأكواد الخاصة بالإضافة

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

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