منوعات: شروحات و اكواد

‏إظهار الرسائل ذات التسميات شروحات و اكواد. إظهار كافة الرسائل

اسباب قد تؤدي الى حذف مدونتك وحرمانك من بلوجر بالكامل😓

مارس 11, 2020

اسباب قد تؤدي الى حذف مدونتك وحرمانك من بلوجر بالكامل 😓

تعتبر بلوجر واحدة من أفضل و أشهر منصات التدوين على الانترنت , و يستعملها الملايين من الناس حول العالم , لسهولة التعاملة معها و الأهم مجانيتها و ضمان بقائها بما أنها واحدة من خدمات شركة جوجل المعروفة فهذا يجعلها مؤمنة لأقصى درجة .
لكن هناك بضع أسباب قد تجعل جوجل نفسها تعيد النظر في مدونتك و قد يؤدي الامر في النهاية الى حذفها و يضيع معها كل جهذك و تعبك , لذلك قمت بكتابة هذه التدوينة مع 10 من أسباب حذف مدونات بلوجر من أجل تفاديها و الحفاظ على مدونة Blogger الخاصة بك و ضمان بقائها .

1 – العنف :

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

2 – خطاب الكراهية :

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

3 -النشاط الغير قاونوني :

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

4 – المواد المحفوظة بحقوق النشر :

أي مدونة تحتوي على مواد محفوظة بحقوق النشر مثل سيريالات البرامج و الافلام و الاغاني ستؤول الى الاغلاق ..

5 – المحتوى الاباحي :

لا حاجة لشرح هذه النقطة , فأي مدونة تحتوي على محتوى إباحي ستقوم بلوجر بإغلاقها حالا .

6 – إنتهاك الخصوصية :

أي مدونة تحتوي على خصوصيات أشخاص أخرين سيتم حذفها , مثلا أرقام بطاقات الائتمان , أو أرقام هواتف و صور أشخاص غير مصرح لك بنشرها , أو حتى التشجيع على إنتهاك خصوصيات الافراد و تعليم ذلك عبر دروس الهاكر و ما شابه .

7 – المحتوى المقزز :

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

8 – الادعاء أو النصب :

إنتحال هويات الاشخاص ممنوع تماما , مثلا فتح مدونة و الادعاء فيها بأنك لاعب كرة قدم مشهور أو ممثل أو ما شابه , بالاساس إنتحال هوية شخص أخر .

9 – سلامة الاطفال :

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

10 – البرمجيات الخبيثة :

إذا كانت مدونتك تحتوي على فيروس أو فيها روابط مؤدية لفيروسات أو برمجيات خبيثة أيا كانت فسيتم إغلاقها لأنها تشكل خطر على المستخدمين .

إضافة ثلاثة أعمدة في الفوتر لمدونة بلوجر blogger

مارس 10, 2020

إضافة ثلاثة أعمدة في الفوتر لمدونة بلوجر blogger

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

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

ادخل مدونتك.
القالب .
ابحث عن </body>
الصق هذا الكود قبله :

/* -----   three column footer   ----- */
#ll-7lolblogger {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#F5F5F5;
}
#ol-7lolblogger {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}
#jn-7lolblogger {
     border:1px solid #DEDEDE;
       background:#fff;
       float: right;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word;
       overflow: hidden;
}
       .pl-7lolblogger {margin: 0; padding: 0;}
       .pl-7lolblogger .widget {margin: 0; padding: 10px 20px 0px 20px;}
.pl-7lolblogger h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: right;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 13px Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}
.pl-7lolblogger ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}
.pl-7lolblogger li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

اذا ارت التعديل يمكنك البحث في الكود السابق عن:

#ll-7lolblogger لتخصيص خلفية الادوات وقد حددت لك كود الخلفية .
#ol-7lolblogger الصندوق الذي يحمل هذه الثلاث الصناديق وتستطيع تغير حجمه من خلال 960px.
#jn-7lolblogger الصناديق الثلاث.
.pl-7lolblogger h2 عنوان الصناديق h2 .

💓>>اتمنى ان يكون الشرح مفيد لكم<<💓

حلول بلوجر

اضافة ازرار التواصل الاجتماعي بتأثيرات مذهلة😉

مارس 10, 2020

اضافة ازرار التواصل الاجتماعي بتأثيرات مذهلة😉

اضافة ازرار التواصل الاجتماعي بتأثيرات مذهله

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

مثال مباشر :

صورة :

إاضافة ازرار التواصل الاجتماعي بتأثيرات مذهلة😉

الاكواد :

اكواد html

اكواد css :

@import "compass/css3";
*{
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  font-family:arial;
}
body{
  background: #404040;;
  padding:0;
  margin:0;
  text-align: center;
  font-family: arial;
  color: #fff;
}
/*=====================*/
$fb-cl:#3B579D;
$twt-cl:#00ACED;
$gp-cl:#DD4A3A;
$in-cl:#007BB6;
$pin-cl:#CB2026;
@function shadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 30 {
    $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}

.social-nav{
  padding: 0;
  list-style: none;
  display: inline-block;
  margin:10px auto;
  li{
    display: inline-block;
  }
  a {
    display: inline-block;
    float: left;
    width: 48px;
    height: 48px;
    font-size: 20px;
    color: #FFF;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    line-height: 48px;
    background: #000;
    position: relative;
    @include transition(.5s);
  }
}

.model-0{
  position: absolute;
  @include transition(.5s);
  left:0;
  top: 50px;
  li{
    float: none;
    display: block;
  }
  a{
    &:hover{
    padding-left: 20px;
    width:65px;
    }
  }
  .twitter{ background:$twt-cl}
  .facebook{ background:$fb-cl}
  .google-plus{background:$gp-cl}
  .linkedin{background:$in-cl}
  .pinterest{ background:$pin-cl}
}
.model-1{
  li{margin:0 2px ;}
  a{
    background: #fff;
    @include transition(transform 1s, background .4s);
    @include border-radius(100%);
    &:hover{
      @include translateY(-10px);
    }
  }
   .twitter{ color:$twt-cl}
   .facebook{color:$fb-cl}
   .google-plus{color:$gp-cl;}
   .linkedin{color:$in-cl}
   .pinterest{color:$pin-cl}
}
.model-2{
  a{
    overflow: hidden;
    font-size: 26px;
    @include border-radius(4px);
    margin:0 5px;
    &:hover{
       background: #fff;
       @include text-shadow( shadow(darken(#eee, 10%)));
    }
  }

.twitter{
    background:$twt-cl;
    @include text-shadow( shadow(darken($twt-cl, 10%)));
    &:hover{color:$twt-cl;}
  }
  .facebook{
    background:$fb-cl;
    @include text-shadow( shadow(darken($fb-cl, 10%)));
    &:hover{ color:$fb-cl}
  }
  .google-plus{
    background:$gp-cl;
    @include text-shadow( shadow(darken($gp-cl, 10%)));
    &:hover{ color:$gp-cl}
  }
  .linkedin{
    background:$in-cl;
    @include text-shadow( shadow(darken($in-cl, 10%)));
    &:hover{ color:$in-cl}
  }
  .pinterest{
    background:$pin-cl;
    @include text-shadow( shadow(darken($pin-cl, 10%)));
    &:hover{ color:$pin-cl}
  }
}
.model-3{
  margin-bottom: 50px;
  a{
    background: #fff;
    @include transition(padding .4s);
    margin: 0 5px;
    &:after{
      content: '';
      position: absolute ;
      border:24px solid #fff;
      z-index: -1;
      border-bottom-color:transparent !important;
      left: 0;
      top:60%;
      @include transition(transform .4s);
    }
    &:hover{
       color: #fff;
       padding-top: 10px;
       &:after{
         @include translateY(10px);
       }
    }
  }

.twitter{
    color:$twt-cl;
    &:hover{ background:$twt-cl;
    &:after{border-color: $twt-cl}
    }
  }
  .facebook{
    color:$fb-cl;
    &:hover{ background:$fb-cl;
    &:after{border-color: $fb-cl}
    }
  }
  .google-plus{
    color:$gp-cl;
    &:hover{ background:$gp-cl;
    &:after{border-color: $gp-cl}
    }
  }
  .linkedin{
    color:$in-cl;
    &:hover{ background:$in-cl;
    &:after{border-color: $in-cl}
    }
  }
  .pinterest{
    color:$pin-cl;
    &:hover{ background:$pin-cl;
    &:after{border-color: $pin-cl}
    }
  }
}
.model-4{
  li{margin:0 2px ;}
  a{
    background:none;
    line-height: 1.5;
    font-size: 32px;
    @include text-shadow(0px 0px 1px );
    &:hover{
      @include text-shadow(0px 0px 25px );
    }
  }
   .twitter{ color:$twt-cl}
   .facebook{color:$fb-cl}
   .google-plus{color:$gp-cl;}
   .linkedin{color:$in-cl}
   .pinterest{color:$pin-cl}
}
.model-5{
  li{float: left;}
  a{background: #222;}
  .twitter:hover{ color:$twt-cl}
  .facebook:hover{color:$fb-cl}
  .google-plus:hover{color:$gp-cl}
  .linkedin:hover{color:$in-cl}
  .pinterest:hover{color:$pin-cl}
}
.model-6{
  li{float: left;}
  a{
    &:hover{background: #fff;}
  }
  .twitter{
    background:$twt-cl;
    &:hover{ color:$twt-cl}
  }
  .facebook{
    background:$fb-cl;
    &:hover{ color:$fb-cl}
  }
  .google-plus{
    background:$gp-cl;
    &:hover{color:$gp-cl}
  }
  .linkedin{
    background:$in-cl;
    &:hover{ color:$in-cl}
  }
  .pinterest{
    background:$pin-cl;
    &:hover{ color:$pin-cl}
  }
}
.model-7{
  li{margin:0 10px ;}
  a{
    background: none;
    @include box-shadow(0 0 4px 3px);
    @include text-shadow(0 0 1px #333);
    @include transition(transform .4s, background .4s);
    @include border-radius(100%);
    .fa{ @include transition(transform 1s)}
    &:hover{
      background: #fff;
      .fa{ @include transform( rotate(-10deg) scale(3))}
    }
  }
   .twitter{ color:$twt-cl}
   .facebook{color:$fb-cl}
   .google-plus{color:$gp-cl;}
   .linkedin{color:$in-cl}
   .pinterest{color:$pin-cl}
}
.model-8{
  a{
    background: #FFF;
    &:hover{
        @include box-shadow(0 48px  0  inset);
        &> .fa{color:#fff}
      }
  }
  .twitter{
    color:$twt-cl;
    &:hover{ color:$twt-cl}
  }
  .facebook{
    color:$fb-cl;
    &:hover{color:$fb-cl}
  }
  .google-plus{
    color:$gp-cl;
    &:hover{ color:$gp-cl}
  }
  .linkedin{
    color:$in-cl;
    &:hover{ color:$in-cl}
  }
  .pinterest{
    color:$pin-cl;
    &:hover{color:$pin-cl}
  }
}
.model-9{
  li{margin:0 10px ;}
  a{
    color: #fff;
    overflow: hidden;
    @include border-radius(100%);
    &:hover{
      background: #fff;
   
    }
  }
  .twitter{
    background:$twt-cl;
    &:hover{ color:$twt-cl}
  }
  .facebook{
    background:$fb-cl;
    &:hover{ color:$fb-cl}
  }
  .google-plus{
    background:$gp-cl;
    &:hover{color:$gp-cl}
  }
  .linkedin{
    background:$in-cl;
    &:hover{ color:$in-cl}
  }
  .pinterest{
    background:$pin-cl;
    &:hover{ color:$pin-cl}
  }
}
.model-3d-0{
  a {
    background: #333;
    float: left;
    margin:0 10px;
    @include transform-style(preserve-3d);
    &:hover {
      @include rotateX(-90deg);
      .fornt{ @include backface-visibility (hidden);}
      .back{ @include backface-visibility (visible);}
    }
  }
  .front , .back{
    width: 48px;
    height: 48px;
    background: #333;
    position: absolute;
    top: 0;
    left: 0;
    @include translateZ(18px);
    @include backface-visibility (visible);
  }
  .back {
     font-size: 32px;
    @include transform(rotateX(90deg) translateZ(18px));
    @include backface-visibility (hidden);
  }
  .twitter .back { background: $twt-cl }
  .facebook  .back { background: $fb-cl }
  .google-plus .back { background: $gp-cl}
  .linkedin .back { background: $in-cl}
  .pinterest .back { background: $pin-cl}
}
.model-3d-1{
  a {
    background: #fff;
    color:#666;
    float: left;
    margin:0 10px;
    @include border-radius(100%);
    &:hover {
      color: #fff;
      @include rotateY(-180deg);
      .fornt{ @include backface-visibility (hidden);}
      .back{ @include backface-visibility (visible);}
    }
  }
  .front , .back{
    width: 48px;
    height: 48px;
    position: absolute;
    top: 0;
    left: 0;
    @include border-radius(100%);
    @include backface-visibility (visible);
  }
  .back {
    @include rotateY(-180deg);
    @include backface-visibility (hidden);
  }
  .twitter .back { background: $twt-cl }
  .facebook  .back { background: $fb-cl }
  .google-plus .back { background: $gp-cl}
  .linkedin .back { background: $in-cl}
  .pinterest .back { background: $pin-cl}
}

اكواد js وتوضع في اخر </body> :

شرح تقسيم السايد بار-sidebar لمدونة بلوجر الى قسمين

مارس 10, 2020

شرح تقسيم السايد بار-sidebar لمدونة بلوجر الى قسمين

شرح بسيط جدا ولا يوجد به اي صعوبه ولا يحتاج حتى الى تركيز تابع.

ادخل الى لوحة اداررة مدونتك .
ثم اذهب الى التخطيط.
اختر المكان المناسب للقطعتين .
اضف اداة عبارة عن : HTML/JavaScript
انسخ هذا الكود وضعه داخلها :