الاثنين، 5 يناير، 2015

شاهد المقال

تحميل موك اب اجهزة ابل لعرض التصاميم


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

شاهد المقال

اضافة تاثير الظل Hover لصور الموضوع بتقنية css


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


طريقة تركيب التأثير
1- من لوحة التحكم >> قالب >> تحرير HTML
2- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
3- قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)
4- قم بالبحث عن الكود ]]></b:skin> واضف فوقه مباشراً الكود التالي
     .post-body img {
    padding: 2px;
    border-radius: 2px;
    box-shadow: 1px 30px 30px -26px #A9A7A7;
    border: 1px solid #D8D8D8;
    background: linear-gradient(to bottom,#fefefe 0%,#EDEDED 100%);
    }
     
    5- واخيراً اضغط على حفظ القالب
    اتمنى  ان ينال اعجابكم الموضوع
    دمتم في رعاية الله وحفظه

    الاثنين، 29 ديسمبر، 2014

    شاهد المقال

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


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


    طريقة تركيب الازرار
    1- من لوحة التحكم >> قالب >> تحرير HTML
    2- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
    3- قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)
    4- قم بالبحث عن الكود ]]></b:skin> واضف فوقه مباشراً الكود التالي
    #wrap {
        margin: 20px auto;
        text-align: center;
    }
    
    .btn-slide, .btn-slide2 {
        position: relative;
        display: inline-block;
        height: 50px;
        width: 200px;
        line-height: 50px;
        padding: 0;
        border-radius: 50px;
        background: #fdfdfd;
        border: 2px solid #0099cc;
        margin: 10px;
        transition: .5s;
    }
    
    .btn-slide2 {
        border: 2px solid #efa666;
    }
    
    .btn-slide:hover {
        background-color: #0099cc;
    }
    
    .btn-slide2:hover {
        background-color: #efa666;
    }
    
    .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
        left: 100%;
        margin-left: -45px;
        background-color: #fdfdfd;
        color: #0099cc;
    }
    
    .btn-slide2:hover span.circle2 {
        color: #efa666;
    }
    
    .btn-slide:hover span.title, .btn-slide2:hover span.title2 {
        left: 40px;
        opacity: 0;
    }
    
    .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
        opacity: 1;
        left: 40px;
    }
    
    .btn-slide span.circle, .btn-slide2 span.circle2 {
        display: block;
        background-color: #0099cc;
        color: #fff;
        position: absolute;
        float: left;
        margin: 5px;
        line-height: 42px;
        height: 40px;
        width: 40px;
        top: 0;
        left: 0;
        transition: .5s;
        border-radius: 50%;
    }
    
    .btn-slide2 span.circle2 {
        background-color: #efa666;
    }
    
    .btn-slide span.title,
      .btn-slide span.title-hover, .btn-slide2 span.title2,
      .btn-slide2 span.title-hover2 {
        position: absolute;
        left: 90px;
        text-align: center;
        margin: 0 auto;
        font-size: 16px;
        font-weight: bold;
        color: #30abd5;
        transition: .5s;
    }
    
    .btn-slide2 span.title2,
      .btn-slide2 span.title-hover2 {
        color: #efa666;
        left: 80px;
    }
    
    .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
        left: 80px;
        opacity: 0;
    }
    
    .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
        color: #fff;
    }
    5- اضف الكود التالي بداخل الموضوع في تبويب html
     <div id="wrap">
    <a href="#" class="btn-slide" target="_blank">
      <span class="circle"><i class="fa fa-rocket"></i></span>
      <span class="title">معاينة</span>
      <span class="title-hover">اضغط هنا</span>
    </a>
    <a href="#" class="btn-slide2" target="_blank">
      <span class="circle2"><i class="fa fa-download"></i></span>
      <span class="title2">تحميل</span>
      <span class="title-hover2">اضغط هنا</span>
    </a>
    </div> 
    واخيراً قم بالتغيرات المناسبة من خلال وضع رابط التحميل والمعاينة وغيرها
    اتمنى  ان ينال اعجابكم الموضوع
    دمتم في رعاية الله وحفظه

    الاثنين، 22 ديسمبر، 2014

    شاهد المقال

    تحميل قالب حكاية النسخة الثانية مجانا


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

    مميزات القالب

    1. قائمة جانبية متحركة عند النزول للاسفل
    2. امكانية اضافة ايقونة بجانب القوائم بسهولة
    3. امكانية اضافة اختصار لنوعية التدوينة بسهولة
    4. قائمة جانبة منسدلة
    5. صفحة خطا 404
    6. صفحة ارشيف
    7. أيقونات الاجتماعية
    8. مواضيع ذات صلة داخل التدوينة
    9. اضافة اكتر من كاتب
    10. سهولة التحكم من لوحة التخطيط للقالب
    11. ارشفة قوية
    12. سلايد شو تلقائي
      التالي
      هذا أحدث موضوع

      اضافات بلوجر

      قوالب بلوجر