2015/02/15

Jak ustawić datę w kółeczku przy każdym poście na Bloggerze?

W tym poradniku pokażę ci, w jaki sposób umieścić datę w kółeczku przy każdym poście na Bloggerze.
Zobacz demo na blogu

1. Dodaj kod stylu widżetu

Wejdź do menu Szablon => Dostosuj.
Kliknij Zaawansowane => Dodaj arkusz CSS. W okienko wklej kod i wciśnij Enter. Na koniec kliknij Zastosuj do bloga.

3. Kod widżetu

.date-header span {
background-color:#d7ced1; /* kolor tła */
text-transform:uppercase;
text-align:center;
color:#fff; /* kolor czcionki */
height:37px;
width:37px;
margin-right:20px;
margin-top:10px;
font-weight:bold;
float:left;
font-family:Arial, sans-serif!important;
font-size:11px;
letter-spacing:-1px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
padding:13px 8px 3px;
}

2. Skonfiguruj ustawienia daty

W panelu admina przejdź do menu Ustawienia => Język i formatowanie, po czym w sekcji Formatowanie => Format nagłówka daty zmień na ten pokazany na obrazku poniżej. Na koniec Zapisz ustawienia.

3. Ustaw wyświetlanie daty przy każdym poście

Domyślne ustawienia szablonu powodują wyświetlanie daty tylko przy poście, który został opublikowany innego dnia. By ustawić wyświetlanie daty przy każdym poście, nawet tym dodanym tego samego dnia, co poprzedni postępuj następująco:

a) Wejdź do menu Szablon => Edytuj kod HTML.
b) Kliknij w okno edytora i wciśnij skrót Ctrl + F.
c) W wyszukiwarkę wpisz poniży kod i wciśnij Enter:
<!-- posts -->
d) Pod wyszukanym znacznikiem znajdź i zaznacz:

<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == "false"'>
</div></div>
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
<data:adEnd/>
</div>
e) Cały zaznaczony kod zamień na:
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<div class='date-outer'>
<script type='text/javascript'>var ssyby='<data:post.dateHeader/>';</script>
<h2 class='date-header'><span><script type='text/javascript'>document.write(ssyby);</script></span></h2>
<div class='date-posts'>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
</div>
</div>
</b:loop>
<data:adEnd/>
</div>
f) Na koniec Zapisz szablon.

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.