Друг вид притурка Популярни публикации

Как да се добави друг вид притурка (виджета) "Популярни публикации" за Blogger. В един от предишните ми постове видяхме как да добавите официалната притурка "Популярни публикации" в Blogger чрез вградените в него приспособления. Този начин на добавяне на виджетата е лесен и простичък, но не е еднакво привлекателен за различните Blogger шаблони.
И затова тук аз искам да ви покажа как можете да добавите персонализирана притурка "Популярни публикации", едно от най-интересните и желани приспособления в Blogger. Както можете да видите в предварителния преглед на тази виджета в снимката по-долу, тя е по-различна. След добавяне на тази притурка "Популярни публикации" към вашия блог, тя ще изглежда същата, както я виждате на снимката по-долу, но ако искате да я промените, можете да го направите по отношение на цветове, шрифтове, граници и други стилове.

 Можете да направите тези промени чрез редактиране на CSS кода, който ще ви бъде предоставен тук. Така че, нека да преминем към добавяне на различната притурка „Популярни публикации“ в блог на Blogspot. Вече сме добавили популярната притурка. За да я направим по-различна се налага да „бръкнем“ в HTML кода на шаблона. Стъпките са следните: първата и най-важната е да направите копие на шаблона си. Задължително е, ако нещо не се получи както трябва, да можете да го възстановите. По-нататък: влизаме в Blogger, шаблон, редактиране на HTML кода на шаблона и търсим малкия участък от него ]]></ b:skin>. 

Внимателно над него поставяме:

.PopularPosts h2{ padding-right:.4em; padding-left:1em } .popular-posts ul { padding-left: 0; counter-reset: trackit;/*setting counter-reset*/ } .popular-posts ul li { border-bottom: 1px solid #ffffff; list-style: none outside none !important; margin-left: 0 !important; overflow: hidden; padding: 10px 0 !important; transition: all 0.25s linear 0s; counter-increment: trackit;/*setting counter-increment*/ } .PopularPosts ul li:before{ content: counters(trackit, "."); padding: 0 .1em 0 0; font-size: 20px; font-weight: bold; color: #ffffff; float:left; margin-right:10px; } /* creates counter before lists */ .PopularPosts li:first-child{ border-top:1px solid #000000 } .PopularPosts li:nth-child(even) {background:#0099ff }/*define background color for even number lists*/ .PopularPosts li:nth-child(odd) {background:#000000 }/* define background for odd number lists */ .PopularPosts .item-thumbnail {display: true!important}, .PopularPosts .item-snippet { display: true!important}/* Hides Thumbnail and Snippet */ .PopularPosts a, .PopularPosts a:hover{ color:#ffffff; font-size:.9rem } #PopularPosts1 li{ padding-right: 1em !important; padding-left: 1em !important; } .widget.PopularPosts{padding:1.2em 0em !important}

Най-накрая натискаме запазване на шаблона и сме готови с друг вид притурка Популярни публикации!
Успех на всички ни!
Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд. Моля,гласувайте за блога ми на: