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}
Log in to blogger
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.
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
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">
<!-- This is where the share some love image appears -->
</div>
</div>
And save ur template.
There are many ways and software to support creating a new sitemap for a website. Today, i will guide you how to create a website sitemap very effective and many webmaster have used. Using free service of xml-sitemaps.com.
