Blogspot Vision: 1/1/10

Friday, January 29, 2010

Rediscovering CSS DIVs and containers for rounded corners development

Now you can create rounded corners with pure CSS coding. Among CSS3's handy new features is the border-radius property, which offers a clean and simplified way of adding rounded corners to elements on your page. Rounded corners can be modified for placement to any corner thus, enabling the coder to apply rounded corners to any or all four corners of an element. This feature supports all type browser except IE and can also be applied to images.

Properties of the border-radius:

-moz-border-radius: value
-webkit-border-radius: value

The "value", usually a singular value, will define the radius of the border of all four corners of your element.

Here's an example of the values set to 10px at all four corners

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Properties of individual border-radius:

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-right-radius
-webkit-border-bottom-left-radius

Here's an example of selected values set to develop a tear shape appearance

Blogspot Vision

#tearshape{
background: #B73A28;
padding: 3px 5px;
color: white;
font-weight: bold;
text-decoration: none;
-moz-border-radius: 9px 3px 9px 3px;
-webkit-border-radius: 3px;
-webkit-border-top-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
}

The border-radius property can also be applied to images, like the example below

#curve{
background: url(http://www.xataka.com/images/Blogger.Logo-thumb.png);
width: 250px;
height: 120px;
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-top-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;
}

Thursday, January 28, 2010

Colors Pallete Generator

With the colors pallete generator at CSSdrive.com, you can instantly generate primary colors within an image to use on your blog.

Click here to use the color generator

Notes about the generator

You can upload by PC or by URL
Max file size: 1MB
Supported image types: .png, .gif, .jpg, .jpeg

Brought to you by: cssdrive.com

Saturday, January 23, 2010

Babylon 8

Babylon 8 is provider of quick online and offline dictionary and translation software in over 75 languages in one simple click and is being used by millions of private users and organizations in more than 200 countries. Recommended for all bloggers, can come in handy when you need at a click translation of tutorials, definitions, or languages. Full web page and document translation.provider of quick online and offline dictionary and translation software in over 75 languages in one simple click and is being used by millions of private users and organizations in more than 200 countries. Recommended for all bloggers, can come in handy when you need at a click translation of tutorials, definitions, or languages. Full web page and document translation.provider of quick online and offline dictionary and translation software in over 75 languages in one simple click and is being used by millions of private users and organizations in more than 200 countries. Recommended for all bloggers, can come in handy when you need at a click translation of tutorials, definitions, or languages. Full web page and document translation.

Click here to download

Screen Shots:

Windows Live Writer

Windows Live Writer is a desktop application that makes it easier to compose compelling blog posts using Windows Live Spaces or your current blog service. Includes a WSYIWG blog editor as well as tools for publishing photos and maps. Included SDK allows developers to extend the capabilities of Writer to publish additional content formats. This is a great client for Windows Live Spaces but also works well with other weblogs services including: Blogger, LiveJournal, TypePad, and WordPress.

Click here to download

Screen Shots:

DHTML Color Picker - Free to use on your own projects

F1FFCC

DHTML Color Picker

Show/ hide Color Picker

Encode / Decode HTML entities or vice versa for placement of section codes in the body section

If your trying to add an adsense code, insert a table, or use a script that requires placement in the HTML section of Blogger, use this web-tool to convert your text to HTML entities or vice versa to make it work. The HTML section of Blogger can usually be found after the closing head tag (</head>) and most of the time requires conversion of the HTML code.

Click here to use the converter

This converter is brought to you by: centricle.com

Tuesday, January 19, 2010

Blogger Tube - The first Blogger video template

View | Download

Features:

Instructions:	Template Settings
Coder:	dantearaujo
Compatible with:
Language:	English
Properties:	2 Columns, Right sidebar, Red, White, Black, Featured Content Enabled
Categories:	Professional pages, Video pages, Photo gallery

Monday, January 18, 2010

ProDreams Blogger Template

View | Download

Features:

Compatible with:
Language:	English
Properties:	2 Columns, Right sidebar, Red, White
Categories:	Professional pages, Personal pages

Thursday, January 14, 2010

Lil Wayne - Ill Not Sick Blogger Template

View | Download

Features:

Compatible with:	FF, IE, Chrome
Language:	English
Properties:	2 Columns, Right sidebar, Blue, Gray, White
Categories:	Hip-hop, Personal pages

Wednesday, January 13, 2010

How to add a "Read More" link and control postings appearance and summary length

Directions

1. From the Blogger Dashboard, navigate to Layout > Edit HTML.

2. Copy and paste the following section code right after this section code: ]]></b:skin>

Select All

<script type='text/javascript'> 
var thumbnail_mode = "float" ;
summary_noimg = 440;
summary_img = 360;
img_thumb_height = 140;
img_thumb_width = 140;
</script> 
<script type='text/javascript'> 
  //<![CDATA[
// 
// 
function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}
 
function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) { 
  if(thumbnail_mode == "float") {
   imgtag = '<span style="float:left;margin:0px; padding:0px 5px 0px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
   summ = summary_img;
  } else {
   imgtag = '<div style="padding:0px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
   summ = summary_img;
  }
 }
 
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
 
 //]]>
</script>

3. Next, you'll want to stylize your postings, this can be done by adding the section code below right after the code above:

Select All

.post-body{
  display:table;
  font-size:13px;
  font-style:italic;
  height:1%;
  padding: 10px 20px;
  line-height:1.7em;
}
 
.post h3 {
  font-size:25px;
  font-weight:bold;
  letter-spacing:-2px;
  margin:0px 0 0;
  text-decoration:none;
  padding:10px 0 4px 20px;
  line-height:1.4em;
  color:$titlecolor;
}
 
.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}

.post h3 strong, .post h3 a:hover {color:$textcolor;}
 
h2.date-header{text-indent:-9999em;}
 
.numComments {
  background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi48jgnEWxXFcW0Ur1CxPr6ySl4pEv0teJtBnY0Ag9jLNhZF3y4nc_DbNzFD5_I9yCAGOTiTpzfV8JefQpQWIPY4ql069PsXKtg0iXR3gnyEapgRrdslYz5M0ubJwLdlNtRa___19MBJjk/s1600/comments.png) no-repeat top right;
  float:left; 
  text-align: center;
  margin: -7px 0px 0px 20px; 
  padding: 6px 0 0 0; 
  font-size: 13px;
  font-weight:bold; 
  width: 35px; 
  height:35px; 
  font-family: Arial, Sans-serif;
  text-shadow:0 1px 0 #f9f9f9; 
}
.numComments a:link{
  color: #404040; 
}
.numComments a:visited{
  color: #404040; 
  text-decoration:none;
}
.numComments a:hover{
  color: #404040; 
}
 
post-comment-link{
  margin: 0px; 
  padding: 0px 0px 0px 0px;}
 
#showlink{
  display:block;
  float: right;font-size:13px;
  padding: 0px 20px 0px 0px;text-shadow:0 1px 0 #f9f9f9;}
 
#showlink a, #showlink a:visited{color: #404040}
#showlink a:hover{color: #404040; text-decoration: none}
 
.post-labels{margin: 0px; padding: 0 0 0 0px;text-decoration:none;font-size:11px;}
 
</style>

Note: Use CSS to stylize your posts to the way you like it or use this image pallete generator to generate colors that match your template - Image Pallete Generator @CSSDrive

4. Now, you'll need to add the "Read More" link and the "comments" link if you'd like. Click on "Expand Widget Template" and search for the class span below:

This is your Comments Link:

5. If you want the comments link inside postings, locate this section code and move it right after this section code: <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

6. If you want the "Read More" link inside your postings, copy and paste the section code below right after this section code: <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

This is your Read More Link:

Monday, January 4, 2010

How to add the delicious button with a hit counter in your Blogger postings

This is a Blogger hack used to add the delicious button with a hit counter of the number of users that shared the current link for each posts. This is similar to the retweet button with the same function, just a different look.

Directions

Step 1 - In your Blogger account, navigate to Layout > Edit HTML (select "Expand Widget Template") and locate the following section code:

To have it under post titles or above postings
Locate <div class='post-header-line-1'/> or something similar to that

To have it under postings where the post footer is
Locate <div class='post-footer-line post-footer-line-1'/> or something similar to that

Step 2 - Add the following section code below to your desired location. This is where the link will appear.

<a expr:href='"http://del.icio.us/post?url="+ data:post.url +"&title" + data:post.title' target='_blank'>add to del.icio.us</a>
saved by <span class='delsquare' expr:id='"a"+data:post.id'>0</span>users

<script type='text/javascript'>
function displayURL(data) {
var urlinfo = data[0];
if (!urlinfo.total_posts) return;
document.getElementById('a<data:post.id/>').innerHTML =urlinfo.total_posts;
}
</script>
<script expr:src = '"http://badges.del.icio.us/feeds/json/url/data?url= " + data:post.url + "&callback=displayURL"'/>

Add style to it
Copy and paste the following section code right after the head code: <head>

<style>
.delsquare{
font-family:Arial;
background:#0033CC;
padding:2px 4px;
font-weight:bold;
font-size:12px;
color:#FFFFFF;
}
</style>

*Tutorial Complete

Source: delicious, woork up