قالب عالم التقنية السورية الاصدار الثالث

السلام عليكم

اليوم نكمل بالدرس الثالث من دروس انشاء موقع الكتروني او مدونة الكترونية على الانترنت والربح منها قبعد ان تكلمنا في الدروس الماضية عن:

1. طريقة انشاء الموقع او المدونة
2. اثبات ملكية الموقع وشرح لوحة تحكم بلوجر وتعديل مظهر المدونة (تركيب قالب)

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

يصعب شرح هذه التغيرات كتابيا لذالك ساعطي نبذة كتابية عن التغيرات ولكن تابع الفيديو لتشاهد الشرح العملي

كثير منا يريد تعديل قالب بلوجر ولكن لا يمتلك خبرة باكواد البرمجة فيبقى مقيد بالتغيرات التي سمح بها مصمم القالب ولكن مع هذا الشرح ستصبح قادر ان شاء الله على تعديل قوالب بلوجر بدون اي خبرة باكواد البرمجة 

اولا- حجم عرض الصفحة الرئيسية

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

ثانيا- الالوان

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

ثالثا- شكل المشاركات

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

رابعا- قائمة رئيسية ثابتة

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

خامسا- اضافة تاثيرات عند المرور بمؤشر الماوس او تغير التاثيرات

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

كود تثبيت القائمة الرئيسية

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .nav
    var stickyNavTop = $('تغير').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya    
        if (scrollTop > stickyNavTop) {
          $('تغير').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('تغير').css({ 'position': 'relative', 'width': '100%' });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

رابط برنامج notepad +
اضغط هنا
رابط موقع الالوان
اضغط هنا

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

والان الى اللقاء الى شرح جديد ان شاء الله

والسلام عليكم ورحمة الله