Przejdź do głównej zawartości

Porady HTML

1. Jak zrobić wielopoziomowe menu górne:
W kodzie po <header> albo przed <b:section class='navbar' id='navbar' maxwidgets='1' name='Navbar' showaddelement='no'> wpisujemy:

<style>
/* Some stylesheet reset */
.fin, .fin ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1;
}

/* Wygląd główny */
.fin {
    /* Marginesy i obramowanie */
    display: block;
margin-left: 0;
    position: fixed; top center; z-index: 999999;
    height: 45px;     /* wysokość */
    width: 100%; /* Zmień to, jeśli chcesz, żeby menu było szersze lub usuń całkowicie, jeśli chcesz, aby długość menu przybrała wartość &quot;domyślną&quot; (żeby menu było tak długie, jak pozwala na to zawartość */
    border-radius: 0px;     /* Wpisz większą wartość, jeżeli chcesz mieć zaokrąglone rogi */
    border: none;     /* kolor i grubość zwykłego obramowania */

    /* Tło oraz efekty podświetlenia linku */
    background: #ccc; /* Tło odczytywane w przeglądarkach IE9 oraz starszych */
    background: -webkit-linear-gradient(bottom, #ccc, #ccc); /* Tło dla Chrome i Safari */
    background: -moz-linear-gradient(bottom, #ccc, #ccc); /* Tło dla Firefoxa */
    background: -o-linear-gradient(bottom, #ccc, #ccc); /* Tło dla Opery */
    background: -ms-linear-gradient(bottom, #ccc, #ccc); /* Tło dla IE10 */
    box-shadow: inset 0 0px 0 ;     /* Cień menu */
}

.fin&gt;li {
    display: block;
    position: relative;
    float: left;
    margin: 0;
    padding: 0 1px 0 0;
}

/* Główne linki */
.fin&gt;li&gt;a {
    /* Layout */
    display: block;
    padding: 13px 29px;

    /* Styl napisów */
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    color: #000;
    text-shadow: none;

    /* Efekty */
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

/* Stan linków głównych po najechaniu na nie kursorem */
.fin&gt;li&gt;a:hover, .fin&gt;li:hover&gt;a {
    background: #000;    
    background: rgba(255, 255, 255, .6);
    color: #000;
    text-shadow: 2px 2px 2px #ffd800;
 
}

.fin&gt;li:first-child&gt;a {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.fin&gt;.dropdown&gt;a {
    padding-right: 26px;
}



.fin ul {
    position: relative;
    position: absolute;
    left: -9999px;
    display: block;
    box-shadow: 0 0px 0px rgba(0, 0, 0, .1);
}

/* Level 1 podmenu */
.fin&gt;li&gt;ul {
    padding-top: 0px;
    z-index: 99;
    border-top: 1px solid #fff;
    top: 34px;
}

/* Sprawianie, że lvl 1 wysunie się po najechaniu na niego myszką */
.fin&gt;li:hover&gt;ul {
    left: -1px;
}

/* Level 2+ podmenu */
.fin ul ul {
    left: -9999px;
    top: 0px;
    z-index: 999;
}

/* Sprawianie, że lvl 2+ menu wysuną się po najechaniu kursorem */
.fin ul&gt;li:hover&gt;ul {
    left: 120px;
    top: 1px;
}

/* Zawartość linków z podmenu */
.fin ul li {
    position: relative;
    display: block;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;

    /* Tworzenie efektu wysunięcia. Lista elementów, która się wysunie, ma 0 wysokości. Pojawi się dopiero wtedy, kiedy najedziemy kursorem w odpowiednie miejsce */
    height: 0px;
    -webkit-transition: height .4s;     /* Szybkość wysunięcia dla poszczególnych przeglądarek */
    -moz-transition: height .4s;
    -o-transition: height .4s;
    -ms-transition: height .4s;
}

/* Wysunięta lista linków */
.fin li:hover&gt;ul&gt;li {
    height: 35px;
}

.fin ul li:hover&gt;ul&gt;li:first-child {
    height: 35px;
}

/* Linki podmenu */
.fin ul li a {
    /* Styl */
    display: block;
    width: 200px;     /* Jeśli w podmenu napiszemy zbyt długi wyraz i nam go ucina, zwiększamy wartość szerokości */
    padding: 10px;     /* Odstęp od brzegów wysuniętej listy - od wszystkich krawędzi: prawej, lewej, górnej, dolnej */
    border-bottom: none;

    /* Styl napisów */
    font-size: 15px;
    color: #fff;
    text-shadow: 1px 1px 1px #ffd800;
    font-family:  Arial, sans-serif;
    text-decoration: none;
 
    /* Efekty tła */
    background: #000;
    -webkit-transition: background .4s;
    -moz-transition: background .4s;
    -ms-transition: background .4s;
    -o-transition: background .4s;
    transition: background .4s;
}

/* Stan napisów, kiedy najedziemy kursorem na linki */
.fin ul li&gt;a:hover, .fin ul li:hover&gt;a {
    background: #e9e9e9;
    color: #000; font-weight: 600;
}

.fin ul ul&gt;li:first-child&gt;a {
    border-top: 1px solid #fff;
}

.fin ul&gt;li:last-child&gt;a {
    border-bottom: 1px solid #fff;
}



.fin ul&gt;.dropdown:hover&gt;a::after, .fin ul&gt;.dropdown&gt;a:hover::after {
    border-color: #fff;
}
</style>
<ul class='fin'>
  <li><a href='#'>Strona główna</a></li>
    <li><a href='#'>Nazwa strony</a>
    <ul>
        <li><a href='#'>Nazwa podstrony</a></li>
        <li><a href='#'>Nazwa podstrony II</a></li>
        <li><a href='#'>Nazwa podstrony III</a></li>
        <li><a href='#'>Nazwa podstrony IV</a></li>
        <li><a href='#'>Nazwa podstrony V</a></li>
 
           
      </ul></li>

    <li><a href='#'>Nazwa strony II</a><ul>
<li><a href='#'>Nazwa podstrony</a></li>
        <li><a href='#'>Nazwa podstrony II</a></li>

      </ul></li>
    <li><a href='#'>Nazwa strony III</a>
<ul>
        <li><a href='#'>Nazwa podstrony</a></li>
        <li><a href='#'>Nazwa podstrony II</a></li>
<li><a href='#'>Nazwa podstrony III</a>
     
 
            </li>
      </ul></li>
<li><a href='#'>Nazwa strony IV</a></li>
<li><a href='#'>Nazwa strony V</a></li>
<li><a href='#'>Nazwa strony VI</a></li>
<li><a href='#'>Nazwa strony VII</a></li>
<li><a href='#'>Nazwa strony VIII</a></li>

    </ul>

2. Jak zrobić latające buttony:
Do układu bloga dodajemy:

<marquee behavior="scroll" align="center" direction="up" height="100" width="100%" scrollamount="3" scrolldelay="20" onmouseover="this.stop&#40;&#41;" onmouseout="this.start &#40;&#41;"><a href="####" target="_blank" title="Tytuł wyświetlany"><img src="Adres obrazka" alt="Ścieżka dostępu"  /></a><a href="####" target="_blank" title="Tytuł wyświetlany"><img src="Adres obrazka" alt="Ścieżka dostępu" /></a></marquee>

3. Jak zrobić własne archiwum:
Do układu bloga dodajemy:

<form><select style="width: 250px" onchange="window.open(this.options[this.selectedIndex].value,'_self')"
size=1 name=menu>

<option />Archiwum bloga
<!-- change the links with your own -->
<option value="####" />Data
<option value="####" />Data
<option value="####" />Data
<option value="####" />Data
</select></form>

4. Jak zrobić statystykę bloga:

<script>
<!--
/*
Count up from any date script-
By Website Abstraction (www.wsabstract.com)
Over 200+ free scripts here!
*/

var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

function countup(yr,m,d){
var today=new Date()
var todayy=today.getFullYear()
var todaym=today.getMonth()
var todayd=today.getDate()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy
var paststring=montharray[m-1]+" "+d+", "+yr
var difference=(Math.round((Date.parse(todaystring)-Date.parse(paststring))/(24*60*60*1000))*1)
difference+=" dni"
document.write("Blog istnieje "+difference+".")
}
//enter the count up date using the format year/month/day
countup(rrrr,mm,dd)
//-->
</script>
<script style="text/javascript">

function numberOfPosts(json) {
document.write('Liczba postów: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}

function numberOfComments(json) {
document.write('Liczba komentarzy: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}


</script>

<ul><li><script src="#####/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>


<li><script src="#####/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>

5. Jak zrobić numerowanie stron na blogu:
Do układu bloga dodajemy:

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(http://1.bp.blogspot.com/-U8Em8uxNiRk/TrqwS1Z9JVI/AAAAAAAAAF8/QEtTKMr5HIw/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
margin:0px 1px 0 1px;padding:3px 10px;color:#EEEEEE;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover {
background-image:url(http://1.bp.blogspot.com/-U8Em8uxNiRk/TrqwS1Z9JVI/AAAAAAAAAF8/QEtTKMr5HIw/s1600/yellow-butt.png) repeat-x;background-position:-10px -43px;
border:1px solid #FB5106;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(http://1.bp.blogspot.com/-U8Em8uxNiRk/TrqwS1Z9JVI/AAAAAAAAAF8/QEtTKMr5HIw/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;line-height:30px;padding:3px 10px;color:#ffffff;}.showpagePoint {background:transparent url(http://1.bp.blogspot.com/-U8Em8uxNiRk/TrqwS1Z9JVI/AAAAAAAAAF8/QEtTKMr5HIw/s1600/yellow-butt.png) repeat-x;background-position:-55px -43px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:1px solid #FB5106;-webkit-border-radius:7px;  -moz-border-radius:7px;border-radius:7px;color:#FFFFFF;text-decoration:underline;font-weight:bold;} </style><script style='text/javascript'>
var postperpage=2;
var numshowpage=3;
var upPageWord="Poprzednia";
var downPageWord="Następna";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js'></script>

6. Jak wstawić datę i godzinę na blog:
Data:

<script language="javascript">
<!-- W3e JAVAScript Preset/Date
var DDMMYY =0
var MMDDYY =1

function getdate(mode)
{
   var now = new Date();
   var dayNr = ((now.getDate()<10) ? "0" : "")+ now.getDate();
   if (mode==DDMMYY)
      var MonthDayYear =(dayNr+"/"+(now.getMonth()+1)+"/"+now.getFullYear());
   else
      var MonthDayYear =((now.getMonth()+1)+"/"+dayNr+"/"+now.getFullYear());

   return MonthDayYear;
}

function gettime()
{
   var now = new Date();

   var ampm = (now.getHours() >= 12) ? " P.M." : " A.M."
   var hours = now.getHours();
       hours = ((hours > 12) ? hours - 12 : hours);

   var minutes = ((now.getMinutes() < 10) ? ":0" : ":") + now.getMinutes();
   var seconds = ((now.getSeconds() < 10) ? ":0" : ":") + now.getSeconds();
   var TimeValue =(" " + hours + minutes + seconds + " "  + ampm);

   return TimeValue;
}//-->
</script>
<script language="javascript">document.write(getdate(DDMMYY));</script>

Godzina:

<div class="blockrow" align="center">
<script language="JavaScript">var clocksize=120;</script>
<script src="http://gheos.net/js/clock.js"></script>
</div>

lub:

<embed src="http://flash-clocks.com/analog-flash-clock.swf?timeOffset=local&faceColor=0xFFFFFF&numbersColor=0x222222&edgeColor=0xFFFFFF&centerColor=0x555555&hourHandColor=0x555555&minuteHandColor=0x555555&secondHandColor=0x555555" width=150px height=150px wmode="transparent" type="application/x-shockwave-flash"></embed>

7. Prosty tutorial mojego autorstwa:
Jak w rubryce "autor" zamienić link do profilu na zwykły tekst:

Na początku musicie odnaleźć w szablonie fragment kodu HTML (najprościej za pomocą CTRL+F) taki oto fragment: <div class='post-footer'><div class='post-footer-line post-footer-line-1'> Liczba ta może się różnić w zależności od tego, na jakim poziomie szablonu posta macie rubrykę "autor":


 Kiedy już odnajdziecie tenże fragment, zaraz za nim ujrzycie taki oto kod:

<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>
                </a>
              </span>
            <b:else/>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <span itemprop='name'><data:post.author/></span>
              </span>
            </b:if>
        </b:if>
      </span>

Usuńcie ten długi i nieprzyjazny kod zastępując go takim oto prościutkim i krótkim kodzikiem: 

<b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <span class='fn'><data:post.author/></span> </b:if>


Po wykonaniu tych czynności i zapisaniu szablonu będziecie mogli cieszyć się rubryką autor niezawierającą odnośnika do waszego profilu. Hurra!

8. Blokada kopiowania treści bloga:

<script>
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
 target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
 target.style.MozUserSelect="none"
else //All other route (ie: Opera)
 target.onmousedown=function(){return false}
target.style.cursor = "default"
}
disableSelection(document.body)
</script>

9. Blokada kopiowania treści bloga 2:

<script type="text/javascript">
//Prevent Copying Content From Blogger/Blogspot
//For full source code, visit http://bloggerstrade.blogspot.com

var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
</script>

10. Wstawianie meta tagów:

W sekcji <head> strony bloga lub w opisie danego folderu na chomiku wstawiamy:

<meta content='index, follow' name='robots'/>
<meta content='OPIS BLOGA' name='description'/>
<meta content='słowo 1, słowo 2, słowo 3, słowo 4, słowo 5....' name='keywords'/>
<meta content='NICK AUTORA' name='author'/>
<meta content='Poland' name='geo.placename'/>
<meta content='general' name='rating'/>
<meta content='pl' name='geo.country'/>
<!-- słowo kluczowe 1, słowo kluczowe 2, słowo kluczowe3 -->

11. Jak zrobić proste menu górne:
W kodzie po <header> wpisujemy:

<style> @charset &#39;UTF-8&#39;; #menup, #menup ul, #menup li #menup a { list-style: none; margin: 0; padding: 0; border: 0; font-size: 13px; font-family: Arial; line-height: 1px; } #menup { width: 1500px; } #menup ul { background: transparent; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; border: none; } #menup ul:before { content: &#39;&#39;; display: block; } #menup ul:after { content: &#39;&#39;; display: table; clear: both; } #menup a, #menup a:link, #menup a:visited { padding: 10px 5px; display: block; text-decoration: none; color: #ffc0c1; font-weight: bold; } #menup a:hover { color: #ed8d94; } #menup li { float: left; } #menup li:hover { color: #ed8d94; } #menup li:first-child { padding-left: 150px; }</style>
<div id='menup'>
<ul>
<li><a href='#'><span>Nazwa strony</span></a></li>
<li><a href='#'><span>Nazwa strony</span></a></li>
<li><a href='#'><span>Nazwa strony</span></a></li>
<li><a href='#'><span>Nazwa strony</span></a></li>
<li><a href='#'><span>Nazwa strony</span></a></li>
<li><a href='#'><span>Nazwa strony</span></a></li>
<li><a href='#'><span>Nazwa strony</span></a></li>
<li><a href='#'><span>Nazwa strony</span></a></li>
</ul>
</div>

12. Jak zrobić proste menu górne przewijające się ze stroną:
W kodzie po <header> wpisujemy:

<style> @charset &#39;UTF-8&#39;; #menup, #menup ul, #menup li #menup a { list-style: none; margin-top: -30px; padding: 0; border: 0; font-size: 13px; font-family: Verdana; line-height: 1px; letter-spacing: 2px; word-spacing: 4px; text-transform: uppercase;} #menup { width: 100%; height: auto; opacity: 0.9; position: fixed; z-index: 999;} #menup ul { background: #555555; -webkit-border-radius: none; -moz-border-radius: none; border-radius: none; border: none; } #menup ul:before { content: &#39;&#39;; display: block; } #menup ul:after { content: &#39;&#39;; display: table; clear: both;} #menup a, #menup a:link, #menup a:visited { padding: 10px 5px; display: block; text-decoration: none; color: #ffcc0d; font-weight: bold; } #menup a:hover { color: #ffff33; opacity: 0.8;} #menup li { float: left; } #menup li:hover { color: #ffff33; } #menup li:first-child { padding-left: 34px; }</style>
<div id='menup'>
<ul>
<li><a href='#'><span>Nazwa strony</span></a></li>
<li><a href='#'><span>Nazwa strony</span></a></li>
<li><a href='#'><span>Nazwa strony</span></a></li>
<li><a href='#'><span>Nazwa strony</span></a></li>
<li><a href='#'><span>Nazwa strony</span></a></li>
<li><a href='#'><span>Nazwa strony</span></a></li>
<li><a href='#'><span>Nazwa strony</span></a></li>
<li><a href='#'><span>Nazwa strony</span></a></li>
</ul>
</div>

13. Wstawianie meta tagów 'og':

W sekcji <head> strony bloga lub w opisie danego folderu na chomiku wstawiamy:

<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='pl_PL' property='og:locale'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
<meta content='pl_PL' property='og:locale'/>
<meta content='pl_PL' property='og:locale:alternate'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>

Bądź na bieżąco

Introwertyczka na Bloggerze Introwertyczka na Wordpressie Introwertyczka na Weebly Introwertyczka na Facebooku Introwertyczka na Twitterze Introwertyczka na Tumblerze Introwertyczka na Youtube Introwertyczka na Pinterest Introwertyczka na We♥it Introwertyczka na Bloglovin Introwertyczka na Google+ Introwertyczka na Google+ Introwertyczka na Pingerze Introwertyczka na Filmwebie Forum dla Ciebie Introwertyczka na Disqusie Napisz do mnie Subskrybuj blog
Kopiowanie wierszy i opowiadań jest zabronione. Wszelkie prawa zastrzeżone.