Animated Tagg Cloud For Blogger Blog

Many of blogger blog holder's may have seen the latest blogger hack in many of the professional blogger blog's that is the animated tagg cloud.In these post i will explain how to install such animated tagg cloud in your blogger blog.

These widget is known as blogumus it was an original plugin of word press blog which has been converted for blogger blog by roy tank.One thing should be noted that it's an flash based widget so it may e not search engine friendly.

Follow below step's to instal animated tag cloud for blogger blog knwon as blogumus:

Step 1: Sign into blogger.com then open your blog and click on layout tab, as below.
Step 3: now when you have reached the layout tab click on edit html tab there, as shown below.

Step 4: It's not actually important to follow but if you are an beginner then it's really important for you to follow these step.

Click on download full template option there to back up your template so that if any thing goes wrong then you can upload your template back.

Step 5: Find using ctrl + f <b:section class='sidebar' id='sidebar' preferred='yes'>

Step 6: Immediately after the above code paste the below code:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a> via <a href='http://bloggerstop.net'>BloggerStop.Net</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

that's it if everything had been done properly then you will see the animated tagg cloud widget in your blogger blog else you should start again from step 1.

Note:

You can change the position of the animated tag cloud position your blog by loging into layout and selecting page element there you can change the animated tagg cloud position in your blogger blog.

if you have any doubt then please comment it below.

If you have liked Reading our stuff and want more of such stuff delivered directly to your mail box then Enter your email address:

Delivered by FeedBurner

Read more »

Add "Contact us" feautre in blogger blog

You may be knowing about the contact us feature in wordpress and wanted to have such feature in your blogger blog.in these post i will explain how to have such contact us form in your blogger blog.

Actually it's not any of the blogger hack, its just an blogger widget used in tricky way.

just go to kontactr.com and sign up there, just provide the e-mail address where you want to receive the feed back from your visitor. they will provide you the widget code add it in your post.

After posting these you may face one problem that is the contact us post will be the latest post of your's to avoid that while posting contact us form in your post just clcik on post option at the bottom of posting window and just change the date of the post to the oldest date possible.That's it your contact us form will not be visible in the latest post.

Now link the post directly from your home page of blogger by naming the link "Contact us".

So now if any of your bloggr blog's visitor want's to contact you then he can click on contact us and you will receive his reply in your mail box directly.

If you have any doubt related to contact us form then reply me below in form of comment.

If you have liked Reading our stuff and want more of such stuff delivered directly to your mail box then Enter your email address:

Delivered by FeedBurner

Read more »

how to Embed Video's, Movies, YOUTUBE video in your blogger blog

Many of beginner blogger's who want to show their recorded or or any of the youtube video related to their post in their blog, so in these post i will explain how to do it.Actually these process is very simple even any beginner can do it.

For these process you need to have the video uploaded in you tube so if your video is not uploaded yet then first upload it at youtube.com. you can even emebd any one else's bideo in your blog.

Follow the below step's to embed video in your blogger blog:

Step1: go to youtube's page where your video exist's, You can even search the video you want to show in youtube.

Step 2: Now just copy the embeded code from the about these video section and below embed option. Just copy the whole code using ctrl+c, as shown below.

Step 3: Sign in to your blogger blog and click on posting there click on edit html tab and paste the code using ctrl+v, as shown below:
Step 5: Publish the post, thats it your video will be visible in your post.

you can change the width and height of the video player in your blog by adjusting the value in your embeded code.

If you have any doubt regarding the above tip then you can ask me in form of comment below.

If you have liked Reading our stuff and want more of such stuff delivered directly to your mail box then Enter your email address:

Delivered by FeedBurner

Read more »

How to Remove / Disable the NavBar(Navigation bar) in Blogger blog

Many of beginner's who use blogger.com for blogging when they publish their blog just get irritated while seeing the blue coloured navigation bar in the top of their blog.
Actualy blogger.com has provided navbar for easy navigation in between the pages of blogger blog's and also for flagging unauthorised blog.

Let's see how actually the blogger navigation bar look's like, below is the picture of blogger navigation bar:
Actually blogger navbar is really useful but if you are among those people who think that blogger navbar really spoils the look of your blog then you can remov it by following below step's.

Step 1: Sign into blogger.com then open your blog and click on layout tab, as below.
Step 3: now when you have reached the layout tab click on edit html tab there, as shown below.

Step 4: It's not actually important to follow but if you are an beginner then it's really important for you to follow these step.

Click on download full template option there to back up your template so that if any thing goes wrong then you can upload your template back.

Step 5: Find using ctrl + f <head>

and just below that paste the below code:

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

after doing that your template html will look like below.
Step 6: Now just save and exist , if you have followed everything properly then navbar will be removed from your blog.

If you have any problem then please comment it below.

If you have liked Reading our stuff and want more of such stuff delivered directly to your mail box then Enter your email address:

Delivered by FeedBurner

Read more »

Free Image Hosting With Unlimited Bandwidth

In these post i will explain how to host your images with unlimited bandwidth that also for free...
Many of blogger and forum poster's have just got tired of the bandwidth problem when they host images at photobucket or any of such image hosting site.

So after working out a lot i have found trick to image in blogger .com itself for free.
Im going to explain how to host your image in blogger only so no tension of bandwidth or down time of server as blogger has alsmost 99.9% server uptime.

First upload your image in blogger.com ( tht is open new post and just upload the pictures you wan to be hosted).

Then right click the picture and open it in new tab then just copy the image location from there it will look like below:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5HHfZQf77mvmR7odhNBlzfdEBokExZflARQRq1wivPotE-m3K-uWW5JVCnl3U3U3JZnZxT3NWkE0YZ0H5_OchP_gXEtxbY55DzluqqbHoXmQaeb49WRs6O0zLoTmKn3Q1ccFh2JQsGE09/-h/rockstar.jpg

Now you just have to remove " -h " from the above url and make it as below (After removing " -h ") :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5HHfZQf77mvmR7odhNBlzfdEBokExZflARQRq1wivPotE-m3K-uWW5JVCnl3U3U3JZnZxT3NWkE0YZ0H5_OchP_gXEtxbY55DzluqqbHoXmQaeb49WRs6O0zLoTmKn3Q1ccFh2JQsGE09/s1600/rockstar.jpg

We have to remove "-h" because when the url has " -h " it's no the original url.

That's it, copy and paste the url after removing "-h" where ever you want.

hope this would solve the problem of image hosting with unlimited bandwidth.

so now no tension of limited bandwidth or down time problem of free image hosting server's.

If you have anything to discuss on it please comment it below!

If you have liked Reading our stuff and want more of such stuff delivered directly to your mail box then Enter your email address:

Delivered by FeedBurner

Read more »

Tag Cloud for blogger Blog similiar to wordpress by phydeaux3

You may have seen Tag cloud in different blog having different tag's in different colour and different size.In these post i will explain how to build tag cloud widget for your blog. You can see it's original source at phydeaux3.

Step 1:

Just download your original template for back-up.

Step 2:

Find (CTRL+F) this code:

]]></b:skin>

Step 3:

Place the below code before ]></b:skin>

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Step 4:

Place Below code between ]></b:skin> and </head>

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Step 5:

Find ( using ctrl + f) <b:widget id='Label1' locked='false' title='Labels' type='Label'/>

And replace with below code:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i ) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs 'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t] ' Posts in ' t;
a.style.color = 'rgb(' c[0] ',' c[1] ',' c[2] ')';
a.href = '/search/label/' encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '(' ts[t] ') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Step 6

Now if everything has gone right then you will get tag widget in your blog and you can change it's position from using page element where you can see the element named LABEL CLOUD.
And if it doesnt work then start from the step1.

Important Things:


You can modify size and color of your font's in label cloud by modifiying below code's in you template:

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;

You can see RGB color value from Code Chart.

So if you have any problem with the above or any suggestion regarding it then you can comment it below.

If you have liked Reading our stuff and want more of such stuff delivered directly to your mail box then Enter your email address:

Delivered by FeedBurner

Read more »

sharing sexy bookmarking button's for your blogger blog:

many people who are using wordpress have demanded the wordpress plugin "sharing sexy bookmarker" for blogger blog.
So after long serious of experiment it has been converted for blogger blog also.

To use it for your blog fallow below step:

Step 1:

Just Download your exisitng template to avoid error after instaling sexy bookmarker.

Step 2:

Find (CTRL+F) this code:

]]></b:skin>

Step 3:

Afterwards, Add this CSS composition below ]]></b:skin>

Note:

If you have more than one of , you have to find the last . Usually, this is only for blogger which use readmore. The last also means that, the sexy bookmark will appear when we enter the single page.

<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://img509.imageshack.us/img509/3131/sexysprite.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>

Step 4:

After we put in the CSS, please find this code:

<data:post.body/>

Step 5:
Then copy below composition below <data:post.body/>

<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://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' 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>

Step 6:
Now change YOUR-FEEDBURNER-ID to your feed id.

Step7:

Save the template and if you have done everything properly then it will work!


Now if have any error or problem in above then please comment it below!

If you have liked Reading our stuff and want more of such stuff delivered directly to your mail box then Enter your email address:

Delivered by FeedBurner

Read more »