Beauty

Nasz szablon dla Bloggera - Blue City


Demo Pobierz

Jak zainstalować szablon?

Co zrobić, gdy wyskakuje błąd podczas instalacji szablonu?

Jak włączyć szablon mobilny?


1. Jak edytować górne menu?

W edycji kodu HTML szablonu wyszukaj i edytuj kod (linijka 2125):
<ul id='menu-main1'>
                <li class='selected'>
                  <a href='/'>
                    Start
                  </a>
                </li>
                <li>
                  <a href='your-link-here'>
                    Autorzy
                  </a>
                </li>
                <li>
                  <a href='your-link-here'>
                    Forum
                  </a>
                </li>
                <li>
                  <a href='your-link-here'>
                    Współpraca
                  </a>
                </li>
                <li>
                  <a href='your-link-here'>
                    FAQ
                  </a>
                </li>
                <li>
                  <a href='your-link-here'>
                    Kontakt
                  </a>
                </li>
                <li>
                  <a href='your-link-here'>
                    Mapa strony
                  </a>
                </li>
              </ul>
# zamień na linki.

2. Jak wstawić rozwijane przyciski społecznościowe w nagłówku?

W menu Układ, dodaj gadżet HTML/JavaScript w nagłówku:
<style>
#top-social,
#top-custom-social {
    position: relative;
    float: right;
    height: 40px;
    margin: auto;
    font-family: 'Open Sans';
    font-size: 12px;
}

#top-custom-social {
    margin-right: 0;
}

#top-social ul, 
#top-menu ul, 
#top-custom-social ul {
    margin: 0;
}

#top-social li,
#top-social li a,
#top-social li .ts-icon,
#top-social li .ts-text {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
}

.ts-text {
    top: -40px;
    left: 40px;
}

#top-social li,
#top-social li a,
#top-social li .ts-text {
    float: left;
    width: auto;
    overflow: hidden;
    webkit-transition: all ease-in-out .2s;
    -moz-transition: all ease-in-out .2s;
    -o-transition: all ease-in-out .2s;
    transition: all ease-in-out .2s;
}

#top-social li a {
    width: 40px;
    line-height: 40px;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

#top-social li .ts-icon {
    float: left;
}

#top-social li.ts-facebook a {
    background-color: #3B5998;
}

#top-social li.ts-facebook .ts-icon {
    background: url("http://1.bp.blogspot.com/-sG3YF1EjEHU/U3YLqeVDqJI/AAAAAAAACig/Ssh3akWMA9Y/s1600/facebook.png") no-repeat center center;
}

#top-social li.ts-twitter a {
    background-color: #3CF;
}

#top-social li.ts-twitter .ts-icon {
    background: url("http://2.bp.blogspot.com/-7TRieVpL0Do/U3YLygnvWlI/AAAAAAAACko/U8HXjex2JRA/s1600/twitter.png") no-repeat center center;
}

#top-social li.ts-gplus a {
    background-color: #BD3518;
}

#top-social li.ts-gplus .ts-icon {
    background: url("http://2.bp.blogspot.com/-J65T5DDFmGA/U3YLsQjIJ-I/AAAAAAAACjE/mzdFbksJX-8/s1600/gplus.png") no-repeat center center;
}

#top-social li.ts-dribbble a {
    background-color: #D97AA5;
}

#top-social li.ts-dribbble .ts-icon {
    background: url("http://3.bp.blogspot.com/-IZTTI5NPGuE/U3YLpm65MQI/AAAAAAAAClk/x9DNwmbtZsE/s1600/dribbble.png") no-repeat center center;
}

#top-social li.ts-instagram a {
    background-color: #517FA4;
}

#top-social li.ts-instagram .ts-icon {
    background: url("http://3.bp.blogspot.com/-sTK6n7pusaA/U3YLtWaH62I/AAAAAAAACjU/zXBZYzKbuqI/s1600/instagram.png") no-repeat center center;
}

#top-social li.ts-forrst a {
    background-color: #304C25;
}

#top-social li.ts-forrst .ts-icon {
    background: url("http://3.bp.blogspot.com/-zMVVSWXiAq8/U3YLr0efB5I/AAAAAAAAClk/Ps_VoktRWLQ/s1600/forrst.png") no-repeat center center;
}

#top-social li.ts-blogger a {
    background-color: #FCA448;
}

#top-social li.ts-blogger .ts-icon {
    background: url("http://2.bp.blogspot.com/-ApMFb_vWI0s/U3YLptPEBpI/AAAAAAAAClk/zqtb9S5Gtw4/s1600/blogger.png") no-repeat center center;
}

#top-social li.ts-flickr a {
    background-color: #FF0084;
}

#top-social li.ts-flickr .ts-icon {
    background: url("http://3.bp.blogspot.com/-9s6wqujYMsE/U3YLrNGyN4I/AAAAAAAACi0/U6vUdDuTJvA/s1600/flickr.png") no-repeat center center;
}

#top-social li.ts-pinterest a {
    background-color: #CB2027;
}

#top-social li.ts-pinterest .ts-icon {
    background: url("http://2.bp.blogspot.com/-Y3L5v5ZT57Q/U3YLw-7ggzI/AAAAAAAAClg/_0WJEBsgBlI/s1600/pinterest.png") no-repeat center center;
}

#top-social li.ts-rss a {
    background-color: #F88F16;
}

#top-social li.ts-rss .ts-icon {
    background: url("http://4.bp.blogspot.com/-FaS42rrnU2A/U3YLxw_AzgI/AAAAAAAAClc/5oHfu6y-nnM/s1600/rss.png") no-repeat center center;
}

#top-social li.ts-vimeo a {
    background-color: #0590B8;
}

#top-social li.ts-vimeo .ts-icon {
    background: url("http://1.bp.blogspot.com/-LhNTQq4s8p0/U3YLzpIcmqI/AAAAAAAACk8/w8zkVefAHA0/s1600/vimeo.png") no-repeat center center;
}

#top-social li.ts-youtube a {
    background-color: #F33;
}

#top-social li.ts-youtube .ts-icon {
    background: url("http://2.bp.blogspot.com/-zUxuIiep2bk/U3YL0l16H4I/AAAAAAAAClA/ec0ubzqBD50/s1600/youtube.png") no-repeat center center;
}

#top-social li.ts-phone a {
    background-color: #4818AB;
}

#top-social li.ts-phone .ts-icon {
    background: url("http://4.bp.blogspot.com/-p1zKbm4ZiaU/U3YLv6pbVbI/AAAAAAAACkA/nZqTlNGKz2k/s1600/phone.png") no-repeat center center;
}

#top-social li.ts-mail a {
    background-color: #444;
}

#top-social li.ts-mail .ts-icon {
    background: url("http://3.bp.blogspot.com/-EGkzxTyci5o/U3YLvFWPewI/AAAAAAAACjw/VuJ24asmX2I/s1600/mail.png") no-repeat center center;
}

#top-social li.ts-linkedin a {
    background-color: #0A6495;
}

#top-social li.ts-linkedin .ts-icon {
    background: url("http://2.bp.blogspot.com/-phqIna__rRI/U3YLuG9B9uI/AAAAAAAACj8/id10r8rmLA0/s1600/linkedin.png") no-repeat center center;
}

#top-custom-social li {
    float: left;
    margin: 12px 0 12px 10px;
}

#top-custom-social li:first-child {
    margin-left: 0;
}

#top-custom-social li,
#top-custom-social a {
    display: block;
    width: 16px;
    height: 16px;
}

#top-social li.ts-facebook a:hover {
    padding-right: 70px;
}

#top-social li.ts-twitter a:hover {
    padding-right: 70px;
}

#top-social li.ts-gplus a:hover {
    padding-right: 70px;
}

#top-social li.ts-dribbble a:hover {
    padding-right: 70px;
}

#top-social li.ts-instagram a:hover {
    padding-right: 70px;
}

#top-social li.ts-forrst a:hover {
    padding-right: 70px;
}

#top-social li.ts-blogger a:hover {
    padding-right: 70px;
}

#top-social li.ts-flickr a:hover {
    padding-right: 70px;
}

#top-social li.ts-pinterest a:hover {
    padding-right: 70px;
}

#top-social li.ts-rss a:hover {
    padding-right: 70px;
}

#top-social li.ts-vimeo a:hover {
    padding-right: 70px;
}

#top-social li.ts-youtube a:hover {
    padding-right: 70px;
}

#top-social li.ts-phone a:hover {
    padding-right: 70px;
    width: 90px;
}

#top-social li.ts-mail a:hover {
    padding-right: 70px;
}

#top-social li.ts-linkedin a:hover {
    padding-right: 70px;
}

</style>

                             <div id='top-social'>
                                <ul>
                                  <li class='ts-facebook'>
                                    <a href='#' target='_blank'>
                                      <div class='ts-icon'>
                                      </div>
                                      <div class='ts-text'>
                                        Facebook
                                      </div>
                                    </a>
                                  </li>
                                  <li class='ts-twitter'>
                                    <a href='#' target='_blank'>
                                      <div class='ts-icon'>
                                      </div>
                                      <div class='ts-text'>
                                        Twitter
                                      </div>
                                    </a>
                                  </li>
                                  <li class='ts-gplus'>
                                    <a href='#' target='_blank'>
                                      <div class='ts-icon'>
                                      </div>
                                      <div class='ts-text'>
                                        Google+
                                      </div>
                                    </a>
                                  </li>
                                  <li class='ts-dribbble'>
                                    <a href='#' target='_blank'>
                                      <div class='ts-icon'>
                                      </div>
                                      <div class='ts-text'>
                                        Dribbble
                                      </div>
                                    </a>
                                  </li>
                                  <li class='ts-instagram'>
                                    <a href='#' target='_blank'>
                                      <div class='ts-icon'>
                                      </div>
                                      <div class='ts-text'>
                                        Instagram
                                      </div>
                                    </a>
                                  </li>
                                  <li class='ts-forrst'>
                                    <a href='#' target='_blank'>
                                      <div class='ts-icon'>
                                      </div>
                                      <div class='ts-text'>
                                        Forrst
                                      </div>
                                    </a>
                                  </li>
                                  <li class='ts-blogger'>
                                    <a href='#' target='_blank'>
                                      <div class='ts-icon'>
                                      </div>
                                      <div class='ts-text'>
                                        Blogger
                                      </div>
                                    </a>
                                  </li>
                                  <li class='ts-flickr'>
                                    <a href='#' target='_blank'>
                                      <div class='ts-icon'>
                                      </div>
                                      <div class='ts-text'>
                                        Flickr
                                      </div>
                                    </a>
                                  </li>
                                  <li class='ts-pinterest'>
                                    <a href='#' target='_blank'>
                                      <div class='ts-icon'>
                                      </div>
                                      <div class='ts-text'>
                                        Pinterest
                                      </div>
                                    </a>
                                  </li>
                                  <li class='ts-rss'>
                                    <a href='#' target='_blank'>
                                      <div class='ts-icon'>
                                      </div>
                                      <div class='ts-text'>
                                        RSS
                                      </div>
                                    </a>
                                  </li>
                                  <li class='ts-vimeo'>
                                    <a href='#' target='_blank'>
                                      <div class='ts-icon'>
                                      </div>
                                      <div class='ts-text'>
                                        Vimeo
                                      </div>
                                    </a>
                                  </li>
                                  <li class='ts-youtube'>
                                    <a href='#' target='_blank'>
                                      <div class='ts-icon'>
                                      </div>
                                      <div class='ts-text'>
                                        YouTube
                                      </div>
                                    </a>
                                  </li>
                                  <li class='ts-phone'>
                                    <a href='#' target='_blank'>
                                      <div class='ts-icon'>
                                      </div>
                                      <div class='ts-text'>
                                        Phone
                                      </div>
                                    </a>
                                  </li>
                                  <li class='ts-mail'>
                                    <a href='mailto:redakcja@strony.pl' target='_blank'>
                                      <div class='ts-icon'>
                                      </div>
                                      <div class='ts-text'>
                                        Email
                                      </div>
                                    </a>
                                  </li>
                                  <li class='ts-linkedin'>
                                    <a href='#' target='_blank'>
                                      <div class='ts-icon'>
                                      </div>
                                      <div class='ts-text'>
                                        Linkedin
                                      </div>
                                    </a>
                                  </li>
                                </ul>
                              </div>
                            </div>
# zamień na linki.

3. Jak dodać rozwijane menu pod nagłówkiem?

W edycji kodu szablonu wyszukaj i edytuj kod (linijka 2639):
<nav class='' id='main-nav' style='top: 0px;'>
                <div class='container'>
                  <div class='main-menu'>
                    <ul class='menu' id='menu-main'>
                      <li class='green'>
                        <a class='home' href='/'>
                          Start
                        </a>
                      </li>
                      <li class='yellow'>
                        <a href='#'>
                          WordPress
                        </a>
                        <ul class='sub-menu'>
                          <li>
                            <a href='#'>
                              Szablony
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              Wtyczki
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              Dodatki
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li class='orange'>
                        <a href='#'>
                          Blogger
                        </a>
                        <ul class='sub-menu'>
                          <li>
                            <a href='#'>
                              Szablony
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              Widżety
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              Poradniki
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li class='pink'>
                        <a href='#'>
                          Hostingi
                        </a>
                        <ul class='sub-menu'>
                          <li>
                            <a href='#'>
                              Najnowsze
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              Darmowe
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              Płatne
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li class='red'>
                        <a href='#'>
                          Google
                        </a>
                        <ul class='sub-menu'>
                          <li>
                            <a href='#'>
                              Wyszukiwarka
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              Google+
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              Picasa
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li class='purple'>
                        <a href='#'>
                          WWW
                        </a>
                        <ul class='sub-menu'>
                          <li>
                            <a href='#'>
                              Kreatory
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              Szablony
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              Kody
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li class='green'>
                        <a href='#'>
                          Programowanie
                        </a>
                        <ul class='sub-menu'>
                          <li>
                            <a href='#'>
                              CSS
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              HTML
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              JavaScript
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li class='teal'>
                        <a href='#'>
                          Społeczności
                        </a>
                        <ul class='sub-menu'>
                          <li>
                            <a href='#'>
                              Facebook
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              Twetter
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              YouTube
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li class='blue'>
                        <a href='#'>
                          Pomoc
                        </a>
                        <ul class='sub-menu'>
                          <li>
                            <a href='#'>
                              Mailowa
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              Na GG
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              Na forum
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li id='ranpost'/>
                      <script type='text/javascript'>
                        /*<![CDATA[*/
                        function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; document.getElementById('ranpost').appendChild(a); } </script>
                      <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
                        /*]]>*/
                      </script>
                    </ul>
                  </div>
                </div>
              </nav>
# zamień na linki.

4. Jak edytować ikony społecznościowe na pasku Newsów?

W edycji kodu szablonu wyszukaj i edytuj kod (linijka 2853):
                 <div id='social'>
                  <a class='facebook' href='http://www.facebook.com/'/>
                  <a class='twitter' href='https://twitter.com/'/>
                  <a class='flickr' href='http://www.flickr.com/'/>
                  <a class='pinterest' href='http://pinterest.com/'/>
                  <a class='googleplus' href='https://plus.google.com/'/>
                  <a class='vimeo' href='http://vimeo.com/'/>
                  <a class='youtube' href='http://www.youtube.com/'/>
                  <a class='mail' href='mailto:info@youremail'/>
                </div>
# zamień na linki.

Jak wstawić button?


W edytorze posta przełączonym do trybu HTML wklej i edytuj kod:
<a class="btn" href="#">Button</a>

Instagram