Caja de suscripción para nuestros lectores de RSS
Nice CSS menu with feed reader icons list, un simple y agradable tutorial que les permitirá montar en sus blog una llamativa caja de suscripción, quizás una buena forma de incentivar a nuevos usuarios a almacenar nuestro blog en su lector de feed habitual.
Descarga Ejemplo – Mas info woork
Instalación:
Realizamos desde nuestro encabezado, la llamada al script que nos permitirá mostrar u ocultar nuestra caja.
Copiamos y pegamos el siguiente código dentro de nuestras etiquetas < head >
JavaScript:
font-weight:bold;
}
.rss-button a{
}
#rss-menu{
padding:10px; padding-top:0px;
width:250px;
border:solid 1px #CCCCCC;
margin-top:10px;
}
#rss-menu a:link, #rss-menu a:visited{
color:#0033CC; display:block;
}
#rss-menu a:hover{color:#666666; text-decoration:none;}
#rss-menu h2{
border:0; margin:0;
border-bottom:solid 1px #CCCCCC;
color:#000000;
display:block;
font-weight:bold;
font-size:12px;
margin-bottom:10px;
padding:6px 0px;
}
#rss-menu ul, #rss-menu ul li{
border:0; margin:0; padding:0;
list-style:none;
}
#rss-menu ul li{
height:20px;
text-indent:104px;
margin-top:3px;
}
.feed-yahoo{
background:url(pic/feed-yahoo.png) no-repeat;
}
.feed-newsgator{
background:url(pic/feed-newsgator.png) no-repeat;
}
.feed-netvibes{
background:url(pic/feed-netvibes.png) no-repeat;
}
.feed-bloglines{
background:url(pic/feed-bloglines.png) no-repeat;
}
.feed-xml{
background:url(pic/feed-xml.png) no-repeat;
}
.feed-google{
background:url(pic/feed-google.png) no-repeat;
}
1) Añadimos el botón que nos permite mostrar/ocultar la caja de suscripción con toda la lista de iconos.
<h2>Subscribe My Feeds</h2>
<ul>
<li class=”feed-xml”><a href=”http://feeds.feedburner.com/webborchani”>Subscribe to RSS Feed</a></li>
<li class=”feed-yahoo”><a href=”http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/webborchani”>Add to My Yahoo</a></li>
<li class=”feed-newsgator”><a href=”http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http://feeds.feedburner.com/webborchanik”>Subscribe in NewsGator</a></li>
<li class=”feed-bloglines”><a href=”http://www.bloglines.com/sub/http://feeds.feedburner.com/webborchani”>Subscribe with Bloglines</a></li>
<li class=”feed-netvibes”><a href=”http://www.netvibes.com/subscribe.php?url=http://feeds.feedburner.com/webborchanik”>Add to Netvibes</a></li>
<li class=”feed-google”><a href=”http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/webborchani”>Add to Google</a></li>
</ul>
</div>
