اضافة تأثير تحميل احترافي V2
مرحبا بكم متابعينا الاوفياء. مدير ومشرف المدونة غائب هذه الفترة, نعتذر عن عدم نشر مواضيع جديدة لكم والاجابة عن تعليقاتكم
نشكركم على تفهمكم

إعلان أدسنس

آخر المواضيع

breaking/مقالات/9
مرحبا بك في موقعنا ! :) .. للبحث عنا من جوجل يمكنك كتابة "نكهة التقنية" أو "Nak1ha" ! لا تنس جعل المدونة الصفحة الرئيسية لمتصفحك! :)
بلوجر

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية


شارك المدونة مع أصدقائك في الفيسبوك ليستفيدو أيظا

الثلاثاء، 21 فبراير، 2017

12:41:00 م

تكبير النص تصغير النص أعادة للحجم الطبيعي
السلام عليكم احبابي ومتتبعي مدونة نمهة التقنية الاوفياء في موضوع جديد وحصري على قسم اضافات بلوجر.
اضافتنا لهذا اليوم حول تأثير تحميل جديد للمدونة بعدما كنا قد نشرنا تأثير تحميل v1 من قبل اليوم سنشرح  لكم طريقة تركيب واحدة افضل منها واحترافية اكثر تابعو معي الشرح ↙↙
معاينة
👇 شرح طريقة تركيب التأثير 👇
أولا لاضافة اكواد css عليك البحث عن الوسم :
]]></b:skin>
ثم ضع فوقه الاكواد التالية:

/*------------------------------------------------------------------
Loading v2 by www.Nak1ha.com
-------------------------------------------------------------------*/
.mfp-preloader {
margin-top: -100px; }
.mfp-preloader .preloader {
margin: 0 auto; }
.preloader-wrapp {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #fa411e;
    background-image: linear-gradient(45deg,rgba(233, 30, 99, 0.75), rgba(250, 65, 30, 0.75));
    background-image: -moz-linear-gradient(45deg, rgba(41,182,246,.75),rgba(96,125,139,.75));
    background-image: -webkit-linear-gradient(10deg,rgba(233, 30, 99, 0.75), rgba(243, 93, 40, 0.75));
    background-image: -ms-linear-gradient(45deg, rgba(41,182,246,.75),rgba(96,125,139,.75));z-index: 100000000; }
.preloader-wrapp .preloader {
position: absolute;
top: 45%;
left: 50%;
margin-top: -100px;
margin-left: -100px; }
.preloader-wrapp &gt; img {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 145px;
    margin-left: -70px;
    margin-top: -30px;
    z-index: 22;
}
.preloader {
position: relative;
box-sizing: border-box;
background-clip: padding-box;
width: 200px;
height: 200px;
border-radius: 100px;
border: 5px solid rgba(255, 255, 255, 0.1);
-webkit-mask: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), #000000 90%);
-webkit-transform-origin: 50% 60%;
-ms-transform-origin: 50% 60%;
-o-transform-origin: 50% 60%;
transform-origin: 50% 60%;
-webkit-transform: perspective(200px) rotateX(80deg);
transform: perspective(200px) rotateX(80deg); }
.preloader:before, .preloader:after {
content: &quot;&quot;;
position: absolute;
left: 0;
top: 0;
margin: -5px;
box-sizing: inherit;
width: inherit;
height: inherit;
border-radius: inherit;
border: 5px solid rgba(255, 255, 255, 0.1);
opacity: .85;
border-color: #f55473;
border-top-color: #fff;
-webkit-animation: preloader-spin 1s infinite;
-o-animation: preloader-spin 1s infinite;
animation: preloader-spin 1s infinite; }
.preloader:after {
-webkit-animation-delay: 0.35s;
-o-animation-delay: 0.35s;
animation-delay: 0.35s; }
@-webkit-keyframes preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@-o-keyframes preloader-spin {
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes preloader-spin {
100% {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg); } }
.fa-refresh {
position: absolute;
top: 45%;
left: 50%;
margin-top: 70px;
margin-left: -5px;
font-size: 18px;
color: #fff;
}

ثانيا ابحث عن الوسم
<body
وضع أسفله هذه الاكواد
<div class='page-preloader preloader-wrapp'>
<img alt='' src='http://d.top4top.net/p_3735b3sn1.png'/>
<div class='preloader'/>
<a href='#refresh' onclick='location.reload(true)'><i class='fa fa-refresh fa-spin'/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
jQuery(window).load(function() {
        // will first fade out the loading animation
$(".preloader-wrapp").delay(1000).fadeOut('slow');
})
//]]>
</script>
ثم غير الرابط الملون بالأحمر برابط شعار مدونتك
ومبروك عليك
إلى هنا نكون وصلنا الى اخر موضوعنا لهذا اليوم أتمنى ان ينال موضوعنا اعجابكم 😘
  1. تابع طــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــوپ

    ردحذف
  2. الردود
    1. للاسف صديقي ضروفي الحالية لا تسمح بعمل فيديوهات لكن لا اضن ان الشرح به صعوبة

      حذف

مقالات