Blogger Templates Smart Professional Templates Download: Tips and Tricks

Showing posts with label Tips and Tricks. Show all posts

Blogumus Flash Animated Tag Label Cloud for Blogger

"Blogumus" is an Flash based tag cloud widget which uses scripts converted from Roy Tanck's WP Cumulus plugin for Wordpress. I fell in love with Roy's original Cumulus plugin when I saw it, and simply had to learn how to convert this for use in Blogger powered blogs. The result is the widget you can see in action at the top of this post. Hover your mouse over the Flash object to see the animation begin. In this post, I'll explain how you can add Blogumus to your own Blogger layout with ease!

Update: Improved Widget Code
I have updated the code required to run this widget to activate links in the tag cloud Flash movie. If you have already installed Blogumus, please replace your widget code with the new updated code, or reference the additional lines to modify your existing installation.

How it works
This widget uses a combination of JavaScript and Flash animation to parse and display your blog labels. Once installed in your template, it should work "out of the box" without any additional tweaking required, though of course you may prefer to change the variables for color, background and size if appropriate :) You should also be able to move the Label Cloud widget through the Page Elements page of your dashboard if you prefer display in a different layout location. To see Blogumus in action, both Flash and Javascript must be installed and enabled for your internet browser. However, it does degrade relatively gracefully, and label links will still be clickable (though not animated) for those who do not use JavaScript of Flash (including search engine spiders).

How to install Blogumus in your Blogger layout
Installing Blogumus in your Blogger layout is surprisingly simple! You should only need to copy and paste a section of code to your Blogger template, though any tweaks for the style of display will require some manual editing. Here are the steps required to install Blogumus in your Blogger layout:
1.Login to blogger dashboard
2.Go to Layout >> Edit HTML
3.Save Your template first and dont expand widget template
4.Choose where you want to add Flash label cloud in your blog ( Sidebar, Footer, Below Header or Above footer or any section). Now Search for respective

(section releted to sidebar, footer, etc). The line of code may look like as follows

<b:section class='sidebar' id='sidebar' preferred='yes'>

or

<b:section class='footer' id='footer' showaddelement='no'>

or

<b:section class='anything' id='anything' preferred='yes'>

5.Immediately after any one of the above line, Paste following widget 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'>

<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
<param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
<param name="bgcolor" value="#FFFFFF" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
</tags>" />
<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
</object>

</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

6. Save your template and if every thing goes well you will see the Blogumus in your blog.

Customization

250 : To change the width of the Blogumus

200 : To change the height of the Blogumus

000000 : To change the color of text

ffffff : To change the background color of Blogumus

12 : To alter the size of labels

Explanation:

(Edit the values to fit your blog)

boxwidth - Width of the widget
cellspacing - Space between cells (default one is good)
borderColor - Border color (add the background color of your template to perfectly blend it in the template)
thumbwidth & thumbheight - Width and Height of the thumbnail (default are good)
fntsize - Font size of the title
acolor - Color of the title
aBold - you want bold titles? (true or false)
numposts - How many posts you want to show?
home_page : http://smartbloggertemplate.blogspot.com/ (change this to your blog url)

This script is currently hosted in my server ( http://shibin.110mb.com/recent_posts_thumbnail.js ).
But, it is STRONGLY Recommended to download the script and upload to your own hosting (google for free javascripts hosts) and replace that url with yours.

4. Last but not the least.. Save the Changes.

That's it guys!

Note : Make sure you selected YES in Settings » Site Feed » Full » Allow Blog Feeds

Create zoom effect for images in blogspot

This is the demo, click on the image to see :

1st , log in Blogger > Layout > Edit HTML then add this code below before </head> tag:

Ok now next step, you have to change the <body> by <body onload="setupZoom()"> instead

Save! You have already created zoom effect for images. However ,to zoom image you have from now , you don't have to use the tag <img src="Image link" /> to add image anymore , but you have to use this new form :

Note:
Image link : support jpg, png, gif ...
Width : thumbnail width.
Height: thumbnail height.
Border: thumbnail border.

For example :
<a href="http://img193.imageshack.us/img193/6925/flowersandswirls.jpg"><img src="http://imgcash2.imageshack.us/img193/6925/flowersandswirls.th.jpg" width="300" height="200" border="0" /></a>

Align Adsense Widget on Blogger

1. Go to Blogger Dashboard.

2. Go to Layouts and click on Edit Html subtab of Template tab.

3. Backup your template to PC.

4. Then put a check in Expand Widgets Template box at top of Edit Template text box and scroll down to or Ctrl+F <b:widget id='AdSense to this line :

Then add align='center'. Like this…

<b:widget id='AdSense1' locked='false' title='' type='AdSense'>
<b:includable id='main'>
<div class='widget-content'>
<data:adCode/>
</div>
</b:includable>
</b:widget>

Code AFTER changes:

<b:widget id='AdSense1' locked='false' title='' type='AdSense'>
<b:includable id='main'>
<div align='center' class='widget-content'>
<data:adCode/>
</div>
</b:includable>
</b:widget>

optional

align='center'

align='left'

align='right'

How to Integrate "Digg this" button to Blogger Blog

In this tutorial I will show you "how to integrate "digg this" button to your blogger blog and how to wrap "digg this" button around and inline beside Blogger post content. This will be good part of your blog design.

I think you know Digg, Why you need to install Digg button to your blog? This is the quote from the Digg:

The Digg This button is for website and blog publishers that want to encourage their audience to submit or digg their content on Digg. Join thousands of sites that have already added Digg This and seen their content exposed to the Digg community.

We've given our latest Digg This button a brain - it's smart enough to:

* Encourage users to submit new content from your site to Digg. We'll detect if the content exists already and provide either a Submit or Digging interface
* Display the real-time Digg count for content already on Digg
* Support News, Video, or Podcast content.
* Be backward compatible with the last version of our Digg This button

So, you can get some (or , maybe, big) traffic from Digg.

This is how it will look like:

It is hard to install this button to your blog and make it wrap around and inline beside post content, so, I will tell you how to do it:

1. Go to Blogger Dashboard.

2. Go to Layouts and click on Edit Html subtab of Template tab.

3. Backup your template to PC.

4. Then put a check in Expand Widgets Template box at top of Edit Template text box and scroll down to the blog posts widget body to this line :

Append the following lines of code into the template BEFORE the line of

<data:post.body/>

located above:

<div id='digg'><script type='text/javascript'>
digg_url = '<data:post.url/>';
digg_title = '<data:post.title/>';
digg_window = 'new';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>

6.Now you need to create CSS style for Digg this button. Find this line:

]]></b:skin>

If you want to have digg button on the left side of post, append the following lines of code into the template BEFORE the line of

]]></b:skin>

located above:

#digg {
float: left;
margin-right: 5px;
}

If you want to have digg button on the right side of post, append the following lines of code into the template BEFORE the line of

]]></b:skin> located above:

#digg {
float: right;
margin-left: 5px;
}

Save your template.
That's all =)

New Blogger Tag Cloud / Label Cloud

A tag cloud or label cloud for blogger is a visual depiction of all labels used on your blog.You can see a demo of the Label cloud for blogger(blogger label cloud) here on my site. This Tag Cloud Widget was originally developed by phydeaux3. I have just simplified and made it easier to install..

First Of all Goto Your blogger Layout>Page Elements page and add a Labels Widget there..You can Do that using the Add a Page Element Option on that page.

Choose to sort the labels Alphabetically when prompted.

After Adding the Label Widget Goto Layout>Edit Html (Do not expand the widget templates for the sake of easy explanation)
You will find some code similar to

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Now Replace that with

<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'/>
<p align='center'>
<script type='text/javascript'>
var cloudMin = 1;
var maxFontSize = 25;
var maxColor = [35,130,196];
var minFontSize = 10;
var minColor = [35,130,195];
var lcShowCount = false;
// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>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 = "<data:label.name/>";
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] < i="0;3"> 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';
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>
</p>
<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>
<br/>Powered By:<small><a href='http://www.bloggerplugins.org'&t;Blogger Widgets</a></small>
<br/>Blogger Label Cloud:<small><a href='http://www.bloggerplugins.org/2008/06/label-cloud-widget-for-blogger-blogspot.html'>Label Cloud for Blogger</a></small>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Now find

]]></b:skin>

and replace it with

#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}
]]></b:skin>

Save your template and now you should get a working Label Cloud On your Blog.

Optional Parts Proceed further only if you want to customize the cloud to a better level...

Changing Cloud Colours:

you can change those colors editing the code a little bit..
you will have to expand your widget templates and modify these 2 lines of code

var maxColor =

and

var minColor =
you have to specify the RGB values there separated by commas..If you are sure of what should be the hex codes of the maximum and minimum colors,then you can use this to convert the hex value to RGB values..If you are not sure of what the hex code of the colors are then have a look at this.

Changing the Font Sizes:
You can change the font sizes by editing these 2 lines of code

var minFontSize =
and
var maxFontSize =

How to Back up Your Blogger Template Design

Before making any type of customization (any type of changes in the HTML code) of your blog template, it's a wise decision to back-up the blog template design. This will help you to back your previous blog stage if you don't like the new modification or you have done some mistake at the time of template code modification. You can easily back-up your blog template design. It's very easy and quick process. This page contains the information to back-up your blog's template design only.
Steps to back-up blogger template design

Follow the following steps to back-up blogger template design:

Step 1: Accessing the code of your blog

Backup Blogger Template

Log in to your blogger account and then from the Dashboard, select the Layout of the blog which you want to take back-up. Finally, click on the Edit HTML option.

Step 2: Downloading the template design

After finishing the above steps, you will find an option Download Full Template under Backup/Restore section. Click on Download Full Template to back-up your blog's template design and show the location to download the template.

Random Post for Blogger / Blogspot

This widget can definitely bring some excitement to your blogger powered blog. Letting your readers surf your blog to the fullest extent by creating a link to a random post in your blog's sidebar.

How to install: Blogger Dashboard --> Layout --> Page Elements --> Add Gadget --> HTML / JavaScript --> Copy and Paste code below in Content --> Save

<h1 class="title"><data:title/><div id="myLuckyPost"></div> <script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'View Random Post'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script></data:title></h1>

Once you have installed the widget, you can change the link text. The default value is "View Random Post". To change this, view the code and search for View Random Post, and change it to any desired text.

Note: Before Testing Take A Backup Of You Template

Automatic Thumbnail and Read More Function for Blogger

Read more function is used to cut our post on homepage, post will appear fully when we click read more link. It's cut automatically and if we insert image, it appears thumbnail.
This is automatic read more function with thumbnail. We just need to set up our HTML code.

Follow steps:
1. Go to "Layout" click "Edit HTML"
2. Tick on "Expand Widget Templates"
3. Find this code

<data:post.body/>

4. Replace with this code below

5. Save / Preview your blog

clarification code above:

summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

Note: Before Testing Take A Backup Of You Template

Blogger Templates Smart Professional Templates Download

Recent Posts

Archives

Followers

Tag Cloud

Category

Blogumus Flash Animated Tag Label Cloud for Blogger

Recent Posts with Thumbnails Widget for Blogger

Explanation:

Create zoom effect for images in blogspot

Align Adsense Widget on Blogger

How to Integrate "Digg this" button to Blogger Blog

New Blogger Tag Cloud / Label Cloud

How to Back up Your Blogger Template Design

Random Post for Blogger / Blogspot

Related Posts for Blogger / Blogspot

Automatic Thumbnail and Read More Function for Blogger