1

1
اعلن هناإضغط لعمل تبادل إعلانى
  • مساحةنص تجريبية للتجريب فقط

    بــــــــسم الله الرحمن الرحيم

  • تصميم وتطوير مدونة مدون

  • رابط قائمة

  • رابط جديد

  • آخر المقالات

    الجمعة، 18 أكتوبر 2013

    بسم الله الرحمن الرحيم 
    زوار وأعضاء مدونة مدون الكرام لقد شرحت سابقاً فى تدوينة كيف تخصص نموذج إتصال بشكل إحترافى معتمد من بلوجر ولكن وصلتنى تعليقات عديدة عن أن الإضافة لم تعمل بشكل جيد أو بها أخطاء ما مع العلم انها مجربة 100% وانا شخصياً أستخدمها بمدونة مدون لذلك قررت أن آتى لكم بشكل جديد آخر مع شرح التركيب سهل جداً .
    1 - علينا أولاً تركيب الاضافة بصورة الاعتيادية نتوجه الى تخطيط ثم أضافة أداة جديدة وختر أضافة أتصل بنا
    2 - إختر صفحات / صفحة جديدة فارغة / ثم ضع الماوس على HTML وضع الكود التالى
    <form name="contact-form">
    الاسم
    <input id="ContactForm1_contact-form-name" name="name" size="30"
    type="text" value=""
    />
    البريد الإلكتروني <span style="color: red; font-weight: bolder;">*</span>
    <input id="ContactForm1_contact-form-email" name="email" size="30"
    type="text" value="
    " />
    الرسالة <span style="color: red; font-weight: bolder;">*</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>
    <style type="text/css">
    /* mdwanblog */
    #comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
    </style>
    ملحوظة هامة يجب التأكد من إختيار هذة الأسطر أثناء إنشاء الصفحة مثل الصورة التالية
    3 - الآن مع إضافة كود الـ css نبحث عن الكود ]]></b:skin> ونضيف الكود التالى قبلة 
    /* mdwanblog */
    #ContactForm1{
    display:none;
    }
    #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
    width: 300px;
    height:auto;
    margin: 5px auto;
    padding: 10px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    color:#777;
    }
    #ContactForm1_contact-form-name:focus,
    #ContactForm1_contact-form-email:focus,
    #ContactForm1_contact-form-email-message:focus{
    background: #fffff7;
    }
    #ContactForm1_contact-form-email-message{
    width: 450px;
    height: 175px;
    margin: 5px auto;
    padding: 10px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    color:#777;
    font-family:Arial, sans-serif;
    }
    #ContactForm1_contact-form-submit {
    width: 101px;
    height: 35px;
    float: right;
    color: #FFF;
    padding: 0;
    margin: 10px 0 3px 0 0;
    cursor: pointer;
    background: #5E768D;
    border: 1px solid #556f8c;
    border-radius:3px;
    }
    #ContactForm1_contact-form-submit:hover {
    background:#435c74;
    }
    #ContactForm1_contact-form-error-message,
    #ContactForm1_contact-form-success-message
    {
    width: 450px;
    margin-top:35px;
    }
    والآن أصبح النموذج مكتمل 
    تنبيه | لا تقوم بحزف الأداة من العمود الجانبى هى ستختفى
    شروحات بلوجر

    تخصيص نموذج إتصل بنا بشكل جديد لبلوجر

    Hady store  |  at  4:02 ص

    بسم الله الرحمن الرحيم 
    زوار وأعضاء مدونة مدون الكرام لقد شرحت سابقاً فى تدوينة كيف تخصص نموذج إتصال بشكل إحترافى معتمد من بلوجر ولكن وصلتنى تعليقات عديدة عن أن الإضافة لم تعمل بشكل جيد أو بها أخطاء ما مع العلم انها مجربة 100% وانا شخصياً أستخدمها بمدونة مدون لذلك قررت أن آتى لكم بشكل جديد آخر مع شرح التركيب سهل جداً .
    1 - علينا أولاً تركيب الاضافة بصورة الاعتيادية نتوجه الى تخطيط ثم أضافة أداة جديدة وختر أضافة أتصل بنا
    2 - إختر صفحات / صفحة جديدة فارغة / ثم ضع الماوس على HTML وضع الكود التالى
    <form name="contact-form">
    الاسم
    <input id="ContactForm1_contact-form-name" name="name" size="30"
    type="text" value=""
    />
    البريد الإلكتروني <span style="color: red; font-weight: bolder;">*</span>
    <input id="ContactForm1_contact-form-email" name="email" size="30"
    type="text" value="
    " />
    الرسالة <span style="color: red; font-weight: bolder;">*</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>
    <style type="text/css">
    /* mdwanblog */
    #comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
    </style>
    ملحوظة هامة يجب التأكد من إختيار هذة الأسطر أثناء إنشاء الصفحة مثل الصورة التالية
    3 - الآن مع إضافة كود الـ css نبحث عن الكود ]]></b:skin> ونضيف الكود التالى قبلة 
    /* mdwanblog */
    #ContactForm1{
    display:none;
    }
    #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
    width: 300px;
    height:auto;
    margin: 5px auto;
    padding: 10px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    color:#777;
    }
    #ContactForm1_contact-form-name:focus,
    #ContactForm1_contact-form-email:focus,
    #ContactForm1_contact-form-email-message:focus{
    background: #fffff7;
    }
    #ContactForm1_contact-form-email-message{
    width: 450px;
    height: 175px;
    margin: 5px auto;
    padding: 10px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    color:#777;
    font-family:Arial, sans-serif;
    }
    #ContactForm1_contact-form-submit {
    width: 101px;
    height: 35px;
    float: right;
    color: #FFF;
    padding: 0;
    margin: 10px 0 3px 0 0;
    cursor: pointer;
    background: #5E768D;
    border: 1px solid #556f8c;
    border-radius:3px;
    }
    #ContactForm1_contact-form-submit:hover {
    background:#435c74;
    }
    #ContactForm1_contact-form-error-message,
    #ContactForm1_contact-form-success-message
    {
    width: 450px;
    margin-top:35px;
    }
    والآن أصبح النموذج مكتمل 
    تنبيه | لا تقوم بحزف الأداة من العمود الجانبى هى ستختفى

    الأربعاء، 16 أكتوبر 2013

    بسم الله الرحمن الرحيم
    أقدم لكم من مدونة مدون فقط قائمة css فى قمة الإحترافية بالوان رائعة جداً ومناسبة لجميع القوالب يمكنك تركيبها فى أداة جديدة جافاسكريبت ويمكنك إستبدالها بالقائمة القديمة فى قالبك .
    لوحة التحكم / التخطيط / إختار المكان المناسب / أداة جافاسكريبت وضع بها الكود التالى بها
         <style>  
        /* by.mdwanblog.blogspot.com */
        #cssmenu {
          padding: 0;
          margin: 0;
          border: 0; }
        #cssmenu ul, #cssmenu li {
          list-style: none;
          margin: 0;
          padding: 0; }
        #cssmenu ul {
          position: relative;
          z-index: 597; }
        #cssmenu ul li {
          float: right;
          min-height: 1px;
          vertical-align: middle; }
        #cssmenu ul li.hover,
        #cssmenu ul li:hover {
          position: relative;
          z-index: 599;
          cursor: default; }
        #cssmenu ul ul {
          visibility: hidden;
          position: absolute;
          top: 100%;
          left: 0;
          z-index: 598;
          width: 100%; }
        #cssmenu ul ul li {
          float: none; }
        #cssmenu ul ul ul {
          top: 0;
          left: auto;
          right: -99.5%; }
        #cssmenu ul li:hover > ul {
          visibility: visible; }
        #cssmenu ul ul {
          bottom: 0;
          left: 0; }
        #cssmenu ul ul {
          margin-top: 0; }
        #cssmenu ul ul li {
          font-weight: normal; }
        #cssmenu a {
          display: block;
          line-height: 1em;
          text-decoration: none; }
        /* by.mdwanblog.blogspot.com */
        #cssmenu {
          background: #333;
          border-bottom: 4px solid #1b9bff;
          font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
          font-size: 12px; }
          #cssmenu > ul {
            *display: inline-block; }
          #cssmenu:after, #cssmenu ul:after {
            content: '';
            display: block;
            clear: both; }
          #cssmenu ul {
            text-transform: uppercase; }
            #cssmenu ul ul {
              border-top: 4px solid #1b9bff;
              text-transform: none;
              min-width: 190px; }
              #cssmenu ul ul a {
                background: #1b9bff;
                color: #FFF;
                border: 1px solid #0082e7;
                border-top: 0 none;
                line-height: 150%;
                padding: 16px 20px; }
              #cssmenu ul ul ul {
                border-top: 0 none; }
              #cssmenu ul ul li {
                position: relative; }
                #cssmenu ul ul li:first-child > a {
                  border-top: 1px solid #0082e7; }
                #cssmenu ul ul li:hover > a {
                  background: #35a6ff; }
                #cssmenu ul ul li:last-child > a {
                  -moz-border-radius: 0 0 3px 3px;
                  -webkit-border-radius: 0 0 3px 3px;
                  border-radius: 0 0 3px 3px;
                  -moz-background-clip: padding;
                  -webkit-background-clip: padding-box;
                  background-clip: padding-box;
                  -moz-box-shadow: 0 1px 0 #1b9bff;
                  -webkit-box-shadow: 0 1px 0 #1b9bff;
                  box-shadow: 0 1px 0 #1b9bff; }
                #cssmenu ul ul li:last-child:hover > a {
                  -moz-border-radius: 0 0 0 3px;
                  -webkit-border-radius: 0 0 0 3px;
                  border-radius: 0 0 0 3px;
                  -moz-background-clip: padding;
                  -webkit-background-clip: padding-box;
                  background-clip: padding-box; }
                #cssmenu ul ul li.has-sub > a:after {
                  content: '+';
                  position: absolute;
                  top: 50%;
                  right: 15px;
                  margin-top: -8px; }
            #cssmenu ul li:hover > a, #cssmenu ul li.active > a {
              background: #1b9bff;
              color: #FFF; }
            #cssmenu ul li.has-sub > a:after {
              content: '+';
              margin-left: 5px; }
            #cssmenu ul li.last ul {
              left: auto;
              right: 0; }
              #cssmenu ul li.last ul ul {
                left: auto;
                right: 99.5%; }
          #cssmenu a {
            background: #333;
            color: #CBCBCB;
            padding: 0 20px; }
          #cssmenu > ul > li > a {
            line-height: 48px; }
    </style>
    <!--by.mdwanblog.blogspot.com-->
        <div id='cssmenu'>
        <ul>
           <li class='active'><a href='#'><span>الرئيسية</span></a></li>
           <li class='has-sub'><a href='#'><span>منسدلة</span></a>
              <ul>
                 <li class='has-sub'><a href='#'><span>رابط</span></a>
                    <ul>
                       <li><a href='#'><span>رابط</span></a></li>
                       <li class='last'><a href='#'><span>مدونة مدون</span></a></li>
                    </ul>
                 </li>
                 <li class='has-sub'><a href='#'><span>منسدلة اخرى</span></a>
                    <ul>
                       <li><a href='#'><span>جديد</span></a></li>
                       <li class='last'><a href='#'><span>هاكات بلوجر</span></a></li>
                    </ul>
                 </li>
              </ul>
           </li>
           <li><a href='#'><span>عن مدوّن</span></a></li>
           <li class='last'><a href='#'><span>بلوجر</span></a></li>
        </ul>
        </div>
        <!--by.mdwanblog.blogspot.com-->
    فى النهاية أتمنى إنها تنال إعجابكم دمتم بخير
    سي اس اس

    قائمة css فى قمة الأناقة لمدونات بلوجر

    Hady store  |  at  10:59 م

    بسم الله الرحمن الرحيم
    أقدم لكم من مدونة مدون فقط قائمة css فى قمة الإحترافية بالوان رائعة جداً ومناسبة لجميع القوالب يمكنك تركيبها فى أداة جديدة جافاسكريبت ويمكنك إستبدالها بالقائمة القديمة فى قالبك .
    لوحة التحكم / التخطيط / إختار المكان المناسب / أداة جافاسكريبت وضع بها الكود التالى بها
         <style>  
        /* by.mdwanblog.blogspot.com */
        #cssmenu {
          padding: 0;
          margin: 0;
          border: 0; }
        #cssmenu ul, #cssmenu li {
          list-style: none;
          margin: 0;
          padding: 0; }
        #cssmenu ul {
          position: relative;
          z-index: 597; }
        #cssmenu ul li {
          float: right;
          min-height: 1px;
          vertical-align: middle; }
        #cssmenu ul li.hover,
        #cssmenu ul li:hover {
          position: relative;
          z-index: 599;
          cursor: default; }
        #cssmenu ul ul {
          visibility: hidden;
          position: absolute;
          top: 100%;
          left: 0;
          z-index: 598;
          width: 100%; }
        #cssmenu ul ul li {
          float: none; }
        #cssmenu ul ul ul {
          top: 0;
          left: auto;
          right: -99.5%; }
        #cssmenu ul li:hover > ul {
          visibility: visible; }
        #cssmenu ul ul {
          bottom: 0;
          left: 0; }
        #cssmenu ul ul {
          margin-top: 0; }
        #cssmenu ul ul li {
          font-weight: normal; }
        #cssmenu a {
          display: block;
          line-height: 1em;
          text-decoration: none; }
        /* by.mdwanblog.blogspot.com */
        #cssmenu {
          background: #333;
          border-bottom: 4px solid #1b9bff;
          font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
          font-size: 12px; }
          #cssmenu > ul {
            *display: inline-block; }
          #cssmenu:after, #cssmenu ul:after {
            content: '';
            display: block;
            clear: both; }
          #cssmenu ul {
            text-transform: uppercase; }
            #cssmenu ul ul {
              border-top: 4px solid #1b9bff;
              text-transform: none;
              min-width: 190px; }
              #cssmenu ul ul a {
                background: #1b9bff;
                color: #FFF;
                border: 1px solid #0082e7;
                border-top: 0 none;
                line-height: 150%;
                padding: 16px 20px; }
              #cssmenu ul ul ul {
                border-top: 0 none; }
              #cssmenu ul ul li {
                position: relative; }
                #cssmenu ul ul li:first-child > a {
                  border-top: 1px solid #0082e7; }
                #cssmenu ul ul li:hover > a {
                  background: #35a6ff; }
                #cssmenu ul ul li:last-child > a {
                  -moz-border-radius: 0 0 3px 3px;
                  -webkit-border-radius: 0 0 3px 3px;
                  border-radius: 0 0 3px 3px;
                  -moz-background-clip: padding;
                  -webkit-background-clip: padding-box;
                  background-clip: padding-box;
                  -moz-box-shadow: 0 1px 0 #1b9bff;
                  -webkit-box-shadow: 0 1px 0 #1b9bff;
                  box-shadow: 0 1px 0 #1b9bff; }
                #cssmenu ul ul li:last-child:hover > a {
                  -moz-border-radius: 0 0 0 3px;
                  -webkit-border-radius: 0 0 0 3px;
                  border-radius: 0 0 0 3px;
                  -moz-background-clip: padding;
                  -webkit-background-clip: padding-box;
                  background-clip: padding-box; }
                #cssmenu ul ul li.has-sub > a:after {
                  content: '+';
                  position: absolute;
                  top: 50%;
                  right: 15px;
                  margin-top: -8px; }
            #cssmenu ul li:hover > a, #cssmenu ul li.active > a {
              background: #1b9bff;
              color: #FFF; }
            #cssmenu ul li.has-sub > a:after {
              content: '+';
              margin-left: 5px; }
            #cssmenu ul li.last ul {
              left: auto;
              right: 0; }
              #cssmenu ul li.last ul ul {
                left: auto;
                right: 99.5%; }
          #cssmenu a {
            background: #333;
            color: #CBCBCB;
            padding: 0 20px; }
          #cssmenu > ul > li > a {
            line-height: 48px; }
    </style>
    <!--by.mdwanblog.blogspot.com-->
        <div id='cssmenu'>
        <ul>
           <li class='active'><a href='#'><span>الرئيسية</span></a></li>
           <li class='has-sub'><a href='#'><span>منسدلة</span></a>
              <ul>
                 <li class='has-sub'><a href='#'><span>رابط</span></a>
                    <ul>
                       <li><a href='#'><span>رابط</span></a></li>
                       <li class='last'><a href='#'><span>مدونة مدون</span></a></li>
                    </ul>
                 </li>
                 <li class='has-sub'><a href='#'><span>منسدلة اخرى</span></a>
                    <ul>
                       <li><a href='#'><span>جديد</span></a></li>
                       <li class='last'><a href='#'><span>هاكات بلوجر</span></a></li>
                    </ul>
                 </li>
              </ul>
           </li>
           <li><a href='#'><span>عن مدوّن</span></a></li>
           <li class='last'><a href='#'><span>بلوجر</span></a></li>
        </ul>
        </div>
        <!--by.mdwanblog.blogspot.com-->
    فى النهاية أتمنى إنها تنال إعجابكم دمتم بخير

    الثلاثاء، 8 أكتوبر 2013

    بسم الله الرحمن الرحيم 
    حبيت ان أقدم لكم كود التبادل الإعلانى البنرى لان الكثير طلبوه منى عبر البريد مع العلم إنه "متوفر" على الإنترنت ولكن حبيت ان أضعه لكم كود إحترافى وراح يعجبكم مثل الموجود حالياً فى مدونة مدوّن وهو ليس من تصميمنا .
    الكود تركيبة سهل للغاية ستضع الكود التالى فى اداة جافاسكريبت
    <style>
    #advertise{
      margin: auto;
    }
     .adss { list-style:none; margin-top:5px auto; margin: 0 1px 2px 1px; display:inline-block; text-align: center; }
     .adss a { display:block; width:75px; height:75px; padding-right:0px; padding-top: 3px; position:relative; text-decoration:none; }
     .adss a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
     .adss img {-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px; max-height: 75px; max-width: 75px; }
     #adsanime:hover { opacity:0.2; }
     #adsanime a strong {
        -webkit-transition-property: opacity;
         -webkit-transition-duration: 500ms;
         -moz-transition-property: opacity;
          -moz-transition-duration: 500ms; }
     #adsanime a strong {
       opacity:0;
        -webkit-transition-property: opacity, top;
         -webkit-transition-duration: 300ms;
          -moz-transition-property: opacity, top;
           -moz-transition-duration: 300ms; }
     #adsanime {
        opacity:0.5;
         -webkit-transition-property: opacity, top;
          -webkit-transition-duration: 300ms;
           -moz-transition-property: opacity, top;
            -moz-transition-duration: 300ms; }
     #adsanime:hover { opacity:1; }
     #adsanime:hover a strong { opacity:1; top:-10px; }
    </style>

    <center>
    <div class="adss" id="adsanime">
    <a href="http://arabe-eye.blogspot.com">
       <img src="http://i72.servimg.com/u/f72/17/70/27/78/arabe-10.gif" />
       <strong>عين العرب</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="http://www.alamfour.blogspot.com/">
       <img src="http://im42.gulfup.com/k40nO.gif" />
       <strong>Alamfour</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="http://a7trafy.blogspot.com">
       <img src="http://im31.gulfup.com/M3GmW.gif" />
       <strong>مدونة احترافي</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="/">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>اعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="/">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>اعلن</strong></a>
        </div>   
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>اعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>          
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div> 
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>       
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div> 
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>             
    </center>
    وغير ما يلزمك حتى يناسبك
    اضافات بلوجر

    كود الإعلانات البنرية مثل مدونة مدوّن

    Hady store  |  at  11:51 م

    بسم الله الرحمن الرحيم 
    حبيت ان أقدم لكم كود التبادل الإعلانى البنرى لان الكثير طلبوه منى عبر البريد مع العلم إنه "متوفر" على الإنترنت ولكن حبيت ان أضعه لكم كود إحترافى وراح يعجبكم مثل الموجود حالياً فى مدونة مدوّن وهو ليس من تصميمنا .
    الكود تركيبة سهل للغاية ستضع الكود التالى فى اداة جافاسكريبت
    <style>
    #advertise{
      margin: auto;
    }
     .adss { list-style:none; margin-top:5px auto; margin: 0 1px 2px 1px; display:inline-block; text-align: center; }
     .adss a { display:block; width:75px; height:75px; padding-right:0px; padding-top: 3px; position:relative; text-decoration:none; }
     .adss a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
     .adss img {-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px; max-height: 75px; max-width: 75px; }
     #adsanime:hover { opacity:0.2; }
     #adsanime a strong {
        -webkit-transition-property: opacity;
         -webkit-transition-duration: 500ms;
         -moz-transition-property: opacity;
          -moz-transition-duration: 500ms; }
     #adsanime a strong {
       opacity:0;
        -webkit-transition-property: opacity, top;
         -webkit-transition-duration: 300ms;
          -moz-transition-property: opacity, top;
           -moz-transition-duration: 300ms; }
     #adsanime {
        opacity:0.5;
         -webkit-transition-property: opacity, top;
          -webkit-transition-duration: 300ms;
           -moz-transition-property: opacity, top;
            -moz-transition-duration: 300ms; }
     #adsanime:hover { opacity:1; }
     #adsanime:hover a strong { opacity:1; top:-10px; }
    </style>

    <center>
    <div class="adss" id="adsanime">
    <a href="http://arabe-eye.blogspot.com">
       <img src="http://i72.servimg.com/u/f72/17/70/27/78/arabe-10.gif" />
       <strong>عين العرب</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="http://www.alamfour.blogspot.com/">
       <img src="http://im42.gulfup.com/k40nO.gif" />
       <strong>Alamfour</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="http://a7trafy.blogspot.com">
       <img src="http://im31.gulfup.com/M3GmW.gif" />
       <strong>مدونة احترافي</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="/">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>اعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="/">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>اعلن</strong></a>
        </div>   
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>اعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>          
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div> 
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>       
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div> 
    <div class="adss" id="adsanime">
    <a href="">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSgjFy8GiWKSaruoGspuF52AnP0lN3CyVqAorf5sdO3V-kRQ2kJyHFOJt9PpV730h9jt4Q5uJOKREKtseBfGq2pYpKLgnM7LaFZlmzgYhSaTc0dyYjpOISH1zhSA20EKBZ1uoMvIf_Xyn/s1600/Untitled-1.jpg" />
       <strong>أعلن هنا</strong></a>
        </div>             
    </center>
    وغير ما يلزمك حتى يناسبك

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

    تحميل أوبريت "مصر أم الدنيا" mp3

    Hady store  |  at  2:18 ص

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

    الأحد، 6 أكتوبر 2013

    بسم الله الرحمن الرحيم 
    فى البداية أتمنى أن تكونوا بأفضل حال جميعاً اقدم لكم فى هذة التدوينة البسيطة كود إضافة لأزرار المشاركة بشكل إحترافى وجزاب بتقنية الـ css3 وبتقنية الجى كويرى .
    والآن مع شرح التركيب وهى سهلة جداً
    لتركيب الجزء الخاص بالـ css إبحث عن الكود التالى 
    ]]></b:skin>
    وضع قبلة مباشرة الكود التالى 
    div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}
    ثم إبحث عن هذا الكود 
    <div class='post-footer'>
    ملحوظة : إن لم يعمل معك الكود الأول جرب الثانى لانها تختلف فى بعض القوالب 
    ضع الكود التالى بعدة مباشرة  
            <!--Start Ssocial Bookmarks fromhttp://mdwanblog.blogspot.com -->
            <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <div class='shr_class shareaholic-show-on-load'>
            </div>
            <script type='text/javascript'>
            var SHRSB_Settings = {&quot;shr_class&quot;
            :{&quot;src&quot;:&quot;http://www.shareaholic.com/media/
            css/styles/sb&quot;,&quot;link&quot;:&quot;&quot;
            ,&88,74,10,106,45,40,210,78,39&quot;,&quot;apikey&quot;:&quot;6ffe2cbf1
            quot;service&quot;:&quot;5,7,2,38,3,219,43,52,201,
            42c45bd4cd03b01ec46b8658&quot;,&quot;localize&quot;
            :true,&quot;shortener&quot;:&quot;google&quot;,&quot;;
            ,&quot;designer_toolTips&quot;
            :true,&quot;twitter_template&quot;:&quot;Some fancy post title
            - http://goo.gl/dbqlx via @mdwan-blogger&quot;}};
            </script>
            <script type='text/javascript'>
            (function() {
            var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
            sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot;
             : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-sb.min.js&quot;;
            var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
            })();
            </script><a href='http://www.spiceupyourblog.com/' target='_blank'>Blogger Social Bookmark Gadget</a></b:if>
            <!-- End Social Bookmarks from http://mdwanblog.blogspot.com -->
     ملاحظات هامة 
    الإسم المحدد باللون الأحمر هو إسم الحساب على تويتر غيرة بإسم حسابك إذا كان ليس لديك حساب اتركة فارغاً
    شروحات بلوجر

    أزرار المشاركة أسفل كل تدوينة بشكل إحترافى

    Hady store  |  at  11:56 م

    بسم الله الرحمن الرحيم 
    فى البداية أتمنى أن تكونوا بأفضل حال جميعاً اقدم لكم فى هذة التدوينة البسيطة كود إضافة لأزرار المشاركة بشكل إحترافى وجزاب بتقنية الـ css3 وبتقنية الجى كويرى .
    والآن مع شرح التركيب وهى سهلة جداً
    لتركيب الجزء الخاص بالـ css إبحث عن الكود التالى 
    ]]></b:skin>
    وضع قبلة مباشرة الكود التالى 
    div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}
    ثم إبحث عن هذا الكود 
    <div class='post-footer'>
    ملحوظة : إن لم يعمل معك الكود الأول جرب الثانى لانها تختلف فى بعض القوالب 
    ضع الكود التالى بعدة مباشرة  
            <!--Start Ssocial Bookmarks fromhttp://mdwanblog.blogspot.com -->
            <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <div class='shr_class shareaholic-show-on-load'>
            </div>
            <script type='text/javascript'>
            var SHRSB_Settings = {&quot;shr_class&quot;
            :{&quot;src&quot;:&quot;http://www.shareaholic.com/media/
            css/styles/sb&quot;,&quot;link&quot;:&quot;&quot;
            ,&88,74,10,106,45,40,210,78,39&quot;,&quot;apikey&quot;:&quot;6ffe2cbf1
            quot;service&quot;:&quot;5,7,2,38,3,219,43,52,201,
            42c45bd4cd03b01ec46b8658&quot;,&quot;localize&quot;
            :true,&quot;shortener&quot;:&quot;google&quot;,&quot;;
            ,&quot;designer_toolTips&quot;
            :true,&quot;twitter_template&quot;:&quot;Some fancy post title
            - http://goo.gl/dbqlx via @mdwan-blogger&quot;}};
            </script>
            <script type='text/javascript'>
            (function() {
            var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
            sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot;
             : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-sb.min.js&quot;;
            var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
            })();
            </script><a href='http://www.spiceupyourblog.com/' target='_blank'>Blogger Social Bookmark Gadget</a></b:if>
            <!-- End Social Bookmarks from http://mdwanblog.blogspot.com -->
     ملاحظات هامة 
    الإسم المحدد باللون الأحمر هو إسم الحساب على تويتر غيرة بإسم حسابك إذا كان ليس لديك حساب اتركة فارغاً

    السبت، 28 سبتمبر 2013

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

    .paginator {
    margin-top:60px;
    font-size:1em;
    }
    .paginator table {
    border-collapse:collapse;
    table-layout:fixed;
    width:100%;
    }
    .paginator table td {
    padding:0;
    white-space:nowrap;
    text-align:center;
    }
    .paginator span {
    display:block;
    padding:3px 0;
    color:#fff;
    }
    .paginator span strong,
    .paginator span a {
    padding:2px 6px;
    }
    .paginator span strong {
    background:#ff6c24;
    font-style:normal;
    font-weight:normal;
    }
    .paginator .scroll_bar {
    width:100%; height:20px;
    position:relative;
    margin-top:10px;
    }
    .paginator .scroll_trough {
    width:100%; height:3px;
    background:#ccc;
    overflow:hidden;
    }
    .paginator .scroll_thumb {
    position:absolute;
    z-index:2;
    width:0; height:3px;
    top:0; left:0;
    font-size:1px;
    background:#363636;
    }
    .paginator .scroll_knob {
    position:absolute;
    top:-5px; left:50%;
    margin-left:-10px;
    width:20px; height:20px;
    overflow:hidden;
    background:url
    (http://3.bp.blogspot.com/
    _McxL-_3YYuM/TBG843o8-TI/
    AAAAAAAAAAM/tAE1hAOX6Ys/s1600/slider_knob.gif)
    no-repeat 50% 50%
    ;
    cursor:pointer; cursor:hand;
    }
    .paginator .current_page_mark {
    position:absolute;
    z-index:1;
    top:0; left:0;
    width:0; height:3px;
    overflow:hidden;
    background:#ff6c24;
    }
    .fullsize .scroll_thumb {
    display:none;
    }
    .paginator_pages {
    width:600px;
    text-align:right;
    font-size:0.8em;
    color:#808080;
    margin-top:-10px;
    }
    الخطوة الثانية تفعيل الجافاسكريبت
    قم بالبحث عن هذا الكود 
    </body>
    قم إستبدله بهذا الكود 
    <script src='
    http://scriptabufarhan.googlecode.com/
    svn/trunk/paginator3000.js'
    type='text/javascript'></script
    >

    <script type='text/javascript'>
    var home_page=&quot;/&quot;;
    var urlactivepage=location.href;
    var postperpage=7;
    var numshowpage=6;
    </script>
    <script src='http://scriptabufarhan.googlecode.com/
    svn/trunk/paginator3000-
    forblogger-v1.0.0.js' type='text/javascript
    '/>

    </body>
    اضافات بلوجر

    إضافة ترقيم الصفحات بشكل أنيق لمدونات بلوجر

    Hady store  |  at  6:47 م

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

    .paginator {
    margin-top:60px;
    font-size:1em;
    }
    .paginator table {
    border-collapse:collapse;
    table-layout:fixed;
    width:100%;
    }
    .paginator table td {
    padding:0;
    white-space:nowrap;
    text-align:center;
    }
    .paginator span {
    display:block;
    padding:3px 0;
    color:#fff;
    }
    .paginator span strong,
    .paginator span a {
    padding:2px 6px;
    }
    .paginator span strong {
    background:#ff6c24;
    font-style:normal;
    font-weight:normal;
    }
    .paginator .scroll_bar {
    width:100%; height:20px;
    position:relative;
    margin-top:10px;
    }
    .paginator .scroll_trough {
    width:100%; height:3px;
    background:#ccc;
    overflow:hidden;
    }
    .paginator .scroll_thumb {
    position:absolute;
    z-index:2;
    width:0; height:3px;
    top:0; left:0;
    font-size:1px;
    background:#363636;
    }
    .paginator .scroll_knob {
    position:absolute;
    top:-5px; left:50%;
    margin-left:-10px;
    width:20px; height:20px;
    overflow:hidden;
    background:url
    (http://3.bp.blogspot.com/
    _McxL-_3YYuM/TBG843o8-TI/
    AAAAAAAAAAM/tAE1hAOX6Ys/s1600/slider_knob.gif)
    no-repeat 50% 50%
    ;
    cursor:pointer; cursor:hand;
    }
    .paginator .current_page_mark {
    position:absolute;
    z-index:1;
    top:0; left:0;
    width:0; height:3px;
    overflow:hidden;
    background:#ff6c24;
    }
    .fullsize .scroll_thumb {
    display:none;
    }
    .paginator_pages {
    width:600px;
    text-align:right;
    font-size:0.8em;
    color:#808080;
    margin-top:-10px;
    }
    الخطوة الثانية تفعيل الجافاسكريبت
    قم بالبحث عن هذا الكود 
    </body>
    قم إستبدله بهذا الكود 
    <script src='
    http://scriptabufarhan.googlecode.com/
    svn/trunk/paginator3000.js'
    type='text/javascript'></script
    >

    <script type='text/javascript'>
    var home_page=&quot;/&quot;;
    var urlactivepage=location.href;
    var postperpage=7;
    var numshowpage=6;
    </script>
    <script src='http://scriptabufarhan.googlecode.com/
    svn/trunk/paginator3000-
    forblogger-v1.0.0.js' type='text/javascript
    '/>

    </body>

    الأربعاء، 25 سبتمبر 2013

    بسم الله الرحمن الرحيم
    أشكال وأنواع وأفكار القوائم مع css لا تنتهي. درس جديد يشرح طريقة لعمل أحد أشكال القوائم، وهي قائمة كثيرة المعلومات! تجد كل البيانات التى يمكن أن يحتاجها الزائر، عنوان للوصلة مع وصف مختصر لها وأيضا أيقونة يمكن أن تكون شعار للموقع أو صورة مصغرة، ويمكن أستخدام القائمة في قوالب المدونات، للمواقع الصديقة والروابط، وأيضا يمكن ان تستغل لروابط الأقسام الرئيسية في المواقع وغيرها...
    تركيب القائمة بالنسبة لمدونات بلوجر كالعادة من التخطيط / إختار أداة جافاسكريبت وضع بها الكود التالى
    <style>
    #menu {
     background: white;
     width: 280px;
     padding:10px;
    }
    #menu ul {
     margin:0;
     padding:0;
     list-style: none;
    }
    #menu ul li {
     margin: 0;
     padding: 5px 0 10px;
     border-bottom: 1px dashed #EAEAEA;
    }
    #menu ul li img {
     float: right;
     padding: 3px 0 0 10px;
    }
    #menu ul li a {
     font: normal 18px 'Droid Arabic Kufi', tahoma ,arial;
     color: #007195;
     text-decoration:none;
    }
    #menu ul li a:hover {
     color:#CC3332;
    }
    #menu ul li span {
     font: normal 13px 'Droid Arabic Kufi', tahoma ,arial;
     color:#7D7D7D;
    }
    #menu li span:hover {
     color: #494949;
    }
    </style>
    <div id="menu">
     <ul>
    <!--design:mdwanblog.blogspot.com-->
     <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimInKuzQitfYWy2baISXl0jPJRSgVABgHEz9xNjQ5cSUnAVaFU_E6wClRBCl1Y_uItAlr-geehugTR5QlbkwxKkj876BGpI-l024bjfo-oMHTatlAh76M3JTzSdA7-5Q3uIfzqAaYtZCI/s1600/232.png" border="0" alt="" /><a href="#">موقع جديد!<br />
     <span>وصف مختصر</span></a></li>
     <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0xbNdToJ1FP_5RpZg9m4mXG9iBTmwZE2lMnj-8XFmontBip0vMMrJwOWzlhT3Y5Yhy0xbBFUvYCM6kOh7ME_-6PyXA7ma4IW66qygw222tau8Df68nGDJT_I0uP8lOHbQ1f9vJGgU12U/s1600/155.png" border="0" alt="" /><a href="#">موقع جديد!<br />
     <span>وصف مختصر</span></a></li>
     <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHYsI0UBdEkSSv6WWyJsbFmNpcKq2wYYcQdYjhgc1Prae5JtAQVqEC1wM46vZZyVPwSlNAhHMaeVSWry1ReTuLlbaFF0LQYjyjorx3HAoEZySIRcF857Wq2H7zs3TJf3ugWJMpu9Na1Js/s1600/178.png" border="0" alt="" /><a href="#">موقع جديد!<br />
     <span>وصف مختصر</span></a></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVoApHRg4U6ycEgRV-r4EsZa2S0aymJyZk7pUEgz0N-e11noreSBsp3Dr4Z0idg_-kmlCQYuAVQ-5YqRQgpl7VUKTvPfym3hHEoU8Zo5v6maccNGUc7ywAm9JsnTgzO87IEKWWLqhpwMk/s1600/185.png" border="0" alt="" /><a href="#">موقع جديد!<br />
     <span>وصف مختصر</span></a></li>
    <!--design:mdwanblog.blogspot.com-->
     </ul>
    </div>
    أتمنى إنها تنال إعجابكم 
    سي اس اس

    قائمة css فى قمة الإحترافية (صورة ، عنوان ، وصف)

    Hady store  |  at  4:25 ص

    بسم الله الرحمن الرحيم
    أشكال وأنواع وأفكار القوائم مع css لا تنتهي. درس جديد يشرح طريقة لعمل أحد أشكال القوائم، وهي قائمة كثيرة المعلومات! تجد كل البيانات التى يمكن أن يحتاجها الزائر، عنوان للوصلة مع وصف مختصر لها وأيضا أيقونة يمكن أن تكون شعار للموقع أو صورة مصغرة، ويمكن أستخدام القائمة في قوالب المدونات، للمواقع الصديقة والروابط، وأيضا يمكن ان تستغل لروابط الأقسام الرئيسية في المواقع وغيرها...
    تركيب القائمة بالنسبة لمدونات بلوجر كالعادة من التخطيط / إختار أداة جافاسكريبت وضع بها الكود التالى
    <style>
    #menu {
     background: white;
     width: 280px;
     padding:10px;
    }
    #menu ul {
     margin:0;
     padding:0;
     list-style: none;
    }
    #menu ul li {
     margin: 0;
     padding: 5px 0 10px;
     border-bottom: 1px dashed #EAEAEA;
    }
    #menu ul li img {
     float: right;
     padding: 3px 0 0 10px;
    }
    #menu ul li a {
     font: normal 18px 'Droid Arabic Kufi', tahoma ,arial;
     color: #007195;
     text-decoration:none;
    }
    #menu ul li a:hover {
     color:#CC3332;
    }
    #menu ul li span {
     font: normal 13px 'Droid Arabic Kufi', tahoma ,arial;
     color:#7D7D7D;
    }
    #menu li span:hover {
     color: #494949;
    }
    </style>
    <div id="menu">
     <ul>
    <!--design:mdwanblog.blogspot.com-->
     <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimInKuzQitfYWy2baISXl0jPJRSgVABgHEz9xNjQ5cSUnAVaFU_E6wClRBCl1Y_uItAlr-geehugTR5QlbkwxKkj876BGpI-l024bjfo-oMHTatlAh76M3JTzSdA7-5Q3uIfzqAaYtZCI/s1600/232.png" border="0" alt="" /><a href="#">موقع جديد!<br />
     <span>وصف مختصر</span></a></li>
     <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0xbNdToJ1FP_5RpZg9m4mXG9iBTmwZE2lMnj-8XFmontBip0vMMrJwOWzlhT3Y5Yhy0xbBFUvYCM6kOh7ME_-6PyXA7ma4IW66qygw222tau8Df68nGDJT_I0uP8lOHbQ1f9vJGgU12U/s1600/155.png" border="0" alt="" /><a href="#">موقع جديد!<br />
     <span>وصف مختصر</span></a></li>
     <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHYsI0UBdEkSSv6WWyJsbFmNpcKq2wYYcQdYjhgc1Prae5JtAQVqEC1wM46vZZyVPwSlNAhHMaeVSWry1ReTuLlbaFF0LQYjyjorx3HAoEZySIRcF857Wq2H7zs3TJf3ugWJMpu9Na1Js/s1600/178.png" border="0" alt="" /><a href="#">موقع جديد!<br />
     <span>وصف مختصر</span></a></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVoApHRg4U6ycEgRV-r4EsZa2S0aymJyZk7pUEgz0N-e11noreSBsp3Dr4Z0idg_-kmlCQYuAVQ-5YqRQgpl7VUKTvPfym3hHEoU8Zo5v6maccNGUc7ywAm9JsnTgzO87IEKWWLqhpwMk/s1600/185.png" border="0" alt="" /><a href="#">موقع جديد!<br />
     <span>وصف مختصر</span></a></li>
    <!--design:mdwanblog.blogspot.com-->
     </ul>
    </div>
    أتمنى إنها تنال إعجابكم 

    تدوينات عامة

    Design | Mdwan Blog.