0

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

Друг вид притурка
Как да се добави друг вид притурка (виджета) "Популярни публикации" за 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}
      }


</script>

Най-накрая натискаме запазване на шаблона и сме готови!

Успех на всички ни!




Няма коментари :

Публикуване на коментар


Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита