- Desde
- 4 Ago 2013
- Mensajes
- 2.014
Hola, revisando mi Ordenador me he encontrado una extencion de un Feed de un blog que ya ni tengo pero ya que estaba ahi se los traigo.
Antes de empezar les quiero decir que el codigo en si no es mio, pero tiene modificaciones que yo le hice, si alguien sabe la fuente de dicho codigo digalo y lo agrego al post.
Empecemos, primero debemos crear una carpeta en donde estaran todos los archivos de la extencion tendra como nombre el nombre de su extencion u otro, en esa carpeta crearan otra que llamaran img con iconos para su extencion, los deben nombrar icon.png, icon16.png, icon16.png, icon38.png e icon48.png, el tamaño de icon.png sera de 19x19 px, el de las otras tendran un tamaño segin el nombre, ejemplo icon16.png sera de 16x16px.
pueden generar iconos en Genfavicon. Free Online Favicon Generator. Icon Generator.
El primer archivo que crearemos sera manifest.json en el pondremos.
Los datos que debes cambiar son "name" que es el el nombre de tu blog, "description" que es la descripcion de tu blog y por ultimo "default_title" que igual seria el nombre de tu blog. Eso seria todo lo que tendrian que modificar en ese archivo.
Luego crearemos un archivo que llamaremos popup.html en el pondremos este codigo.
En el ya he agregado los comentarios para que sepan que cambiar.
Luego crearemos otro archivo llamado popup.js este archivo se encargara de revisar nuestro Feed y poder mostrar las ultimas estradas de nuestro blog. Pondremos este codigo:
En este archivo hay cambiar el link del feed de forobeta por el de su blog, tambien pueden cambiar el numero de post a mostrar cambiando el 5 por el numero de post que quieran en feed.setNumEntries(5);
Por ultimo crearemos el archivo css que llamaremos style.css, aqui podran modificar lo que gusten ya que es un diseño unico yo lo he puesto asi.
Bueno con eso tendrian una extencion basica de su blog que se actualiza cada vez que el feed se actualiza, cualquier duda pregunte.
Captura de la extencio de Foro Beta para los tutoriales.
PD; ya he sabido la Fuente
Extra... Como Empaquetar la extencion
Bueno como muchos querian saber como subir la extencio a la Web Chrome Store le voy a enseñar a como empequetarla para poder subirla.
Primero deben poner el Google Chrome en modo programdor...
Luego hay que empaquetarla...Le dan En extencion de empaque...
Luego le dan en Directorio de raíz de la extensión: y seleccionan su archivo de extencion...
Para publicarla en la store solo entran a https://chrome.google.com/webstore/developer/dashboard y comprimen el archivo crx en ZIP y lo agregan (tienen que pagar la cuota de 5 usd)
Eso es todo... [MENTION=31672]Marcelord[/MENTION] y [MENTION=3264]mickey3[/MENTION] le puede interesar...
Antes de empezar les quiero decir que el codigo en si no es mio, pero tiene modificaciones que yo le hice, si alguien sabe la fuente de dicho codigo digalo y lo agrego al post.
Empecemos, primero debemos crear una carpeta en donde estaran todos los archivos de la extencion tendra como nombre el nombre de su extencion u otro, en esa carpeta crearan otra que llamaran img con iconos para su extencion, los deben nombrar icon.png, icon16.png, icon16.png, icon38.png e icon48.png, el tamaño de icon.png sera de 19x19 px, el de las otras tendran un tamaño segin el nombre, ejemplo icon16.png sera de 16x16px.
pueden generar iconos en Genfavicon. Free Online Favicon Generator. Icon Generator.
El primer archivo que crearemos sera manifest.json en el pondremos.
Insertar CODE, HTML o PHP:
{
"name": "Tutoriales",
"description": "Aquí va la descripción de tu Blog.",
"browser_action": {
"default_icon": {
"38": "img/icon38.png",
"19": "img/icon19.png"
},
"default_title": "Tutoriales",
"default_popup": "popup.html"
},
"manifest_version": 2,
"update_url": "http://clients2.google.com/service/update2/crx",
"content_security_policy": "script-src 'self' https://www.google.com; object-src 'self'",
"version": "1.0"
}Los datos que debes cambiar son "name" que es el el nombre de tu blog, "description" que es la descripcion de tu blog y por ultimo "default_title" que igual seria el nombre de tu blog. Eso seria todo lo que tendrian que modificar en ese archivo.
Luego crearemos un archivo que llamaremos popup.html en el pondremos este codigo.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- aqui pon el titulo de tu blog.... Yo usare el Feed de los tutoriales de forobeta -->
<title>El Título de tu Blog</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="popup.js"></script>
<base target="_blank">
</head>
<body bgcolor="#FFF">
<table class="body-wrap">
<tr>
<td class="container">
<div class="content">
<div id="logo">
<!-- pon un link hacia tu blog -->
<a href="http://www.forobeta.com/">
<!-- aqui pon el logo de tu blogo web -->
<img src="http://sololaley.tripod.com/imgban.gif" />
</a>
</div>
<div id="searchform" class="searchform">
<!-- pon la url de tu blog -->
<form action="http://forobeta.com/" method="post" class="searchinput" target="_blank">
<input type="search" name="s" placeholder="Buscar en el Blog..." />
<input type="submit" class="button search-submit" value="buscar">
</form>
</div>
<div id="feed"></div>
</div>
<div class="footer">
<div class="ficon-wrapper">
<!-- pon la url de de tus redes sociales -->
<a href="http://www.facebook.com/#" target="_blank" class="aicon"><div class="ficon sprite-fb" title="Facebook" ></div></a>
<a href="https://twitter.com/#" target="_blank" class="bicon"><div class="ficon sprite-tw" title="Twitter" ></div></a>
<a href="https://plus.google.com/#" target="_blank" class="bicon"><div class="ficon sprite-g" title="Google Plus" ></div></a>
<a href="http://feeds.feedburner.com/#" target="_blank" class="bicon"><div class="ficon sprite-rss" title="Suscríbete vía RSS" ></div></a>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>En el ya he agregado los comentarios para que sepan que cambiar.
Luego crearemos otro archivo llamado popup.js este archivo se encargara de revisar nuestro Feed y poder mostrar las ultimas estradas de nuestro blog. Pondremos este codigo:
PHP:
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://forobeta.com/external.php?type=RSS2&forumids=55");
feed.setNumEntries(5);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
var html = "";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
html = "<h5><a href='" + entry.link + "'>" + entry.title + "</a></h5>" ;
var div = document.createElement("div");
div.innerHTML = html;
container.appendChild(div);
}
document.write(html);
}
});
}
google.setOnLoadCallback(initialize);En este archivo hay cambiar el link del feed de forobeta por el de su blog, tambien pueden cambiar el numero de post a mostrar cambiando el 5 por el numero de post que quieran en feed.setNumEntries(5);
Por ultimo crearemos el archivo css que llamaremos style.css, aqui podran modificar lo que gusten ya que es un diseño unico yo lo he puesto asi.
HTML:
* {
font-family:"Open Sans", Arial, sans-serif;
margin:0;
padding:0;
}
img {
max-width:100%;
}
.collapse {
margin:0!important;
padding:0;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width:250px;
height:100%;
}
.searchinput {
position:relative;
}
input {
display:block;
border:1px solid #333;
-moz-border-radius: 5px;
border-radius: 5px;
}
input[type=search] {
width:100%;
position:relative;
top:0;
padding:.7em 4em .7em .7em;
}
input[type=submit] {
position:absolute;
right:.5em;
top:.5em;
bottom:.5em;
z-index:1;
width:5em;
cursor:pointer;
background-color:#333;
padding:0;
-moz-border-radius: 3px;
border-radius: 3px;
}
#logo {
width:200px;
margin:0.3em auto 1em;
}
a {
color:#2BA6CB;
}
.button {
text-decoration:none;
color:#FFF;
background-color:#666;
text-align:center;
cursor:hand;
cursor:pointer;
display:inline-block;
padding:5px;
text-shadow: -1px -1px rgba(0,0,0,0.5);
}
.button:hover {
background-color:#444;
}
p.callout {
background-color:#000;
margin-bottom:15px;
color:#FFF;
width:120px;
text-transform:uppercase;
padding:10px;
}
.callout a {
color:#FFF;
text-decoration:none;
font-size:80%;
}
.header.container table td.label {
padding:15px 15px 15px 0;
}
table.footer-wrap {
width:100%;
clear:both!important;
}
.footer-wrap .container td.content p {
border-top:1px solid #d7d7d7;
padding-top:15px;
font-size:10px;
font-weight:700;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Open Sans", sans-serif;
line-height:1.1;
margin-bottom:15px;
color:#000;
}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small {
font-size:60%;
color:#6f6f6f;
line-height:0;
text-transform:none;
}
h1 {
font-weight:200;
font-size:44px;
}
h2 {
font-weight:200;
font-size:37px;
}
h3 {
font-weight:500;
font-size:27px;
}
h4 {
font-weight:500;
font-size:23px;
}
h5 {
font-weight:400;
line-height:16px;
font-size:12px;
}
h5 a {
text-decoration:none;
}
form {
margin:0 0 1em;
}
p,ul {
margin-bottom:10px;
font-weight:400;
font-size:12px;
line-height:1.4;
color:#777;
}
p.lead {
font-size:17px;
}
p.last {
margin-bottom:0;
}
ul li {
margin-left:5px;
list-style-position:inside;
}
.container {
display:block!important;
max-width:100%!important;
clear:both!important;
margin:0 auto!important;
}
.content {
max-width:100%;
display:block;
margin:0 auto;
padding:10px;
padding-bottom: 5px;
}
.column {
width:300px;
float:left;
}
.column-wrap {
max-width:600px!important;
margin:0 auto;
padding:0!important;
}
.social .column {
width:280px;
min-width:279px;
float:left;
}
.clear {
display:block;
clear:both;
}
table.head-wrap,table.body-wrap,.content table,.column table {
width:100%;
}
.header.container table td.logo,.column tr td {
padding:15px;
}
.footer {
width: 100%;
height: 55px;
margin: auto;
background-color: #eee;
}
.ficon-wrapper {
width: 160px;
height: 35px;
margin: auto;
text-align:left;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 40px;
float: left;
clear: both;
}
.aicon {
width: 35px;
height: 35px;
float: left;
clear: none;
}
.bicon {
width: 35px;
height: 35px;
float: left;
margin-left: 5px;
clear: none;
}
.ficon {
width: 35px;
height: 35px;
}
.ficon:hover
{
opacity:0.9;
filter:alpha(opacity=90); /* Para IE8 y anteriores */
}
.sprite-fb {
background: url("http://www.metricspot.com/img/socialsprite.png") 0 0;
}
.sprite-tw {
background: url("http://www.metricspot.com/img/socialsprite.png") -35px 0;
}
.sprite-g {
background: url("http://www.metricspot.com/img/socialsprite.png") -70px 0;
}
.sprite-rss {
background: url("http://www.metricspot.com/img/socialsprite.png") -105px 0;
}
.sprite-mail {
background: url("http://www.metricspot.com/img/socialsprite.png") -140px 0;
}
h5 {
background-color: white;
border-radius: 4px;
border: solid;
padding: 10px;
border-color: #B4B0B0;
}
a {
color: black;
}Bueno con eso tendrian una extencion basica de su blog que se actualiza cada vez que el feed se actualiza, cualquier duda pregunte.
Captura de la extencio de Foro Beta para los tutoriales.
PD; ya he sabido la Fuente
Extra... Como Empaquetar la extencion
Bueno como muchos querian saber como subir la extencio a la Web Chrome Store le voy a enseñar a como empequetarla para poder subirla.
Primero deben poner el Google Chrome en modo programdor...
Luego hay que empaquetarla...Le dan En extencion de empaque...
Luego le dan en Directorio de raíz de la extensión: y seleccionan su archivo de extencion...
Para publicarla en la store solo entran a https://chrome.google.com/webstore/developer/dashboard y comprimen el archivo crx en ZIP y lo agregan (tienen que pagar la cuota de 5 usd)
Última edición:
¿igual se puede subir a las extensiones de chrome supongo?
