Brilliant Computing: Blogger Themes

Showing posts with label Blogger Themes. Show all posts

Thursday, February 4, 2010

SPICE UP YOUR BLOG USING BRILLIANT WAYS.

It is the dream of a blogger to make his blog beautiful.when u make or download and upload a template into ur blog u are just not doing anything creative.Customizing ur blog to make it pretty or handsome.

FIRST OF ALL LETS REMOVE THE BLOG BANNER {NAVBAR}

2- On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog's HTML.
*****download full template before you do any changes to the current template of your blog******
3- paste the CSS definition in the top of the template code:

...
    <b:skin><![CDATA[/*
    -----------------------------------------------
    Blogger Template Style
    Name:     Rounders
    Designer: Douglas Bowman
    URL:      www.stopdesign.com
    Date:     27 Feb 2004
    Updated by: Blogger Team
    ----------------------------------------------- */

    #navbar-iframe {
       display: none !important;
    }
    /* Variable definitions
      ====================
       <Variable name="mainBgColor" description="Main Background Color"
                 type="color" default="#fff" value="#ffffff">
       <Variable name="mainTextColor" description="Text Color" type="color"
                 default="#333" value="#333333">
       ...

RSS FEED ICONS FOR UR BLOG

Rss icons are provided by the feed service like feedburner itself but If u want to make them stylish.
here is a site that could herlp you to select and download rss feed icons.http://creativenerds.co.uk/freebies/ultimate-rss-feed-icon-collection-over-1500/
once downloaded go to LAYOUT ----Page elements-----add a gadget-----picture----type ur feed url and the url of your feed icon{after hosting it with free image hosting services.}
or edit ur script provided by the feed service and put ur feed icon url instead of the original one.

ADD AN ANIMATED TAG CLOUD FOR BLOGGER

Animated tag clouds are flash objects so you need a flash player like adobe flash to see it after implementing it in your blog.
steps to implement-:-
The name of this tag cloud is blogmus.
This will spin when the mouse pointer is over the desired label of your blog.
Sign in to blogger-Layout-Edit Html and search{ctrl+f}for the following code-

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

Immediatly after this line, paste the following section of 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></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Customizing Blogumus tag cloud

In this default installation, Blogumus includes the following preset variables:

Width is set to 240px

Height is set to 300px;

Background color is white

Test color is grey

Font size is "12"

If you would prefer to make your widget wider, shorter, change the color scheme, etc, you will need to do this by editing various parts of the code. I'll go through these options in the order they appear in the widget code. Editing width and height The variables for width and height are found in this line of the script:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

The width (currently 240) is highlighted in red, while the height (300px default) is highlighted in blue. These numerical values specify the width and height in pixels, so you can alter these of you prefer. Editing background color You can change the background color from white to any other color by altering the hex value in the same line: -

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

For example, if you prefer a bright red background, you may replace #ffffff with #ff0000. Take a look at this page for a list of commonly used hex color codes. Alter the color of text By default, the text is set to display as dark grey ( hex value #333333). You can alter this variable in the following line:-

so.addVariable("tcolor", "0x333333");

Be aware that "tcolor" is a Flash variable and doesn't include the usual hash symbol of hex color codes. Be sure to only replace the numbers! Adjust the font size The maximum font size of tags is specified in this line:-

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

You can alter this to ensure tags are displayed in a bigger or smaller font if you prefer by changing "12" to a larger or smaller number. While making any of these changes, you should be able to preview your widget and be certain that your new choice of color, dimensions and background are suitable for your needs.
JAVASCRIPT MUST BE ENABLED TO SEE THIS TAG CLOUD LABEL

Coloring the default text selection with CSS

When u cleck and drag on a blog to select a default color blue or green or black appears.But sometimes thay can be really booring.Imagine a blog with Pink template having the default selection color black ohhh thats horrible isn't it.Then here is a trick which will help you to change this color.

this post is refered from http://myfundoo-blog.blogspot.com/2010/01/coloring-default-text-selection-with.html

In order to get this working for your blog you need to add following styles to your stylesheet.Just above your ]]></b:skin>
in edit html in layout.
Till now it works only for Firefox and safari and does not supper IE.

::-moz-selection{background:#5eb7c3; color:#fff;} /* Firefox */
::selection {background:##5eb7c3; color:#fff;} /* Safari */

And save your template.

More :

You can use it for paragraphs with different classes like csstricks.com has explained (DEMO)

p::-moz-selection{background:#1259C7; color:#fff;}
p::selection{background:#1259C7; color:#fff;}

CREATE A SPRING EFFECT TO BLOGGER.

This is a beautiful trick which would make leaves fall from the top of your blog pages.

1. Demo
copy and paste the below html code to layout-add a gadget-html/Javascript.leave the title empty and save it.

<marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:504px;top:106px;width:auto;height:463px;z-index:1;" scrollamount=""><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:348px;top:45px;width:auto;height:639px;z-index:1;" scrollamount="6"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:685px;top:6px;width:auto;height:231px;z-index:1;" scrollamount="3"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:138px;top:29px;width:auto;height:584px;z-index:1;" scrollamount="2"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:847px;top:118px;width:auto;height:205px;z-index:1;" scrollamount="4"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:890px;top:69px;width:auto;height:418px;z-index:1;" scrollamount="6"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:2px;top:68px;width:auto;height:297px;z-index:1;" scrollamount="7"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:701px;top:110px;width:auto;height:435px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:229px;top:51px;width:auto;height:537px;z-index:1;" scrollamount="3"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:833px;top:74px;width:auto;height:282px;z-index:1;" scrollamount="2"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:771px;top:82px;width:auto;height:153px;z-index:1;" scrollamount="7"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:859px;top:51px;width:auto;height:444px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:554px;top:1px;width:auto;height:178px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:169px;top:21px;width:auto;height:206px;z-index:1;" scrollamount="3"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:786px;top:25px;width:auto;height:142px;z-index:1;" scrollamount="4"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:775px;top:74px;width:auto;height:771px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:450px;top:38px;width:auto;height:418px;z-index:1;" scrollamount="6"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:250px;top:92px;width:auto;height:775px;z-index:1;" scrollamount="4"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:173px;top:19px;width:auto;height:389px;z-index:1;" scrollamount="3"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:804px;top:49px;width:auto;height:493px;z-index:1;" scrollamount="7"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:543px;top:72px;width:auto;height:397px;z-index:1;" scrollamount="2"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><a style="color: #000080; font-family: tahoma; font-size: 11px; text-decoration: none; border: 1px double #00ADEF; padding: 1px; background: #FFF"</a>

Changing the background image of your blogger

A blogger template comes packed with a background image like this one

Well there is a way to change it.

Step one sign in to blogger.

step two go to layout and then click edit html.

step three select expand widget templates.

step four look for this code:-

body {
margin : 0;
font : 13px tahoma, arial, helvetica, sans-serif;
background : transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8PDeXehHCbN2iQhz-brJEJHIKrp6dbR_63TRDW4dyoLGRunbSJO7qrUbB-zUImESz_zUfT_if-JJkmJiCC3JH1g9q0wf_Vgk1P2sOTyZUUe1gSrA_zhU72BnBhHwuhhoV-n8u3Fe4K2rS/s1600/backgroundbody.png) repeat scroll 0 0;
}

With emphasis on body tag

Step:4 Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8PDeXehHCbN2iQhz-brJEJHIKrp6dbR_63TRDW4dyoLGRunbSJO7qrUbB-zUImESz_zUfT_if-JJkmJiCC3JH1g9q0wf_Vgk1P2sOTyZUUe1gSrA_zhU72BnBhHwuhhoV-n8u3Fe4K2rS/s1600/backgroundbody.png with Your Image.
It might be possible that your template doesn't have a background image and u want to add on.
just paste this between body closing and ending tags { and }

background : transparent url(http://i38.tinypic.com/2q07m2e.jpg) repeat scroll 0 0;

Replace http://i38.tinypic.com/2q07m2e.jpg with Your Image url.

Step:5 Click Save Template.

And Your are done!!click view blog to preview your blog.
ALWAYS BACKUP YOUR TEMPLATE BEFORE DOING THIS.

Add an Email Subscribe Button Below Every Blog Posts

An email subscribe button helps your readers subscribe to your blog feeds.Well,Here is a way to add it to every post in ur blog.

***Copy the below code and paste it in notepad as you have to make some changes in it replace the red part in the code with your own feedburner address.

<br /><div style="border: 1px solid rgb(153, 153, 153); padding: 5px;">
<br /><img src="http://i263.photobucket.com/albums/ii150/mohamedrias/subscriberss.gif" align="left" border="0" height="18" width="44" />
<span style=";font-family:verdana;font-size:85%;" >
If you enjoyed this post, make sure you
<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=Brilliantcomputing">
<b>subscribe to my regular Email Updates</b></a></span>!
<br /><a href="http://brilliantcomputing.blogspot.com">
<br /><img src="http://img1.orkut.com/img/castro/i_tool.png" align="right" border="0" width="14" height="14">
</a></div>

***Go to layout - edit HTML-Tick expand widget template and search for
<p><data:post.body/></p>; or <data:post.body/>
.And paste the copied code beneath <p><data:post.body/></p>; or <data:post.body/>

SAVE TEMPLATE AND U ARE DONE.

A COMFORTABLE MENU FOR YOUR BLOGGER

use our free css menu builder and create some pretty sweet menus for free Using free CSS menu buider

(http://www.cssmenubuilder.com)

features:

30+ horizontal menus
700+ vertical menus combinations
Breadcrumb menus that consist of more than 200+ combinations,
In total the site offers more than 1000 menu combinations
Not including the endless color combinations.

This is what they say but as far as i think it has:

A good and easy to use GUI.
An easy color chart to pick from
Mouthful of design which surely make your pick difficult.
More over it is free,what else u want MAN

Below is centain Screenshots Which i take while trying for my menubar

Add a Gtalk live chat button to your blog.

There are many services in the web which helps u put diffrent widgets and apps which help a blog visitor to email,comment or give feedbacks.Now there is another widget from google talk which allows a visitor to directly talk or chat to the administrator of a blog.

What U need in order to create one for your blog?
U need to be an Gtalk user.
If you're not a current Google Talk user, you'll need to create a new Google Account. If you have Gmail on your Google Account, you can use Google Talk with your Gmail account.

Click below to get one:
to create read the below details and visit : gtalk badge

Title: Text appearing in blue.

Your nickname: Name Displayed to guest.

Style :click on the drop down list to select to select from 6 options.

Click Update badge

Copy the HTML code From below And paste in your gadget list

and arrange it in order.

Animated jquery sharing bar with 360 revolution

Sharing is caring.Sharing posts and other topics plays an important role in a blogs popularity.There are many share icons but this is animated and beautiful.

Copy this CSS code and paste it above ]]> in your template code ,no need to expand widget template.

#share{
/* The share box container */
width:500px;
background:#ececec;
height:220px;
margin:60px auto;
overflow:hidden;

-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}

#share-label{
/* The image on the right */
background:url(img/share.png) no-repeat 50% 50%;
float:left;
height:220px;
width:200px;
}

#stage{
/* This is where the animation takes place */
position:relative;

border-right:1px solid #DDDDDD;
width:290px;
height:220px;
background:white;
float:left;

border-bottom-left-radius:12px;
border-top-left-radius:12px;

-moz-border-radius-bottomleft:12px;
-moz-border-radius-topleft:12px;

-webkit-border-bottom-left-radius:12px;
-webkit-border-top-left-radius:12px;
}

.btn{
/* This class is assigned to every share button */
background-color:white;
height:90px;
left:0;
top:0;
width:60px;
position:relative;
margin:20px 0 0 10px;
float:left;
}

.bcontent{
/* Positioned inside the .btn container */
position:absolute;
top:auto;
bottom:20px;
left:0;
}
/* Individual rules for every share button */

.digg{ background:url(img/digg_reflection.png) no-repeat -4px bottom;}
.reddit{ background:url(img/reddit_reflection.png) no-repeat -4px bottom;}
.facebook{ background:url(img/facebook_reflection.png) no-repeat bottom center;}
.tweetmeme{ background:url(img/twit_reflection.png) no-repeat -5px bottom;}
.dzone{ background:url(img/dzone_reflection.png) no-repeat -7px bottom;}

.thanksto{
position:absolute;
bottom:2px;
right:4px;
font-size:10px;
}

.thanksto a,.thanksto a:visited{
color:#BBB;
}

/* Customizing the facebook share button */

span.fb_share_no_count {
display:block;
}

span.fb_share_count_top.fb_share_no_count {
line-height:54px;
}

span.fb_share_count_nub_top.fb_share_no_count{
display:none;
}

span.fb_share_no_count span.fb_share_count_inner {
background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px;
display:block;
}

For get this working we need to install these two JavaScript between head sections :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ikb.fileave.com/rotating%20social.js"></script>

First one includes jquery library from google's CDN and the second one is rotating social file.

To show the code below every post paste this HTML code below <data:post.body/>

<div id="share">
<div id="stage">

<div class="btn digg"><div class="bcontent"><a class="DiggThisButton"></a><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div></div>
<div class="btn tweetmeme"><div class="bcontent"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div></div>
<div class="btn dzone"><div class="bcontent"><script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script></div></div>
<div class="btn reddit"><div class="bcontent"><script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script></div></div>
<div class="btn facebook"><div class="bcontent"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div></div>

</div>

<div id="share-label">

</div>

</div>

And save ur template.

continue reading "SPICE UP YOUR BLOG USING BRILLIANT WAYS."

Wednesday, January 27, 2010

Best blogger templates

Share |

Hello friends, I am back with some of the best templates .I am sorry as i did t post anything related to blogging and blogger.Hope you like this . So it was lot of work choosing the templates. I have selected 20 of the best templates. .Dont forget to comment

Christmas V1.0
Template by BloggerThemes for ChethStudios
Features: 2 Columns, Adapted from Wordpress, Fixed width, Red, Right sidebar, White

Demo | Download

Christmas V2.0
Template by BloggerThemes for ChethStudios
Features: 2 Columns, Adapted from Wordpress, Brown, Fixed width, Premium, Right sidebar, White

Demo | Download

Black Rock
Template by ThemeCraft
Features: 2 Columns, Adapted from Wordpress, Black, Fixed width, Right sidebar

Demo | Download

Mystique
Template by ThemeCraft
Features: 2 Columns, Adapted from Wordpress, Black, Elegant, Fixed width, Premium, Right sidebar

Demo | Download

Garden
Template by Teknomobi
Features: 2 Columns, Blue, Fixed width, Green, Left sidebar, White

Demo | Download

Granite
Template by Templates Block
Features: 2 Columns, Adapted from Wordpress, Fixed width, Gray, Right sidebar, Rounded corners

Demo | Download

Astra
Template by ThemeCraft
Features: 2 Columns, Adapted from Wordpress, Black, Fixed width, Right sidebar

Demo | Download

WP Boxed Tech
Template by Free Blogger Template
Features: 3 Columns, Adapted from Wordpress, Fixed width, Magazine, Minimalist, Right sidebar

Demo | Download

Dark Orange
Template by Bloggets
Features: 2 Columns, Black, Fixed width, Magazine, Orange, Right sidebar

Demo | Download

Maxis
Template by BloggerThemes
Features: 2 Columns, Fixed width, Minimalist, Right sidebar

Demo | Download

Save Green
Template by BloggerThemes
Features: 2 Columns, Adapted from Wordpress, Fixed width, Orange, Right sidebar

Demo | Download

Drawing Time
Template by Deluxe Templates
Features: 2 Columns, Adapted from Wordpress, Blue, Fixed width, Right sidebar

Demo | Download

New York
Template by Dhampire
Features: 2 Columns, Adapted from Wordpress, Blue, Fixed width, Left sidebar

Demo | Download

Bloggerpress
Template by Insight your Blogger
Features: 3 Columns, Brown, Elegant, Fixed width, Right sidebar, Rounded corners

Demo | Download

Glassical
Template by ChethStudios
Features: 2 Columns, Adapted from Wordpress, Blue, Fixed width, Minimalist, Right sidebar

Demo | Download

Hybrid Gallery
Template by Insight your Blogger
Features: 3 Columns, Elegant, Fixed width, Gray, Left sidebar, Photolog, Rounded corners

Demo | Download

Rainbow
Template by ThemeCraft
Features: 2 Columns, Adapted from Wordpress, Fixed width, Right sidebar

Demo | Download

sGallery
Template by Anshul
Features: 3 Columns, Adapted from Wordpress, Brown, Fixed width, Photolog, Right sidebar, Rounded corners

Demo | Download

My Showcase
Template by BloggerThemes
Features: 4 Columns, Blue, Fixed width, Photolog, Right sidebar

Demo | Download

Blues
Template by BloggerThemes
Features: 2 Columns, Adapted from Wordpress, Blue, Fixed width, Right sidebar, White

Demo | Download

continue reading "Best blogger templates"

Saturday, January 2, 2010

*BRILLIANT COMPUTING MOBILIZED ****

Share |

GET BRILLIANT COMPUTING IN YOUR MOBILE

address:-http://mippin.com/brilliantcomputing

continue reading "***************BRILLIANT COMPUTING MOBILIZED ******************"

Friday, October 30, 2009

ANIMATED TAG CLOUD

Share |

ANIMATED TAG CLOUD
For Spinning tag cloud
visit
http://www.bloggerbuster.com/2008/08/blogumus-flash-animated-label-cloud-for.html

continue reading "ANIMATED TAG CLOUD"

Saturday, October 3, 2009

WP-Paraloid blogger template

Share |

WP-Paraloid blogger template

Author: eBlog Templates
Views: 105,004
Downloads: 24,164
Added: Jan 24th, 2008
Rating:
Live Demo

This template is very popular with WordPress users and for good reason. It’s stylish, nicely laid out, and very web 2.0. Not only that, it’s also got the following sidebar page elements built in. You just need to configure them (follow the directions below) in order for them to work properly.

Flickr photo slideshow area where you can display your personal or random pictures

Mybloglog recent blog readers section (you’ll need a mybloglog account)

Three 125×125 ad spots to help you make money from your blog

WP-Polaroid Blogger Installation

Now I’m going to be honest with you before we begin. When you use this template you’ll most likely have to wipe out all your existing page elements and start from scratch. Not only is this easiest but it also gives you a clean slate. Now this isn’t always the case but I just wanted to warn you upfront. You might even want to setup a new blog within Blogger to test this template out before you really start using it. It’s easy to do — just go to your Blogger dashboard (top right corner link) and “create new blog”. Think of it as a testing area before clobbering your existing blog. Another option is to try and backup your existing page elements which is explained in my “How to Install a Blogger XML Template” article.
Disclaimer: I am not responsible if you mess up your Blogger site. This template and set of instructions is free but does not come with any sort of warranty. I’m sure you already realize this but I just wanted to cover my butt regardless. (this is the fine print)
The following 10 steps assume you’ve installed the new WP-Polaroid Blogger template and are now ready to configure the page elements. If you had trouble installing the template, try applying it a second time and saving. Blogger is buggy and that’s actually what I had to do when setting up a demo blog for this writeup (Update – you might want to start with step #10 and then come back to step #1 since it involves editing the actual template code before setting up the page elements).
You can also download the original Photoshop .psd from Adii’s site if you’d like to modify the images. He also provides some steps on setting up the template but for WordPress only.
Open your blog site in a new browser window so you can see how it currently looks. I’ve put some placeholder text in some areas (which we’ll replace in the steps below) to give you an idea as to how it’s supposed to look. Now in a separate browser window, head on over to “Template” =>”Page Elements” and we’ll start setting up your new Blogger template.

Step #1 – Configure the Header Page Elements

First we’re going to customize the header and we’ll start with the Header-Text-Box-Left page element which you can see marked with a red square in the image.

Now when you edit the page element you’ll see “Header-Text-Box-Left” as the title which you can change to something like “MORE ABOUT ME…”. Then add whatever text you want in the text box which will end up appearing below the title (like the white text in the image). Ok, save your page element and you’re done with this box. Do the same with the “Header-Text-Box-Right” page element and you’ll be finished with the header text boxes. Save and then refresh your other Blogger browser window to see what it looks like. We’ll take care of the header links and center puppy image later on since it requires editing of the template code. Let’s move on.

Step #2 – Setup Recent Posts and Recent Comments Page Elements

These lists aren’t going to show up when you first installed the template so we’re going to bring them to life now. They are actually both RSS Feed widgets so we’ll need to paste in your feed and comment rss feeds to make them work. Let’s start with the Recent Posts page element so click edit it. Then paste in your RSS feed url which will most likely be in this format http://YOURSITE.blogspot.com/feeds/posts/default . Make sure to replace “YOURSITE” with your actual blog url.

There’s no need to change the title (unless you want to call it something else) so then hit “Save Changes”. Then save your blogger layout and go over to your other browser window, refresh and see the Recent Posts appear in your blog’s sidebar. Pretty cool huh! Now you’re going to do the exact same thing with the “Recent Comments” page element but you’ll instead use this feed format http://YOURSITE.blogspot.com/feeds/comments/default . Again, make sure to replace “YOURSITE” with your actual blog url. Save and make sure it’s working properly. If it doesn’t appear on your blog, chances are you don’t have the correct feed url or you might not have any comments yet.

Step #3 – Setup My Sponsors and Link Love Page Elements

These two page elements are basically link lists where you can links to any sites. Did you know that you can actually sell links from your blog? It’s a very popular and growing business on the web since the number and quality of links to ones’ site increases their rankings in Google and Yahoo. If you want to learn more about selling links on your blog, check out Text Link Ads for more information. I use them and they do a 50/50 revenue split which is great since they handle the advertising & transactions.
Anyhow, to setup the link page elements, click on edit of the My Sponsors page element and then enter the names and urls of the sites you wish to link to. Feel free to add a link to my site so other’s know where you got this wonderful template!

Now do the same for the Link Love page element to get additional links added. If having both link page elements is too much, feel free to delete one from your page layout.

Step #4 – Configure the Blog Archive Page Element

This page element should have been working from the moment you installed this template. The only problem is it probably didn’t look right because the page element style needed to be set to “Flat List” so let’s do that now (if your blog archive list is already set to flat, then you can skip this step). Edit the page element and change the default of “Hierarchy” to “Flat List”. You’ll see it change in the preview window so you’ll know it worked.

Click “Save Changes” and then save the page layout. Now view your blog which you have open in a separate browser window to see how it looks now. It should be correct.

Step #5 – Configure the Recent Readers Page Element

Now this is one of the unique and cool features about this template. It’s integrated with MyBlogLog which is a cool tool for showing pictures of visitors to your site. If you don’t already have an account, you need to set one up first before completing this step. Once you’ve setup an account, claimed your blog, then you can create a widget. I’m going to assume you’ve done those steps and are now ready to plug in your widget. You should be on this screen now within mybloglog.com.

We’re going to make this very easy so don’t worry about any of the colors, width, etc and just click the “Preview and Get Code” button. I know this sounds strange but just stick with me here. So the next screen you’ll get a page with the blocks of code you can use. It will look like this:

The only piece of that code that we need is the part I’ve marked in red. This is the mblID code which is the unique id just for your blog. you’re going to copy this entire id code (I covered some of the digits in the screenshot on purpose) which should be 16 numbers, and put it somewhere safe (like open notepad and paste it there for now).

Then take this javascript code above and replace the “PUTYOURCODEHERE” with the 16 digit number you just put somewhere safe. Next, you’re going to edit the “Recent Readers” page element and paste this new code into the text box. It will look like the image below but it won’t wrap (I just did it for illustration purposes).

Click “Save Changes” and go preview it in your blog. This will replace the current set of mybloglog pictures you see on your site with your set of visitors. Now don’t get too excited because there’s a good chance this section will be empty for a while (almost for sure if you just signed up for a mybloglog account) since you haven’t had any visitors yet so don’t worry. Give it a few weeks before you’ll see some pictures appear.

Step #6 – Configure the Flickr Photo Page Element

This is another optional page element and you can go ahead and delete it if you want. The configuration requires you have a Flickr account and some experience picking out pictures to link to. The pictures that are already installed on this Blogger template are basically links directly into Flickr. There are more than one way to get this section working (like using rss instead of hard coded image links) but I’m only going to show you the simple way. First edit the “FlickrRSS” page element and make sure you’re in html edit mode. Then in the text box you’ll want to paste in the new image code you want to use (see below for the proper format). It will look something like this:

Here’s the code I’m currently using to make the images work:

So essentially you need to find pictures on Flickr or somewhere on the web that you want to link to. Using Flickr’s small image size makes sure that they will properly fit in this page element area. Make sure you use the code format above (

and
around each image) and use eight images. If not, it won’t look right on your blog. Again, the code snipet above is the exact code I’m using for the default images on your blog.

Hopefully this step makes sense and you’re able to add the images you want. If not, just remove the page element and move on.

Step #8 – Configure the Three 125×125 Ad Spots

I don’t know about most of you but I like to try and monetize my blogs. It’s a great passive income stream and fun to see how much you can make. Don’t expect a lot to pour in but at least get some ads on your site to make a few bucks. If you haven’t already read my “How to Make Money From Your Blog – Tip #1” article about setting up Google AdSense on your blog, I’d advice you to read it. You can create 125×125 ads within Google and place them in these spots, for example.

Now let’s go edit the page element. You need to have three 125×125 ads ready to pop into this spot otherwise it’s not going to work. The images also need to be hosted somewhere so make sure you’ve got everything ready before moving forward. Here’s an example of what your code will look like:

This is the actual code currently being used in your blog template. It’s placeholder code but important to keep so continue reading to understand why.

It’s very important you keep the formatting of this section intact otherwise they won’t appear properly. I’m mainly speaking about the class='last' tag at the end of the third 125×125 ad. If that isn’t included in your code, it will look funny on your site. This is a hard step so hopefully you got this far.

If you don’t have any ads to use yet, feel free to keep the placeholder ads there. I recommend clicking on the three ads and setting up accounts with them so you can make money with your blog. If you don’t want the ads you can just delete this page element from your page layout.

Step #9 – Change the Puppy Header Image

Yes, you’re probably wondering why there’s a picture of a cute puppy on your blog. The good news is I actually put it there as a placeholder so it’s easier for you swap out and add your own image. The bad news is you’ll need to have some photo editing skills in order to get the image setup correctly. So first let me tell you how to change the image and then second, explain how to add your own instead. The puppy image code is in the .css part which looks like this:

/*=== Change this header puppy picture to one of yours ===*/

#polaroids-pic{

background: url(http://i254.photobucket.com/albums/hh92/eblogtemplates/polaroid/puppy.png) no-repeat;

This is where you’ll need to put the link to your new image. If you don’t want an image at all (or at least for the time being) then just delete the url and the default black polaroid picture will appear. The puppy picture is just positioned on top of the default black picture.

So before you can add a new photo, you’ll need to properly size ~~and rotate it~~. So open your picture in any photo editor like MS Paint, Adobe Photoshop, Paint.net (free download), GIMP (free download), or Picasa. If you don’t have software already installed, you can always use one of the free online photo editing sites instead like Picnik, Phixr, or FotoFlexer. Whichever photo editing software you decide to use, get ready to make the following two changes.

Resize the photo to 240×240
~~Rotate the photo 4 degrees counter clockwise~~

Update (2/1/08)

Due to popular demand, I’ve made the polaroid header image straight so it’s easy to add your personal photo without having to rotate it. It’s included in the latest version so just download and you’ve got it.
This sets up the photo to the right size to fit back on top of the polaroid background. Next, save the image you just modified (You can save the photo in any of the standard image formats like png, gif, jpeg, etc) and upload it to a place online where you can link to it.
There are free image hosting services like Photobucket, Googlepages, or ImageShack just to name a few. I personally use Photobucket but any of those will do. You’ll need to setup a free account and then you can upload your images. After you’ve uploaded your new image, you need to get the url where the image is now located. If you decided to use Photobucket, your new url will look something like this:
http://i254.photobucket.com/albums/hh92/yourname/newfolder/yourpicture.png

Take that url and replace the puppy.png url I showed you above. Save your template and reload your blog. Your new picture should now be on your home page! If not, then double-check and make sure you correctly uploaded the photo and it works. If you see your photo on your home page but it’s just not aligned properly, then you’ll need to go back to your photo editing program and tweak it some more. Another option is to edit the .css file and search for #polaroids-pic { . There you can the position, height, width, etc for fine tuning. You really shouldn’t need to mess with those settings though.

UPDATE: If you also want to remove the “Polaroid of Me” text across the default polaroid picture you can. You’ll need to edit the template code and replace the existing polaroid image on line 219 with this one. Search for “rotator.png” then replace it with “blank-polaroid.png” and you should be good to go. (Thanks to Lindsay in the comments below for the suggestion!). The latest download version now comes without the text on the polaroid picture.

Step #10 – Change the Navigation Header Links

This probably should have been step #1 but I honestly forgot about them until now. These links are hard coded into the template so you need to edit the actual code to make them work. Just edit the code template and search for the following bits of code:

HOME

ABOUT ME

ANOTHER PAGE

You should keep the HOME link as is since it just points back to your home page. You’ll also want to change the links on the right side as well:

ADVERTISE

CONTACT

SITEMAP

Now just change the a href=”#” and tab name to something you want for each of the links. Do it for both sides and that’s it. Pretty easy actually. Just make sure to save it and say yes when it asks you to delete several page elements like HTML1, HTML2, etc. I don’t know why it asks you each time when you save your template. I think it’s a Blogger bug actually.

Well folks, after 2 hours of writing this up and 8+ hours of converting this template to Blogger, I’m officially done! I hope you enjoy the template and the instructions on configuring it. If it wasn’t for Adii (the original designer), this template never would have been available to convert into a Blogger template!

If you have any questions please post below using the comments box. Please be aware I am not a photo editing expert and questions should only relate to configuring this template. Blogger in general, has lots of bugs so any “bx-” type error messages you may get I won’t be able to help you. Sorry but it’s Blogger’s fault not mine or yours.

Revision History

Update (2/25/08) - A bug has been found and fixed as of today. It’s a small one but it was brought to my attention by Tessa and Rey. The “Next” and “Previous” posts links were missing from the bottom of the template. If you downloaded this template prior to today, you’ll either have to download it again or fix your existing template. The fix is pretty easy and as follows:

Search your template code for the tag . There should actually be two of them. You want the second one. Below that code you want to paste:

The final block of code should look like this:

You’ll then want to style this new set of links which is also easy to do. Scroll back up to the top of your code and in the .css section you’ll want to add the following code:

#blog-pager-newer-link {float: left;}

#blog-pager-older-link {float: right;}

#blog-pager {padding:50px 15px 0px; text-align: center; }

This will make your new links aligned neatly instead of being squished to the left. You can style them even further (color, size, etc) but you’ll have to do that on your own.

Update 4/22/08 – Several people requested to have real 125 x 125 ads instead of the blank placeholder ones so this has been done. A new screen shot shows how this looks as well as the live demo. You can swap out the ads or keep them there indefinitely if you don’t have any ads to use.

Update 5/17/08 – Fixed the individual post image right align issue. You can easily fix this yourself if you’re using this template prior to 5/17. Search your template code for “.postmetadata” and then change the padding element of “15px” to “20px”. That will push everything down and align the images correctly. Thanks to Ricardo for his help on this.

Ready to super charge your blog? Check out our professional premium blogger templates or make money by joining our blog affiliate program!
Want to make your blog stand out from the crowd? I recommend giving your newly downloaded Blogger template a unique and personalized look. Read our Free Blogger Header Images article and find yourself a great custom header image!

continue reading "WP-Paraloid blogger template"