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

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

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

مارس 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
انسخ هذا الكود وضعه داخلها :

تغيير شكل تصميم التخطيط في مدونة بلوجر

مارس 10, 2020

تغيير شكل تصميم التخطيط في مدونة بلوجر

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته.
تغيير شكل تصميم التخطيط في مدونة بلوجر
في الحقيقه سابقاَ حاولت كثيراَ لتغير شكل تصميم التخطيط في مدونة بلوجر ولاكن محاولاتي اتت بفشل , وفقدت الامل في هذه المسأله حتى وجدت الحل , اضع اليوم بين ايديكم الطريقة كاملة , وتستطيع التعديل كما تشاء مادمت لديك خلفيه عن CSS ولاكن يجب التنبيه انه عند تطبيق الطريقة لاننا سنقوم بترقية XML من الاصدار الاول الى الاصدار الثاني فستجد بعض الاختلافات في padding و margin الخاصة بـ ul و li وسيتوجب عليك تعديلها يدويا على العموم نبدأ.

صورة لشكل التخطيط بعد تغيير شكله :

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

اولاَ : ادخل قالبك .

حرر القالب وانظر الى بداية القالب ستجد كود شبيه بهذا :

<b:template-skin>
body#layout {
background: rgba(51,51,51,1);
    background: -moz-linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(51,51,51,1)), color-stop(50%, rgba(51,51,51,1)), color-stop(51%, rgba(65,65,65,1)), color-stop(51%, rgba(65,65,65,1)), color-stop(71%, rgba(65,65,65,1)), color-stop(100%, rgba(65,65,65,1)));
    background: -webkit-linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    background: -o-linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    background: linear-gradient(45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#414141', GradientType=1 );
    border: 1px solid #312F2D;
}
body#layout .section {
    background-color: rgba(54, 54, 54, 0.5) !important;
    border: 1px solid rgba(51, 51, 51, 0.5) !important;
}
body#layout .section h4 {
    color: #E6E6E6!important;
}
body#layout .widget-wrap2 {
    background: #984949!important;
}
body#layout .add_widget {
    background-color: rgba(51, 51, 51, 0.5)!important;
    border: 1px dashed rgba(74, 73, 73, 0.79)!important;
}
body#layout .add_widget a,body#layout div.layout-title {
    color: #B9B9B9!important;
    font: 11px tahoma!important;
}
body#layout .draggable-widget .widget-wrap3 {
 background: rgba(51,51,51,1);
    background: -moz-linear-gradient(-45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(51,51,51,1)), color-stop(50%, rgba(51,51,51,1)), color-stop(51%, rgba(65,65,65,1)), color-stop(51%, rgba(65,65,65,1)), color-stop(71%, rgba(65,65,65,1)), color-stop(100%, rgba(65,65,65,1)));
    background: -webkit-linear-gradient(-45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    background: linear-gradient(135deg, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 50%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 51%, rgba(65,65,65,1) 71%, rgba(65,65,65,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#414141', GradientType=1 );
}
body#layout .widget-content {
    border: 1px solid #353535!important;
}
body#layout .widget-content a {
    text-decoration: none;
    color: #B9B9B9!important;
    font: 11px tahoma !important;
    background-color: #333;
    padding: 2px 10px;
    border-radius: 5px;
}
body#layout .locked-widget .widget-content {
    background: rgba(51,51,51,1);
    background: -moz-linear-gradient(-45deg,rgba(51,51,51,1) 0%,rgba(51,51,51,1) 50%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 71%,rgba(65,65,65,1) 100%);
    background: -webkit-linear-gradient(-45deg,rgba(51,51,51,1) 0%,rgba(51,51,51,1) 50%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 71%,rgba(65,65,65,1) 100%);
    background: -o-linear-gradient(-45deg,rgba(51,51,51,1) 0%,rgba(51,51,51,1) 50%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 71%,rgba(65,65,65,1) 100%);
    background: -ms-linear-gradient(-45deg,rgba(51,51,51,1) 0%,rgba(51,51,51,1) 50%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 71%,rgba(65,65,65,1) 100%);
    background: linear-gradient(135deg,rgba(51,51,51,1) 0%,rgba(51,51,51,1) 50%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 51%,rgba(65,65,65,1) 71%,rgba(65,65,65,1) 100%);
}
  </b:template-skin>

تنسيق CSS في الكود السابق هو تنسيق عام , بمعنى انه سيركب على كل القوالب.

ثالثاَ : في حال الضرورة فقط ( في حال وجدت انه هناك اختلافات في القالب مثل زيادة في العرض او قيمة margin مختلفة الخ.. اضف هذا الكود قبل </b:skin> :

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

مارس 10, 2020

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

أنتقل ألى لوحة تحكم مدونتك.
إختر "تخطيط" ثم قم بإضافة أداة جديدة أختر HTML/javaScript.
أدخل الكود داخل المربع .

نقوم بلصق الكود التالي:

قبل حفظ الأداة نقوم باضافة المواضيع التي نود ظهورها على السلايد شو كمايلي :

نضع مكان الرمز xxxxx رابط الموضوع (الرابط الإلكتروني للموضوع )

نضع مكان الرمز ppppp رابط الصورة (الرابط الإلكتروني لصورة الموضوع)

نضع مكان الرمز ttttt عنوان الموضوع (أو نختار عنوان أخر للموضوع )

ثم نقوم بحفظ الإضافة

2- التحكم في ارتفاع وعرض الأداة (الإطار الخارجي) نقوم بالبحث عن الكود التالي :

#slider {

width: 468px;

height: 260px;

لتغيير عرض الأداة width

لتغيير ارتفاع الأداة height

3- تغيير لون السلايدشو الصغيرة (التي يتم بها عرض عنوان الموضوع ) نبحث عن الكود التالي :

background-color: #0066CC;

4- تغيير حجم ولون خط عنوان الموضوع (عناوين المواضيع المعروضة على السلايد شو) ابحث عن الكود التالي :

font: bold 25px/21px traditional arabic ;

الرمز traditional arabic لإستبدال نوع الخط

الرمز 25px حجم الخط .