Blogspot Vision

Saturday, January 23, 2010

DHTML Color Picker - Free to use on your own projects

F1FFCC

DHTML 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