قوس قزح ملون المواضيع الاكثر مشاهدة الشريط الجانبي القطعة للمدون

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

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


قد ترغب أيضا:
إضافة مرقمة شعبية المشاركات القطعة في مدونة المدون / موقع
إضافة مدور تصغير شعبية المشاركات القطعة في مدون
اسمحوا لي أن أشرح كيفية إضافة هذه المشاركات شعبية قوس قزح ملون القطعة لبلوق المدون الخاص بك. اتبع الخطوات البسيطة التالية.


انتقل إلى لوحة مدون ---> قسم تخطيط ---> إضافة أداة --->المواضيع الاكثر مشاهدة

في حين اضاف المشاركات شعبية ويدجت في تخطيط مدونة، أزل كل الصورة المصغرة الصورة ومقتطف

إضافة كود CSS في قالب المدونة


انتقل إلى لوحة مدون ---> قالب ---> تحرير HTML
البحث عن]]></b:skin>

<----trickstoo rainbow colored popular posts widget starts---->

.sidebar .PopularPosts .widget-content ul li{

height: 100%;

line-height: 22px;

float: left;

clear: left;

list-style-type: none;

overflow: hidden;

color: gray;

}

.sidebar .PopularPosts .widget-content ul{

margin:0;padding:5px 0;list-style-type:none;}

.sidebar .PopularPosts .widget-content ul li{

position:relative;margin:5px 0;border:0;padding:10px;opacity:0.8;

-webkit-transition:all 0.4s;

-moz-transition:all 0.4s;

-ms-transition:all 0.4s;

-o-transition:all 0.4s;}

.sidebar .PopularPosts .widget-content ul li:hover {

border-radius:30px 0px 0px 0px;margin-left:10px;opacity:1.0}

.sidebar .PopularPosts .widget-content ul li:first-child {background:red;width:90%}

.sidebar .PopularPosts .widget-content ul li:first-child:after{content:"1"}

.sidebar .PopularPosts .widget-content ul li:first-child + li{background:orange;width:80%}

.sidebar .PopularPosts .widget-content ul li:first-child + li:after{content:"2"}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li{background:yellow;width:70%}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after{content:"3"}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li{background:green;width:60%}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"4"}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li{background:blue;width:40%;padding-right:20px;}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"5"}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:indigo;width:30%}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after{content:"6"}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:violet;width:20%}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{content:"7"}

.sidebar .PopularPosts .widget-content ul li:first-child:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{position:absolute;

top:15px;

right:-5px;border-radius:9%;background:#353535;

width:30px;height:40px;line-height:1em;text-align:center;

font-size:22px;color:#fff;}

.sidebar .PopularPosts .widget-content ul li .item-thumbnail{

float:left;border:0;

margin-right:10px;

background:transparent;

padding:0;width:30px;height:90px}

.sidebar .PopularPosts .widget-content ul li a{

font-size:12px;

font-weight:bold;

color:white;text-decoration:none;

text-shadow:0px 0px 6px white;

-webkit-transition:all 0.4s;

-moz-transition:all 0.4s;

-ms-transition:all 0.4s;

-o-transition:all 0.4s;

}

.sidebar .PopularPosts .widget-content ul li a:hover{

color:black;text-decoration:none;text-shadow:1px 1px 1px white;}

<----trickstoo rainbow colored popular posts widget ends---->

أخيرا، احفظ القالب. 

هذا كل شيء. أنت فعلت!

إذا واجهت أي مشكلة، لا تتردد والتعليق أدناه للحصول على الحل. مشاركة تجربتك معنا.