All Web Helps: September 2012

Add a nice Twitter Follow Gadget in Blogger

Now we will see how to add Twitter Follow Gadget in Blogger. Like my website.
It's really cool. YA...

Lets do it:

LonIN to your Blogger account.
Go to Layout.
Then click Add a Gadget and Select HTML/Javascript.
Now Put this code in it.

<a href='http://allhelpz.blogspot.com'><img alt='Tips Tricks And Tutorials' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinqwTxd-3vggpy-h8oFd4hNHi13VO6ba43pkpBpn2Gn7Xy7kIu8CQ8088IIycPhSFQfAaQn_RJOR-k_GPWfflqtH1OzxzXJtQyQoXOwPasixsdRopSnQb9PnAuItu2PPQVBzJe65VckFKZ/s1600/best+blogger+tips.png'/></a><div style='position: fixed; bottom: 20%; right: 0%;'/><a href="http://www.twitter.com/allhelpz" target="_blank"><img src="http://i47.tinypic.com/3345aao.png" /></a></div><a href="http://allhelpz.blogspot.com" target="_blank">Get This Gadget</a>

Replace your twitter user name. [Red color text allhelpz].

Add a nice Twitter Follow Gadget in Blogger,twitter widget in blogger,add floating twitter in blogger,nice twitter follow gadget in blogger.

Now save your template.

[Please comment for any Problem]

Add Loading Effect in Blogger

How are you all? I am busy for my examination. It is very important examination. So, I am late for new posts. Really Sorry for this.

Now we will see how to add Loading effect in Blogger. Like my website.
If anyone visit to your site then at first he will show a awesome loading page. After this loading page your website will show. After loading your site will not take any extra time to load. It's really cool. YA...

Lets do it:

LonIN to your Blogger account.
Go to Template > Edit HTML.
Enable Expand Widget Template.
Find </html> tag.
Now put this code just above </head> tag.

<style>
/* jQuery page loading effect by www.allhelpz.blogspot.com */
#md-loading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #FDFEF8 url(http://www.liddabitsweets.com/wp-content/plugins/simplemap/inc/images/loading.gif) no-repeat center;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.MD #md-loading { display: none; }@media only screen and (device-width: 768px) {
#loading {
position:absolute;
width:1040px;
min-height:768px;
}
}
#md-progress-bar {
position: absolute;
top: 0; left: 0;
background: #de1301;
opacity: 0.8;
width: 0;
height: 18px;
}
#md-loader {
height: 100%;
display: none;
}
</style>
<script>(function($){$("html").removeClass("MD");
$("#header").ready(function(){ $("#md-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#md-progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#md-progress-bar").stop().animate({ width: "100%" },600,function(){
$("#md-loading").fadeOut("fast",function(){ $(this).remove(); });
});
});
})(jQuery);
</script>

Now find <body> tag.
Now post this code just after <body> tag.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='md-loading'><div id='md-progress-bar'></div><div id='md-loader'>Loading...</div></div></b:if>

Now save your template.

[Please comment for any Problem]

Thesis Themes Customization: 14 | Author Comment Style

I will use 1.8 Developer version of Thesis Theme

Author Comment Style in thesis theme, admin comment style in thesis,author comment different style in thesis, author comment styling

Select custom.css file and place this code below it:

/******************************************************************/

/* Author Comment Style BY Allhelpz.blogspot.com */

/******************************************************************/

.avatar img { float:left; margin-left: 0.3em;}

.custom dl#comment_list dd.bypostauthor { background-color:#e7f8fb; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 1.5px; border: 1.5px solid #048bb7;}

TO Show Image Right Side:
Select custom.css file and place this code below it:

/******************************************************************/

/* Author Comment Style BY allhelpz.blogspot.com */

/******************************************************************/

.avatar img { float:left; margin-left: 0.3em;}

.custom dl#comment_list dd.bypostauthor { background-color:#e7f8fb; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 1.5px; border: 1.5px solid #048bb7;}

.custom dl#comment_list dt.bypostauthor { background-color:#e7f8fb; padding-top:20px; background: url(YOUR-IMAGE-URL-HERE) no-repeat scroll right -0.4em ;}

Style Replay Button:

/******************************************************************/

/* Author Comment Style BY allhelpz.blogspot.com */

/******************************************************************/

.custom .comment-reply-link { background: #990000; padding: 0.4em; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-family: SolaimanLipi,"Siyam Rupali", AponaLohit, Vrinda; font-color: #ffffff;}

/*Box Thread Discussion*/

.custom #comment_list { background: #048bb7; padding: 0.2em; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }

.custom #comment_list dd { margin-bottom: 0.2em; }

.custom #comment_list .comment { background: #bdf7cf; font-family: SolaimanLipi, "Siyam Rupali", AponaLohit, Vrinda; }

Now save it.

[Please comment for any Problem]

All Web Helps

Tuesday, September 04, 2012

Add a nice Twitter Follow Gadget in Blogger

Add Loading Effect in Blogger

Thesis Themes Customization: 14 | Author Comment Style

Featured post

WordPress yoast plugin remove date or article:published_time