‏إظهار الرسائل ذات التسميات دروس بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات دروس بلوجر. إظهار كافة الرسائل
الجمعة، 19 ديسمبر 2014

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

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

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

اليوم في موضوع جديد و اضافة جديدة و هي عبارة عن صناديق الاشتراك في مواقع التواصل الاجتماعي مثل فيس بوك و تويتر و جوجل بلس و الاضافة تظهر اسفل المواضيع في مدونات بلوجر و ما يميز هذه الاضافة انها متوافقة مع جميع الشاشات و اجهزة المحمول    شاهد المثال التالي لتتعرف اكثر :



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

ابحث عن <data:post.body/> و اضف الكود التالي تحته
<b:if cond='data:blog.pageType == "item"'>
<link href='https://googledrive.com/host/0B3omcK7jIprqRm95VVpQZDJHRzQ' rel='stylesheet'/>
<div class="wpr">
        <a class="social" id="twitter" href="www.twitter.com/mudwnp" title="تويتر">
            <div class="icon"></div>
          
            <div class="shutter_frame">
                <div class="shutter">
                    <div class="number">1189</div>
                    <div class="bar"></div>
                    <div class="text">تابعنا</div>
                </div>
            </div>
        </a>
      
        <a class="social" id="google" href="https://plus.google.com/u/0/+mudwnpro" title="جوجل بلس">
            <div class="icon"></div>
          
            <div class="shutter_frame">
                <div class="shutter">
                    <div class="number">421</div>
                    <div class="bar"></div>
                    <div class="text">+1</div>
                </div>
            </div>
        </a>
      
        <a class="social" id="facebook" href="https://www.facebook.com/mudwnp" title="فيس بوك">
            <div class="icon"></div>
          
            <div class="shutter_frame">
                <div class="shutter">
                    <div class="number">973</div>
                    <div class="bar"></div>
                    <div class="text">اعجبني</div>
                </div>
            </div><!-- / .shutter_frame -->
        </a>
    </div><!-- / .wpr -->
</b:if>

اهم الملاحظات حول الكود


استبدل ما هو باللون الاحمر بروابط حساباتك على مواقع التواصل الاجتماعي
استبدل الارقام التي باللون الازرق بما يناسبك
استبدل الكلمات التي باللون البرتقالي بما يناسبك

الان ابحث عن الوسم </body> و اضف الكود التالي فوقه
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'/>
    <script>
        $(document).ready(function() {
      
            $('.social').hover(
                function() {
                    $(this).find('.shutter').stop(true, true).animate({
                        bottom: '-36px'
                     },
                     {
                         duration: 300,
                         easing: 'easeOutBounce'
                     });
                },
                function () {
                    $(this).find('.shutter').stop(true, true).animate({
                        bottom: 0
                     },
                     {
                         duration: 300,
                         easing: 'easeOutBounce'
                     });
                }
            );
          
        });
    </script>



الكود الاحمر يمكنك ازالته ان كان لديك مكتبة جي كويري في القالب

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

بالتوفيق





4:39 ص
الثلاثاء، 9 ديسمبر 2014

إنشاء نموذج اتصال احترافي لمدونات بلوجر

إنشاء نموذج اتصال احترافي لمدونات بلوجر


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


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





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


الآن سوف تحتاج إلى إنشاء صفحة ثابتة حيث سنقوم بإضافة التعليمة البرمجية HTML للنموذج اتصال جديدة.

  1. الذهاب إلى Blogger> الصفحات
  2. اختيار صفحة فارغة
  3. اعطائها أي عنوان تريد. أوصي "اتصل بنا"
  4. التبديل إلى وضع HTML ولصق رمز HTML التالي داخله:


    <div class='form'>
    <!-- Custom Contact Form By mudwnp Starts -->

    <form name='contact-form'>

    <!-- Name Field -->

    <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
    <p></p>

    <!-- Email ID Field -->

    <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
    <p></p>

    <!-- Message Field -->

    <textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Leave Your Message..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
    <p></p>

    <!-- Clear Button -->
    <input class='contact-form-button contact-form-button-submit mudwnp-button-color' type='reset' value='إمسح'/>

    <!-- Send Button -->
    <input class='contact-form-button contact-form-button-submit mudwnp-button-color' id='ContactForm1_contact-form-submit' type='button' value='إرسال'/>
    <p></p>

    <!-- Validation -->
    <div style='text-align: center; max-width: 222px; width: 100%'>
    <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
    <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div>
    </form>

    <!-- Custom Contact Form By mudwnp Ends -->
    </div>

تخصيص النموذج:

    الذهاب إلى Blogger> قالب
    النسخ الاحتياطي لديك
    انقر على "تحرير HTML"


     <style>

    /*---- Compatible contact Form by mudwnop-----*/

    .contact-form-name, .contact-form-email, .contact-form-email-message {
    max-width: 220px;
    width: 100%;
    font-weight:bold;
    }

      
    .contact-form-name {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnzdoYf8MiDjnpv2XjasQH45kG9XZCa9PmNcFk0RiZhFr77iS8J-RR55SJcgRPrEOwppfuvALdPpCgn0bxkma9-WBUY5nkvgbU7aHGi9lCB-kH8YdrablHqLm4A2sDhTItrzeEGS0Ww_4/s320/name.png) no-repeat 7px 8px;
    background-color: #FFF;
    border: 1px solid #ddd;
    box-sizing: border-box;
    color: #A0A0A0;
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight:bold;
    height: 24px;
    margin: 0;
    margin-top: 5px;
    padding: 5px 15px 5px 28px;
    vertical-align: top;

    }
      

    .contact-form-email {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRtSSkUOwz-BK2Mg1ntTdKge0BXksF7dL124TTJrQYUAlYo243NDctGpOOPlaL-tf2RawWJJqM7OZhdloddxO_330Eefxryue_Muhg1k7J3gyPagqQcJG6tX4kCXcvROa0M0dHTG-FxH4/s320/email.png) no-repeat 7px 10px;
    background-color: #FFF;
    border: 1px solid #ddd;
    box-sizing: border-box;
    color: #A0A0A0;
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight:bold;
    height: 24px;
    margin: 0;
    margin-top: 5px;
    padding: 5px 15px 5px 28px;
    vertical-align: top;

    }



    .contact-form-email:hover, .contact-form-name:hover{
    border: 1px solid #bebebe;
    box-shadow: 0 1px 2px rgba(5, 95, 255, .1);


    padding: 5px 15px 5px 28px;

    }

    .contact-form-email-message:hover {
    border: 1px solid #bebebe;
    box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
    padding: 10px;
    }

    .contact-form-email-message {
    background: #FFF;
    background-color: #FFF;
    border: 1px solid #ddd;
    box-sizing: border-box;
    color: #A0A0A0;
    display: inline-block;
    font-family: arial;
    font-size: 12px;
    margin: 0;
    margin-top: 5px;
    padding: 10px;
    vertical-align: top;
    max-width: 350px!important;
    height: 150px;
    border-radius:4px;
    }


    .contact-form-button {
    cursor:pointer;
    height: 32px;
    line-height: 28px;
    font-weight:bold;
    border:none;
    }



    .contact-form-button {
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    .contact-form-button:hover {
    text-decoration: none;
    }
    .contact-form-button:active {
    position: relative;
    top: 1px;
    }


    .mudwnp-button-color {
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top, #faa51a, #f47a20);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
    }
    .mudwnp-button-color:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top, #f88e11, #f06015);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
    border-color: #F47C20!important;
    }
    .mudwnp-button-color:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top, #f47a20, #faa51a);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
    }

    </style>


          <!--[if IE 9]>
        <style>

    .contact-form-name {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnzdoYf8MiDjnpv2XjasQH45kG9XZCa9PmNcFk0RiZhFr77iS8J-RR55SJcgRPrEOwppfuvALdPpCgn0bxkma9-WBUY5nkvgbU7aHGi9lCB-kH8YdrablHqLm4A2sDhTItrzeEGS0Ww_4/s320/name.png) no-repeat 7px 0px;
    }

    .contact-form-email {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRtSSkUOwz-BK2Mg1ntTdKge0BXksF7dL124TTJrQYUAlYo243NDctGpOOPlaL-tf2RawWJJqM7OZhdloddxO_330Eefxryue_Muhg1k7J3gyPagqQcJG6tX4kCXcvROa0M0dHTG-FxH4/s320/email.png) no-repeat 7px 6px;
    }

        </style>
        <![endif]-->

        <style>
    @media screen and (-webkit-min-device-pixel-ratio:0) {


    .contact-form-name {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnzdoYf8MiDjnpv2XjasQH45kG9XZCa9PmNcFk0RiZhFr77iS8J-RR55SJcgRPrEOwppfuvALdPpCgn0bxkma9-WBUY5nkvgbU7aHGi9lCB-kH8YdrablHqLm4A2sDhTItrzeEGS0Ww_4/s320/name.png) no-repeat 7px 6px;
    padding: 15px 15px 15px 28px;


    }

    .contact-form-email {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRtSSkUOwz-BK2Mg1ntTdKge0BXksF7dL124TTJrQYUAlYo243NDctGpOOPlaL-tf2RawWJJqM7OZhdloddxO_330Eefxryue_Muhg1k7J3gyPagqQcJG6tX4kCXcvROa0M0dHTG-FxH4/s320/email.png) no-repeat 7px 8px;
    padding: 15px 15px 15px 28px;

    }



    .contact-form-email:hover, .contact-form-name:hover{
    padding: 15px 15px 15px 28px;
    }


    .contact-form-button {
    height: 28px;

    }

    }

    </style>

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


    اهم الملاحظات حول الكود


    لتغيير الوان الازرار ابحث عن .mudwnp-button-color و قم بتغيير الارقام اسفله
    لتغيير لون الزر عند مرور الماوس .mudwnp-button-color:active و قم بتغيير الارقام اسفله
    لتغيير لون الزر عند مرور الماوس .mudwnp-button-color:hover و قم بتغيير الارقام اسفله

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



    في امان الله
    4:04 م

    تخصيص نموذج الاتصال الجزء الاول

    تخصيص نموذج الاتصال الجزء الاول

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

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



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

    قم بالدخول لصفحة التخطيط ثم أضف آداة نموذج الإتصال ستجدها في المزيد من الأدوات

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


    التحكم في الاضافة


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


    إخفاء نموذج الاتصال العادي على الشريط الجانبي


    الذهاب إلى Blogger > قالب
    النسخ الاحتياطي
    انقر فوق تحرير HTML

    ابحث عن الوسم </head> لصق الكود التالي فوقه لإخفاء النموذج من الشريط الجانبي

    <b:if cond='data:blog.pageType == "static_page"'>
    <style>
    #ContactForm1{ display:none!important;}
    </style>
    </b:if>


    تخصيص نموذج الاتصال !

    الان قمنا باضافة نموذج الاتصال المدونة و قمنا باخفاءه الان سوف نتجه إلى الرابط التالي لنقوم بتخصيص نموذج الاتصال

    تكملة الموضوع : إنشاء نموذج اتصال احترافي لمدونات بلوجر 

    في امان الله 






    2:24 م

    اضافة سحابة التسميات الملونة

    اضافة سحابة التسميات الملونة


    تريد أن تجلب الذهول إلى اضافة اداة التسمية؟ تخصيص واجهة التسميات و جعلها ملونة اضافات بلوجر


    تحسين مظهر المدونة من اهم العوامل . لأن هناك عدة أسباب لذلك مثل الحصول على موافقة من شركات الاعلان الكبرى مثل

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

    1. اضافة اداة سحابة التسميات


    الذهاب إلى المدونة > تخطيط >> إضافة أداة
    اختيار " تسميات "
    و قم باختيار سحابة " حفظ "


    تريد أن تجلب الذهول إلى اضافة اداة التسمية؟ تخصيص واجهة التسميات و جعلها ملونة اضافات بلوجر


    الآن تمت إضافة القطعة في بلوق ودعونا تخصيص القطعة التسمية السحابية.

    2. اضافة سحابة التسميات الملونة


    الذهاب إلى المدونة > قالب >> انقر فوق تحرير HTML
    ابحث عن الوسم  ]]></b:skin> و اضف فوقه الكود التالي

    .sidebar .label-size {
      position:relative;
      text-transform: uppercase;
      text-decoration:none;
      font-size:13px;
      font-family:Open Sans;
      color:#fff!important;
      }

    .sidebar .label-size a {
      color:#fff!important;
      font-weight:bold;
      padding:8px 10px;
      margin:0 6px 6px 0;
      float:left;
      display:block;
      -moz-transition: all 0.4s ;
      -o-transition: all 0.4s;
      -webkit-transition: all 0.4s ;
      -ms-transition: all 0.4s ;
      transition: all 0.4s ;
    }

    .sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
    .sidebar .label-size-1 a:hover {background:#16a085;}
    .sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
    .sidebar .label-size-2 a:hover {background:#2980b9;}
    .sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
    .sidebar .label-size-3 a:hover {background:#27ae60}
    .sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
    .sidebar .label-size-4 a:hover {background:#8e44ad}
    .sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
    .sidebar .label-size-5 a:hover {background:#c0392b}
     


    الان قم بحفظ القالب و مبروك عليك سحابة التسميات الملونة و إذا كنت تواجه اي مشكلة مع الاضافة يمكنك ترك تعليق و سوف يتم الرد عليك بسرعة





    يمكنك ايضا مشاهدة : شرح تنسيق قائمة و سحابة التسميات


    في امان الله






    2:18 م

    اضافة شريط ازرار المشاركة اسفل عنوان الموضوع

    اضافة شريط ازرار المشاركة اسفل عنوان الموضوع

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


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




    اضافة صندوق أزرار المشاركة تحت عنوان الموضوع في المدونة


    الذهاب إلى المدونة قالب >> النسخ الاحتياطي للقالب
    انقر فوق تحرير HTML
    و ابحث عن الوسم </head> و اضف الكود التالي فوقه


        <b:if cond='data:blog.pageType == "item"'>

        <script type='text/javascript'>

        // Twitter
        (function (a, b, c){var d=a.getElementsByTagName(b)[0];if (!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a, d)}})(document, "script", "twitter-wjs");
        // Stumbleupon
        (function (){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a, b)})();

        </script>


        <style type='text/css'>

        /*Social Bar By mudwnp.blgospot ----------------------------------- */
        #SocialBar {
            float: right;
            border-top: 1px solid #eaeaea;
            border-bottom: 1px solid #eaeaea;
            width: 610px;
            margin-bottom: 20px;
            margin-right: -10px;
            margin-top: 10px;
        }

        .headingsharer h5 {
            float: right;
            padding-left: 20px;
            padding-top: 18px;
            text-transform: uppercase;
            font-weight: bold;
            margin: 0px;
            padding-right: 10px;
        }

        .tweeetero, .fbwolo, .g-plusones, .stumblo {
            float: right;
            border-right: 1px solid #eaeaea;
            padding-right: 18px;
            padding-top: 15px;
            padding-bottom: 10px;
        }

        .g-plusones {
            margin-right: 20px;
        }

        </style>

        </b:if>
        
    الان ابحث عن <div class='post-body entry-content'> و اضف الكود التالي فوقه

    <b:if cond='data:blog.pageType == "item"'>
    <div id='SocialBar'>
    <div class='headingsharer'>
    <h5>شارك الموضوع </h5>
    </div>
    <div class='tweeetero'>
    <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
    </div>
    <div class='fbwolo'>
    <iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
    </div>
    <div class='g-plusones'>
    <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
    </div>
    <div class='stumblo'>
    <su:badge expr:location='data:post.url' layout='1'/>
    </div>
    </div>
    </b:if>

    ملاحظة : يجب تغيير زر فيس بوك بالزر الخاص بك لصفحة الفيس بوك وقد تواجهون مشاكل بالشكل بسبب زر الفيس بوك يمكنكم تغييره بأي زر ثاني
    قم بتغيير شارك الموضوع بالكلمة التي تريدها
    انقر فوق حفظ قالب!
    و مبروك عليك الاضافة


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



    في امان الله
    1:28 م

    عند وضع او اقتباس كود فى التدوينه يظهر بشكل خاطىء , كيف تحل هذه المشكله !

    ما قبل تعديل الكود

    فى بعض الاحيان نحتاج الى وضع كود فى تدوينات بلوجر , خاصه فى المدونات التطويريه و الخاصه بالبرمجه و الاكواد و التصميم , و احيانا كثيره يظهر الكود بشكل خاطىء .. بالرغم من انه عند اخذه كوبى .. يكون صحيح لكن مظهره يجعل القارىء يشك من اللحظه الاولى ان الكود خاطىء , و هذا الخطأ يحدث غالبا فى المدونات العربيه لان اتجاهها يكون من اليمين الى اليسار



    لاصلاح هذا ندخل الى تحرير الموضوع
    و نقوم بحذف الكود المحاط بدائره حمراء فى الصوره 




    ملحوظه : وجود الكود السابقه سببه خاصيه الترجمه الاليه لبلوجر
    و يمكن تعطيلها من ..     اعدادات > اساسى > أتريد تمكين النسخ بحروف لغة > تعطيل 
    ثم ننشر الرساله مجددا لنجد ان الكود اصبح يظهر بشكل سليم و هذا شكل الكود بعد اصلاح المشكله



    ملحوظه : ان لم ينجح الحل الاول .. يمكنك تحويل لوحه التحكم بلوجر اللى اللغه الانجليزيه ثم تدخل الموضوع و تلغى التنسيق ثم تعيد تنسيقه من جديد كما تريد و ترسله لتجد الكود موجود بالطريقه الصحيحه
    1:24 م

    اظهار الوصف و الصوره عند عمل شير لاى موضوع على الفيس بوك


    احيانا لما بنعمل شير فى بعض المدونات منلاقيش فى وصف للبوست او الصوره مش بتظهر , فى التدوينه ده حنعرف مع بعض ازاى نحل المشكله ده

    الاول نعرف ازاى بنحط زرار الشير بتاع الفيس .. هو له كذا طريقه و موجودين ع النت , حقول واحده منهم ع السريع

    نحط الكود ده بعد <data:post.body/>


    <div style="float:right;padding:4px;">
    <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
    <script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
    </div>
    الان كيف نجعل الشير يضع وصف اوتوماتيك للموضوع و يجلب ايضا الصوره المناسبه له
    نعمل سيرش ctrl+f و ندور على كلمه
    <data:post.body/> .. و نضع الكود التالى قبلها و بذلك يتم وضعه قبل التدوينه .. حتى يمر عليه الفيسبوك و ياخذ منها الوصف و الصوره ..

    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
    <b:else/>
    <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhjdj_MKPmDe5y8aeKW5uuKQ2m5uwD2yiBjsokOEQZ4lLCbof2oKFRfVKYy4675odFP-uzMr4UXKKy-6tMVcAQv4mn9opB331mdxTXrFkYYjs1-Fp1WaJG0pCYn6cvEhb0qOijYSR7KRw/s72-c/default.png' property='og:image'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
       <b:if cond='data:post.snippet'>
       <meta expr:content='data:post.snippet' name='description'/>
       <meta expr:content='data:post.snippet' name='og:description'/>
       </b:if>
     </b:if>


    1:20 م

    اضافة ازرار مشاركة مواقع التواصل الاجتماعي الاحترافية 2014

    اضافة ازرار مشاركة مواقع التواصل الاجتماعي الاحترافية 2014

    كيفية اضافة ازرار التواصل الاجتماعي العائمة بشكل عامودي على الجانبين بشكل احترافية

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


    خصائص الاضافة

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


    كيفية إضافة ازرار مشاركة مواقع التواصل الاجتماعي في المدونة


    1. قم بالذهاب الى موقع Shareholic واشترك بحساب جديد ( إذا كان لديك بالفعل حساب في shareaholic ثم بتسجيل الدخول إلى حسابك).

    2. بعد تسجيل الدخول انقر على هذا الزر الذي يظهر في الصورة،


    كيفية اضافة ازرار التواصل الاجتماعي العائمة بشكل عامودي على الجانبين بشكل احترافية


    Add New Website : (إذا كنت لم تضيف أي موقع ثم انقر على زر add website لإضافة رابط المدونة , المجال، اسم المدونة ، ومنصة، والمحتوى والفئة, لغة المحتوى.)

    [ بعد إعداد المجال الخاص بك، الذهاب إلى الخطوة 2 ]

    3. الآن انتقل إلى موقع الويب الخاص بك التطبيق، ثم انقر فوق الحصول على رمز الإعداد لبلوق الخاص بك.


    كيفية اضافة ازرار التواصل الاجتماعي العائمة بشكل عامودي على الجانبين بشكل احترافية


    بعد إعداد كود النسخ، انتقل إلى لوحة أجهزة قياس المدونة > قالب >> تحرير HTML ومن ثم تجد وسم </head> قم بلصق الكود قبل </head> الآن انقر على زر حفظ القالب و انتقل إلى المدونة الخاصة بك.

    4. الآن انقر على Floated Share Buttons وإعداد تصميم الاضافة الخاصة بك.


    كيفية اضافة ازرار التواصل الاجتماعي العائمة بشكل عامودي على الجانبين بشكل احترافية


    (الآن تخصيص تصميم الاضافة الخاص بك وحدد أسلوب مناسب للمدونة الخاص بك على سبيل المثال. حجم، والمحاذاة، وإضافة أو إزالة الأزرار الاجتماعية.)

    5. حفظ كافة الإعداد وتنشيط التطبيق على نقرة واحدة ليظهر الزر الأخضر.


    كيفية اضافة ازرار التواصل الاجتماعي العائمة بشكل عامودي على الجانبين بشكل احترافية


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

    في امان الله 
























    12:21 م

    كيفية استبدال رسالة احدث ,اقدم والصفحة الرئيسية بايقونات

    كيفية استبدال رسالة احدث ,اقدم والصفحة الرئيسية بايقونات

    لماذا نقوم بتغيير روابط رسالة احدث ,اقدم والرئيسية بايقونات او ازرار و ما فائدتها لزائر المدونة ,مدونة مدون محترف ,اضافات بلوجر ,قوالب بلوجر

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


    كيفية استبدال احدث ,اقدم والرئيسية روابط التنقل بايقونات على بلوجر ؟


    المهم! لا تنسى اخذ نسخة احتياطية من القالب قبل عمل اي شيء

    ندخل لوحة التحكم في Blogger >> قالب تحرير HTML

    استبدال رابط رسالة احدث

    نبحث عن هذا الكود <data:olderPageTitle/>و نستبدله بالكود التالي

    <img src='http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF4dU8tp82rG2dDiKirO9NL3DpxrGFnGxnPcvRnZhGDM_QDBu7gmLv2SOSTIqpVoj7wt7XRiSxkHInYlCT4UXaYao2W5Ntn_gDSPw8IDM4CjkelLe3Wkx5wue1dQ_ClrGITqQjvJ3lToQ1/s1600/w2b_next.png' style='border: 0 none;vertical-align: middle;'/>

     استبدال رابط رسالة اقدم

    نبحث عن هذا الكود <data:newerPageTitle/>و نستبدله بالكود التالي

    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYfi8dHFS9w6115bhYWTbxVQT171qyauK-XtaVlmNcwIQmyHMtMDZyYVbHgXfn9pqS34pPeCt15IgPJZuV53CqGd0bpmPd7vw6FCEbOMec-g5tT-xMkzYgy-BebpmaFSdcO4vL5_7u4JJ9/s1600/w2b_prev.png' style='border: 0 none;vertical-align: middle;'/>

    استبدال رابط الصفحة الرئيسية
    نبحث عن هذا الكود <data:homeMsg/>و نستبدله بالكود التالي

    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilx0A07D-bHIW1vB51dtg4zBouzc9juF0HrkTBKCQEsSx3Uhb4WSB7w-_CkJdYE-BRAOlsy0EQjCxPFqAgnwt9fF1yevQ2kzd9j0mAJj0m7j16B1BTnEnndpFamonBWzkHMYOiq06xSOS8/s1600/w2b_home.png' style='border: 0 none;vertical-align: middle;'/>

    اهم الاعدادات 


    يمكن تغيير روابط الايقونات او الصور التي باللون الاحمر بما تريده و بالحجم الذي يناسب مدونتك

    في امان الله
    7:38 ص