يتم التشغيل بواسطة Blogger.

الأربعاء، 7 سبتمبر 2016

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

شرح كيفية وضع قائمة منسدلة على مدونة بلوجر BLOGGER متجاوبة مع الهواتف المحمولة
-----------------------------------


                     السلام عليكم ورحمة الله و بركاته متتبعي برامج انترنت و اخبارك نت  أهلا بكم في هذا الموضوع الذي يخص ادوات بلوجر .....


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

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

              سنقدم لزوارنا و متتبعينا على مدونة التخصص هذا الشرح المتميز لقائمة منسدلة انيقة و جد رائعة على مدونات البلوجر Blogger  و المواقع قصد تمكين الزوار و المتتبعين للمدونة من تصفح اكبر قدر ممكن من الصفحات و الوصول الى اكبر قدر ممكن من المعلومات من خلال موقعك........




              و في هذا سنقوم بشرح كيفية اضافة هذا الستيل الى مواقعكم و مدونات بلوجر Blogger بالتفصيل .....

ملاحظة مهمة: لا انصحكم باستخدام اكثر من قائمة منسدلة واحدة في مدونتكم خاصة اذا لم تكون لديكم معارف و خبرة في هذا المجال ، لانها عادة ما تسبب اخطاء في صفحات المدونات اذا زاد عددها عن القائمة الواحدة.........


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

 

اخي الكريم لا تنسى ان تضع تعليقك اسفل الموضوع اذا اعجبك هذا الموضوع ....


          سنبدأ بالشرح و ما عليك الا قليل من التركيز فقط ، فالامر ليس بالصعب بل يتطلب قليل من الفهم و التركيز.....




شكل القائمة المنسدلة المعنية:




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

الخطوة الاولى:

01 – افتح مدونتك بلوجر Blogger .
02- اختر منها قالب .


                              ثم من المدونة اختر القالب، لتظهر لك صفحة القالب، و منها انقر على  تحرير HTML لتغيير المدونة الى اكواد HTML .......

       انقر مرة واحدة بداخل النموذج HTML و من لوحة المفاتيح ااضغط على CTRL+F يطهر لك مكان للبحث، قم بالبحث على الكود التالي: ]]></b:skin>
و هذا بكتابة هذا الكود (]]></b:skin>) بداخل مربع البحث ثم انسخ الكود CSS الموالي الخاص بالقائمة المنسدلة السابقة، فوق هذا الكود مباشرة، و الكود CSS هو كما يلي:

/* Navigation
----------------------------------------------- */
#mobilenav,.rcbytag.s .comnum,.rcbytag.h .a0 .comnum,.rcbytag.v .a0 .comnum{display:none}
#nav{height:40px;position:relative}
.sf-menu,.sf-menu *{margin:0;padding:0;list-style:none}
.sf-menu li{position:relative}
.sf-menu ul{position:absolute;display:none;top:100%;right:0;z-index:99}
.sf-menu > li{float:right;margin:0 1px}
.sf-menu li:hover > ul,.sf-menu li.sfHover > ul{display:block}
.sf-menu a{display:block;position:relative}
.sf-menu > li > a{font-size:110%}
.sf-menu ul ul{top:0;left:100%}
.sf-menu{float:right}
.sf-menu ul{min-width:12em;padding-top:5px;*width:12em}
.sf-menu a{padding:0 10px;height:40px;line-height:40px;text-decoration:none;zoom:1}
.sf-menu a.home{background-color:#15587D;text-indent:-9999px;padding:0;width:45px;margin-right:4px;text-indent:-9999px}
.sf-menu a{color:#FFFFFF;font-size:100%}
.sf-menu li{white-space:nowrap;*white-space:normal;-moz-transition:background-color .2s;-webkit-transition:background-color .2s;transition:background-color .2s;position:relative}
.sf-menu ul li{background-color:#333;margin:1px 0;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px}
.sf-menu ul a{font-weight:normal;height:30px;line-height:30px}
.sf-menu ul a:hover{padding-right:12px}
.sf-menu ul ul li{background:#3C3C3C;margin:0 0 1px 2px}
.sf-menu li:hover > a,.sf-menu li.sfHover,.sf-menu > li > a.current{background-color:#15587D;-moz-transition:none;-webkit-transition:none;transition:none}
.sf-arrows .sf-with-ul{padding-left:2em;*padding-left:1em}
.sf-arrows .sf-with-ul:after{content:'';position:absolute;top:50%;left:0.75em;margin-top:-3px;height:0;width:0;border:5px solid transparent;border-top-color:#FFFFFF}
.sf-arrows > li > .sf-with-ul:focus:after,.sf-arrows > li:hover > .sf-with-ul:after,.sf-arrows > .sfHover > .sf-with-ul:after{border-top-color:#FFFFFF}
.sf-arrows ul .sf-with-ul:after{margin-top:-5px;margin-left:-3px;border-color:transparent;border-right-color:#FFFFFF}
.sf-arrows ul li > .sf-with-ul:focus:after,.sf-arrows ul li:hover > .sf-with-ul:after,.sf-arrows ul .sfHover > .sf-with-ul:after{border-right-color:#FFFFFF}
.sf-menu li > i{position:absolute;top:5px;left:3px;width:27px;height:22px;cursor:pointer;display:none;background-color:#15587D;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;outline:0}
.sf-menu li > i:after{content:'+';color:#FFFFFF;font-size:19px;position:absolute;right:5px;top:-2px}
.sf-menu li > i.active:after{content:'-';font-size:36px;top:-14px}
/* Social Icon */
#socialicon{float:left;width:179px;padding:8px 0}
#socialicon ul,#socialicon li{padding:0;margin:0;list-style:none}
#socialicon li{float:right;margin:0 2px}
#socialicon a{display:block;text-indent:-9999px;width:24px;height:24px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZE1QOdSSKA4D458Qry0ncsur5qYhegw7v4ACeKub-644Vtv1DwU2DRJzy4D1GiOia08hjK-4vgJ9JHhht_E52f6PBVU3LT7j2B9Ng-tFKQoW7AQBrnZyi2GXP68HJO3hnpiFyKxveLTk/s1600/soicon.png);background-position:-1px 0;background-repeat:no-repeat;position:relative}
#socialicon a:active{top:1px}
#socialicon .fbx{background-position:-1px 0}
#socialicon .twix{background-position:-27px 0}
#socialicon .goex{background-position:-53px 0}
#socialicon .linx{background-position:-131px}
#socialicon .pinx{background-position:-79px 0}
#socialicon .drix{background-position:-157px}
#socialicon .vmex{background-position:-183px 0}
#socialicon .rssx{background-position:-105px}
#topmenu{overflow:hidden;padding:0 5px;color:#FFFFFF;font-size:90%}
#topmenu .tgltop{float:right;height:26px;line-height:26px;padding:4px 6px}
.sf-menu a.home:before,#searchnya button:before,#view a:before,.post-footer a.timestamp-link:before,.post-footer .post-author.vcard .fn:before,.post-footer .comment-link:before,.post-footer .post-labels > span:before,.rcentpost .date:before,.rcentpost .comnum:before,.morepostag a:before,#mobilenav:before,.comments .comments-content .icon.blog-author:before{position:absolute;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased}
.sf-menu a.home:before,#searchnya button:before,#view a:before{text-indent:0}
.sf-menu a.home:before{width:30px;height:30px}
.sf-menu a.home:before{content:"\f015";top:0;font-size:27px;left:9px}
@media only screen and (max-width:979px){
  #mobilenav{display:block;text-indent:-9999px;width:40px;top:2px;right:10px;position:absolute;height:36px;outline:0;background-color:#15587D;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;color:#FFFFFF;text-decoration:none}
#mobilenav.active{color:#FFFFFF}
.sf-menu a.home:before{display:none}
#mobilenav:before{content:"\f0c9";top:3px;text-indent:0;right:7px;font-size:30px}
#menunav{float:none;display:none;position:absolute;top:45px;right:10px;left:10px;z-index:99;background-color:#333;padding:5px 10px}
#menunav li{float:none;margin:0}
#menunav > li{margin:1px 0}
.sf-menu a.home,.sf-menu a{text-indent:0;margin-left:0;width:auto;height:auto;padding:0 10px;line-height:30px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background-color:#1D1D1D}
.sf-menu ul{position:static;padding-top:0}
.sf-menu ul li,.sf-menu ul ul li{background-color:transparent}
.sf-menu ul a{padding-right:20px}
.sf-menu ul ul a{padding-right:30px}
.sf-menu li:hover > ul,.sf-menu li.sfHover > ul{display:none}
.sf-menu li:hover > a,.sf-menu li.sfHover{background-color:transparent}
.sf-menu a.home,.sf-menu li:hover > a.home,.sf-menu > li > a.current{color:#FFFFFF;background-color:#15587D}
.sf-menu ul a:hover{padding-right:25px}
.sf-menu ul ul a:hover{padding-right:35px}


الخطوة الثانية:

و سوف نأتي الى تعريف القائمة و وضعها لتظهر في اعلى الصفحة في منطقة الهيد كما يلي:

بنفس طريقة البحث السابقة داخل اكواد مدونة بلوجر blogger نبحث عن كود الهيد التالي </head> ، و نقوم باظافة الكود التالي فوقه مباشرة .........
كود القائمة المنسدلة بلغة الجافاسكريبت java script في الهيدر هو :


<script
 async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'
 type='text/javascript'/>
   <script type='text/javascript'>
      //<![CDATA[
      //Menu Call  
      function menunav(b){b("#mobilenav")
.click(function(){b("#menunav").slideToggle();b(this).toggleClass("active");
return false});b(".sf-menu ul").each(function(){var d=b(this)
.parent("li");d.append("<i></i>")});function a(){var d=b(window).width();
if(d>979){b("#menunav").css("display","block");b("#menunav").superfish
({animation:{height:"show"},animationOut:{height:"hide"}});b(".sf-menu i")
.css("display","none")}else{if(d<=979&&b("#mobilenav").attr("class")==="active")
{b("#menunav").css("display","block");b("#menunav").superfish("destroy")
;b(".sf-menu i").css("display","block")}else{if(d<=979&&b("#mobilenav")
.attr("class")!=="active"){b("#menunav").css("display","none");b("#menunav")
.superfish("destroy");b(".sf-menu i").css("display","block")}}}}a();b(window)
.resize(a);b(".sf-menu i").click(function(){var d=b(this).parent("li");
var e=d.children("ul");e.slideToggle();b(this).toggleClass("active")
;return false});var c=window.location.href;b("#menunav a").each(function()
{if(this.href===c){var d=b(this).parents("li").children("a").addClass("current")}})}
;
      ;(function($){
        $.fn.superfish = function(op){
          var sf = $.fn.superfish,
              c = sf.c,
          $arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
              over = function(){
                var $$ = $(this), menu = getMenu($$);
                clearTimeout(menu.sfTimer);
                $$.showSuperfishUl().siblings().hideSuperfishUl();
              },
              out = function(){
                var $$ = $(this), menu = getMenu($$), o = sf.op;
                clearTimeout(menu.sfTimer);
                menu.sfTimer=setTimeout(function(){
                  o.retainPath=($.inArray($$[0],o.$path)>-1);
                  $$.hideSuperfishUl();
                  if (o.$path.length && $$.parents
(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
                },o.delay);    },
              getMenu = function($menu){
        var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
                sf.op = sf.o[menu.serial];
                return menu;
              },
              addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone
()); };
          return this.each(function() {
            var s = this.serial = sf.o.length;
            var o = $.extend({},sf.defaults,op);
    o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
              $(this).addClass([o.hoverClass,c.bcClass].join(' '))
              .filter('li:has(ul)').removeClass(o.pathClass);
            });
            sf.o[s] = sf.op = o;
     $('li:has(ul)',this)[($.fn.hoverIntent
 && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
              if (o.autoArrows) addArrow( $('>a:first-child',this) );
            })
            .not('.'+c.bcClass)
            .hideSuperfishUl();
            var $a = $('a',this);
            $a.each(function(i){
              var $li = $a.eq(i).parents('li');
              $a.eq(i)
.focus(function(){over.call($li);}).blur(function(){out.call($li);});
            });
            o.onInit.call(this);
          }).each(function() {
            var menuClasses = [c.menuClass];
            if (sf.op.dropShadows  && !
($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
            $(this).addClass(menuClasses.join(' '));
          });
        };
        var sf = $.fn.superfish;
        sf.o = [];
        sf.op = {};
        sf.IE7fix = function(){
          var o = sf.op;
          if ($.browser.msie && 
$.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
            this.toggleClass(sf.c.shadowClass+'-off');
        };
        sf.c = {
          bcClass     : 'sf-breadcrumb',
          menuClass   : 'sf-js-enabled',
          anchorClass : 'sf-with-ul',
          arrowClass  : 'sf-sub-indicator',
          shadowClass : 'sf-shadow'
        };
        sf.defaults = {
          hoverClass : 'sfHover',
          pathClass : 'overideThisToUse',
          pathLevels : 1,
          delay  : 800,
          animation : {opacity:'show'},
          speed  : 'normal',
          autoArrows : true,
          dropShadows : true,
          disableHI : false,  // true disables hoverIntent detection
          onInit  : function(){}, // callback functions
          onBeforeShow: function(){},
          onShow  : function(){},
          onHide  : function(){}
        };
        $.fn.extend({
          hideSuperfishUl : function(){
            var o = sf.op,
                not = (o.retainPath===true) ? o.$path : '';
            o.retainPath = false;
            var $ul = $(['li.',o
.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
            .find('>ul').hide().css('visibility','hidden');
            o.onHide.call($ul);
            return this;
          },
          showSuperfishUl : function(){
            var o = sf.op,
                sh = sf.c.shadowClass+'-off',
                $ul = this.addClass(o.hoverClass)
            .find('>ul:hidden').css('visibility','visible');
            sf.IE7fix.call($ul);
            o.onBeforeShow.call($ul);
            $ul.animate
(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
            return this;
          }
        });
      })(jQuery);
      //]]>
    </script>

ابحث في اكواد مدونتك على كود ajax فاذا وجدته قم بحذف الكود التالي الملون باللون الاصفر اعلى الكود الجافاسكريبت السابق للقائمة المنسدلة التالي:

<script 
async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'
 type='text/javascript'/>


الخطوة الثالثة و الاخيرة:

في هذه الخطوة هي آخر مرحلة لادراج القائمة المنسدلة بشكل سليم ، حيث سنختار مكان وضع هذه القائمة في موقع مدونة بلوجر blogger الخاص بنا .........
و نحن نريد اضافتها في اعلى الصفحة لهذا فان مكانها هو قسم الهيدر header من المدونة ، حيث بنفس طريقة البحث عن السماء و الاكواد بداخل كود HTML الخاص بصفحتنا، نبحث عن الكود التالي  </header> ، حيث سنفتح له تقسيم خاص به <div> حتى لا يختلط مع بقية الاقسام و يتم اضافته بدون مشاكل..........
بعد البحث عن الكود (</header>) ، نضع فوقه مباشرة الكود التالي الخاص بالقائمة المنسدلة و هو كما يلي:

<div class='menu'>
<div id='navitions'>
<div class='isi'>
<nav class='navix' id='nav'>
<div id='socialicon'>
<ul>
     <li>
<a class='fbx'
 href='https://www.facebook.com/abdo.bady90' target='_blank' title='Facebook'> 
Facebook   </a>
    </li>
    <li>
<a class='twix' href='https://www.facebook.com/pages/Abdo-bady/280689625390249'
 target='_blank' title='Twitter'> 
twitter </a>
    </li>
    <li>
<a class='goex' href='http://ecomedfot.blogspot.com/feeds/posts/default'
 target='_blank' title='Google+'> 
Google+ </a>
   </li>
   <li>
<a class='linx' href='#' target='_blank' title='Linkedin'> Linkedin </a>
  </li>
  <li>
<a class='pinx'
 href='http://netspeker.blogspot.com/' target='_blank' title='Pinterest'> 
Pinterest </a>
  </li>
  <li>
<a class='rssx'
 href='http://feeds.feedburner.com/blogspot/SBWxz' target='_blank' title='RSS'>  
RSS </a>
  </li>
  </ul>
</div>
 
<a href='#' id='mobilenav'>  الصفحات  </a>
<ul class='sf-menu' id='menunav'>
<li>
  <a class='home' href='/'> الرئيسية</a>
</li>
<li>
<a href='#'> قائمة 1</a>
<ul>
   <li>
<a href='#'> فرع 1</a>
  </li>
  <li>
<a href='#'> فرع 2 </a>
  </li>
  <li>
<a href='#'> فرع 3 </a>
  </li>
  <li>
<a href='#'> فرع 4 </a>
  </li>
  <li>
<a href='#'> فرع 5 </a>
  </li>
</ul>
</li>
<li>
<a href='#' target='_blank'> قائمة 2 </a>
  </li>
  <li>
<a href='#'> قائمة 3</a>  
<ul>
  <li>
<a href='#'> فرع 1 </a>
  </li>
  <li>
<a href='#'> فرع 2 </a>
  </li>
  <li>
<a href='#'> فرع 3</a>
  </li>
  <li>
<a href='#'> فرع 4 </a>
  </li>
</ul>
  </li>
  <li>
<a href='#'> قائمة 4 </a>
<ul>
  <li>
<a href='#'> فرع 1 </a>
  </li>
  <li>
<a href='تعديل 2'> اسلاميات </a>
  </li>
</ul>
</li>
  <li>
<a href='#'> أدوات تحرير الصور </a>
<ul>
  <li>
<a href='http://topsat.koom.ma/montada' target='_blank'> صنع إطار  لصورك</a>
</li>
<li>
<a href='http://www.topsat.koom.ma/vb' target='_blank'>
 محرر الصور </a>
</li>
<li>
<a href='http://motakasis.blogspot.com' target='_blank'>
 فوتوشوب أون لاين</a>
</li>
</ul>
</li>
  <li>
<a href='#'> أدوات </a>
<ul>
  <li>
<a href='http://www.ecomedfot.blogspot.com' target='_blank'>
 تحويل كود أدسنس </a>
  </li>
  <li>
<a href='http://netspeker.blogspot.com/' target='_blank'>
أعرف IP  جهازك</a>
  </li>
  <li>
<a href='https://www.paidverts.com/ref/abdo-bady' target='_blank'>
 عداد الأحرف</a>
  </li>
  <li>
<a href='https://www.youtube.com/channel/UCXoIozrHfZGYsqbDo1YTd1Q' target='_blank'>
 صانع اكواد الالوان</a>
  </li>
  <li>
<a href='http://topsat.koom.ma/montada' target='_blank'>
أداة تشفير/ فك تشفير HTML JavaScript </a>
  </li>
  <li>
<a href='http://www.topsat.koom.ma/vb' target='_blank'>
أكتب أسمك على شكل قلب حب&#9829; </a>
  </li>
  </ul>
</li>
<li>
<a href='#'> روابط مفيدة </a>
<ul>
  <li>
<a href='http://www.programe-explique.blogspot.com' target='_blank'>
 ألعاب فلاش أون لاين </a>
  </li>
  <li>
<a href='http://www.blagimage.blogspot.com' target='_blank'>
أجمل الخلفيات HD </a>
  </li>
  <li>
<a href='http://www.ecomed-medecen.blogspot.com' target='_blank'>
 تطبيقات الاندرويد</a>
  </li>
  <li>
<a href='http://www.ecomedfot.blogspot.com' target='_blank'>
 قوالب بلوجر</a>
  </li>
</ul>
</li>
<li>
<a href='#'> المزيد.. </a>
<ul>
  <li>
<a href='#' target='_blank'> فرع </a>
  </li>
  <li>
<a href='#' target='_blank'> فرع </a>
  </li>
  <li>
<a href='#' target='_blank'> فرع   </a>
  </li>
  <li>
<a href='#' target='_blank'> قائمة 7 </a>
  </li>
</ul>
</li>
</ul>
 
<script type='text/javascript'>menunav(jQuery);
searchxx({summaryLength:100,scrthumbSize:50});</script>
</nav>
</div>
</div>
</div>

ملاحظة مهمة: قم باجراء تغيير على روابط مواقع التواصل الاجتماعي بما يناسب روابطك انت على مدونتك ..........


نامل ان يكون الموضوع قد نال إعجابكم وإذا كان لديك أي إستفسار لا تتردد في طرحه من خلال التعليق اسفل الموضوع.....


قومو بوضع بريدكم على مدونتنا ليصلكم كل جديد






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

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

                 ان اعجبك الموضوع لا تنسى بمتابعتنا بالنقر على متابعة بالبريد الالكتروني في اسفل الموضوع حتى يصلكم كل جديد في موقع برامج انترنت و اخبارك نت ...

يمكنكم متابعة ايضا المواقع التالية كمصدر لاهم المعلومات .....

  زورو المواقع التالية


شرح كيفية وضع قائمة منسدلة على مدونة بلوجر BLOGGER متجاوبة مع الهواتف المحمولة,
 مدونة البلوجر Blogger, تحرير HTML, CTRL+F , b:skin, 
css
computer, program, php, js, json, jQuery, drupal, drupal 7, jQuery UI, SASS, html, html5, css, css3, articles, courses, دورات, برمجة, دورات باللغة العربية
CSS Tutorial, Learn CSS, YouTube videos, CSS templates, web design

1:23:00 ص
, ,

ليست هناك تعليقات

الاشتراك في: تعليقات الرسالة (Atom)
جميع الحقوق محفوظة لــ برامج انترنت و اخبارك نت 2016 ©