[شرح] حصريا اضافة كسوف الشمس على مدونتك blogger



<span style="font-weight:bold;"></span><span style="font-weight:bold;"></span><span style="font-weight:bold;"></span><span style="font-weight:bold;"><span style="font-weight:bold;"><span style="font-weight:bold;"><span style="font-weight:bold;"><div class="sun"></div>
</span></span></span></span><div class="moon"></div>
<div class="corona">
</div>
<style>
body{
  background: #000;
}

.sun{
  background: #fff;
  border-radius: 50%;
  box-shadow: inset 0 0 90px rgba(251, 172, 19, .4), 0 0 50px 10px rgba(251, 172, 19, .5), 0 0 120px 20px rgba(255, 255, 255, .6), 0 0 20px 10px rgba(255, 255, 255, .9);
  height: 200px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  z-index: 0;
}

.moon{
  background: #111;
  border-radius: 50%;
  box-shadow: inset -5px 0 20px rgba(251, 172, 19, .6), inset 0 0 10px rgba(255, 255, 255, .7);
  height: 195px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(calc(-50% - 10px),-50%);
  width: 195px;
  z-index: 2;
}

.corona{
  background: #fff;
  border-radius: 50%;
  box-shadow: inset 0 0 30px rgba(251, 172, 19, .1), 0 0 40px 20px rgba(255, 255, 255, 1), 0 0 60px 30px rgba(251, 172, 19, .5);
  height: 80px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(calc(-50% + 90px),-50%);
  width: 40px;
  z-index: 3;
  
  &:before,
  &:after{
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(255,255,255,1) 50%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(255,255,255,1) 50%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 );
    content: "";
    position: absolute;
  }
  
  &:before{
    height: 3px;
    left: -110px;
    opacity: .3;
    transform: rotate(40deg);
    top: 45px;
    width: 300px;
  }
  
  &:after{
    height: 3px;
    left: -225px;
    opacity: .2;
    transform: rotate(-80deg);
    top: 40px;
    width: 500px;
  }
}
</style>
<span style="font-weight:bold;"><span style="font-weight:bold;"><span style="font-weight:bold;"></span> <a href="https://mhajjhassan.blogspot.com"></a></span></span>



من لوحة التحكم اذهب الى التخطيط .


3- ستظهر لك لوحة التخطيط اختر اضافة أداة .


  1. في النافذة التي تظهر، تحت "الأساسيات"، اعثر على HTML/جافا سكريبت وانقر على إضافة إضافة.
  2. أدخل عنوانًا (اختياري).
  3. انسخ الشفرة من موقع  على الويب والصقها في قسم المحتوى.
  4. انقر على حفظ. 



تعليقات