iphone4: June 2008

Monday, June 30, 2008

Blogger Tips: feeds RSS list menu

Some readers asked to me ho to add the feed RSS menu in my previous post in their Blogger template.

It's very simple and no complex following these simple instructions. (I added this menu on my template... click on the Feed Rss link on my navigation bar).

Step 1: CSS Code for your menu
I suggest you to use Dreamweaver or an external editor do modify your template (you can also use notepad). Copy and paste HTML code in the step 1 and add it where you want in the source code of your template. I changed CSS code of #rss-menu ID adding a position:absolute, and z-index=2 (to display above all other elements in the page)

/* -------------------------------- */
/* RSS MENU */
#rss-menu{
padding:10px;
padding-top:0px;
width:270px;
border:solid 1px #CCCCCC;
margin-top:10px;
font-size:11px;
position:absolute;
background:#FFFFFF;
margin-left: 446px; /* Change it with your custom distance from the left margin */
top: 82px; /* Change it with your custom distance from top */
z-index:2;
}

Step 2: images
If you want to use directly my images, change the css feed icons code with:

/* FEED ICONS */
.feed-yahoo{
background:url(http://lh5.ggpht.com/antonio.lupetti/
SGkbSeViXCI/AAAAAAAABq0/VKFk--P6rzg/s144/feed-yahoo.png) no-repeat;
}
.feed-newsgator{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZt949soI/AAAAAAAABqk/0K_xT635iWc/s144/feed-newsgator.png) no-repeat;
}
.feed-netvibes{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZsku-McI/AAAAAAAABqc/geaegB--2R0/s144/feed-netvibes.png) no-repeat;
}
.feed-bloglines{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZlVYv_1I/AAAAAAAABqM/HSGE2JRVGA8/s144/feed-bloglines.png) no-repeat;
}
.feed-xml{
background:url(http://lh4.ggpht.com/antonio.lupetti/
SGkZvPomXRI/AAAAAAAABqs/hXOtnqszlws/s144/feed-xml.png) no-repeat;
}
.feed-google{
background:url(http://lh4.ggpht.com/antonio.lupetti/
SGkZrkp8XCI/AAAAAAAABqU/Yp-Rb_1L98k/s144/feed-google.png) no-repeat;
}

You can also save these images in your Picasa web album which you can use to store all image to publish on your blog. If you need more infos about some blogger tips take a look at this my old post.

Step 3: Javascript to show/hide the menu
Add the javascript function in the step 3 in the <head> tag of your blogger template inside the <script> tag:

It's all! If you need for help, contact me :)

Download source code

Related Content
Nice CSS menu with feed reader icons list
Some Blogger Tips you probably don't know

Sunday, June 29, 2008

Nice CSS menu with feed reader icons list

This tutorial illustrates how to design a nice CSS menu with a list of feed reader icons.

I added to this menu the following links: standard reader (your browser), My Yahoo, NewsGator, Bloglines, Netvibes and Google Reader. The result is something like this:

Download source code for the full code and icons.

Download this tutorial

Step 1: HTML Code
Create a <div> element with ID=rss-menu and add an header using <h2> tag and an unordered list using <ul> tag:

<div id="rss-menu">
<h2>Subscribe My Feeds</h2>
<ul>

<li class="feed-xml">
<a href="http://feeds.feedburner.com/Woork">Subscribe to RSS Feed</a>
</li>

<li class="feed-yahoo">
<a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/Woork">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/Woork">Subscribe in NewsGator</a>
</li>

<li class="feed-bloglines">
<a href="http://www.bloglines.com/sub/ http://feeds.feedburner.com/Woork">Subscribe with Bloglines</a>
</li>

<li class="feed-netvibes">
<a href="http://www.netvibes.com/subscribe.php?url=http://feeds.feedburner.com/Woork">Add to Netvibes</a>
</li>

<li class="feed-google">
<a href="http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/Woork">Add to Google</a>
</li>

</ul
</div>

How you can see from the code above, each feed reader link is contained into a <li> element:

I designed and used a background icon for each <li> element (using CSS), adding a short description. (ex. "Add to netvibes").

Step 2: CSS Code
I used a CSS class for each feed icons:

.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;
}

Download source code for full CSS code.

Step 3: Show/Hide Menu with Javascript
You can also add a javascript function to show/hide this menu in your page adding this simple javascript code in the <head> tag:

This function take in input a parameter which is the ID of the layer you want to show/hide (in this case "rss-menu"). So, create a button which you can use to show/hide your menu:

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

If you want your menu is displayed above the content of your page set CSS attribute position to absolute

It's all!

Download this tutorial

Funny Facts about Men & Women

My friend send me this email. Tanks François Oswald, I liked very much, it is so funny and real.Funny Facts about Men & Women:Men: All men are extremely busy.Although they are so busy, they still have time for women.Although they have time for women, they don’t really care for them.Although they don’t really care for them, they always have one around.Although they always have one around them,

Friday, June 27, 2008

PHOTOS - morph into a animal (FUN)

In youwild you can morph yourself -- or a friend, family member or pet -- into an imperiled animal of your choice.It´s a fun way to learn about imperiled wildlife and a fun way to play with your friends or family.It's simple: You start by choosing an animal from our selection of wolf pups, sea otters, pandas, lions, chimpanzees, and other adorable, majestic, and even scary-looking critters.