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

السلام عليكم إذا كنت مصمم مواقع متجاوبة، فبالتأكيد سيفيدك هذا الموك آب بتنسيق عرضها للعملاء بشكل جميل و منظم. الموك آب يعرض لمختلف أجهزة آبل بشكل مسطح. الموك اب بصيغة 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- واخيراً اضغط على حفظ القالب

اتمنى  ان ينال اعجابكم الموضوع

دمتم في رعاية الله وحفظه

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

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

معاينة الازرار من Js معاينة من مدونة

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

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> 

واخيراً قم بالتغيرات المناسبة من خلال وضع رابط التحميل والمعاينة وغيرها

اتمنى  ان ينال اعجابكم الموضوع

دمتم في رعاية الله وحفظه

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

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

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

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

معاينة تحميل Gulfup