دروس بلوجر
404
نعتذر , لا نستطيع ايجاد الصفحة المطلوبة
  • العودة الى الصفحة الرئيسية
  • فديوهات

    [دروس بلوجر][videos]
    كيف تجعل رسالة تظهر لمن يدخل الى قناتك تطلب منه الإشتراك في القناة كما في الصورة



    كل ما عليك فعله هو اضافة هذا الجزء في نهاية رابط قناتك ?sub_confirmation=1

    مثال

    رابط القناة
    https://www.youtube.com/user/youtubehelp

    الرابط بعد الإضافة
    https://www.youtube.com/user/youtube...confirmation=1

    شرح منع الزوار السبام من دخول مدونتك   


    اليوم سوف اشرح لكم طريقة منع الزوار السبام او الوهميين بقصد تدمير موقعك او اغلاق حساب ادسنس   يمكن مراقبة مصادر الزوار عن طريق جوجل تحليلات 
    او عن طريق موقع histats   قد ياتى اليك الكثير من الزيارات من باك لينك ضعيف قد يضر موقعك
    وياتى اليك زيارات من مواقع تبادل الزيارات مثال هت ليب ولمنع تلك الزيارات
     ابحث بالقالب عن الكود <head>
    ونضع بعدها هذا الكود
    <script type='text/javascript'>
    var block = ['addmefast.com', 'alexaboostup.com', 'hitleap.com','siteweb.com'];
    for (var b = block.length; b--;) {
    if (document.referrer.match(block[b]))
    window.location = "https://www.google.com/";
    }
    </script>
     سيتم تحويل الزوار الوهميين اتومتك الى جوجل ولا تقم بتغيير الرابط حتى لا تضرر اى موقع اخر من تلك الزيارات   ويمكنك اضافة اى موقع مثال باللون الاحمر



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

    كيفية تعامل مع كود الاعجاب التلقائي بصفحة الفيس بوك :
     - اولا الكود يتم اضافته في داخل قالب بلوجر
      - تقوم بدخول الى القالب >> ثم تحرير html >>
    بعدها اخرج محرك البحث CTRL+F >> ونبحث عن امر </body>
    ثم نضع الكود فوقه مباشرة او اسفله كما في الصورة


    قم بتغير عنوان الفيس بوك https://www.facebook.com/laroujihicham12 الى عنوانك الخاص بالصفحة . -
    كما انني وفرت لكم اثنين اكواد من اجل اضافة الاعجاب التلقائي ، فانت اختر واحد منهم ، الاول أو الثاني
    ولهما نفس التركيب في القالب .
    الكود الاول :

    أو الكود الثاني :


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

    لتركيب السلايدشو ما عليك سوى اتباع الشرح المبسط التالي :
    اذهب الى التخطيط
     ثم اضافة اداة  اختر JAVASCRIPT/HTML
    ضع الكود التالي و اضغط على حفظ
    <style>
    #featuredpost {padding: 10px;}
    #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
    #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
    #slides ul{height:320px}
    #slides li{width:50%;height:100%;position:absolute;display:none}
    #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
    #slides li:nth-child(1){left:0;top:0}
    #slides li:nth-child(2){left:50%;width:25%;height:50%}
    #slides li:nth-child(3){left:75%;width:25%;height:50%}
    #slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
    #slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
    #slides li:nth-child(1) h4 {overflow:hidden;font-size:15px;bottom:0;color:#fafafa;width:100%;
    padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
    height:90px;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
    #slides li:nth-child(1) .label_text {font-size:20px;display:block;bottom:10px;left:10px;
    padding:0;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
    #slides li:nth-child(1) span.dd {display:block;font-size:20px;padding:12px 15px;
    background:#FC4F3F;margin:0;}
    #slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
    padding:5px 21px;text-transform:uppercase;margin:0;}
    #slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
    #slides a{display:block;width:100%;height:100%;overflow:hidden}
    #slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
    #slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
    #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
    #slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;
    left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
    background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
    #slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
    position:absolute;background:#FC4F3F;padding:3px 6px;
    text-transform:uppercase;}
    #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
    #slides .overlayx,#slides li{transition:all .4s ease-in-out}
    #slides li:nth-child(1) .overlayx{display:none;}
    #slides li:hover .overlayx{opacity:0.1}
    @media only screen and (max-width:800px){
    #slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
    @media only screen and (max-width:600px){
      #slides ul{height:600px}
      #slides li:nth-child(1){width:100%;height:50%}
      #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
      #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
      #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
      #slides li:nth-child(5){display:none;}}
    @media only screen and (max-width:480px){
    #slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
    </style>
    <div id="featuredpost"></div>
    <script type="text/javascript" src="https://googledrive.com/host/0B7EdpK5Vun4YcGJMbnU2T3RMV0k"></script>
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function () {
    FeaturedPost({
    blogURL:"http://www.hukmaty.info",
    MaxPost:8,
    idcontaint:"#featuredpost",
    ImageSize:500,
    interval:10000,
    autoplay:true,
    tagName:false
    });
    });
    //]]>
    </script>
    صورة فقط للتوضيح : (اضغط على صورة لتكبيرها)




    كثير من المدونين يبحثون عن دروس ووسائل لتعليم تعريب قوالب بلوجر وأنا شخصياً كنت منهم في بداياتي والحقيقة ارهقت حتى استطعت التعلم وبعدما تعلمت وجدت أن الموضوع ليس بالصعوبه التي كنت متخيلها قبل البدء فالتعريب في حد ذاته مبني على اساس بسيط وهو تحويل القالب بأكمله من اتجاه اليسار الى اتجاه اليمين لا اكثر ولا اقل أو بشكل علمي تحويل جميع كلمات القالب
    Left = يسار
    الى
    Right = يمين
    والعكس صحيح 
    عند فعل هذا غالبية القوالب تعرب بنسبة 80%
    ويبقى 20% تعود لتعريب الكلمات وضبط بعض الإتجاهات 
    هناك برنامج يسمى معرب قوالب بلوجر وهذا البرنامج يقوم بهذه العملية بشكل جيد ويعرب أيضا بعض الكلمات

    البعض واجه مشكلة مع الإصدار الأخير لهذا البرنامج لهذا ننصح بتحميل لإصدار التالي فهو اصدار قديم من البرنامج استخدمته لفترة ويعمل جيدا وهو نسخة محمولة Portable
      دائما تبقى في بعض القوالب أجزاء تحتاج لضبط ولا يقوم البرنامج بضبطها وهي
    الحشوة = Padding
    الهامش = Margin
    يمتلئ القالب بهذه  الاكواد وتكتب بعدة طرق منها ان تكتب بها الإتجاهات Right , Left وهذه البرنامج يعدلها
    وطريقة أخرى لا يعدلها البرنامج وهي هذه الطريقة 
    مثال 
    padding:1px 2px 3px 4px;
    margin:1px 2px 3px 4px;
    طبعا مع اختلاف قيم الأرقام
    لكن القيمتين الذين يهمنا أمرهم في التعريب هما القيمتين
    2 و 4
    أكرر لا اقصد الأرقام فقد تكون الأرقام بهذا الشكل
    padding:0 0 4px 2px
    ولكن أنا اقصد الموقعين فالموقع الثاني هو موقع اليمين
    والرابع هو موقع اليسار
    فالقالب الأجنبي قد نجد الحاشيه أو الهامش تجاه اليسار هكذا
    margin: 0 0 5px 30px;
    ونحن نريد جعله تجاه اليمين فيصبح
    margin: 0 30px 5px 0;
    لاحظتم تبديل القيم وقد يكون العكس هذا بحسب القالب 
    هذا هو ملخص فكرة تعريب القوالب وستنجح هذه الطريقة في غالبية القوالب
    كل ما عليك استخدام البرنامج بان تضيف له القالب وتعربه ثم تنسخ محتوى القالب بعد التعديل تدخل الى تحرير القالب
    وتحذف كل ما به وتضيف أكواد القالب الجديد ثم تبدا بضبط التعريب


    كثيرر من المدونين يبحثون عن دروس ووسائل لتعليم تعريب قوالب بلوجر وأنا شخصياً كنت منهم في بداياتي والحقيقة ارهقت حتى استطعت التعلم وبعدما تعلمت وجدت أن الموضوع ليس بالصعوبه التي كنت متخيلها قبل البدء فالتعريب في حد ذاته مبني على اساس بسيط وهو تحويل القالب بأكمله من اتجاه اليسار الى اتجاه اليمين لا اكثر ولا اقل أو بشكل علمي تحويل جميع كلمات القالب
    Left = يسار
    الى
    Right = يمين
    والعكس صحيح 
    عند فعل هذا غالبية القوالب تعرب بنسبة 80%
    ويبقى 20% تعود لتعريب الكلمات وضبط بعض الإتجاهات 
    هناك برنامج يسمى معرب قوالب بلوجر وهذا البرنامج يقوم بهذه العملية بشكل جيد ويعرب أيضا بعض الكلمات

    البعض واجه مشكلة مع الإصدار الأخير لهذا البرنامج لهذا ننصح بتحميل لإصدار التالي فهو اصدار قديم من البرنامج استخدمته لفترة ويعمل جيدا وهو نسخة محمولة Portable
      دائما تبقى في بعض القوالب أجزاء تحتاج لضبط ولا يقوم البرنامج بضبطها وهي
    الحشوة = Padding
    الهامش = Margin
    يمتلئ القالب بهذه  الاكواد وتكتب بعدة طرق منها ان تكتب بها الإتجاهات Right , Left وهذه البرنامج يعدلها
    وطريقة أخرى لا يعدلها البرنامج وهي هذه الطريقة 
    مثال 
    padding:1px 2px 3px 4px;
    margin:1px 2px 3px 4px;
    طبعا مع اختلاف قيم الأرقام
    لكن القيمتين الذين يهمنا أمرهم في التعريب هما القيمتين
    2 و 4
    أكرر لا اقصد الأرقام فقد تكون الأرقام بهذا الشكل
    padding:0 0 4px 2px
    ولكن أنا اقصد الموقعين فالموقع الثاني هو موقع اليمين
    والرابع هو موقع اليسار
    فالقالب الأجنبي قد نجد الحاشيه أو الهامش تجاه اليسار هكذا
    margin: 0 0 5px 30px;
    ونحن نريد جعله تجاه اليمين فيصبح
    margin: 0 30px 5px 0;
    لاحظتم تبديل القيم وقد يكون العكس هذا بحسب القالب 
    هذا هو ملخص فكرة تعريب القوالب وستنجح هذه الطريقة في غالبية القوالب
    كل ما عليك استخدام البرنامج بان تضيف له القالب وتعربه ثم تنسخ محتوى القالب بعد التعديل تدخل الى تحرير القالب
    وتحذف كل ما به وتضيف أكواد القالب الجديد ثم تبدا بضبط التعريب




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

    شرح التركيب 

    نقوم بالبحث عن هذا الوسم في القالب
    ]]></b:skin>
    ثم نقوم بإضافة هذا الكود فوقه 
    .zoomeffect img{
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -o-transform:scale(0.8);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    opacity: 0.7;
    margin: 0 10px 5px 0;
    }

    .zoomeffect img:hover{
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -o-transform:scale(1.1);
    opacity: 1;
    }
    كيفية وضع الصورة في إطار الدوران
    عند كتابة موضوع جديد انتقل الى وضع HTML
    ولصق هذا الكود بالداخل
    <a class="zoomeffect" href="#" target="_blank"><img src="##" /></a>
    مع استبدال ## برابط الصورة
    واستبدال # برابط الموضوع




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

    طريقة التركيب 

    عليك إضافة نموذج الاتصال من التخطيط ويكون بهذا الشكل


    1. الأن قم بالدخول الى القالب الخاص بك 
    2. ثم اضغط على تحرير HTML
    3. قم بالبحث عن هذا الوسم </head> وإضافة هذا الكود فوقه 
    <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
    الان قم بالبحث عن هذا الوسم  ]]></b:skin>   وإضافة هذا الكود قبله
    /* Contact Us mudwnp */ 
    #ContactForm1 {
        display: none;
    }

    #ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
        width: 300px;
        height: auto;
        margin: 10px auto;
        padding: 10px;
        background: #F4F3F3;
        color: #666;
        border: 1px dashed #ddd;
        transition: all 0.5s ease-in-out;
    }

    #ContactForm1_contact-form-email-message {
        width: 450px;
        height: 175px;
        margin: 10px auto;
        padding: 10px;
        background: #fdfdfd;
        color: #666;
        font-family: 'Droid Arabic Kufi',sans-serif;
        border: 1px dashed #ddd;
        transition: all 0.5s ease-in-out;
    }

    #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
        background: #fff;
        outline: none;
        border: 1px dashed #f8a82a;
    }

    #ContactForm1_contact-form-submit {
        font-family: 'Droid Arabic Kufi';
        font-size: 15px;
        width: 101px;
        height: 35px;
        float: right;
        color: #fff;
        padding: 0;
        margin: 10px 0 3px 0;
        cursor: pointer;
        background: #aaa;
        border: none;
        border-radius: 2px;
        transition: background 0.4s linear;
    }

    #ContactForm1_contact-form-submit:hover {
        background: #f8a82a;
    }

    #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
        width: 450px;
        margin-top: 35px;
    }
    الأن قم بحفظ القالب
    توجه الأن الى قسم الصفحات وقم بانشاء  صفحة جديدة ولصق هذا الكود بالداخل
    <form name="contact-form">
    <span style="font-family: Droid Arabic Kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> الإسم</span>
    <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> 

    <span style="font-family: Droid Arabic Kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> البريد الإلكتروني <span style="color: red; font-weight: bolder;">*</span></span>
    <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> 

    <span style="font-family: Droid Arabic Kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> الرسالة<span style="color: red; font-weight: bolder;">*</span></span>
    <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
    <input id="ContactForm1_contact-form-submit" type="button" value=" إرسال " /> 
    <div style="max-width: 222px; text-align: center; width: 100%;">
    <div id="ContactForm1_contact-form-error-message">
    </div>
    <div id="ContactForm1_contact-form-success-message">
    </div>
    </div>
    </form>
    قم بضبط اعدادت الصفحة كما في الصورة القادمة واضغط على حفظ

     

    سيوشاهد المزيد

    جميع الحقوق محفوظة ل blogerfans
    تصميم : Abdo Hegazy