Puteţi adăuga o bara de notificare in bloguri de la blogger prin afişarea ei, fie in partea de sus a antetului sau chiar mai jos de subsol. Un astfel de 'stickybar ' este utilizat la o scară largă de către toate blogurile şi site-uri pentru a notifica vizitatori de actualizări importante, oferte, cupoane şi ultimele noutăţi. Puteţi chiar să adăugaţi link-ul RSS acolo pentru ca vizitatorii să se aboneze la blog-ul dvs. În acest tutorial voi încerca să păstrez lucrurile simple şi va voi împărtăşi modul de a crea un astfel de widget cu text simplu şi imagine. este compatibil cu toate browserele .
- Du-te la Blogger> Design> Editare HTML
- Backup şablonul
- Căutaţi
]]></b:skin>
4.Paste codul CSS de mai jos,chiar inainte ]]></b:skin>#mbt-stickybar{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ESzIyc9AmzCujw56bezx18WLyWluyLRry9hVTBGd-tiwXHhb_00vUIj3KM0jDJzjc8MXs1O8F332-JMJUE4ZdRODeIDcEoycB6OhSw04vv7gZIpTamdC9iCEkuAuBdeKCt7ral-bN-w/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#mbt-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}
#mbt-stickybar a:hover{
text-decoration:underline;
}
#mbt-stickybar p {margin:0; list-style:none;}
#mbt-stickybar img {vertical-align: middle;
margin-right: 6px;}
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ESzIyc9AmzCujw56bezx18WLyWluyLRry9hVTBGd-tiwXHhb_00vUIj3KM0jDJzjc8MXs1O8F332-JMJUE4ZdRODeIDcEoycB6OhSw04vv7gZIpTamdC9iCEkuAuBdeKCt7ral-bN-w/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#mbt-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}
#mbt-stickybar a:hover{
text-decoration:underline;
}
#mbt-stickybar p {margin:0; list-style:none;}
#mbt-stickybar img {vertical-align: middle;
margin-right: 6px;}
Pentru a schimba culoarea de fundal a barei, atunci schimbati pur şi simplu acest # 0080ff
5.Cautati
<body>
6. inseraţi codul de mai jos dupa <body>
<div id='mbt-stickybar'>
<a href='#'>ADD TEXT HERE</a>
</div>
<a href='#'>ADD TEXT HERE</a>
</div>
Acum, înlocuiţi # cu textul link-ul dvs. ( poate fi link-ul RSS, link-ul post important, etc ) şi ADD textul de aici cu orice doriţi să scrieţi.
7.Salvati sablonul si ati terminat :)
7.Salvati sablonul si ati terminat :)
Dacă doriţi să adăugaţi o imagine lângă link-ul de text , utilizaţi acest cod în loc de cel de la , pasul 6.
<div id='mbt-stickybar'>
<img src='IMAGE LINK'/><a href='#'>ADD TEXT HERE</a>
</div>
<img src='IMAGE LINK'/><a href='#'>ADD TEXT HERE</a>
</div>
Simplu inlocueste IMAGE LINK cu URL imaginei, pozei etc.
This post was written by:
Emil is the oner of the blog My Personal Blog...
Anghel Emil is a professional blogger and web developer. Follow him or email him
Do you Like this article?
|
|
|
Get Free Email Updates Daily! |
Follow us! 
|
.jpg)
.jpg)
1 comentarii:
Salut !
Am cautat pe google cum se poate personaliza navbar, dar nu am gasit. As vrea sa am un navbar asemanator cu al tau. Imi poti spune cum ai facut?