January 31, 2009

15 Hand Picked Twitter Tools ( Apps )

1. TwitterFeed.com
Send all new blog posts automatically to your twitter account: Tweeting made easy.
An alternative: Pingvine

2.MyCleenr.com
Clean the clutter: If you think you are following someone who rarely updates his twitter account, then get some help from this tool and say goodbye to them.
MyCleenr is a unique way to sort your friends by their last tweets. It allows you to get rid off all the inactive and useless accounts that you are following!

3.Tweetie

Manage your twitter account from your iPhone.
Some of the features offered by Tweetie:

Features

  • Handle multiple twitter accounts.
  • View your timeline, replies, direct messages and favorites.
  • Browse your friends and followers.
  • Post new tweets, retweet
  • Reply directly to tweets and send direct messages.
  • Follow and unfollow people.
  • Mark tweets as favorites.
  • Update your twitter location.
  • View twitter trends and perform custom searches.
  • Save your favorite searches.
  • Uses secure connection (https).
  • Go to User shortcut
  • Nearby search
  • Themes and adjustable font size

4.TweetLater

One of the most recommended tool, it provides these features:
Schedule tweets: Publish tweets when your international followers are online and you're asleep.
Send automated thank you notes to new followers, and automatically follow new followers, if you choose to do so.
Set up alerts and track keywords in the public Twitter stream: and get periodic emails from TweetLater which contains a digest of the tweets that contain those keywords.

5.Twollow.com

Auto Follow People on Twitter.
This free web application allows 5 unique keywords to be followed per Twitter account (up to 15 if you go for their premium service), and tells you who the application recently followed for you. It’s a great app if you’d like to have some automation of finding and adding new people to follow.


6. TweeteRate


Tweeterate extends Twitter with the possibility to rate the tweets you get from your friends.

  • Rate tweets of your friends useful, funny or lousy
  • See a toplist of your most annoying friends
  • See how others rated you
  • Easily hide annoying friends from your timeline
  • Easily unfollow friends when "enough is enough"
  • Get a comfortable twitter frontend (e.g. show original text of replied tweets)

7.TwtTrip

Plan your trip, share it on Twitter, and get details, comments and suggestions from other users.

8.TweetEffect

Find out which of your Twitter updates made people follow or leave you.
It does not require you to give your twitter credentials, so you can check it out for other users too !

9.TweeTree

Tweetree puts your Twitter stream in a tree so you can see the posts people are replying to in context. It also pulls in lots of external content like twitpic photos, youtube videos and more, so that you can see them right in your stream without having to click through every link your friends post.

10.TwoPular

See what's hot on Twitter !

11. TwiTrak


Twitrak lets you select a Twitter member and Trak their basic profile AND their friends and followers on the same page.

12. CelebrityTweet

Check out the tweets from famous celebrities...

13. Twonvert


If you think 140 words limit on Twitter is too short for your tweets, then give a chance to Twonvert...give a sms lingo look to all your tweets, while getting some words in to your tweets.


14. TwitterGallery

A large collection of twitter themes divided into a range of categories. The site also contains cool follow me buttons for twitter.
Check out this too: TwitterPatterns

15. TwiTemperature

Check out how hot (active) are you on Twitter !

The rate at which Twitter is gaining popularity, the number of tools and apps for Twitter is also increasing. So if this list is not enough for you, then wait for my next post on Twitter apps,
or visit these web sites:
TwitDom (Recommended)
More Twitter apps
100 Twitter apps
Read More

January 29, 2009

Bandwidth Exceeded - Google Pages Annoying Me !


Although I admire Google Pages a lot, for providing free file hosting service, with hot linking facility, but recently I have been facing some problem of bandwidth limitations, as the number of readers on this blog is increasing so is the bandwidth requirement for the files. And actually I cannot blame it totally on them, as even BIG and secured companies like Google and Yahoo also face the problems of spam, so they must put some limitations on their services.
So, if you are planning to use any of the widget from this blog, then please replace the link to dsai.588.googlepages.com....... to any other hot linking provider website.

I would recommend you to use MyDataNest (registration required) to host your files online and get direct links / hotlinks to these files, that is where even I am hosting my CSS and JavaScript files, used in the tutorials and hacks.
Read More

January 24, 2009

Create a Customized Side Menu In Your Blogger / BlogSpot Blog


Once you have seen the picture above [working demo here], I hope there's nothing more to explain what exactly are you going to add to your blog, after you implement this hack.
The process is quite easy, and the overall widget is completely editable, so that you can tweak it even more. But remember this has been created and copyrighted by STYLED MENUS.
Simply log in to Blogger, go to "Layout" and "Add a Gadget" of HTML/JavaScript type.

Then in the content, paste this code:
<center><div id="menu">
<ul>
<li><a class="current" href="http://bloggerstop.net">home</a></li>
<li><a href="http://about.com">about us</a></li>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://wikipedia.com">Wikipedia</a></li>
<li><a href="http://bloggerstop.net/2008/09/contact-us.html">contact us</a></li>
</ul>
</div></center>
<style>
/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
Widget From http://bloggerstop.Net
----------------------------*/
*{
margin:0;
padding:0;
}
#menu{
background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXsev4OJbTI/AAAAAAAACBc/0EEtXs7ckkg/s1600/menu_026_bg.jpg) no-repeat;
width:172px;
height:191px;
padding:15px;
}
#menu ul{
list-style:none;
padding:0 0 0 8px;
}
#menu li{
list-style:none;
display:block;
padding:10px 0;
}
#menu li a{
list-style:none;
display:block;
background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseueLX9TI/AAAAAAAACBM/BQCk16wweRQ/s1600/menu_026_b.gif) no-repeat left center;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
line-height:1.2em;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a:hover{
background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
#menu li .current{
list-style:none;
display:block;
background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a.current, #menu li a:hover.current{
background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
</style>
The code in red color, is what you have to edit. And the code lines in blue color are the images being used in this widget, so you can use some other background image too (of similar dimensions) in case the above image is not looking good with your template.
Read More

Multi Level Drop Down Menu In Blogger/BlogSpot Blogs

One of the important widgets I found missing in some blogs is a top navigation menu (preferably multi-level drop down list).
If you have some important navigation links/labels/categories for your blog, that are popular among your readers, then it will be very easy for them, if you could place a navigation bar in the top region of your blog.

So have a quick look on this live demo: [CSS Horizontal Menu], before you add this to your blog.

Now if you are impressed by the way it looks and works, then without wasting any more time, add this widget quickly to your blog, and make your readers happy !

Here's what you have to do.
STEP1:
Download this file from Dynamic Drive:
slidemenu_hori.css [Click Here],

and this one too:
slidemenu_horiz.js (Copyrighted to Dynamic Drive and modified with pre-added images)

And upload the files to MyDataNest (recommended)
NOTE:Edit and save the properties of the folder at your MyDataNest account as "hidden" and NOT as "Private".
or to SigMirror.com, to get the DIRECT LINKS to these files.

Log in to blogger, go to "Layout", click on "Edit HTML" tab.
Now find (CTRL+F) this in the template:
</head>
Immediately BEFORE it, place this code:
<link rel="stylesheet" type="text/css" href="http://mydatanest.com/............/slidemenu_hori.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://mydatanest.com/.............../slidemenu_horiz.js"></script>
Replace the links in RED, with the DIRECT LINKS you obtained from hotlinkfiles.com or sigmirror.com
Then save the template.

STEP 2:
Now go to "Page Elements" of  "Layout".
Add a Gadget of HTML/JavaScript type.

Then add this code in to it:
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://bloggerstop.net">Blogger Help</a></li>
</ul>
<br style="clear: left" />
</div>
Then save this widget. And drag it just above the posts widget.

Read More

January 20, 2009

Create An About Me Badge - Customize Your Profile Widget

If you want to improve your "About Me" profile widget, like the one shown in this post, then you should visit this website: Badge Maker

Upload a picture, write about yourself or your blog, and add a footer text. That's it !
Your new profile widget picture will be ready.

Now upload it at TinyPic, get the direct link and use it in your Blog. To add this picture to your blogger blog, follow these steps:

Log in to Blogger, go to "Layout" , click on "Add a Gadget" -> HTML/JavaScript type.
Then in the widget content, paste this code:

<a href="Your Blogger/Any other profile link"><img src="Direct link of the Image" width="250" /></a>
Change the code in RED color before pasting it in to the widget !
Read More

A Template For The Lady Bloggers In The Blogosphere - Florascent

You would have seen a lot of blogs on technology, gadgets, SEO and money making tips, but of course there are many (mainly lady) bloggers, who love to blog about their thoughts, interests and family.

So those of you, who like to describe life and nature in words, then here's a perfect blog for you. The template is designed by Lorelei and converted to Blogger by Blogger Templates.


Instructions: How to change Blogger Templates

If you want to improve it further, and make it more search engine friendly, then see these blogger tips and tricks




=> Download More Templates from Here<=
Read More

Show Twitter Updates On A Picture - Use It In Blogger Widgets

If you are on Twitter, then here's a better way to display your updates anywhere on the web.
Before you read about this tool, you may like to know that now you can follow
Blogger and GoogleReader on Twitter.
And of course me too - BloggerStop

Now again talking about the tool, before you want to show your updates on an image, make sure that your updates are already made public. If you have kept them as private, then go to Settings and remove tick from "Protect my updates" option.

Here's what I have made:


Now go to SayTweet, and upload an image from your computer or from the web.
Then in the second step click anywhere on the uploaded image, to add a twitter user (you can add multiple users). And that's it, copy and paste the HTML + JavaScript (Do NOT copy the simple HTML code) code on to your website / blog or anywhere you like.
To add the image in your Blogger/BlogSpot blog,
Log in to Blogger, go to "Layout" -> Add a Gadget -> HTML/JavaScript type
and paste the code in to it.

NOTE: The image I used is this one:
Read More

January 19, 2009

Send your blog updates (feed) to Twitter automatically

If you have 100's of followers in Twitter, then you can easily invite them to your blog by tweeting your blog posts. But tweeting every time when you write a new post may not be so easy. So how about automatic tweeting of all the blog posts ?
Twitterfeed has made this very easy for you!
Just register and now onwards, every new post published on your blog will be straight away displayed in your Twitter updates...

NOTE: You don't have to register with a new name at TwitterFeed, use your OpenID to Sign In. For bloggers using Blogger.com as their blogging platform, they can use the url (******.BLOGSPOT.COM) of their blogs to sign in.
Then click on "create new feed" fill out the form and that's it....now your life will be more easier :)
Read More

January 18, 2009

Highlight Blog Owners/Authors Comments In BlogSpot Blogs


If you want to display your own comments, with a different background or text color or in any other customized way, then here's a simple hack for doing that.
After doing the coding work, all the comments made by you on your blog will get highlighted.

To do this;
Log in to Blogger, go to Layout -> Click on "Edit HTML" tab.
Then click on "Expand Template Widgets"

Now search for this line:
</head>

Immediately above this, add these lines:
<!--Blog-Owners-Comment-STARTS-->
<style>
.comment-body-author {
background: #F5EDE3; /* Background color*/
color: #000000; /* Text color*/
border-top:2px solid #002F66;border-bottom:1.2px dotted #002F66 ;border-left:1.2px dotted #002F66;border-right:2px solid #002F66;
line-height: 2.4em;
margin:0;
padding:0 0 0 20px; /* Posotion*/
}
</style>
<!--Blog-Owners-Comments-STOPS-->
The code in red are just comments, accordingly you can change the BLUE values. You can even use pictures as background images for your comments, for adding an image as background use this code:

background: url(http://DIRECT_LINK_OF_THE_IMAGE.jpg) ;


Border has two attributes one thickness ( in above example its 1.2 px u can change accordingly), another is border line ( in above example its solid u can change it to dotted accordingly). Line-hieght is width , increasing this can increase it width . Margin and padding define the position of comment withing comment box.

Now once this is done, see the code below:
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>
The code in RED is what you have to add.

Now save the template and tell everybody that you are the Admin of the blog :)
Read More

January 15, 2009

New Multi-Tabbed Widgets For Blogger / BlogSpot Blogs

Earlier I have posted a hack on "How to create a multi-tabbed widget for blogger", although that's working completely fine, but if you think, it needs to be upgraded then have a look on these widgets [See these widgets in action here].

Although these new widgets look much advanced than the previous one, but you don't have to worry on the coding part, as it has already been made easy by DynamicDrive and BloggerStop.

So here's all the code required to put this widget in your blog:

STEP 1:
Download these two files from DynamicDrive:
1. tabcontent.css
2. tabcontent.js

And then upload these two files to MyDataNest.com (You need to register first)
After uploading the files, copy the DIRECT LINKS to these files.

STEP 2:
Log in to Blogger
Go to Lauout -> Edit HTML tab
Then find for this code:
</head>

Then immediately ABOVE / BEFORE it, paste this code:
<link rel="stylesheet" type="text/css" href="http://DIRECT_LINK_FROM_MYDATANEST/tabcontent.css" />
<script type="text/javascript" src="http://DIRECT_LINK_FROM_MYDATANEST/tabcontent.js">
/***********************************************
* Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Via http://BloggerStop.Net
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
Replace the code in RED, with the DIRECT LINKS you got in Step 1.

Save the template, and
Click on "Page Elements" tab.
Then click on "Add a Gadget", and select it as "HTML/JavaScript" type.

In the new widget, paste any of the 3 codes displayed below (the screen-shots are displayed above the codes, and demo link has already been given above ):


Code Here:
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://bloggerstop.net">Blogger Widgets</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Tab content 1 here<br />
</div>

<div id="country2" class="tabcontent">
Tab content 2 here<br />
</div>

<div id="country3" class="tabcontent">
Tab content 3 here<br />
</div>

<div id="country4" class="tabcontent">
Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>
<a href="http://bloggerstop.net/" target="_blank"><span style="font-size: x-small;">Blogger Widgets</span></a>
Code Here:
<div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">
Arbitrary DIV 1
</div>

<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>

<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>

<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />
</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />
</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />
</div>

</div>

<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li>
<li><a href="http://bloggerstop.net">Blogger Templates</a></li>
</ul>
</div>
<br style="clear: left" />

<script type="text/javascript">

var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>
<a href="http://bloggerstop.net/" target="_blank"><span style="font-size: x-small;">Blogger Widgets</span></a>
With Auto-scrolling tabs...
Code Here:
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" rel="dog1" class="selected">Tab 1</a></li>
<li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog3">Tab 3</a></li>
<li><a href="#" rel="dog4" id="myfavorite">Tab 4</a></li>
<li><a href="http://bloggerstop.net">Blogger Widgets</a></li>
</ul>
<br style="clear: left" />
</div>

<div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">

<div id="dog1" class="tabcontent">
Tab content 1 here<br />
</div>

<div id="dog2" class="tabcontent">
Tab content 2 here<br />
</div>

<div id="dog3" class="tabcontent">
Tab content 3 here<br />
</div>

<div id="dog4" class="tabcontent">
Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)

</script>
<a href="http://bloggerstop.net/" target="_blank"><span style="font-size: x-small;">Blogger Widgets</span></a>
Read More

January 13, 2009

Add Floating Hover Text - Which Trails Mouse Cursor

If you want to show any text like "Welcome Here" or "Sign My Guestbook", which follows the mouse cursor (trail text effect), like the one displayed in the image, or in this demo.

Then, simply add the code in any HTML/JavaScript widget (Log in -> Layout  -> Add a Gadget).

If you want to show this effect only in the HomePage or any specific page, then you should read this post, on "How to display a widget only in a specific page in Blogger".
<script language="javascript">


// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='YOUR TEXT HERE...';

var delay=40; // SPEED OF TRAIL
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO NEED TO EDIT BELOW HERE **********\\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';

for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer name="txt'+i+'" top="-100" left="0" width="'+txtw+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}

window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>
Read More

Add A JavaScript Calendar To Your BloggSpot Blog

The two most common widgets/gadgets you can see on a blog are clock and calendar. Although you would have seen them in most of the blogs hosted on WordPress, but these are rare in Blogger blogs, as Blogger doesn't directly gives you the facility to add them.

You can see my previous post, on how to embed flash clocks, in your blog here.
And this post, I will help you to add a simple calendar.

You can see the live DEMO here.

And here's the code required to add it to your blog:

Log in to Blogger.com
Go to Layout -> Click on "Add a Gadget" -> HTML/JavaScript type.

And copy paste this code in to it:
<style type="text/css">

.month {
background-color:black;
font:bold 12px verdana;
color:white;
}

.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}

.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}

.days #today{
font-weight: bold;
color: red;
}

</style>


<script type="text/javascript" src="http://dsai.588.googlepages.com/basiccalendar.js">

/***********************************************
* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
* Script featured on Dynamic Drive (http://www.dynamicdrive.com)
* Via http://bloggerstop.net
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
<script type="text/javascript">

var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year

document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script>

Save the widget, and your blog will be ready with a new calendar !
Read More

Blogger / BlogSpot Converters - To/From WordPress, Livejournal and Movabletype

As you can see a tremendous increase in the number of widgets and hacks available for Blogger, so if you are planning to come to Blogger from Wordpress or Movable Type (to get the additional benefit of better indexing by Google), then it has become a lot easier now - You'll get the direct help of Blogger Team.
And in case you are thinking of leaving Blogger and want to transfer all the posts and comments to any other blogging platform like Wordpress etc., even then you have the support from Blogger.

This service comes shortly after the previous gift of Import/Export feature from blogger. And actually this blog converter feature completely depends on that previous one.

The project is an open source project (project owner-Jleuck), with complete prospects of further advancements in it.
From the Blogger Open Source blog:

This new Open Source project provides the ability to easily move blog posts and comments from service to service. This initial release provides Python libraries and runnable scripts that convert between the export formats of Blogger, LiveJournal, MovableType, and WordPress.
Presently they have allowed these conversions of the blogging platforms, and of course being open source there's a lot more to come here...[so do keep a watch on this post]

Blogger To WordPress
WordPress To Blogger
LiveJournal To Blogger


But right now, there can be some problem to big blog owners, with content over 1MB;

"There is a limit to the size of a downloaded file on appspot.com of 1 MB of data. Thus, these hosted applications should only be used for reference or for the conversion of small blog export files."
For further details, look here:
Google Code
Google Blog
Read More

January 11, 2009

Create LightBox Effect Image Display In Blogger

To know what a LightBox effect is, click on the image below (click on it, once the page loads completely):


You may have seen this effect earlier in other websites, but on a blogger blog, you may be seeing this for the first time.

So if are impressed with the hack, and want to apply this to your blog too, then follow these steps:

STEP 1:
Download these two files from Ziddu:

1. lytebox.js
2. lytebox.css

Download Link

And then upload these two files to www.MDN.fm (You need to register first)
NOTE: Edit and Save the properties of the folder at your mydatanest account as "hidden" and NOT as "private."
After uploading the files, copy the DIRECT LINKS to these files.

STEP 2:
Log in to Blogger, go to Layout -> Edit HTML tab
Now find this in the template:
</head>

And immediately ABOVE it, paste this code
<!--LIGHTBOX-IMAGES-STARTS--><link rel="stylesheet" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/lyteboxbloggerstop.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/lytebox.js"></script><!--LIGHTBOX-IMAGES-STOPS-->
You may freely use the code AS IT IS in your template, but I would appreciate if you replace the CODE in RED with the DIRECT LINKS you got from STEP 1.

Now once this is done, whenever you want to add this effect to any image, then simply add the red code along with the usual code used for linking an image:
<a href="http://TARGET_ADDRESS_OF_THE_IMAGE.jpg" rel="lytebox"><img src="http://SOURCE_ADDRESS_OF_THE_IMAGE.jpg"></a>

NOTE: This NOTE is very important if, you want to use this hack on images uploaded on Blogger.

In blogger, when you normally upload any image, you see two links in the HTML Code, viz.

href="http://2.bp.blogspot.com/_4fVBL4fjrFI/SWo4lfysmZI/AAAAAAAAB5U/JPCHdBcMh2s/s1600-h/clear_water_island.png"

and

src="http://2.bp.blogspot.com/_4fVBL4fjrFI/SWo4lfysmZI/AAAAAAAAB5U/JPCHdBcMh2s/s320/clear_water_island.png"

So if you want to use this hack , then IT IS VERY IMPORTANT to edit the first link (href). Modify it like this:

change s1600-h to this s1600 in the link, and then publish the post.

Credits: Markus F. Hay from Dolem.com. LyteBox was originally derived from the Lightbox class (v2.02) that was written by Lokesh Dhakar. For more information please visit HuddleTogether

Read More

Show Todays Date And Current Time As Simple Text On Your Blog

Here's a simple JavaScript to show the current date anywhere in the blog. You can place this code either in any HTML/JavaScript widget, or anywhere else in the template as per you wish.

The output will be like this:


And the required code, to be added is this:
<script language="Javascript">
<!--

var dayName = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")

var monName = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")

var now = new Date

document.write("Today is " + dayName[now.getDay()] + ", " + monName[now.getMonth()] + " "+now.getDate() +".")

//-->
</script>

There's an even simpler code, to display date(like this):


Here's the code:
<script language="Javascript">
<!--

var now = new Date

document.write(now.getDate() + "/" + now.getMonth() + "/" + now.getYear())

//-->
</script>
And to show current time in text format, like this:


Add this code:
<script>
atoj = new Date();
atoj1= atoj.getHours();
atoj2 = atoj.getMinutes();
atoj3= atoj.getSeconds();

if(atoj1==0){atoj4=" AM";atoj1=12}
else if(atoj1 <= 11){atoj4=" AM"} else if(atoj1 == 12){atoj4=" PM";atoj1=12} else if(atoj1 >= 13){atoj4=" PM";atoj1-=12}

if(atoj2 <= 9){atoj2="0"+atoj2} document.write(""+atoj1+":"+atoj2+":"+atoj3+""+atoj4+""+"");
</script>
Read More

January 10, 2009

A New Favicon For Google In New Year 2009

Today morning, I noticed a small change in Google, yet again. They have selected another new and more colorful favicon for Google. The previous one, a small g in blue color with white background got a lot of negative feedback from many people (including me). And so Google has decide to remove it, even before it's first anniversary in May, 2009 :)
Although the new one looks better [inspired by the design of André Resende, a computer science undergraduate student at the University of Campinas in Brazil], but I think they may change it again.


This is the story behind the new favicon, from Marissa Mayer:
"Back in June, we rolled out a new favicon — the small icon that greets you when you access Google on your URL bar or your bookmarks list — and we encouraged our users to submit their ideas for this important piece of Google branding. We were impressed by the volume of submissions we received, and today we are happy to introduce a new Google favicon inspired by those submissions by our users. André Resende, a computer science undergraduate student at the University of Campinas in Brazil, submitted the design that inspired our new favicon. His placement of a white 'g' on a color-blocked background was highly recognizable and attractive, while seeming to capture the essence of Google."
Read More

January 9, 2009

Check How Fast Your Blog / Website Loads - Speed Up Your Blog

Most of the web surfers, do not waste their time on slow loading web sites and blogs. And as "First impression is the last impression", so if a visitor finds your blog is taking too much of time to load, then he may never return to it, he/she will not subscribe to your blog and will never mention about your blog to anyone else. So that means loading time of a blog is very important. As different visitors have different internet speed connections, so you should try to optimize your blog / web site, at least for those with 128/256 Kbps connection speeds.

Loading time of the pages should be between 2-10 seconds, of course, lower means better. There are some web sites / tools which can help you in calculating the loading time of your web page, try these:

PingDom [MOST accurate]

Net Mechanic [No need to enter your email id]

Link Vendor

RobertJSteiner

Although they are self-explanatory, AND you must try out each of them, but if you want to have an absolute quick look, then the last option is enough (RobertJsteiner).
And if you want to see in detail and optimize the content of your web page, then see the results from Link vendor and Net mechanic carefully.

Loading Time Optimization
Mainly you should try to add as LESS as possible javascript files, in your pages (they are the files with .js extensions). And try to place these JavaScript files in the widgets present at the bottom of the blog & not at the top.
And of course images can also be very heavy too, so try to change most of the images to .jpg or .gif before uploading and it is much BETTER to re-size the images first and upload, than to decrease the width of the picture through HTML codes [You can use this tool to convert the images].

In blogger, you have the option to change the number of posts to be displayed in the main page, so try to keep them in 5-8 range.
And of course, you MUST show expandable posts with a "Read More" link, instead of showing complete posts in the Home page (so by this method, you may show more than 8 posts too)

Even after trying all these tricks, if your blog still takes a lot of time to load, then you should change the template and see the difference (do not forget to take a back up of your present template and widgets before doing this)
Read More

January 8, 2009

Show Only Titles In Blog Archives With Dates

You would have noticed that, visitors, do click on the monthly archive links [like Oct 2008, Dec 2008, etc. in the Blog Archive], in your blog. But if you write a lot, like 20-30 posts in a month, then all the posts will open in the archive page and it will take a lot of time to load that page. This can be very annoying for the visitor, and he/she may simply close your blog in the frustration.
So if you want to keep your visitors happy, then you should better NOT display the content BUT only their titles in the archive results page.

For doing so, follow these steps:

Log in to Blogger
Go to Layout, and click on "Edit HTML" tab.
and mark the tick-box "Expand Widget Templates"
Now find (CTRL+F) this code in the template:
<b:include data='post' name='post'/>

And REPLACE that line with this code:
<!--ARCHIVE-TITLES-STARTS-->
<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<li><a expr:href='data:post.url'>
<data:post.title/></a></li><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--ARCHIVE-TITLES-STOPS-->
I have already done this hack, in this blog, here have a look at the screen shot :

NOTE: Here's a new hack to show TITLES along with SUMMARY and IMAGE THUMBNAILS in Archive Pages.
Read More

January 7, 2009

Add Your Sign Below All Posts In Blogger / BlogSpot Blogs

If you are using Blogger, and want to show your signature below all the posts, then you can do this in two possible ways: either add it in an HTML/JavaScript widget with the image of your signature or you can directly edit the HTML template of your blog. The second approach is recommended, as the first one may increase the loading time of blog.

In both the methods, first step is common and important, i.e. to get an image of your signature,.For this, either you can
- draw it and scan it, or
- draw it in MS paint / Adobe Photoshop or any other image editing software and save it, or
- (Recommended) Use MyLiveSignature, and type the letters (use capital letters wherever required), and continue: select font, size and color for the sign. Save / download the image.

Now upload it to TinyPic to get direct link of the image(your sign).
You will get a link like this:
http://tinypic.com/******/images/MY_SIGN.jpg
Now put that link in this code:
<br /><img src="YOUR_DIRECT_LINK_HERE" />
Replace the code in RED color with the direct link of your sign image.

This is the second step, which has two choices (second one is recommended):

1. Adding the sign to HTML/JavaScript widget:

Log in to Blogger, go to Layout, click on Add a Gadget -> HTML/JavaScript type.
Now copy the above code and paste it here. Save the widget, then drag & drop it below the blog posts widget.


2. Adding the sign to the blog's template.

Log in to Blogger, go to Layout, click on "Edit HTML" tab and click the radio button "Expand Widget Templates",and find (CTRL+F) this code:


<data:post.body/>
And immediately BELOW this, add the above code. And save the template.
That's it...

It will be displayed like this:


(Tell me if you liked this hack, I love comments ! )
Read More

Create An HTML Rollover Button For Your Blogger / BlogSpot Blog

Many bloggers like to place buttons instead of simple links. And in some widgets and posts, buttons do look a lot better than simple hyperlinks. But most of the bloggers think that placing a button is a tedious job, and due to their laziness they finally end up placing a normal link :)

But through this post, you will learn that the task of adding an HTML button is as simple as inserting a hyperlink !

First have a look at the button below:


If you want to place a button similar to that, then simply copy and paste this code

<form action="http://www.google.com" target="_blank" method="GET">
<input type="submit" value="Google">
</form>
Change the code in RED, as per your requirement !
You can delete target="_blank" from the first line, if you want the new page to open in the same window, and if you want that the new page should open in a new window/tab then leave the target="_blank" as it is !

The button explained above is a "submit" type button, there are many other types too, like text, radio, check boxes etc.
You can read it in a bit more detail from here: W3Schools.com


As requested by Ankit, here's an update to this trick, through which you can use a custom button.
But this will need more work from your side, as it does not only depends on the code, but also on the graphics. That means you have to create two buttons, with exactly the same dimensions, one as Button_Up and one as Button_Down (when cursor is on the button).
Here's the button:
Click Me

I have used these two images:
IMAGE 1:
IMAGE 2:

And the code to be used is this:
<a href="http://bloggerstop.net"><img src="IMAGE1" onmouseover="this.src='IMAGE2'" onmouseout="this.src='IMAGE1'" alt="Click Me"/></a>
Although this method is quite slow in loading the second image, but this method is easier for most of the users. Moreover the other methods use CSS coding / JavaScript, due to which for every type of image, you have to add a different code in the blog template, which can slow down your whole blog...
Read More

Premium Blogger Template - Cellar Heat With Image Gallery On Main Page

Cellar Heat is a premium quality blogger template (of course available for free), with a cool and unique way of displaying posts in the main page:
The above shown image is the screen shot of Cellar Heat template [If you want to display images in those boxes, then see the next image - cellar heat gallery template]

You can see the Live Demo of this Template Here - Cellar Heat
And to download the template, click here - Download

Here's the gallery version of the template, which is tweaked to show images on the front page along with the posts:


See the Live Demo here - Demo
And download it from here - Download

The credits for the template goes to Evan Eckard, Smashing Magazine, Magznetwork, and according to the author, you are required to leave the links to them in the footer of the template, if you want to use it for your blog !

Instructions: How to change Blogger Templates

If you want to improve it further, and make it more search engine friendly, then see these blogger tips and tricks


=> Download More Templates from Here<=
Read More
Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy