كن داعيا للخير

1. شرح موقع Github

يمكن من خلال هذا الموقع إستضافة أكواد المشاريع مفتوحة المصدر وإدارتها ، وضمان الإحتفاظ بها فهو مفيد جدًا لأصحاب مدونات بلوجر التى ليس لديها ميزة الإستضافة حيث يمكن إستخدام موقع Github لرفع ملفات القوالب وأكواد الإضافات المستخدمة سواء كانت javascript or css or Html ، كما إنه يعتبر مكان جيد لمطورى تطبيقات الهواتف للإحتفاظ بمصادر برمجياتهم .

شرح الإستضافة على موقع Github

 

 

مع العلم أن الرابط المباشر بهذه الطريقة يعرض محتويات الصفحة من أكواد أما إذا أردت رابط مباشر لعرض الويب مثلا فعليك باستخدام هذه الخدمة https://rawgit.com/

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

الطريقة الصحيحة لكتابة أكواد CSS داخل مدونات بلوجر

 2. موقع bitbucket

3. بدائل أخرى

• SourceForge : يستخدمه الكثير من المبرمجين لإستضافة مشاريعهم
• Dropbox: يمكنه أيضًا إستضافة المواقع و المشاريع الخاصة ولكن من عيوبه أنه محدود limited bandwidth
• Gitlab : يشبه إلى حد كبير موقع Github تستخدمه العديد من الشركات الكبرى ولكنه مجانى لفترة تجريبية

<link rel="stylesheet" type="text/css" href="mystyle.css">

الطريقة الثانية: كتابة كود CSS مباشرة داخل Html 

<b:skin><![CDATA[

هنا تكتب أكواد CSS

]]></b:skin>

<style type="text/css">

Add CSS code here

</style>

]]></b:skin>

   /* Up and Down Buttons with jQuery
    ----------------------------------------------- */
    .button_up{
    padding:7px; /* Distance between the border and the icon */
    background-color:white;
    border:1px solid #CCC; /* Border Color */
    position:fixed;
   
 background: white 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimKESO693Iw4gB9_oSl03fMaNM5bZ0Qu2D5v3Asw3DF3NtYrexctT6znXhJLCns32RzjRxFCuslLv7WE4oxnhMcSCHMISabGnt5STouR46Odn9zt1gS5J-BZ98njRDFYwDo3QWkypaGt4/s16/arrow_up.png)
 no-repeat top left;
    background-position:50% 50%;
    width:20px; /* Button's width */
    height:20px; /* Button's height */
    bottom:280px; /* Distance from the bottom */
    right:5px; /* Change right to left if you want the buttons on the left */
    white-space:nowrap;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }
    .button_down{
    padding:7px; /* Distance between the border and the icon */
    background-color:white;
    border:1px solid #CCC; /* Border Color */
    position:fixed;
   
 background: white 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5cfNxEXAn0deRdS-ererr_d4PcAvoplAc8ithJu5iZxbG4nftl1OMWzoR3NJFnXb4Fg-ty8Vskk_kCOPRLSa7TnF4uXHhn_203AP2PVB6awTJCJE_MpwbIwUeIznj3LQw6vkz4QlBDOU/s16/arrow_down.png)
 no-repeat top left;
    background-position:50% 50%;
    width:20px; /* Button's width */
    height:20px; /* Button's height */
    bottom:242px; /* Distance from the bottom */
    right:5px; /* Change right to left if you want the buttons on the left */
    white-space:nowrap;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }
 

</body>

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

    <div class='button_up' id='button_up' style='display:none;'/>
    <div class='button_down' id='button_down' style='display:none;'/>

    <script>
    //<![CDATA[
   
 (function(){var special=jQuery.event.special,uid1='D'+(+new 
Date()),uid2='D'+(+new 
Date()+1);special.scrollstart={setup:function(){var 
timer,handler=function(evt){var 
_self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var
 timer,handler=function(evt){var 
_self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

    $(function() {
    var $elem = $('body');
    $('#button_up').fadeIn('slow');
    $('#button_down').fadeIn('slow');
    $(window).bind('scrollstart', function(){
    $('#button_up,#button_down').stop().animate({'opacity':'0.2'});
    });
    $(window).bind('scrollstop', function(){
    $('#button_up,#button_down').stop().animate({'opacity':'1'});
    });
    $('#button_down').click(
    function (e) {
    $('html, body').animate({scrollTop: $elem.height()}, 800);
    } );
    $('#button_up').click(
    function (e) {
    $('html, body').animate({scrollTop: '0px'}, 800);
    } );});
    //]]>
    </script>

زر العودة إلى أعلى أو الذهاب لأسفل الصفحة بتقنية CSS

• أحيانًا يوجد تعارض بين مكتبات jQuery عند وجود أدوات أخرى تستخدم نفس التقنية مما يؤدى إلى تعطل عمل أحد هذه الأدوات.
• إستخدام العديد من الأدوات التى تعتمد على الجافاسكريبت أو جي كويرى يؤدى إلى بطء تحميل صفحات الموقع.

معاينة الإضافة

 /* Up and Down Buttons with Css By http://www.condaianllkhir.com/
    ----------------------------------------------- */
<span style="background-color: #cc0000; bottom: 45px; position: fixed; right: 10px;border-top-left-radius: 5px;
border-top-right-radius: 5px;"><a href="#"><img border="0" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbVx1_8m1qZ7zVw5rbL1_B4OsXxYkna7CR6NOVX746vidHwsCHP3ql2eL78IB3Tl2OTfwge9VXHB6wNTKL80ZvzdckfFyYPVX_W4AiFTXMO7m-1x91U2oC7jq8xkHuY8t2B2fRLyrxhmjm/s200/up.png" width="25" /></a></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>

<span style="background-color: #cc0000; bottom: 20px; position: fixed; right: 10px;border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;"><a href="#footer"><img border="0" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2zmRouVUvYGHmMeux4JF0HqXL1EE8A8oLOFSvt4SGoLSnf67yzHKr3o5zcXdV3iylnh8pXK1sMV3ZdAa8135ozi8cdFQKVGpOlaE7aX28YXIi1EAE4JMtZJc1oUjMkKWwlhJbjpc46qCr/s200/down.png" width="25" /></a></span></div>
<br /></div>

سيدنا محمد وعلى آله وصحبه أجمعين

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

  تابع أيضًا:

أضف قائمة رأسية ثابتة بالأقسام الهامة لمدونات بلوجر Fixed vertical menu

قائمة ثابتة من أيقونات المواقع الاجتماعية الخشبية woody social menu

قوائم رأسية أنيقة بها نجوم متحركة animated star vertical menu

إستخدلم برنامج Css3 Menu لتصميم قوائم الويب

مميزات البرنامج

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

• يمكن إضافة صور أيقونات المتاحة بالبرنامج للقوائم أو إضافة صور أيقونات خارجية
• يدعم اللغة العربية وإتجاه الكتابة من اليمين
• إمكانية تصميم قوائم  رئيسية Main Menu أفقية أو رأسية وإنشاء قوائم متفرعة منها Submenu
• إمكانية تصميم قوائم مناسبة للشاشات المتعددة لأجهزة الهواتف الذكية وذلك بتنشيط الخيار Responsive
• بالإضافة إلى النماذج المجانية الموجودة بالبرنامج توجد نماذج غير مجانية بتأثيرات أكثر تطورًا
• تكون القوائم المصممة بهذا البرنامج متوافقة مع جميع أنواع المتصفحات بإصداراتها
• يمكن إستخدام القوائم لجميع أنواع منصات المواقع Wordpress,blogger,................

كيفية تركيب القوائم المنسدلة على مدونات Blogger

بعد إلغاء الإستضافة على Dropbox و Googledrive يمكن إستضافة ملفات القائمة التى قمت بإنشائها على موقع Github
 

5- ثم إنسخ كل الأكواد الموجودة بصفحة الويب وأضفها إلى مدونة بلوجر داخل أداة Html/javascript  وأضفها بالمكان المناسب لمدونتك.

ملاحظات:

•  إذا كانت القوائم تتضمن أيقونات يمكن أيضا تبديل مسارات الأيقونات التى تنتهى بالإمتداد Png داخل الكود بالرابط المباشر لهذه الأيقونات على Dropbox بنفس الطريقة السابقة

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

أولا: إنشاء خريطة لمدونات بلوجر مع مصغرات الصور

<script src="https://cdn.rawgit.com/DrRO/condaianllkhir/44b906ba/thumb-TOC.js">
</script>
<script>
var numposts = 999;
var showpostthumbnails = true;
var displayseparator = true;
</script>
<script src="http://www.Yourwebsite.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;max-results=999"></script>
<style type="text/css">
.sitemap-container {width: 100%; height: 100px; border-top: 2px solid #eee;}
.sitemap-container:hover {background-color:#fafafa;}
.thumbnail {width: 60px; height: 90px; float: right; top:0px;}
.posttitle {height: 90px; float: left; line-height: 70px; margin-left:25px; display:block; width:80%; white-space:nowrap;}
#postimg {margin-top: 0px;  -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 10px; width: 60px; border: 2px solid #eee;}
#list{list-style-type: none; padding-right: 0px; margin-left: 0px;}
</style></div>
<br />
<a href="http://www.condaianllkhir.com/2012/09/blogger-widget.html" rel="nofollow" target="_blank"><span style="font-size: xx-small;"><span style="color: #999999;"><b>Blogger widgets</b></span></span></a>

</div><br/><br/>

ثانيًا: إنشاء فهرس لقسم معين فقط لمدونة بلوجر

<script src="https://cdn.rawgit.com/DrRO/condaianllkhir/44b906ba/thumb-TOC.js">
</script>
<script>
var numposts = 999;
var showpostthumbnails = true;
var displayseparator = true;
</script>
<script src="http://www.yourwebsite.com/feeds/posts/default/-/Label%20Name?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;max-results=999"></script>
<style type="text/css">
.sitemap-container {width: 100%; height: 100px; border-top: 2px solid #eee;}
.sitemap-container:hover {background-color:#fafafa;}
.thumbnail {width: 60px; height: 90px; float: right; top:0px;}
.posttitle {height: 90px; float: left; line-height: 70px; margin-left:25px; display:block; width:80%; white-space:nowrap;}
#postimg {margin-top: 0px;  -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 10px; width: 60px; border: 2px solid #eee;}
#list{list-style-type: none; padding-right: 0px; margin-left: 0px;}
</style></div>
<br />
<a href="http://www.condaianllkhir.com/2012/09/blogger-widget.html" rel="nofollow" target="_blank"><span style="font-size: xx-small;"><span style="color: #999999;"><b>Blogger widgets</b></span></span></a>

</div><br/><br/>

إقرأ أيضًا: أداة أحدث المواضيع حسب أقسام موقع بلوجر

تابع --->>>  كيفية إضافة مربع بحث وصورة المؤلف إلى الفهرس

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

أعلنت شركة جوجل عن توقف خدمة إستضافة الملفات بعد 31 أغسطس 2016 طبقًا لهذا البيان ويمكن متابعة شرح لبعض البدائل لخدمة Google drive