Someone Seguir
No recomendado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
- Desde
- 28 Jun 2014
- Mensajes
- 1.062
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Hola de nuevo! Llevo ya 2 tutoriales hoy (me aburro mucho) xD Pero es que me encontré esto y me pareció muy interesante. Además, creo que cuanto más mejor, ¿no?
Esta vez se trata de cómo crear un panel de Admin. como el que tiene WordPress. En mi blog, ya traducido, queda así:
Chulo, ¿verdad? Si quieres uno igual, haz lo siguiente.
1.- Añadir CSS
Ve a Blogger > Plantilla > Editar HTML, busca ]]></b:skin>, y pega justo antes:
2.- Añadir HTML
Ahora busca <body> (sino te sale, busca <body class='home... o alguna variación), y pega antes:
3.- Guardar plantilla
Guardamos los cambios y listo. Tenemos nuestro panel de Admin., el cual sólo podemos ver nosotros.
Si tienes algún tipo de script que convierte automáticamente todos los links en enlaces de afiliado (como el "Full Page Script" de Adf.ly), es muy importante que añadas a blogger.com como excepción. Ya que tuve ese problema y me daba error 404, estuve casi 1 hora buscando una solución cuando intenté eso.
¿Te gustó? Da Me Agrada
Esta vez se trata de cómo crear un panel de Admin. como el que tiene WordPress. En mi blog, ya traducido, queda así:
El mérito es de MyBloggerLabs, yo sólo me he limitado a traducirlo
Chulo, ¿verdad? Si quieres uno igual, haz lo siguiente.
1.- Añadir CSS
Ve a Blogger > Plantilla > Editar HTML, busca ]]></b:skin>, y pega justo antes:
Insertar CODE, HTML o PHP:
.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: 3px 15px 3px 15px!important;
}
ul.child1 {
min-width: 180px;
color: #fff; background: #333333;
}
ul.child1 li a {
padding: 10px;
width: 100%;
background: #333333;
}
2.- Añadir HTML
Ahora busca <body> (sino te sale, busca <body class='home... o alguna variación), y pega antes:
Inglés (original)
Insertar CODE, HTML o PHP:
<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'/>
<span class='item-control blog-admin'>
<div class='span-24'>
<div class='mbl-cpanel'>
<ul class='admin-controll mbl-admin-bar'>
<li class='mblogo'><a href="http://www.mybloggerlab.com"><img src='http://1.bp.blogspot.com/-YyMN2VM2FGc/VDka36seHBI/AAAAAAAAFH0/gxXlBTMcJPU/s1600/v.pn'/></a></li>
<li class='blog-title'><a expr:href='data:blog.homepageUrl'><i class='fa fa-tachometer'/> <data:blog.title/></a></li>
<li><a href='http://www.blogger.com/home'><i class='fa fa-puzzle-piece'/> [COLOR="#FF0000"]Dashboard[/COLOR]</a></li>
<li><a href="#"><i class="fa fa-pencil"></i> [COLOR="#FF0000"]Posting[/COLOR]</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/src=sidebar"'><i class='fa fa-pencil'/> [COLOR="#FF0000"]New Post[/COLOR]</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=page"'><i class='fa fa-file'/> [COLOR="#FF0000"]New Page[/COLOR]</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#posts"'><i class='fa fa-th-list'/> [COLOR="#FF0000"]All Posts[/COLOR]</a></li>
<li><a expr:href='"https://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=post;postID=" + data:blog.postId + ""'><i class="fa fa-pencil-square"/>[COLOR="#FF0000"]Edit Post[/COLOR]</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-cogs"></i> [COLOR="#FF0000"]Customize[/COLOR]</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pageelements"'><i class='fa fa-wrench'/> [COLOR="#FF0000"]Layout[/COLOR]</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#templatehtml"'><i class='fa fa-pencil-square-o'/> [COLOR="#FF0000"]Edit Template[/COLOR]</a></li>
</ul>
</li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#comments"'><i class='fa fa-comment'/> [COLOR="#FF0000"]Comments[/COLOR]</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pendingcomments"'><i class="fa fa-bullhorn"></i> [COLOR="#FF0000"]Pending Comments[/COLOR]</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#spamcomments"'><i class="fa fa-ban"></i> [COLOR="#FF0000"]Spam Comments[/COLOR]</a></li>
</ul>
</li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'><i class='fa fa-cog'/> [COLOR="#FF0000"]Settings[/COLOR]</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'><i class="fa fa-heart-o"></i> [COLOR="#FF0000"]Basics[/COLOR]</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#postandcommentsettings"'><i class="fa fa-comments"></i> [COLOR="#FF0000"]Post & Comments[/COLOR]</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#emailandmobilesettings"'><i class="fa fa-mobile"></i> [COLOR="#FF0000"]Mobile & Email[/COLOR]</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#languageandformattingsettings"'><i class="fa fa-calendar-o"></i> [COLOR="#FF0000"]Language[/COLOR]</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#searchsettings"'><i class="fa fa-search-plus"></i> [COLOR="#FF0000"]Search Preference[/COLOR]</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#othersettings"'><i class="fa fa-code"></i> [COLOR="#FF0000"]Other[/COLOR]</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#overviewstats"'><i class='fa fa-signal'/>[COLOR="#FF0000"]Stats[/COLOR]</a></li>
</ul>
</li>
<li class='mright'><a href='#'><i class='fa fa-signal'/> [COLOR="#FF0000"]Howdy, Admin[/COLOR]</a>
<ul class='children'>
<li><img src='[COLOR="#FF0000"]http://4.bp.blogspot.com/-CQS3m0DjQEM/VDkSRYC5PNI/AAAAAAAAFGw/bEIJSiw4PGc/s1600/faizan.png[/COLOR]'/>
<div class='mauthor'><br/>[COLOR="#FF0000"]Syed Faizan Ali[/COLOR]</div>
<a href='http://www.blogger.com/logout.g'> [COLOR="#FF0000"]Logout[/COLOR]</a></li>
</ul>
</li>
</ul>
</div>
</div>
</span>
Español (traducción mía)
Insertar CODE, HTML o PHP:
<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'/>
<span class='item-control blog-admin'>
<div class='span-24'>
<div class='mbl-cpanel'>
<ul class='admin-controll mbl-admin-bar'>
<li class='mblogo'><a href='http://www.mybloggerlab.com'><img src='http://1.bp.blogspot.com/-YyMN2VM2FGc/VDka36seHBI/AAAAAAAAFH0/gxXlBTMcJPU/s1600/v.pn'/></a></li>
<li class='blog-title'><a expr:href='data:blog.homepageUrl'><i class='fa fa-tachometer'/> <data:blog.title/></a></li>
<li><a href='http://www.blogger.com/home'><i class='fa fa-puzzle-piece'/> Panel</a></li>
<li><a href='#'><i class='fa fa-pencil'/> Posts</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/src=sidebar"'><i class='fa fa-pencil'/> Nuevo Post</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=page"'><i class='fa fa-file'/> Nueva Página</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#posts"'><i class='fa fa-th-list'/> Todos los Posts</a></li>
<li><a expr:href='"https://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=post;postID=" + data:blog.postId + ""'><i class='fa fa-pencil-square'/>Editar Post</a></li>
</ul>
</li>
<li><a href='#'><i class='fa fa-cogs'/> Personalizar</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pageelements"'><i class='fa fa-wrench'/> Diseño</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#templatehtml"'><i class='fa fa-pencil-square-o'/> Editar Plantilla</a></li>
</ul>
</li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#comments"'><i class='fa fa-comment'/> Comentarios</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pendingcomments"'><i class='fa fa-bullhorn'/> Moderación</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#spamcomments"'><i class='fa fa-ban'/> SPAM</a></li>
</ul>
</li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'><i class='fa fa-cog'/> Ajustes</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'><i class='fa fa-heart-o'/> Básico</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#postandcommentsettings"'><i class='fa fa-comments'/> Posts & Comentarios</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#emailandmobilesettings"'><i class='fa fa-mobile'/> Móvil & E-mail</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#languageandformattingsettings"'><i class='fa fa-calendar-o'/> Idioma</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#searchsettings"'><i class='fa fa-search-plus'/> Buscar preferencias</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#othersettings"'><i class='fa fa-code'/> Otro</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#overviewstats"'><i class='fa fa-signal'/>Estadísticas</a></li>
</ul>
</li>
<li class='mright'><a href='#'><i class='fa fa-signal'/> Hola, TEEA</a>
<ul class='children'>
<li><img src='[COLOR="#FF0000"]#[/COLOR]'/>
<div class='mauthor'><br/>[COLOR="#FF0000"]Walter Sullivan[/COLOR]</div>
<a href='http://www.blogger.com/logout.g'> Salir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</span>
*Lo que está en rojo lo puedes modificar*
3.- Guardar plantilla
Guardamos los cambios y listo. Tenemos nuestro panel de Admin., el cual sólo podemos ver nosotros.
¡Atención!
Si tienes algún tipo de script que convierte automáticamente todos los links en enlaces de afiliado (como el "Full Page Script" de Adf.ly), es muy importante que añadas a blogger.com como excepción. Ya que tuve ese problema y me daba error 404, estuve casi 1 hora buscando una solución cuando intenté eso.
¿Te gustó? Da Me Agrada
Última edición: