Оптимизация на "Популярни постове"

5 март 2015 г.

Много, много хора ме питат как направих приставката с "Популярни постове" да изглежда по този начин и реших за по-лесно да направя пост за всички. Не мисля, че този пост ще работи за хора, които използват WordPress или друга платформа, но на Блогър е тествано и работи на 100% след лека оптимизация на кода, който ще ви дам по-долу.


Стъпка 1. Направете BackUp на темплейта си. За да може, ако объркате нещо бързо и безпроблемно да се върнете в начална точка, ако объркате нещо. Така без страх може да разбъркате кода на блога си.

Стъпка 2. Влезте в Dashboard - Layout - Add a Gadget и добавете приставката за Popular Posts, ако не я ползвате в момента. Не забравяйте да цъкнете "Image thumbnail" и да махнете отметката на "Snippet"

Стъпка 3. Обратно в Dashboard, но този път в Template натиснете “Edit HTML" Щом вече сте влeзли в страницата с HTML кода на блога си кликнете в полето за писане и натиснете CTRL + F и потърсете следния текст:
</head>
Точно над текста </head>, копирайте следния код:
<style type='text/css'>
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: 180px;
overflow: hidden;
width: 240px;
margin-left: -10px;}
.PopularPosts .item-thumbnail img {
position: relative;
top: -30px;
transition:all .2s linear;
 -o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.PopularPosts .item-thumbnail img:hover{
opacity:.6;
filter:alpha(opacity=60)
}
.PopularPosts .widget-content ul li {
color: #555555;
}
.PopularPosts .item-title {
clear:both;
font: 10px verdana;
color: #222222;
text-transform: uppercase;
text-align: center;
margin-right: 10px;}
.PopularPosts .item-snippet {
display: none;
}
.widget .widget-item-control a img {
height: 18px;
width: 18px;
}
</style>
Стъпка 4. Докато сте все още на същата страница потърсете:
</body>
и точно над надписа поставете следния код:
<script type='text/javascript'>                
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,&quot;s&quot;+size+&quot;-c&quot;);
var thumbnails = blogGadget.getElementsByTagName(&quot;img&quot;);
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize(&quot;PopularPosts1&quot;,240);                
</script>
Стъпка 5. Сега може да нанесете леки промени по кода, за да може приставката да пасне добре с темата ви. Може да променяте стойностите на всичко обозначено в червено за по-добър изглед.

*Важно: трябва да сте сигурни, че двете стойности обозначени в червено са равни, иначе картинката няма да излиза правилно.

Стъпка 6. Сега като картинките ви вече изглеждат прилично, трябва да оправите подравняването за да центрирате приставката. Ще забележите, че каквото и да правите приставката отрязва част от краищата на снимките, но просто така работи.

Първо регулирайте синята част от кода (пробвайте различни стойности, запазвайте и вижте как изглежда, променяйте стойността и рефрешвайте страницата на блога си докато не стигнете желания изглед)

Стъпка 7. Регулирайте розовата част от кода за да преправите надписа под картинката.

Стъпка 8. Натиснете за последен път “Save Template” и се наслаждавайте на приставката си. Ако нещо не е наред винаги може да се върнете от изходна точка с рестора, който направите преди да започнем.
Ако имайте някакви въпроси ме питайте, аз доста съм променила кода, така че за някои може да не е толкова лесно колкото изглежда. Може да се наложи да променяте повече стойности или да се добавя код. Питайте ме.

Тази статия е видяна и преведена от тук, мястото от което научих за кода, иначе темата на блога ми дойде с друга версия на същия код, част от който също заложих в изгледа на моята приставка. Надявам се, съм била полезна.

BLOGLOVIN • FACEBOOK • INSTAGRAM  • TWITTER

2 коментара

  1. Искам и аз! Супер, благодаря! От кога го търсих този код, отивам да си правя и аз *вълнуващо си човърка блога*

    ОтговорИзтриване
  2. Хубаво е Мани, че си споделила кода, но си пропуснала важна част от величините поради, която е възможно да не работи при някои потребители. "PopularPosts1" също е величина и по точно ID на widget-a. При някои дизайнерски теми, той винаги е различен. За да работи коректно показания от теб код, трябва да е свързан и с точното ID на потребителя, който го интегрира в неговия блог. По-просто казано, ако ползвате кода по-горе и при вас не се получава, то коригирайките PopularPosts1 с вашето ID на widtget-a. Например PopuparPost100.
    А оригиналния credits е от http://helplogger.blogspot.ca/ явно мацката, от която си го видяла е пропуснала тази величина.
    Поздрави!

    ОтговорИзтриване