Creare pannello di amministrazione su Blogger simile a Wordpress

La barra di navigazione di Blogger, nota con il nome "navbar" è utile soprattutto per accedere al pannello amministrativo del blog in poco senza, senza dover eseguire l'accesso ogni volta. Sul mio blog ho preferito eliminare la navbar perché occupa un certo spazio, rallenta e non è di alcuna utilità per i visitatori. Questo pensiero è condiviso un po' da tutti però sono molti che continuano ad utilizzarla per comodità.
A questo proposito voglio illustrarvi il tutorial che ho trovato su un blogger straniero di successo che permette di aggiungere al blog un pannello di amministrazione più completo ed elegante della classica navbar che è molto simile a quello di Wordpress.

Il vantaggio di questa nuovo pannello di controllo è che risulta visibile solo agli amministratori del blog mentre i visitatori non vedranno nulla di tutto questo, così facendo avrete sia la comodità di scrittura e gestione del blog sia prestazioni migliori in quanto il blog si caricherà un po' più velocemente rispetto a prima.

Eccovi una veloce anteprima:

Come potete notare, partendo da sinistra c'è il logo e il nome del blog, la dashboard, la sezione dei post, delle personalizzazioni, dei commenti, delle impostazioni e quella relativa al login/logout del proprio account con tanto di foto profilo!

Ovviamente l'autore di questo ottimo lavoro, ha scelto la lingua inglese per la costruzioni di questo pannello di controllo perché è più accessibile a tutti. In questo articolo invece vi fornirò già i codici "italianizzati", così le piccole modifiche da apportare saranno molte di meno.

Per installarlo sul blog dovete andare su Modello > Modifica HTML, cercare il tag ]]></b:skin> e dopo di questo dovete aggiungere il seguente codice:

.admin-controll,.admin-controll * {
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;
line-height: 1.0;
}
.admin-controll ul {
position: absolute;
top: -999em;
width: 100%;
}
.admin-controll ul li {
width: 100%;
background: 333333;
}
.admin-controll li:hover {
visibility: inherit;
}
.admin-controll li {
float: left;
position: relative;
}
.admin-controll a {
display: block;
position: relative;
}
.admin-controll li:hover ul,.admin-controll li.sfHover ul {
left: 0;
top: 100%;
z-index: 99;
}
.admin-controll li:hover li ul,.admin-controll li.sfHover li ul {
top: -999em;
}
.admin-controll li li:hover ul,.admin-controll li li.sfHover ul {
left: 100%;
top: 0;
}
.admin-controll li li:hover li ul,.admin-controll li li.sfHover li ul {
top: -999em;
}
.admin-controll li li li:hover ul,.admin-controll li li li.sfHover ul {
left: 100%;
top: 0;
}
.mbl-admin-bar {
margin: 0px;
direction: ltr;
color: #ccc;
font: 400 13px/32px "Open Sans",sans-serif;
height: 32px;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-width: 600px;
z-index: 99999;
background: #222;
float: left;
}
.mbl-admin-bar li a {
display: block;
color: #fff;
padding: 7px 15px;
font-weight: 400;
text-decoration: none;
font-size: 14px;
}
.mbl-admin-bar li li a {
font-size: 15px;
color: #fff;
float: none;
padding: 0px;
width: 0;
}
ul.children {
color: #fff;
background: #333333;
font-size: 18px;
min-width: 230px;
padding: 10px;
float: right;
margin-left: -98px;
}
.mbl-admin-bar li a:hover,.mbl-admin-bar li a:active,.mbl-admin-bar li a:focus,.mbl-admin-bar li:hover > a,.mbl-admin-bar li.current-cat > a,.mbl-admin-bar li.current_page_item > a,.mbl-admin-bar li.current-menu-item > a {
color: #38b8f0;
background: #333333;
}
.fa {
font-size: 18px;
color: #999;
margin-right: 5px;
}
.fa.fa-user {
font-size: 50px;
float: left;
padding: 20px;
border: 1px solid #212121;
background: #575757;
}
ul.children img {
width: 80px;
height: auto;
float: left;
margin-right: 10px;
}
ul.children a {
margin-top: 10px;
}
li.mright {
float: right;
}
li.mblogo a {
padding: 9px 15px 3px 15px!important;
}
ul.child1 {
min-width: 180px;
color: #fff; background: #333333;
}
ul.child1 li a {
padding: 10px;
width: 100%;
background: #333333;
}

Salvate il modello e poi cercate il tag <body e dopo questa riga o eventualmente dopo quello della navbar che si trova li vicino, dovete aggiungere questo altro codice:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Open Sans:400' rel='stylesheet' type='text/css'/>

<div class='span-24'>
<div class='mbl-cpanel'>
<ul class='admin-controll mbl-admin-bar'>
<li class='mblogo'><a href="http://www.scuolissima.com/search/label/blogger" target="_blank"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEMNTKeosE_22JNWoC7oT6pQKBysHoBfbfCVwv6nBrpKqZdAJds0ZxC39h-4Os7WPZjg7NPpS8vE-fKHiV8MAqCL8mToyfcqGJQesMu61Z7XEGdZfDzd069Sg1LdXi3aXT5bhCxpmzwec/s1600/favicon-image.png'/></a></li>
<li class='blog-title'><a expr:href='data:blog.homepageUrl'> <data:blog.title/></a></li>
<li><a href='http://www.blogger.com/home'> Bacheca</a></li>
<li><a href="#"> Post</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/src=sidebar"'> Nuovo Post</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=page"'> Nuova Pagina</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#posts"'> Tutti i Post</a></li>
<li><a expr:href='"https://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=post;postID=" + data:blog.postId + ""'>Modifica Post</a></li>
</ul>
</li>
<li><a href="#"> Personalizza</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pageelements"'> Layout</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#templatehtml"'> Modello</a></li>
</ul>
</li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#comments"'> Commenti</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pendingcomments"'> in Revisione</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#spamcomments"'> Commenti di Spam</a></li>
</ul>
</li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'> Impostazioni</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'> di Base</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#postandcommentsettings"'> Post e commenti</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#emailandmobilesettings"'> Email e cellulare</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#languageandformattingsettings"'> Lingua/Formattazione</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#searchsettings"'> Preferenze di ricerca</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#othersettings"'> Altro</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#overviewstats"'>Statistiche</a></li>
</ul>
</li>
<li class='mright'><a href='#'> Salve Admin</a>
<ul class='children'>
<li><img src='IMMAGINE DEL PROFILO'/>
<div class='mauthor'> SCRIVI IL TUO NOME</div>
<a href='http://www.blogger.com/logout.g'> Esci</a></li>
</ul>
</li>
</ul>
</div>
</div>

Le modifiche che dovete apportare riguardano il nome e la foto profilo che volete che appaiono quando si va a posizionare il mouse su Salve Admin.

Nel codice mi sono permesso di aggiungere l'icona di Scuolissima e se cliccate su di essa vi troverete direttamente nella sezione dedicata interamente a Blogger, dove ci sono guide, tutorial e trucchetti di questo tipo.

Fonte | MyBloggerLab

LINK UTILI

ISCRIVITI ALLA NEWSLETTER

INFO