boxfeedsuscr.jpg

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 >

PLAIN TEXT
JavaScript:
<script language="javascript" src="show_layer.js"></script>

Nuestro Codigo CSS

PLAIN TEXT
CSS:
.rss-button{
    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;
}

CONTENIDO:
1) Añadimos el botón que nos permite mostrar/ocultar la caja de suscripción con toda la lista de iconos.

PLAIN TEXT
HTML:
<a href="#" onclick="javascript:showlayer('rss-menu')" class="rss-button">Subscribe My Feed</a>

2) Añadimos nuestra caja con toda la lista de opciones

PLAIN TEXT
HTML:
<div id="rss-menu">
<h2>Subscribe My Feeds</h2>
<ul>
<li class="feed-xml"><a href="http://feeds.feedburner.com/webxyberneticos">Subscribe to RSS Feed</a></li>
<li class="feed-yahoo"><a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/webxyberneticos">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/webxyberneticosk">Subscribe in NewsGator</a></li>
<li class="feed-bloglines"><a href="http://www.bloglines.com/sub/http://feeds.feedburner.com/webxyberneticos">Subscribe with Bloglines</a></li>
<li class="feed-netvibes"><a href="http://www.netvibes.com/subscribe.php?url=http://feeds.feedburner.com/webxyberneticosk">Add to Netvibes</a></li>
<li class="feed-google"><a href="http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/webxyberneticos">Add to Google</a></li>
</ul>
</div>