How to Add Numbered Comments on Threaded Comments for Blogger

.comment-thread ol {
 counter-reset: countcomments;
 }
 .comment-thread li:before {
 content: counter(countcomments,decimal);
 counter-increment: countcomments;
 float: right;
 font-size: 22px;
 color: #555555;
 padding-left:10px; 
 padding-top:3px; 
 background: url(http://itson1.blogspot.com/-f6ByQfbwApQ/T4x_8p1FGpI/AAAAAAAAB2A/WJKf-ybmvQk/s1600/comment+bubble2.png) no-repeat;
 margin-top:7px; 
 margin-left:10px; 
 width: 50px; /*image-width size*/
 height: 48px; /*image-height size*/ 
 }
 .comment-thread ol ol {
 counter-reset: contrebasse;
 }
 .comment-thread li li:before {
 content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
 counter-increment: contrebasse;
 float: right;
 font-size: 18px;
 color: #666666;
 }

How to Add Facebook Invite Friends Link To Blogger

<script src="http://connect.facebook.net/en_US/all.js"></script>
 <script>
 FB.init({
 appId:'your-app-id',
 cookie:true,
 status:true,
 xfbml:true
 });
 function FacebookInviteFriends()
 {
 FB.ui({
 method: 'apprequests',
 message: 'Your Message Here'
 });
 }
 </script>
 <div id="fb-root"></div>
 <span><a href='#' onclick="FacebookInviteFriends();">
 Invite friends link text
 </a></span>
 <script type='text/javascript'>
 if (top.location!= self.location)
 {
 top.location = self.location
 }
 </script>

How To Put A Tweet Box Into Your Blog Posts

<div id='bp_tweetBox'>

</div>

<script type='text/javascript'>

twttr.anywhere(function (T) {

T("#bp_tweetBox").tweetBox({

width: 560,

label: "Tweet Box Title",

defaultContent: "RT @TemplateFaerie Your Post Title http://bit.ly/jQtXt2"

});

});

</script>

How To Remove The Title Of A Sidebar Widget

<b:widget id='HTML1' locked='false' title='Find us on Facebook' type='HTML'>

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

Static Follow By Email Pop Out Blogger Widget

<style type="text/css">
/*<![CDATA[*/
	.FollowByEmail {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
	.followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
	.w2bfollowButton {background: #464646;color: #CCC;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
	.w2bfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNjM4h1LKducG1Ze4XoHGcvYqxkG4INkpMrdAPEdUvMp4OLjGLPxDQg2nlYB3LOe_ISHcFdcBiprogAunQkGJv9zqhmOi7AdM05awUScjrj5CkLgjt9DHNFWoO9Dkix99RTnY-8CR_TeaZ/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
	.w2bfollowButton:hover,.followActive {color: #fff !important;}
	.w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
	.followactive {background-color: #333;}
	.follow-by-email-inner {padding: 15px;}
	.FollowByEmail h2 {padding: 15px 15px 0;font-size: 18px;margin: 0 0 10px;font-weight: normal;}
	.follow-by-email-inner p {margin: 0 0 10px;}
	.follow-by-email-inner .follow-by-email-address {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
	.follow-by-email-inner form {text-align: center;}
	.follow-by-email-inner td{display: inline-block;width:100%;text-align:center;}
	.follow-by-email-inner .follow-by-email-address:focus {color: #000;border-color: #000;}
	.follow-by-email-inner .follow-by-email-submit {cursor: pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
	.follow-by-email-submit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
	.follow-by-email-submit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
	.w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
	.w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
	.w2bFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b(".FollowByEmail");followBox.prepend("<a class="w2bfollowButton" href="#"><span>Follow</span></a>");w2b("<p></p>",{class:"w2bFollowFooter",html:"<a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>"}).appendTo(followBox.find(".follow-by-email-inner"));followBox.find("td:last").removeAttr("width");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").animate({bottom:followHeight},{duration:200,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").animate({bottom:"0"},{duration:400,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>

Add Custom Blogger Three Column Footer Widget In Layout

/* — Custom CSS Part Of Three Columns Footer Widget — */
#fcol1 {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#344434;
}
#fcol2 {
margin:auto;
padding: 20px 0px 20px 0px;
width: 900px;
}
#fcol3 {
border:1px solid #DEDEDE;
background:#fff;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowrbar {margin: 0; padding: 0;}
.lowrbar .widget {margin: 0; padding: 10px 20px 0px 20px;
}
.lowrbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
color:#4784ce;
text-transform:uppercase;
font: bold 16px Arial, Tahoma, Verdana;
border-bottom:3px solid #4484ce;
}
.lowrbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
.lowrbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #fff;
}
This is a Custom CSS part of column footer for blogger. After adding above code to css box in advanced option in customize template, now add HTML part before </body> tag . For this search </body> and paste the given below code above </body>.
/* — Custom HTML Part Of 3 Column Footer Widget — */
<div id=’fcol1′>
<div id=’fcol2′>
<div id=’fcol3′>
<b:section class=’lowrbar’ id=’lowrbarid1′ preferred=’yes’>
</b:section>
</div>
<div id=’fcol3′>
<b:section class=’lowrbar’ id=’lowrbarid2′ preferred=’yes’>
</b:section>
</div>
<div id=’fcol3′>
<b:section class=’lowrbar’ id=’lowrbarid3′ preferred=’yes’>
</b:section>
</div>
<div style=’clear: both;’/>
</div> </div>

font: bold 16px Arial, Tahoma, Verdana; for font change.
width: 900px; Change over all widget width.
background:#344434; for widget background color change.
width: 32%; change width of each column.
color:#4484ce; Change headings color.
background:#fff; for background color change.

Shifting Sidebar to Left or Right

#main-wrapper {
float: left;
width: 600px;
margin: 0;
padding: 0;
}

#sidebar-wrapper {
float: right;
width: 320px;
margin: 0;
padding: 0 20px 10px;
display: inline;
}

How to Customize Your Sidebar Widget in Blogger (Blogspot)

.sidebar h2 {
background:url(http://www.yourwebsite.com/folder-and-image-filename);
background-repeat: no-repeat;
background-position:left center;
height:25px;
margin:0;
padding:10px 3px 0 30px;
line-height:1.5em;
text-transform:uppercase;
letter-spacing:.2em;
}

Slide Open Egg Bookmarking Gadget for Blogger

Animated Vertical Side Menu For Blogger

#hor {
list-style:none;
padding:0;
margin:0; 
}

#hor li {
float:left;
padding:5px;
}

#hor a {
display:block;
height: 12px;
text-indent:-999em;
}

#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0; 
}

#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0; 
}

#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}

/* CSS Style for Vertical Menu */ 

#ver {
list-style:none;
padding:0;
margin:0; 
}

#ver li {
padding:2px; 
}

#ver li a {
display:block;
height:12px;
text-indent:-999em;
} 

#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0; 
}

#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0; 
}

#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}

.clear {
clear:both;
} 

*{
/* A universal CSS reset */
margin:0;
padding:0;
}

#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;

/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;

/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;

/* CSS3 Transition: */
-webkit-transition: 0.25s;

/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TDc9NUHtoqW8H1IehCHtHsOQVEMXdkUhh2kC4JPo8LXiSYncjTOi0gzTnCoxyieiDR8U1MEQ3jQGToJnHFc_39GhGYwqFhQjZOJflJxoJYY7y7ecEGtcE1CJQ8xVelvVKLmXw78VfKE/s1600/navigation.jpg') no-repeat;

height:39px;
width:38px;
display:block;
position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;

/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

Its On

Pages

Blog Tools

How to Add Numbered Comments on Threaded Comments for Blogger

How to Add Facebook Invite Friends Link To Blogger

How To Put A Tweet Box Into Your Blog Posts

How To Remove The Title Of A Sidebar Widget

Static Follow By Email Pop Out Blogger Widget

Add Custom Blogger Three Column Footer Widget In Layout

Shifting Sidebar to Left or Right

How to Customize Your Sidebar Widget in Blogger (Blogspot)

Slide Open Egg Bookmarking Gadget for Blogger

Animated Vertical Side Menu For Blogger