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

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

المعاينة

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

1-أنتقل الى لوحة التحكم في بلوجر لمدونتك
2-من لوحة التحكم أختر التخطيط
3-قم بأضافة أداة جديدة وأختر HTML/Java Script
4-قم بنسخ ولصق الكود التالي داخل أداة  HTML/Java Script

<div class="widget-content">
<style type="text/css">
.noop-random-posts ul li {
    list-style-image:none;
}.noop-random-posts ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
.noop-random-posts ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
.noop-random-posts ul li:first-child {
background: none repeat scroll 0 0 #FF4C54;
width: 89%;
}
.noop-random-posts ul li:first-child:after {
content: "1";
}
.noop-random-posts ul li:first-child + li {
background: none repeat scroll 0 0 #FF764C;
width: 87%;
}
.noop-random-posts ul li:first-child + li:after {
content: "2";
}
.noop-random-posts ul li:first-child + li + li {
background: none repeat scroll 0 0 #FFDE4C;
width: 84%;
}
.noop-random-posts ul li:first-child + li + li:after {
content: "3";
}
.noop-random-posts ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 81%;
}
.noop-random-posts ul li:first-child + li + li + li:after {
content: "4";
}
.noop-random-posts ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #33C9F7;
width: 78%;
}
.noop-random-posts ul li:first-child + li + li + li + li:after {
content: "5";
}
.noop-random-posts ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #7EE3C7;
width: 75%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li:after {
content: "6";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F6993D;
width: 72%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F59095;
width: 69%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 66%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
.noop-random-posts ul li a {
color: #444444;
font-size: 13px;
text-decoration: none;
}
</style>
<div class="noop-random-posts">


<ul>



<li><a href="https://kkpdsd.blogspot.com/2017/11/blog-post_2.html" target="_blank" class="external_link"><b>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة</b></a></li>

<li><a href="https://bloggersinarabic.blogspot.com/2017/11/MagOne-Template.html" target="_blank" class="external_link"><b>قالب MagOne معرب من بلوغر بالعربي</b></a></li>


<li><a href="https://bloggersinarabic.blogspot.com/2017/11/Add-the-search-box-in-different-formats-of-blogger-blogs.html" target="_blank" class="external_link"><b>اضافة مربع البحث بأشكال مختلفة لمدونات بلوجر</b></a></li>



<li><a href="https://bloggersinarabic.blogspot.com/2017/11/3-models-of-buttons-social-networking-sites-neatly.html" target="_blank" class="external_link"><b>3 نماذج لأزرار مواقع التواصل الاجتماعي بشكل أنيق</b></a></li>



<li><a href="https://bloggersinarabic.blogspot.com/2017/11/Template-of-SoraZine-translated-from-Arabic-blogger.html" target="_blank" class="external_link"><b>قالب SoraZine معرب من بلوغر بالعربي</b></a></li>


<li><a href="https://bloggersinarabic.blogspot.com/2017/11/The-Litemag-template-is-translated-from-Arabic-to-Blogger.html" target="_blank" class="external_link"><b>قالب Litemag معرب من بلوغر بالعربي</b></a>


</li><li><a href="https://bloggersinarabic.blogspot.com/2017/11/Add-the-download-and-preview-buttons-professionally.html" target="_blank" class="external_link"><b>أضافة ازرار التحميل والمعاينة بشكل أحترافي</b></a></li>


<li><a href="https://bloggersinarabic.blogspot.com/2017/11/Add-the-Back-to-Top-button-to-the-blogger.html" target="_blank" class="external_link"><b>أظافة زر "العودة الى الأعلى" للبلوجر </b></a></li>



<li><a href="https://bloggersinarabic.blogspot.com/2017/11/Sitemap-of-Logar-blogs-professionally.html" target="_blank" class="external_link"><b>عمل خريطة الموقع لمدونات لوجر بطريقة أحترافية</b></a></li>


</ul>

</div><!-- Dont edit this code or it will not work -->
</div>

5-قبل عملية الحفظ قبل بتغيير رابط الموضوع وعنوان الموضوع الى روابطك الخاصة وعنوان الموضوع الخاص بك
6-قم بعملية الحفظ

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