Blogger widgets ::blocoon::

Host JavaScript (.JS) files on Blogger

2009-11-23T15:53:00.000-08:00

One of the biggest problems with Blogger is when you reach to a point that JS files need to be hosted somewhere to get the URL.If your not forced yet to use .JS files in some of your works trust me,in the future you will...Some people use Google sites for this reason.Other people use some of the biggest hosting clients like HotLinkFiles,or Fileden,or Ripway,and the list goes on!The idea is to upload there your JS file and then take the direct URL of your upload for your JavaScript code.But not any more!!!

There is a little secret in this story.A secret that quite a few people knows to display the JavaScript code of the JS file inside the rest script!

Where you used to place the URL of the uploaded JS files instead try this code:

<script type='text/javascript'>
//<![CDATA[
<--Paste all code here from .js file -->
//]]>
</script>

(In some occasions you may need to delete the last //]]> to be able to save the template,so play around!)
Don't forget to save the template before of anything!

avatars on Blogger Comments

2009-11-21T14:30:00.000-08:00

One of the Blogger "Anniversary" Releases it was to enable the Avatar mode for Blogger comment.This jdut means that everybody who comment is gonna have his own avatar!This is very usual allready in most of the Blogger blog and one reason for that is that you can enable it without sniffing codes!

It's very easy so let's do it!

1) Log on your Blogger Account

2) Go to "Settings"

3) Go to "Comments"

4) And enable "Show profile images on comment"

5) Save.

Now you will have your visitors who comment displaying with his own avatar.

Sharing is Sexy Widget

2009-11-15T07:22:00.000-08:00

We have told already how much important is to have Social Networks connectors on your site.Every body today use countless Social Networks and is a great way of make your blog more popular.After all,traffic it's all about..One great widget for this purpose is "Sharing is Sexy" widget.You may have see it somewhere around the web,it's a Catching eye widget with moving icons.When you rollover on a icon it pops out!perfect widget to let the people share your blog!

Let's see how we add this widget

1) Log on your dashboard

2) Go to "Edit Hmtl" area

3) Save your template!

4) Find (Ctrl+F) this code:

</head>

5) Add this code under the code you found

<style type='text/css'> div.sexy-bookmarks { height:54px; background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom; position:relative; width:540px; }
div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom; position:absolute; right:-17px; }
div.sexy-bookmarks ul.socials { margin:0 !important; padding:0 !important; position:absolute; bottom:0; left:10px; }
div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important; }
div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important; font-size:0 !important; color:transparent !important; }
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url('http://i44.tinypic.com/1znbj83.png') no-repeat !important; }
.sexy-furl { background-position:-300px top !important; }
.sexy-furl:hover { background-position:-300px bottom !important; }
.sexy-digg { background-position:-500px top !important; }
.sexy-digg:hover { background-position:-500px bottom !important; }
.sexy-reddit { background-position:-100px top !important; }
.sexy-reddit:hover { background-position:-100px bottom !important; }
.sexy-stumble { background-position:-50px top !important; }
.sexy-stumble:hover { background-position:-50px bottom !important; }
.sexy-delicious { background-position:left top !important; }
.sexy-delicious:hover { background-position:left bottom !important; }
.sexy-yahoo { background-position:-650px top !important; }
.sexy-yahoo:hover { background-position:-650px bottom !important; }
.sexy-blinklist { background-position:-600px top !important; }
.sexy-blinklist:hover { background-position:-600px bottom !important; }
.sexy-technorati { background-position:-700px top !important; }
.sexy-technorati:hover { background-position:-700px bottom !important; }
.sexy-myspace { background-position:-200px top !important; }
.sexy-myspace:hover { background-position:-200px bottom !important; }
.sexy-twitter { background-position:-350px top !important; }
.sexy-twitter:hover { background-position:-350px bottom !important; }
.sexy-facebook { background-position:-450px top !important; }
.sexy-facebook:hover { background-position:-450px bottom !important; }
.sexy-mixx { background-position:-250px top !important; }
.sexy-mixx:hover { background-position:-250px bottom !important; }
.sexy-script-style { background-position:-400px top !important; }
.sexy-script-style:hover { background-position:-400px bottom !important; }
.sexy-designfloat { background-position:-550px top !important; }
.sexy-designfloat:hover { background-position:-550px bottom !important; }
.sexy-syndicate { background-position:-150px top !important; }
.sexy-syndicate:hover { background-position:-150px bottom !important; }
.sexy-email { background-position:-753px top !important; }
.sexy-email:hover { background-position:-753px bottom !important; } </style>

6) Now find this code

<data:post.body/>

Add this code after the code you found.Note: If you have the "read more" hack on your template add this code after the hack code.

<div class='sexy-bookmarks'> <ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li><li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='sexy-syndicate'><a href='http://feeds.feedburner.com/Blocoon' title='Subscribe to RSS'/></li>
<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li> </ul>
<span class='sexy-rightside'/></div>

7) Replace the Feedburner url (marked with red) with yours.

8) Save and preview.

Remove Blogger Navbar

2009-11-14T13:42:00.000-08:00

This post is for turning off the Blogger navbar.In my opinion is very annoying cause first,maybe will lead your traffic to other blogs and second and most important,is not (visual) fitting in most of the Blogger templates.Is don't let the blog look more personalized.Off course and in this trick is up to you if you want to remove the navbar or not.

Lets see how we remove the navbar

1) Log on your dashboard

2) Edit Html

3) Look For this Code

  <b:skin><![CDATA[/*

4) After the above code is your template info.after the template info and before the Body tag add this code

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

5) Now must look something like this

    <b:skin><![CDATA[/*
--------------------------------------
Your template info
-------------------------------------- */

#navbar-iframe {
   height:0px;
   visibility:hidden;
   display:none;
}

body {
margin:0 auto;
padding:0px 0px 0px 0px;
background:#333333 top repeat-x;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#161514;
font-size:13px;
}

6) Save & Preview.

Most Popular Posts

2009-11-13T07:13:00.000-08:00

Another great Blogger widget is the "Most Popular posts" widget.It displays the posts of your blog has been most visited.Remind that this widget is only for Blogger blogs and is not working on other Blog clients.

1) log on your dashboard

2) Add a Gadget

3) Html/JavaScript

4) Add this code

<script type="text/javascript">

function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i  )
{
var href = "'"   obj.value.items[i].link   "'";
var item = "<li>"   "<a href="   href   ">"   obj.value.items[i].title   "</a> </li>";
document.write(item);
}
document.write('</ol>');
}

</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1a1c6e4e6d4f148e3650fda46910e15f&url=http%3A%2F%2Fwww.blocoon.blogspot.com&num=10" type="text/javascript"></script>

5) Change the red url with yours without the http://

6) Save and preview.

Hyperlink images or text

2009-11-11T09:51:00.000-08:00

This is a very easy thing to do and as you understand this is a post for beginners.In this post we'll see how we can hyperlink a photo or some text with a simple code.Lets see the code for text.

<a href"TARGET-LINK">TEXT</a>

So this is the code.Where is the "Target-Link" you change it with the URL (among with the http://) and where is the "TEXT" you change it with your text.Beware the </a> cause this defines the end so be careful,don't import in there words you don't want to be hyper linked.Let's see the image code.

<a href="TARGET-LINK"><img src="IMAGE_LINK"></a>

First you need to upload somewhere the image to get the direct link.It's the same code except of we have change the "TEXT" with the image (img) source (src).As you perhaps see,the image link is inside the end </a> so only this will displayed as hyperlink.Don't forget always both codes (href & img src) goes among with =" " or your link will be not functional.

Blogger Templates - Vol.01

2009-11-07T22:29:00.000-08:00

You looking for some great premium looking templates for your Blogger blog?Let's see some amazing Blogger templates for this month.All the instructions is inside the downloading package:

.01 KeKo Template

2 column and 3 column footer
Widgetize sidebar
Adsense loop integrated
Twitter integrated
Customize category, archive and tag page with post excerpt and thumbnail (seo purpose)
6 125×125 banner ready (controlable via theme option)
2 featured spot in sidebar and footer (choose your featured category via theme option)
Thread comments ready
Header image changeable in admin panel
Tested working on all major browsers
Tested working on WP 2.7 and above
Valid XHTML

Password: Blocoon

.02 Mystique

Theme Name: Mystique
Description: Feature-packed theme with a solid design and a friendly interface. Designed by digitalnature.
Version: 1.05
Author: digitalnature
Author URI: http://digitalnature.ro
Tags: light, white, one-column, two-columns, three-columns, fixed-width, flexible-width, right-sidebar, left-sidebar, theme-options, threaded-comments, translation-ready, custom-header

Password: Blocoon

03.Propress

2 Columns
Blue
Fixed Width,
Free Blogger Templates
Right Sidebar

Password: Blocoon

04.Revolution Church

Current version: 4.0
Updated: 7/2/09
Compatible to: Blogspot
3-columns
fixed-width
theme-options
threaded-comments
translation-ready

Password: Blocoon

Seo Title Tags

2009-11-07T20:18:00.000-08:00

When i saying "title tags" i mean the title of the post.Your Blogger blog from default it displays the blog name first and after the post title.We don't want that.Is not good for SEO monitoring.Nowdays almost all blogs and all of the sites have Meta tags to the templates.So you can't go very far without a good SEO Monitoring.One way to optimize it is to change the title tags so your post title will displayed before your blog title.

1. Log on your "Edit Html" area on your blog

2. Search (Ctr+F) for this code

 <title><data:blog.pageTitle/></title>

3 Replace it with this code:


<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

4. Save and preview.

Now the browsers will display the post title before the blog name.

Replace Blogger Favicon

2009-11-07T20:12:00.000-08:00

Another nice trick to personalize your Blogger blog is to change the Blogger favicon.You know,that little orange icon of Blogger on your address bar and on the tab.This is from the very easy things to do,but the little hard part is for those who don't have Photoshop.You need a small png or jpeg but i think is better on png.I mention Photoshop cause is better the backround of the logo(?) in your icon be transparent to be displayed properly in all the colors of browsers.For example,my browser is Firefox with black theme.If your favicon is a yellow circle in a white backround is gonna be very ugly in my browser.So has to be a yellow circle in a transparent backround.If you know another application except of Photoshop to do the work use that.After that,the size must to be at most in 25x25.I use 24x24 so figure out what is good for your blog.I hope i helped about the appearance.

1.Open your template

2.Log on the Html area

3.Find (Ctrl+F) this code

 <data:blog.title/>

(it's on the top of your template)

Example:Probably it will look like this:


<data:blog.title/></title> </b:if>
    <b:skin><![CDATA[/*

4.add the following code after the code you found on the search we've done,
(and before the <b:skin><![CDATA[/*)


<link href="YOUR-URL-HERE" rel="sortcut icon" type="image/x-icon">

5.Change the YOUR-URL-HERE with the url of your favicon.

6.Now must look like this:


<data:blog.title/></title> </b:if>
<link href="www.myfavicon.com" rel="sortcut icon" type="image/x-icon">
<b:skin><![CDATA[/*

7.Save & preview.

You're done!

Add social icons to each post

2009-11-07T20:05:00.000-08:00

Social Networks is one of the MOST important things if you want your blog grow big.Today in Internet everybody is connected with everybody sharing information and you have to take advance of this.Adding some sharing icons is one of the ways to succeed it.As you see from my blog i have add the 6 more popular Social Networks so you can share the post you like.I found another ways also but this is the most clean way and easy to customize.

You can see them on action on the bottom of this article.
Let's see how we can do that.

1)Log to your Blogger account

2)Go to your Html area of your blog

3)Check "Expand Widgets"

4)Press Ctrl+F and search this code


<data:post.body/>

(NOTE:If you have add the "read more" widget on your blog you will find TWO similar codes,you have to place the below code after THE SECOND CODE!)

5) Now place this code right after the code you found


<!--SOCIAL-BOOKMARKING-ICONS-STARTS-->
<b:if cond='data:blog.pageType == "item"'>
<!--DIGG-->
<script type='text/javascript'>digg_url=&quot;<data:post.url/>&quot;;</script><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
<!--Stumble-->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='URL'/></a>
<!--Delicious-->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='URL'/></a>
<!--Technorati-->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='URL'/></a>
<!--Twitter-->
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='URL'/></a>
<!--Facebook-->
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='URL'/></a></b:if>
<!--SOCIAL-BOOKMARKING-ICONS-STOPS-->

6)Change the blue URL with the source of your icons (you can upload in several sites,i use Photobucket.NOTE:Don't forget you need ONLY the "direct link" of your icons.)
7) Save & Preview!

For now i give for this Social Networks.More to come.

2009-11-07T19:58:00.000-08:00

2009-11-01T17:31:00.000-08:00

Premium Services

2009-10-29T20:50:00.000-07:00

Script Star Crew is responsible for the development a lot of blogs in the history of blog sphere.Our passion for blogging (on Blogger!) had lead us to the path of unique creations through all of this years.We offer solutions for Bloggers such as:

Template customization
You have a free template & you see it all over the place?Don't worry!We can personalize your template.We turn the appearance of your blog to premium style.Navbars,drop down menus,sidebars,social bookmarks in posts,in navigation bars,adsense everywhere,all in Web 2.0,glossy styles,you name it!We can also manipulate the dashboard.Resize the width of the template,wrappers,columns,add more widget areas,etc.Turn your blog to the next level!

Prices from: 15 € *

SEO Optimization
In all the sites on web the contention is high and what you need,is not a good idea (cause someone had it before you this days) but a good SEO system.We offer the best SEO optimization with the best codes just for your blog!We can make the best sitemaps for Google bots.We add meta tags so Google can read every single post title and/or label on your blog!We add your blog in 100+ Search engines manual.We guarantee the limit up of your blog in search engines!

Prices from: 25 € *

Social Networking
You messed up or you can't handle with the ocean of the social networks around the web?We can help!Social Networks is the second most important thing to bring traffic on your blog (No1 is the Search engines).We can take care the social growing of your blog by adding & sharing your blog in countless networks.When it's okay you'll get a list with the sites and log passwords to continue the work.

Prices from: 10 € *

Template Design
You still not happy with the customization of a free template and you want your own premium template but you can't design it?We can!We offer template creations from scratch as YOU want it with the most modern designs to make your visitors stand speechless!We can draw,design,slice,or even convert it in XML if you can't do it.Our creations is unique for you and only!

Prices from: 70 € * (Template design)

Logo Design
What a unique site it is with out a unique logo,correct?Our Crew is guarantee for a unique modern logo in the mood of your site.We have lot of satisfied clients through this years.We use the best Professional tools such as Adobe Photoshop CS4 & Illustrator CS4 for our works with the best results.After all,the logo is the "head" of your site.

Prices from: Contact us

We also can design:

Promotion ads for Magazines
Catalogs
Promotion Posters
Promotion Banners
Promotion Calendars
Flayers
Event Posters
Business cards
Web Banners

*Price it depends from the work

Heya Citizens of the land!Great news for our land!Our new interface is already here!!!We made it more user-friendly,we add categories etc.We'll making updates for the upcoming days so show understanding to any issue you maybe find!Also we have lunch our official forum!We would love to join our community and say your opinion!Keep it up!!

(Portfolio coming soon)

Contact Us

Blogger widgets ::blocoon::

Host JavaScript (.JS) files on Blogger

avatars on Blogger Comments

Sharing is Sexy Widget

Remove Blogger Navbar

Most Popular Posts

Related Posts for Blogger

Hyperlink images or text

Blogger Templates - Vol.01

Recent Posts Widget

Seo Title Tags

Replace Blogger Favicon

Add social icons to each post

BLOGROLL

Premium Services