Blogkészítési Tppek VIII. - Legolvasottabb modul

Van aki magától rájön van aki másoktól lesi el a technikát, hogy az olvasóit azzal ösztönözze maradásra, hogy megmutatja a legnépszerűbb vagy más néven a legolvasottabb cikkeit. A Google Blogger ad erre egy lehetőséget, egy nagyon egyszerűen elhelyezhető modult. Ennek azonban rendkívül pórias dizájn jutott a tervezők részéről ugyanis gyakorlatilag egy egyszerű felsorolással megoldja a kérdést.

Ebben a cikkben megmutatom, hogy hogyan tudod a saját elképzeléseid szerint alakítani ezt a marketing és optimalizálási szempontból is rendkívül hasznos és fontos modul.

Négy különböző sablont adok majd meg. Ezek elhelyezése végtelenül egyszerű lesz és a végén felhívom majd a figyelmet néhány gyakorta elkövetett hibára is ezzel kapcsolatban.

Kezdjük tehát az elején.

Mindenek előtt a Blogger admin felületén kattintsunk az "Elrendezés" menüpontra majd itt a megfelelő helyen (ahova rakni akarjuk a modult) adjuk hozzá a "Népszerű bejegyzések" modult.
Állítsuk be az általunk legmegfelelőbbnek vélt opciókat, adjunk neki egy címet majd mentsük el a modult.

Ezek után következhet a modul css-ének, vagyis a dizájnnak a hozzáadása a bloghoz. Ennek a következő a folyamata:

1.) Válaszd ki a lejjebb felsorolt dizájnok közül a számodra szimpatikusat, jelöld ki a hozzá megadott kódot és másold ki.

2.) Menj a Blogger kezelőfelületén a "Sablon" menüpontra és kattints a "Személyre szabás" gombra. Majd bal oldalon válaszd  a "Speciális" beállítások menüpontot.

Ekkor egy - nagy valószínűséggel - üres fehér placcot fogsz látni magad előtt. Ide kell beillesztened a kódot.

3.) Illeszd be az imént kiválasztott és kimásolt kódot. Majd kattints a jobb felső sarokban az "Alkalmazás a Blogon" gombra.

Megjegyzés: Néhány blogger sablon nem fogja elfogadni ez a módot a dizájn elhelyezésére. Ilyenkor a következő a teendő: A sablon menüpontnál válaszd a "HTML-kód szerkesztése" gombot. Kattints bele a kódba és nyomd meg a Ctrl+F billentyűkombinációt és keress rá a következő kódrészletre: ]]></b:skin>
Az általad kiválasztott dizájn másold be efelé a kódrészlet felé közvetlenül. Mentsd el a sablont és kész is.

Nézzük a sablonokat:

1. sablon:

#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;  /* a modul szélessége */
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* a modul címének színe */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;   
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* számok színe */
background: #FB8835; /* számok hátterének színe */
border: .2em solid #fff; /* keret színe */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;   
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);   
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* posztok címének betűmérete */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

2. sablon

#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#757575; /* Modul címének színe */
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ /* Egyes elemek stílusa */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -13px;
background: #8E8E8E; /* számok hátterének színe */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;
content: '';
left: -2px;
margin-top: -.7em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid #8E8E8E; /* jobb oldali nyíl színe*/
}
#PopularPosts1 ul li a{
color: #444;
text-decoration: none;
font-size:15px;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
#PopularPosts1 ul li:hover{
background: #eee; /* háttér színe amikor rajta van az egér */
}
#PopularPosts1 ul li a:hover{
color:#444; /* Link színe amikor rajta van az egér */
margin-left:3px;
}

3. sablon

#PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px; 
width:100%;
margin:0;
font-size:16px;
background:#4F4F4F; /* háttér színe */
color:#f2f2f2; /* modul címének színe */
text-align:left;
text-indent:18px;
}
#PopularPosts1 h2:before{
position:absolute;
content:"";
top:36px;
right:0px;
width: 0px;
height: 0px;
border-bottom:12px outset transparent;
border-left:12px solid #000000; 
}
#PopularPosts1 h2:after{
position:absolute;
content:"";
top:-6px;
left:-5px;
width: 0px;
height: 0px;
border-bottom:24px outset transparent;
border-top:24px outset transparent;
border-left:24px solid #ffffff; /* bal oldalon lévő nyíl hátterének a színe */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ 
width:100%;
position:relative;
left:0;
margin:7px 0 16px 12px;
padding:10px  4px 0 5px;
}
#PopularPosts1 ul li:before{ 
content:counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-20px;
font-size:35px;
width:20px;
color:#888888; 
}

#PopularPosts1 ul li a{
display:block;
font-size:16px; /* linkek betűmérete */
color: #666; /* linkek színe */
text-decoration:none;
transition: all .1s ease-in-out;font-weight: bold;
}
#PopularPosts1 ul li a:hover{
color:#3366FF;
margin-left:3px;
}

4. sablon

 #PopularPosts1 h2{
padding:8px 10px 3px 0;
width:100%;
margin:0;
font-size:16px;
position:relative;
left:-20px;
display:block;
border-bottom:2px solid #ccc;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
width:100%;
}
#PopularPosts1 li{ /* az elemek stílusa */
width:100%;
position:relative;
left:0;
margin:0 0 6px 10px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{ /* a számok stílusa */
content:counter(li);
counter-increment:li;
position:absolute;
top:3px;
left:-39px;
font-size:21px;
width:28px;
height:28px;
border-radius: 50%;
color:#777; /* szöveg színe */
border: 2px solid #ddd; /* kerekített keret színe  */
padding:0;
text-indent:9px;
}
#PopularPosts1 ul li a{
display:block;
position:relative;
left:-45px;
width:100%;
margin:0;
min-height:28px;
padding: 5px 3px 3px 39px;
color:#333; /* linkek színe */
text-decoration:none;
font-size:14px; /* linkek betűmérete */
font-style: italic;

}
#PopularPosts1 ul li a:hover{
color:#3366ff;
margin-left:3px;
}

Mindegyik dizájn működik. Élő példát a blog jobb oldalán láthattok.

Tipp: Mint látjátok, a színeket színkódokban kell megadni. Ezek általában 6 számjegyű/betűs kódok az elején kettőskereszttel. Ilyen kódokat az alábbi modul segítségével tudtok keverni magatoknak:




Ha ez valamilyen oknál fogva nem töltődik be akkor használjátok ezt az online színkód keverő programot: http://html-color-codes.info/

Ha minden beállítással megvagyunk mentsük el a dolgokat és már kész is a teljesen egyedi "Legolvasottabb/Népszerű" modulunk.

Tipp: Amikor újra telepíted a sablonod, az imént elhelyezett css kód eltűnik. Célszerű a beállítások után egy egyszerű txt fájlban elmenteni. Figyelj oda, hogy pontosan nevezd el, hogy később tudd, hogy mit rejt a dokumentum.

Használd egészséggel a modult és leld örömöd az alkotásban. Ha bárkinek bármilyen kérdése van nyugodtan tegye fel kommentben, vagy a fórumon vagy akár üzenetben is. Ahogy időm engedi válaszolok rá.