Sundarbans Gallery

Tuesday, March 9, 2010

The art-works by RuboART.

Watercolors of Spanish artist Rubo (P.C. Atres). Religious, mythological and other plots with nude men.

Website: http://www.ruboart.blogspot.com/

Monday, March 8, 2010

Showing your location by Google Static map

In websites on travel ,restaurant ...,they usually provide a map for readers to show up their location . It's very good for readers to know where they are and how to reach to their location .
You have a shop,a restaurant ,and you want to adding a map to your location ? It's very easy ,my friends .See the map I added bellow and I will show you the trick :

Now ,let's take a look on what is beyond the map ?
Here is the code for map

<img src="http://maps.google.com/maps/api/staticmap?center=21.075313,105.772897&zoom=14&size=480x480&markers=color:red|label:S|21.075313,105.772897&sensor=false" />

just a HTML tag for inserting image . But the secret is in the URL :
http://maps.google.com/maps/api/staticmap?center=21.075313,105.772897&zoom=14&size=480x480&markers=color:red|label:S|21.075313,105.772897&sensor=false
This is URL to an map which is created by Google Static Map - a service of Google . You send an URL which contain parameters such as location,zoom level,size of map,marker ...like the URL above to Google Static Map and it return an image which is map of your location . You can paste the URL above direct to browser address bar and see the map .
Let's go deeper in the URL above :
- http://maps.google.com/maps/api/staticmap?: this is HTTP request for Google Static Map service
-center=21.075313,105.772897 : center parameter defines the center of the map, equidistant from all edges of the map. This parameter takes a location as either a comma-separated {latitude,longitude} pair (e.g. "21.075313,105.772897") or a string address (e.g. "city hall, new york, ny") identifying a unique location on the face of the earth .If you are outside US , using string address sometimes receive a wrong result . So the best is using latitude and longitude . But how to know the latitude and longitude of a location ? You can go to this webpage , choose your location in map ,when you see your location ,double click and you will see the latitude and longitude .
-zoom=14 mean the zoom level of map is 14 . Zoom levels go from 0 to 21 .You can test them for the best result.
-size=480x480 : mean the size of map is 480x480 pixels . Maximum is 640x640 pixels .
-markers=color:red|label:S|21.075313,105.772897 is marker of your location in map. Markers parameter come with a set of value assignments . Color is the fill color of your marker ,label is the character which show up on your marker ,and the last value is latitude,longitude or string address of your location .If you want to mark more than one location ,you can add more markers parameter ,each of them mark a location .
-sensor=false : specifies whether the application requesting the static map is using a sensor to determine the user's location. This parameter is required for all static map requests
Now ,joining all parameter to an URL and place it in src attribute of img tag ,we can show a map for a location .
There are many options which can be add to URL for making a map as our need (for example ,show a path ,show a satellite map...) .In this post ,I can only cover the basic . Detail can be found here .
I hope this post helpful to you . Thanks for reading .
huy signature

Sunday, March 7, 2010

Body-painting. Anthony Larrisey.

The art-works of American body-painter Anthony Larrisey. Picturesque imaginations on nude men.

Website: http://www.urbanflesh.com/

Make thumbnail for related posts

You may know the code for related posts which I showed in previous post in Simplex Design blog. In this post ,I want to show you the code for adding thumbnail to related posts . This code is based on related posts code before but add some lines for thumbnail . I myself don't create this code ,I found it in Bloggerpluggins blog,and introduce it here ,I hope it helpful for you all .

You can take a look on related post with thumbnails at live demo

Here is steps for doing this hack :
1,Go to Dashboard ,continue to Layout --> Edit HTML .Checked on Expand Widgets template .
2,Look for </head>
and replace it with :


<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDlLq2aMhLswqWevdH0ZtfTrW2zHjUj9FlRb-LbnIW5yuR6iBwiZx5xnUFJrTVTTtoKI4Zz72tsrTbJGDZk59tOpqqy8D_vUF4sJS1TDe6qM8HfXLz2u4aiiT3Xw63V-UvhH4WK-_U0N8/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>

</head>
This is CSS for formatting related posts section .
3,Find <div class='post-footer-line post-footer-line-1'>
or <p class='post-footer-line post-footer-line-1'>
if you don't find any of two lines above in templates ( for example ,in template I designed ^^) you can find this <p><data:post.body/></p>
and add the code below after these line :

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>

There are some variables in this code and you can change its value for making related posts section as you want .

var maxresults=5;

the number of related post which will be show

var relatedpoststitle="Related Posts";

title of related posts section

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDlLq2aMhLswqWevdH0ZtfTrW2zHjUj9FlRb-LbnIW5yuR6iBwiZx5xnUFJrTVTTtoKI4Zz72tsrTbJGDZk59tOpqqy8D_vUF4sJS1TDe6qM8HfXLz2u4aiiT3Xw63V-UvhH4WK-_U0N8/s400/noimage.png";

url of default image if it can't create thumbnail