‏إظهار الرسائل ذات التسميات إضافات بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات إضافات بلوجر. إظهار كافة الرسائل
الجمعة، 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 م

    اضافة قائمة منسدلة مع ايقونات التواصل الاجتماعية

    اضافة قائمة منسدلة مع ايقونات التواصل الاجتماعية

    إضافة قائمة منسدلة احترافية مع ايقونات التواصل الاجتماعي ,مدونة مدون محترف ,إضافات بلوجر ,دروس بلوجر ,قوالب بلوجر

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





    شرح التركيب

    ابحث عن</header>و اضف الكود التالي فوقه
    <style>
    #mudwnp-nav{
      width:100%;
      height:50px;
      display:block;
      padding:0;
      margin:0 0 22px 0;
    background:#f84242;
    border-bottom:4px solid rgba(197,52,52,1);
    box-shadow:1px 1px 4px  #dcdcdc;
    -moz-box-shadow:1px 1px 4px  #dcdcdc;
    -web-kit-box-shadow:1px 1px 4px  #dcdcdc;
    -goog-ms-box-shadow:1px 1px 4px  #dcdcdc;
    }

    #mudwnp-menu{
      margin:0 auto;
      display:block;
      padding:0;
    font-family: 'georgia', sans-serif;
    }

    #mudwnp-menu ul{
      float:right;
      margin:0;
      padding:0;

    }

    #mudwnp-menu li{
      float:right;
      list-style:none;
      line-height:50px;
      margin:0;
      padding:0
    }

    #mudwnp-menu li a, #mudwnp-menu li a:link{
      color:#f0f0f0;
      display:block;
      margin:0;
      padding:0 10px;
    font-size:16px;
      text-decoration:none;

    }

    #mudwnp-menu li a:hover, #mudwnp-menu li a:active, #mudwnp-menu .current_page_item a  {
      color:#fff;
      padding:0 10px;
    }

    #mudwnp-menu li li a, #mudwnp-menu li li a:link, #mudwnp-menu li li a:visited{
      font-size: 16px;
    background:#f84242;
      color: #fff;
      width: 150px;
      margin: 0;
      padding: 0px 10px;
      line-height:30px;
      position: relative;

    }

    #mudwnp-menu li li a:hover, #mudwnp-menu li li a:active {
      background:rgba(197,52,52,1);

      color: #fff;
    }

    #mudwnp-menu li ul{
      z-index:9999;
      position:absolute;
      right:-999em;
      height:auto;
      width:168px;
      margin:0px;
      padding:0px

    }

    #mudwnp-menu li:hover ul, #mudwnp-menu li li:hover ul, #mudwnp-menu li li li:hover ul, #mudwnp-menu li.sfhover ul, #topmudwnp-menu li li.sfhover ul, #topmudwnp-menu li li li.sfhover ul{
      right:auto
    }

    #mudwnp-menu li:hover, #mudwnp-menu li.sfhover{
      position:static

    }

    #mudwnp-ico img
    {
    margin-right:-6px;
    height:35px;
    margin-top:9px;
    }
    </style>


      <div id='mudwnp-nav'>
         <div id='mudwnp-menu'>
             <ul>
           <li><a href='#'>الرئيسية</a></li>
               <li><a href='#'>تعديل</a>
                
               </li>
                   <li><a href='#'>تعديل</a></li>
          
               <li><a href='#'>تعديل</a></li>
               
               <li><a href='#'>قائمة منسدلة »</a>
                   <ul>
                      <li><a href='#'>تعديل</a></li>
                      <li><a href='#'>تعديل</a></li>
                      <li><a href='#'>تعديل</a></li>
                      <li><a href='#'>تعديل </a></li>
                      <li><a href='#'>تعديل</a></li>
                      <li><a href='#'>تعديل tips</a></li>
                   </ul>
               </li>
                 <li><a href='#'>اتصل بنا</a>        
               </li>
              <li id='mudwnp-ico'>
    <a href='#' target='_blank'>
    <img style='margin-right:50px;' src='http://2.bp.blogspot.com/-iKLppxYoaW0/Uws6PaZJ-yI/AAAAAAAAAHk/5Vp8DWfYXCU/s1600/48x48-Circle-49-FB.png' alt='Facebook' title='تابعنا على فيس بوك'/>
    </a>
    </li>
    <li id='mudwnp-ico'>
    <a href='#' target='_blank'>
    <img src='http://3.bp.blogspot.com/-48EGbQzzsdI/Uws6RmhElvI/AAAAAAAAAIM/4cB8dYeRA1c/s1600/48x48-Circle-49-TW.png' alt='Twitter' title='تابعنا على تويتر'/>
    </a>
    </li>
    <li id='mudwnp-ico'>
    <a href='#' target='_blank'>
    <img src='http://4.bp.blogspot.com/-hyEUL2pEdxo/Uws6PoLa8tI/AAAAAAAAAHo/cPPQeU-XbdE/s1600/48x48-Circle-49-GP.png' alt='Google Plus' title='تابعنا على جوجل بلس'/>
    </a>
    </li>
    <li id='mudwnp-ico'>
    <a href='#' target='_blank'>
    <img src='http://4.bp.blogspot.com/-6NeaTmA0fxs/Uws6RGbKbnI/AAAAAAAAAIE/X-xp-2uBQ-g/s1600/48x48-Circle-49-RSS.png' alt='RSS' title='اشترك في الخلاصة'/>
    </a>
    </li>

             </ul>
          </div>

       </div>

    تخصيص القائمة


    قم باستبدال الــ بالروابط الخاصة بك

    قم باستبدال الـ f84242 لتغيير لون الخلفية للقائمة

    - قم باستبدالbackground:rgba(197,52,52,1 لتغيير لون الخط الذي بالاسفل

    - قم باستبدال الـ اشترك في الخلاصة و هذه الكلمات بما يناسبك و هي تظهر عند الضغط على الايقونات

    - و يمكن ايضا استبدال ايقونات التواصل الاجتماعي ولكن يجب ان يكون حجم الصور  48x48

    في امان الله 
    2:13 م

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

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

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


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




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


    الذهاب إلى المدونة قالب >> النسخ الاحتياطي للقالب
    انقر فوق تحرير 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 م

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

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

    اضافة سلايدر شو خفيف و انيق لمدونات بلوجر ,اضافة سلايدر شو خفيف و انيق لمدونات بلوجر


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





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


    أول شئ خذ نسخة إحتياطية من قالبك لتجنب المشاكل
    ثم ادخل الى تحرير القالب
    ابحث عن الوسم]]></b:skin> و الصق فوقه الكود التالي


    /* ------ mudwnp Slider ------*/
    #sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
    #slider { width:700px;height:306px;
     background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8jjFl1ZIBw1UMV53v80X-a7vNNUMkliGLibZaLDCzmjVS-YI_Y8eHfac7QUdetYEazVNUded3bImTF24KAOVNqZXV9-v-Kcb49UBpLzSHLABfi6nWuKMvAxVg46VtG0gOBEbXwW9juxg1/s1600/loading.gif) no-repeat 50% 50%;
     position:relative;
     margin:0 auto;/*make the image slider center-aligned */
        box-shadow: 0px 1px 5px #999999;
    }
    #slider img {
     position:absolute;
     border:none;
     display:none;
    }
    #slider a.imgLink {
     z-index:2;
     display:none;position:absolute;
     top:0px;left:0px;border:0;padding:0;margin:0;
     width:100%;height:100%;
    }
    div.mc-caption-bg, div.mc-caption-bg2 {
     position:absolute;
     width:100%;
     height:auto;
     padding:0;
     left:0px;
     bottom:15px;
     z-index:3;
     overflow:hidden;
     font-size: 0;
    }
    div.mc-caption-bg {
     background-color:black;
    }
    div.mc-caption {
     font: bold 14px/20px Arial;
     color:#EEE;
     z-index:4;
     padding:10px 0;
     text-align:center;
    }
    div.mc-caption a {
     color:#FB0;
    }
    div.mc-caption a:hover {
     color:#DA0;
    } div.navBulletsWrapper  {
     top:320px; left:280px; /* Its position is relative to the #slider */
     width:150px;
     background:none;
     padding-left:20px;
     position:relative;
     z-index:5;
     cursor:pointer;
    }
    div.navBulletsWrapper div
    {
        width:11px; height:11px;
        background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgZ7FRL6OXraO1cbQ2627HcHyCU_RT9fk4wQDIDJ4i4qjPkMsyBG3Hl0fZCSc5ZgpOppNTDpvwHbDHxJ5crXAHrb2y6piI_quCcvlHFh9-vUSDUz_hrK7l-lruHhJfHr2w0zg2WgWjxTKt/s1600/bullet.png) no-repeat 0 0;
        float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
        margin-right:11px;/* distance between each bullet*/
        _position:relative;/*IE6 hack*/
    }
    div.navBulletsWrapper div.active {background-position:0 -11px;}
    .intro {
        bottom: 0;
        color: rgba(0, 0, 0, 0.2);
        font-size: 16px;
        position: absolute;
        right: 0;
        text-decoration: none;
        z-index: 99999;
    }
    #slider
    {
     transform: translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        -o-transform:translate3d(0,0,0);
    }
    /* ------ mudwnp Slider ------*/


    تنسيق السلايدر شو 


    بالنسبة للرقم 700 هذا هو عرض السلايدر وهو متكرر لذا إن أردت ان تعدل عرض السلايد يجب ان تغير الرقم في كل المرات المتكرر فيها
    الرقم 306px هو إرتفاع السلايد يمكنك تعديله
    لتغيير الخط و حجمه قم بتغيير كلمة Arial و الارقام التي بجانبها بالحجم و الخط الذي تريده



    وأضف الكود التالي تحت هذا الكود <div id='main-wrapper'>

    <script src="http://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
    <script src="https://googledrive.com/host/0B0wTCJB4dkJ7Y3BZMkNWREd5MUk" type="text/javascript"></script>
    <div style="display:none;" ><a href="http://www.infotechblogging.com"></a></div>
    <div id="sliderFrame">
    <div id="slider">
    <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO83ENqixI4N8MglabsaUwGGwacM6gbiciwiEJIqAEisLd3r2tFPb_jbV5DUKMkNAXvMef2mKatFcS2EqR3rbEXPnxMNJht-TyCHm3VryfWZSfupVlZNz40MlGWIIK-uVB3lVJbikugfU9/s1600/Cars-Lamborghini-Free-Wallpaper.jpg" alt="اسم الموضوع" /></a>

    <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfbTmSX_24z6UULR-85kENu6u-kJuUP5Ga002rHxYtO3RekYdG0uN_hI2gOwgszuQY55hJNoKTUwaSrjelH-9SelIa1rByL9dHn5cAdWQvMmEdMo8lBYOnPM5IK0dd8haF2xXCUJvCVMhU/s1600/ferrari_enzo-wide.jpg" alt="اسم الموضوع" /></a>

    <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiWZtOODCjvaQ29yQelmmUqCpYsrv19alqrjcV6h3H4xsDjGrfk_sv5u75ZqRtWga09Y8dq-Rd0bt7a9gcZt71uWZKB7KMjxZcVqwEi_7hsrCliPlPnRGc7bWwusbrR_Ig0QKi2tisO1pV/s1600/lamborghini-car-wallpapers1.jpg"  alt="اسم الموضوع" /></a>

    <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIaec-ITTSdGbk4-5vqC-AYVvBC15_U4ulaLUZ7-f0gZJofJlzVp2HafG0w_HfzB36fMgg2wRspnLRARNDBwcIylGwHQ3LuqJ1xMQ3KgousYUVoh4xH5NHdH2Z7rjNKAn6SdOsHgsLfpb6/s1600/Lamborghini-Cars-Wallpapers-3.jpg" alt="اسم الموضوع" /></a>

    <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbGzkAHmYPwCn2-5uLpbcPPeU7KjWeQJVdCmMEbat26U2tvs7IyK732o0VKX9vsVaBkTyQ7hrWuEct5l8bwWN-Rdh8KbhkeLkCTk_u-YYuS53CIGp5VjO7yNQT4qqjB3bgkB2qYzJEUwoB/s1600/top-hd_latest_cars_wallpapers.jpg" alt="اسم الموضوع"/></a>
    </div>
    </div>


    اعدادات السلايد شو


    استبدل ما هو باللون الازرق برابط الصورة الذي تريده
    استبدل ما هو باللون الاحمر باسم الموضوع او القسم الذي تريده
    استبدل ما هو باللون الاصفر #  برابط الموضوع او القسم الذي تريده

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


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

    اضافة ازرار مشاركة مواقع التواصل الاجتماعي الاحترافية 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 م