أضافة شريط أشعارات مثبت فوق مدونات بلوجر بشكل مميز

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

طريقة تخصيص الأداة للبلوجر

1-توجة الى لوحة التحكم في بلوجر وأختر منها "المظهر"
2-قم بالنقر على تحرير HTML
3-قم بالبحث عن ]]></b:skin> وقم بنسخ ولصق الكود التالي فوقة

#welcome_bar {width: auto; height: auto; display: block; text-align: center; padding: 12px; color: #fff; position: relative; font-size: 18px; font-weight: 500;}
#close_welcome_bar {display: inline-block; cursor: pointer; padding: 12px; position: absolute; top: 0px; right: 0; font-weight: bold; font-size: 18px;}
.addthis_sharing_toolbox {clear:initial!important;}
#close_welcome_bar:hover { background: #F04F3F}
#welcome_bar a{background: #fff; color: #f1ae28; padding: 8px 20px; border-radius: 100px; margin-left: 5px; font-weight: 600;}
#welcome_bar a:hover{background:#FC4F3F;color:#fff;}
.welcome-area {padding:20px;background: linear-gradient(270deg, #07d09c, #00aa7e, #c326fd, #ff08d5);
background-size: 800% 800%;

-webkit-animation: AnimationName 53s ease infinite;
-moz-animation: AnimationName 53s ease infinite;
-o-animation: AnimationName 53s ease infinite;
animation: AnimationName 10s ease infinite;}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

4-قم بالبحث مرة أخرى عن كود <body/> وقم بنسخ ولصق الكود التالي فوقة أو قم بوضع الكود في أي مكان تريدة

<div class="welcome-area">
<div id="welcome_bar">
  هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة <a href="http://bloggersinarabic.blogspot.com/2017/12/Add-a-bar-of-logos-installed-on-Blogger-blogs-in-a-distinctive-way.html" target="_blank">افحص هذا</a>
</div>
</div>

5-قم بعملية الحفظ

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