كيفية انشاء رسوم متحركة لمدونة بلوجر عند تحميل الصفحة بشكل جذاب

السلام عليكم ورحمة الله وبركاته

كيفية إنشاء مدونة بلوجر بالرسوم المتحركة عند  تحميل الصفحة مع CSS

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

1. الدخول الى حسابك في بلوجر
2. اذهب الى قالب مدونتك > اضغط على تحرير html > ضع اشارة على توسيع القالب
3. ثم اضغط ctrl+f وابحث عن الرمز التالي:]]></b:skin>
4. ثم ضع الكود التالي اعلا ]]></b:skin>

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}

.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}

.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}

@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}

@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}

@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}

@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

5. ثم ابحث عن الرمز  </head>
6. ثم الصق الكود التالي اعلا </head> مباشر

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

7. ثم ابحث عن الرمز التالي </body>
8. واخيرا الصق الكود التالي اعلا </body>

<div id='loadhalaman'>

<div class='loadball'></div>

<div class='loadball-2'></div>

</div>

<script type='text/javascript'>

$(function() {

var siteURL = "http://" + top.location.host.toString();

var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");

$internalLinks.click(function() {

$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);

});

// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'

$('#loadhalaman').click(function() {

$(this).hide();

});

});

</script>

حظا سعيدا مع بلوجر احلى

هشام ابرشى

اسمي هشام : من المملكة المغربية , اهتم بتقنيات الموقع ومواكبة كل ماهو جديد في عالم التقنيه , انقل قالبا ما اراه مفيد ومناسب للزوار , وايضا اطرح المواضيع الحصريه والمفيده للكل بأذن الله ..