Webbrelaterat - Design och resurser för webbdesigners http://webbrelaterat.se Grafiskdesign, webbdesign, resurser, tips, trender, inspiration, Photoshop, Wordpress Sat, 15 Sep 2012 09:22:42 +0000 en-US hourly 1 http://wordpress.org/?v=3.5.1 Skapa en snygg och praktiskt dropdown meny med CSS och jQuery http://webbrelaterat.se/skapa-en-snygg-och-praktiskt-dropdown-meny-med-css-och-jquery/ http://webbrelaterat.se/skapa-en-snygg-och-praktiskt-dropdown-meny-med-css-och-jquery/#comments Wed, 07 Dec 2011 11:29:40 +0000 Johan http://webbrelaterat.se/?p=5138 Då och då skapar jag färdiga standardkomponenter som kan vara användbart att återanvända i olika typer av projekt. Idag ska jag visa en smidig dropdown meny. Det vanligaste är att när man har musen över menyn så vecklas dropdown menyn ut. I det här fallet hade jag kravet att skapa en dropdown meny som triggas när man trycker på ett menyval. Det fanns en del komplikationer när jag gjorde den här. Några av dem var att man ska kunna trycka bort dropdown menyn överallt på sidan och inte endast på menyvalet, menyn ska vara aktiv när menyn är utfälld. Pilar ska visa vilka menyval som har dropdown funktionen.

Demo

Ladda ner filer

Grund HTML

Här kommer grunduppsättningen för html’en. Ganska så basic. 


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Red Riding Hood Dropdown Menu</title>
</head>
<body>

  <div class="wrap">
  
  </div>

</body>
</html>


HTML för menyn

Den här är ganska så lång men det mesta är bara kopierat och återanvänt. Dock så kommer du få använda en hack för att bryta float genom att använda Nicolas Gallagher smidiga micro clearfix. Den sätter vi på ytter UL taggen. 

<div class="menu"> 
      <ul class="cf">
        <li><a href="#" class="home" title="Home">&nbsp;</a></li>
        <li><a href="#" class="dropdownShow">Features</a>
          <ul class="dropdownWrap">
            <li>
              <ul>
                <li><h2>Browser Coverage</h2></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Press</a></li>
                <li><a href="#">What we do</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Contact Us</a></li>
              </ul>
              <ul>
                <li><h2>Browser Coverage</h2></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Press</a></li>
                <li><a href="#">What we do</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Contact Us</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#" class="dropdownShow">FAQ</a>
          <ul class="dropdownWrap">
            <li>
              <ul>
                <li><h2>Browser Coverage</h2></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Press</a></li>
                <li><a href="#">What we do</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Contact Us</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#" class="dropdownShow">Plans & Pricing</a>
          <ul class="dropdownWrap">
            <li>
              <ul>
                <li><h2>Browser Coverage</h2></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Press</a></li>
                <li><a href="#">What we do</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Press</a></li>
                <li><a href="#">What we do</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Press</a></li>
                <li><a href="#">What we do</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Contact Us</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Help/Support</a></li>
        <li><a href="#" class="signIn">Sign In</a></li>
      </ul>
</div>


CSS

En hel hög med CSS. 

    /* Micro clearfix hack */
    cf:before, .cf:after { content:"";display:table;} .cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */.cf { zoom:1; }
    
    /* Style for the menu */
    div.menu {
        -khtml-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px;
        -webkit-box-shadow: 0 1px 2px rgb(149,149,149); -moz-box-shadow: 0 1px 2px rgb(149,149,149);  box-shadow: 0 1px 2px rgb(149,149,149);
        background: url(img/menu-bg.gif); 
      }
      div.menu ul  { position: relative; }
      div.menu ul li {
        display:inline; 
        float: left;
        border-right: 1px solid #fd3357;
        position: relative;
      }
      div.menu ul li a {
        padding: 12px 20px 12px 16px;
        display: block;
        border-right: 1px solid #bd0022;
        text-shadow: 0px 1px 6px #93001a;
        text-decoration:none;
        font-weight: 600;
        color:#ecedee;
		outline:none;
        font-size: 11px;
      }
      div.menu ul li a:hover, div.menu ul li a.dropdown-active {
        color:#fff;
        text-shadow: 0px 1px 12px #fd3357; 
        background: #d90027; 
      }
       div.menu ul li a:hover > ul {
		display:block;
      }
      div.menu ul li a.dropdownShow {
        background: url(img/arrowDown.png) no-repeat 93% 17px; 
      }
      div.menu ul li a.dropdownShow:hover {
        background: url(img/arrowDown.png) no-repeat 93% 17px #d90027; 
      }
      div.menu ul li a.dropdown-active {
        background: url(img/arrowUp.png) no-repeat 93% 17px #d90027!important;
      }
      div.menu ul li a.home {
        width:16px
        height:16px;
        background: url(img/home.png) center no-repeat; 
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter: alpha(opacity=80);-moz-opacity:0.8; -khtml-opacity:0.8;opacity: 0.8;
      }
      div.menu ul li a.home:hover {
        background: url(img/home.png) center no-repeat; 
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);-moz-opacity:1; -khtml-opacity: 1;opacity: 1;
      }
      
        /* Level 2 */
        div.menu ul li ul.dropdownWrap {
          display:none;
          position: absolute;
          left:0px;
          top: 39px;
          width: auto;
          padding: 10px 10px 0;
          background: #d90027;
          -webkit-box-shadow: 0 1px 2px rgb(149,149,149); -moz-box-shadow: 0 1px 2px rgb(149,149,149);  box-shadow: 0 1px 2px rgb(149,149,149);
          -moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;
        }
        div.menu ul li ul.dropdownWrap li, div.menu ul li ul.dropdownWrap li a {
          border:none; 
        }
        div.menu ul li ul.dropdownWrap li ul { 
          width: 120px;
          margin-bottom: 10px;
        }
        
          /* Level 2 -> List Menu */
          div.menu ul li ul.dropdownWrap li ul li { 
            float: none;
            text-shadow: 0px 1px 4px #93001a;
          }
          div.menu ul li ul.dropdownWrap li ul li h2 { 
            font-size:11px;
            margin-bottom:5px;
          }
          div.menu ul li ul.dropdownWrap li ul li a { 
            padding:2px 4px;
            font-weight: 400;
            border-bottom:1px solid #E82949;
            background: none; 
            -khtml-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px; 
          }
          div.menu ul li ul.dropdownWrap li ul li a:hover { 
            border-bottom:1px solid #F93455;
            font-weight: 600;
            background:#A3011C;
    
          }


jQuery

Uppsättningen för jQuery skriptet.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript">
      $(document).ready(function() {
        
       /* for keeping track of what's "open" */		
        var activeClass = 'dropdown-active';

        /* recurse through dropdown menus */
        $('.menu').each(function() {
          /* track elements: menu, parent */
          var activeClass = "dropdown-active";
          var $menu = $(this);

          var dropdowns = $('.dropdownShow', $menu);
          var allWraps = $('.dropdownWrap', $menu);

          /* hide all menus, scoped */
          function hideAll() {
            dropdowns.removeClass(activeClass);
            allWraps.hide();
          }

          dropdowns.each(function(){
            var dropdown = $(this);
            var parent = dropdown.parent();
            var wraps = $('.dropdownWrap', parent);

            /* function to show menu when clicked */ 
            dropdown.click(function(e) { 
              if (dropdown.hasClass(activeClass)) {
                dropdown.removeClass(activeClass);
                wraps.hide();
              } 
              else {
                hideAll();
                dropdown.addClass(activeClass);
                wraps.show();
              }

              e.stopPropagation();
            });
          });

          $(document).click(hideAll);
        });
      });
  </script>


Sammanfattning

Detta exemepl är bara ett av många olika varianter man kan göra med skriptet. Man skulle kunna göra en horisontell meny eller bara en box som behöver öppnas eller stängas. Hoppas du har nytta av skriptet.

]]> http://webbrelaterat.se/skapa-en-snygg-och-praktiskt-dropdown-meny-med-css-och-jquery/feed/ 1 10st Google+ inbjudan ges bort http://webbrelaterat.se/10st-google-inbjudan-ges-bort/ http://webbrelaterat.se/10st-google-inbjudan-ges-bort/#comments Fri, 05 Aug 2011 08:41:36 +0000 Johan http://webbrelaterat.se/?p=5117 Den nya hypen Google+ eller förkortningen G+ som åker fram i stor framfart och verkar vara otroligt populär bland medlemmarna. Vad jag själv har märkt eller för jag själv dras till såna människor på webben är en stor andel medlemmarna på G+ social-media nördar, bloggare, designer och utvecklare vilket ger en stor fördel när det gäller att snappa upp resurser eller tips från andra duktiga i branschen. Det som jag själv finner bra med G+ är att man kan sortera sina vänner i olika kretsar och med det kan du själv bestämma vilka kretsar som ska se när du publicerar bilder, text eller länkar. Med det kan du hålla profilen snygg och ren för den framtida arbetsgivare, kunder eller bekanta etc.

Lägg en kommentar med din mejladress så skickar jag en inbjudan bums och hoppas vi kan bli vänner även där.

]]> http://webbrelaterat.se/10st-google-inbjudan-ges-bort/feed/ 62 Bunt med Social ikoner för dina projekt http://webbrelaterat.se/bunt-med-social-ikoner-for-dina-projekt/ http://webbrelaterat.se/bunt-med-social-ikoner-for-dina-projekt/#comments Tue, 26 Jul 2011 08:03:30 +0000 Johan http://webbrelaterat.se/?p=5032 Alla dessa ikoner är tagna på olika design och utvecklings nätverk jag håller till på så all kredits till skaparna. Har du några eller någon grym ikon uppsättning, posta gärna det. Alltid kul och se andras kreativiteter och ha det samlat på ett ställe.


















Extra UI ikoner



]]> http://webbrelaterat.se/bunt-med-social-ikoner-for-dina-projekt/feed/ 4 CSS och HTML meddelande boxar (uppdaterat med demo) http://webbrelaterat.se/css-och-html-meddelande-boxar/ http://webbrelaterat.se/css-och-html-meddelande-boxar/#comments Sat, 23 Jul 2011 10:31:57 +0000 Johan http://webbrelaterat.se/?p=5081 Tänkte skulle dela med mig enklare HTML och CSS uppsättning av meddelande boxar som kan användas i alla dina projekt. Använder dessa själv i olika webb eller app projekt med vissa modifieringar för att anpassa till ett viss tema eller profil. Dessa får användas utan några former av copyright rättigheter eller liknande. Hoppas du gillar dem!

Se demo här

HTML

<div class="success">This is a Success block</div>
<div class="info">This is a Notification block</div>
<div class="warning">This is a Warning block</div>
<div class="error">This is a Error block</div>

CSS


/** CSS **/

.warning {
        -khtml-border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius:3px;
        text-align: center;
        font-weight:600;
        border:1px solid #E6DB55;
        margin:0 0 10px 0px;
        padding:10px;
        background: url(../images/warning.png) #FFFFE0 1% 50% no-repeat;
        }

.success {
        -khtml-border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius:3px;
        text-align: center;
        font-weight:600;
        border:1px solid #a9dc70;
        margin:0 0 10px 0px;
        padding:10px;
        background: url(../images/success.png) #e4fbcb 1% 50% no-repeat;}

.error {
        -khtml-border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius:3px;
        text-align: center;
        font-weight:600;
        border:1px solid #fdabae;
        margin:0 0 10px 0px;
        padding:10px;
        background: url(../images/error.png) #ffdfe0 1% 50% no-repeat;
        }

.info {
        -khtml-border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius:3px;
        text-align: center;
        font-weight:600;
        border:1px solid #bad9f4;
        margin:0 0 10px 0px;
        padding:10px;
        background: url(../images/info.png) #d5eafc 1% 50% no-repeat;
        }

Ladda ner ikoner

]]> http://webbrelaterat.se/css-och-html-meddelande-boxar/feed/ 6 Forrst inbjudan ges bort (nästan) – finns 1 kvar! http://webbrelaterat.se/forrst-inbjudan-ges-bort-nastan/ http://webbrelaterat.se/forrst-inbjudan-ges-bort-nastan/#comments Wed, 20 Jul 2011 10:13:05 +0000 Johan http://webbrelaterat.se/?p=5023 Hej allihopa,

Första känner jag nästan att jag måste be om ursäkt för grymt dåligt med inlägg. Med privata livet och en massa jobb på vanliga jobbet som snår all tid. Försöker ändå hålla sidan lite levande med några enstaka inlägg då och då. Finns det någon som skulle vilja hjälpa till med inlägg, skicka mig ett mejl.

Hursomhelst, med det sagt tänkte jag göra en liten rolig och superenkel tävling om att förtjäna sig att få denna exlusiva inbjudan.

Vad är Forrst

Forrst är en social plattform för endast designer och utvecklare för hela världen, språket är på engelska. Man kan registrera sig i en kö för att bli insläppt men vanligtvis tar det två månader att bli erbjuden en inbjudan om du ens för överhuvudtaget får en inbjudan.

På Forrst postar man bilder på ditt projekt, kod eller ställer relaterade frågor om design och utveckling och så får man feedback och hjälp så du blir en bättre kodare eller designer. En annan stor fördel är att det finns en mängd med resurser som gratis ikoner, templates, kodsnuttar, PSD filer osv.

Tävlingsinstruktioner

För att få chansen och vinna inbjudan behöver du bara kommentera och berätta varför du vill gå med Forrst och visa ETT projekt du har gjort.

Ta chansen och gå med i denna fantastiska communityn. Tävlingen pågår ett par veckor eller tills tillräckligt med kommentarer har kommit in.

Lycka till och ha kul!

]]> http://webbrelaterat.se/forrst-inbjudan-ges-bort-nastan/feed/ 6 Lista på trendiga interface design element http://webbrelaterat.se/lista-pa-trendiga-interface-design-element/ http://webbrelaterat.se/lista-pa-trendiga-interface-design-element/#comments Sun, 10 Apr 2011 13:57:09 +0000 Johan http://webbrelaterat.se/?p=4955 Interface design (UI) som det kallas på engelska är absolut en av mina favoritstilar och är en av dem bästa stilarna nu-för-tiden att använda i alla typer av designs som i mobil, appar eller webbdesign. Stilen är funnits ett tag, med Smartphones (Apps) framfart den senaste tiden är det blivit allt populärare att fokusera på att göra så lätt för användaren som möjligt att utföra vissa typer av uppgifter. Dribbble och Designmoo är perfekta ställen att hitta just sån inspiration.

]]> http://webbrelaterat.se/lista-pa-trendiga-interface-design-element/feed/ 1 Special HTML tecken du kan använda till dina webbprojekt http://webbrelaterat.se/special-html-tecken-du-kan-anvanda-till-dina-webbprojekt/ http://webbrelaterat.se/special-html-tecken-du-kan-anvanda-till-dina-webbprojekt/#comments Fri, 11 Feb 2011 13:26:23 +0000 Johan http://webbrelaterat.se/?p=4920 Dessa tecken är inte bara roliga att använda utan även användbara att symbolisera länkar, händelser till exempel. Man kanske inte ska gå galen och sätta tecken överallt, var som alltid i webbdesign och var konsekvent hela tiden. Här har jag samlat mina favoriter på ett ställe som återkommer många gånger i webbprojekten.

Dollar tecken &#36; $
Registered tecken &#174; eller &reg; ®
Snabel A tecken &#64; @
Copyright tecken &#169; eller &copy; ©
Trademark tecken &#x2122 eller &trade; ™
Black spade suit &spades; ♠
Black club suit &clubs; ♣
Black heart suit &hearts; ♥
Black diamond suit &diams; ♦
Multiplication sign &#215; eller &times; ×
General currency sign &#164; eller &curren; ¤
Omega &Omega; Ω
Bullet &bull; •
Leftward arrow &larr; ←
Upward arrow &uarr; ↑
Rightward arrow &rarr; →
Downward arrow &darr; ↓
Less-than sign &#60; <
Greater-than sign &#62; >
Single right angle quotation &rsaquo; ›
Single left angle quotation &lsaquo; ‹
Right double angle quotation mark &raquo; »
Left double angle quotation mark &laquo; «
Lozenge &loz; ◊
Therefore &there4; ∴
Per mille &permil; ‰
Latin capital letter A with ring &Aring; Å
Latin capital letter A with diaeresis &Auml; Ä
Latin capital letter O with diaeresis &Ouml; Ö
Latin small letter a with ring above &aring; å
Latin small letter a with diaeresis &auml; ä
Latin small letter o with diaeresis &ouml; ö
Mellanslag &nbsp;
]]> http://webbrelaterat.se/special-html-tecken-du-kan-anvanda-till-dina-webbprojekt/feed/ 5 Snabbtips: Använd CSS3 i IE med ett par enkla Javaskript hack http://webbrelaterat.se/snabbtips-anvand-css3-i-ie-med-ett-par-enkla-javaskript-hack/ http://webbrelaterat.se/snabbtips-anvand-css3-i-ie-med-ett-par-enkla-javaskript-hack/#comments Wed, 29 Dec 2010 16:03:25 +0000 Johan http://webbrelaterat.se/?p=4901 Dom senaste månaderna har jag jobbat med en rad roliga projekt och en sån propagandamaskin jag är att tjata på klienter att det är okej att använda CSS3 redan idag. Ibland är kunderna otroligt skeptiska eller kan det vara så att kunden vill verkligen att det ska se lika ut i olika webbläsare. En gemensam nämnare som åter kommer upp är hur löser jag runda hörn, box-skuggningar, pseudo klasser osv utan en rad olika Javaskript hack i alla dem vanligaste webbläsare.

Två små Javaskript bibliotek som verkar göra sitt jobb är..

Modernizr

Detta bibliotek stödjer CSS3 och HTML5 som Multiple backgrounds, box-shadow, Drag and Drop, CSS Gradients och många fler. Besök sidan för mer information. Något som kan vara användbart i många olika typer av projekt.

Se mer på Modernizr

Selectivizr

Selectivizr gör så du kan använda pseudo-klasser i Internet Explorer. Att använda pseudo-klasser (:nth-child(N)) sparar tid och möda och även roligt att använda. Se mer om pseudo-klasser på Sohtanaka och en kort se värd video kan du se på net.tutsplus.

Se mer på Selectivizr

]]> http://webbrelaterat.se/snabbtips-anvand-css3-i-ie-med-ett-par-enkla-javaskript-hack/feed/ 6 Lite dåligt med inlägg http://webbrelaterat.se/lite-daligt-med-inlagg/ http://webbrelaterat.se/lite-daligt-med-inlagg/#comments Sun, 12 Dec 2010 20:16:41 +0000 Anton http://webbrelaterat.se/?p=4896 I juletider är det svårt att hitta tiden att skriva inlägg. Man måste käka julbord, fixa klart alla sina kundarbeten innan jul, kanske plugga klart allt innan terminen är över.

Nu över juletiden kommer det upp ett inlägg i veckan, om inte annat anges.

Kommer massa bra och unika inlägg nu över juletid och 2011.

Hoppas ni förstår!

]]> http://webbrelaterat.se/lite-daligt-med-inlagg/feed/ 1 15 SEO plugins för WordPress http://webbrelaterat.se/15-seo-plugins-for-wordpress/ http://webbrelaterat.se/15-seo-plugins-for-wordpress/#comments Sun, 28 Nov 2010 18:49:40 +0000 Anton http://webbrelaterat.se/?p=4882 Med mer än 120 miljoner bloggar på internet, hur ska folk hitta just din sida på internet?  Sökmotoroptimering är svaret.

Du kan blogga oerhört bra och relevant innehåll, men har du ingen bra SEO är oddsen stora att du inte kommer ha många läsare. Lyckligtvis finns det WordPress plugins som kan hjälpa dig med detta.

All in One SEO Pack

En av de mest populära plugins någonsin för WordPress, detta plugin gör lite av allt möjligt för att hjälpa dig – från att välja den bästa titeln och sökord, och pluginet hjälper dig även att undvika upprepa dig för mycket.

Automatic SEO Links

Ger dig möjlighet att välja ett ord eller en fras för automatisk länkning, både interna och externa, att välja om länken ska vara “nofollow” eller ej och mycket mer.

Google XML Sitemaps

Ett viktigt verktyg  inom SEO. Detta plugin skapar automatiskt en sitemap till din sida. Detta gör att din sida blir mycket mer lättläst när en sökmotorrobot går igenom din sida.

HeadSpace2

Detta plugin låter dig installera alla typer av metadata, lägga till viss JavaScript och CSS till dina sidor, föreslår taggar för dina inlägg och en massa annat.

Meta Robots WordPress plugin

En enkel lösning för att lägga till robot metadata till din sida.

Platinum SEO Plugin

Ger dig funktioner som automatisk 301-omdirigeringar för permalänk förändringar, automatisk generering av metataggar, post single optimering, hjälp för att undvika dubbletter och en mängd andra funktioner.

SEO Blogroll

Är du orolig för att de personer som du länkar till i din blogg ger dig dålig PageRank? Med SEO Blogroll du kan göra separata sektioner för olika grupper av länkar, med ett obegränsat antal i varje, och alla av dem kommer att få “nofollow” attribut.

SEO for Paged Comments

Med introduktionen av kommentarer i WordPress 2.7, fanns det ett potentiellt problem med sökmotorer med att de skulle tro  att du hade samma innehåll på varje sida. Detta plugin hjälper dig med detta.

SEO friendly and HTML valid subheadings

Vissa teman i WordPress kommer att förvirra din header taggar på sidan de ska visas på, men detta plugin kommer automatiskt återställa dem och göra dem mer SEO vänliga genom att flytta dem på plats i hierarkiskt träd. Med andra ord blir h2 h3 till H3 H4 och så vidare.

SEO Friendly Images

Bilder kan vara en stor källa till trafik till folk söker efter bilder i olika ämnen. Detta plugin hjälper dig med att se till att du har “alt” och “title” taggar på alla dina bilder så att sökmotorerna kan indexera dem.

SEO No Duplicate WordPress Plugin

Om du måste ha dubbelt innehåll på din webbplats av någon anledning kommer SEO No duplicate  ange vilken sida som som sökmotorn ska gå igenom och ignorera.

SEO Smart Links

Sammankopplingen mellan sidor kan vara nyckeln till att få fler människor att läsa mer av dina inlägg, men det är tidskrävande och jobbigt att göra det för hand. SEO Smart Links gör detta automatiskt.

SEO Tag Cloud Widget

En massa människor använder taggmoln på sina bloggar. Sedan de infördes har de varit tämligen oläsbar av sökmotorer, men med denna plugin kommer de att konverteras till en SEO-vänlig HTML-kod som kan indexeras.

SEO Title Tag

Dina taggar är en viktig del av din webbplats för att se till att sökmotorerna vet var du ska placera dina inlägg, och SEO Title tag fokuserar enbart på detta. Till skillnad från vissa andra plugins, och WordPress i sig, kommer denna förlängning lägga till taggar på sidorna och din startsida.

Simple tags

Ett oerhört populär plugin som fokuserar på att hjälpa dig välja de bästa taggar för dina inlägg genom att erbjuda förslag, automatisk ifyllnad av taggarna.

]]> http://webbrelaterat.se/15-seo-plugins-for-wordpress/feed/ 9