Jak efektownie zmienić wygląd Polecanego Posta w bloggerze?

Blogger niedawno udostępnił nowy gadżet - Polecany Post. Sam w sobie prezentuje się całkiem nieźle, o ile znajduje się w pasku bocznym. Można jednak go fajnie wykorzystać do efektownego promowania konkretnego posta tuż pod nagłówkiem. Jak zmienić wygląd tego gadżetu?

Jak dodać gadżet Polecany Post?

Zacznijmy od tego jak umieścić Polecany Post na Twoim blogu. Wejdź w panel bloga → Dodaj gadżet → Polecany post (drugi od góry). 

Jak edytować Polecany Post?

W ustawieniach gadżetu możesz wybrać co chcesz wyświetlać - tytuł posta, fragment tekstu czy/i obraz (zawsze będzie do pierwszy obraz dodany do posta). Żeby wybrać konkretny wpis, pod napisem "wybierz polecanego posta" kliknij na jedną etykietę z rozwijanej listy. Poniżej pojawią ci się wszystkie wpisy z tej kategorii. Jeśli masz ich dużo, a chcesz znaleźć konkretny, możesz skorzystać dodatkowo z wyszukiwarki obok "wybierz etykietę". Teraz zaznacz wybrany post, a obok pojawi ci się podgląd standardowego wyglądu. Na koniec wystarczy zapisać zmiany. Gotowe!

Jak zmienić wygląd Polecanego Posta?

Standardowo gadżet wyświetla tytuł posta, pod nim fragment tekstu, a jeszcze niżej miniaturę (o ile zaznaczyliśmy wszystkie opcje). W pasku bocznym taki układ prezentuje się bardzo ładnie. Można jednak umieścić go także tuż pod nagłówkiem, czy menu, a wtedy może być świetną alternatywą dla slidera! Niestety tradycyjny wygląd nie jest zbyt efektowny. Jak to zmienić?

Wejdź w panel bloga → Układ → Projektant Szablonów → Zaawansowane → Dodaj arkusz css i wlej ten kod:

#FeaturedPost1 h3 a:hover {color:#000!important;border-color:#000;}

#FeaturedPost1 h3 {important;border:1px solid #fff;position:relative}
#FeaturedPost1 h3 a {border:1px solid #fff;color: #fff; font-size:25px; position: absolute;right: 0;left: 0px;margin: 0px auto;text-align: center;padding:20px;top: 200px;width: 60%;min-height: 26px;overflow: hidden;text-transform:uppercase;}
#FeaturedPost1 {height:450px;overflow:hidden;}
#FeaturedPost1 p {display:none!important;}

Efekt po zmianach możesz zobaczyć poniżej (kliknij na zdjęcie by powiększyć):

Co możesz zmienić?

color:#000 - zmień kolor czcionki

font-size:25px - zmień wielkość czcionki

border-color:#000 - zmień kolor ramki

border:1px solid #fff - zmień kolor i grubość ramki

font-size:25px - zmień wielkość czcionki

Jak Ci się podoba? Będę wdzięczna jeśli skorzystasz z przycisków poniżej i puścisz tą instrukcję dalej :)