Tuesday, July 31, 2012

Add Cool Css Sprites Menu For Blogger

This is cool sprite menu style. It work with
Firefox 3.5, IE 7, Chrome 3.0 & Opera 9.02
Its look very attractive.I include 4 style menu.
You can make attractive your blog. Its easy to
add it to your blog.Follow below simple steps.
Earlier i created more horizontal menubars,
click below links to view all. most of are include
with demo.

Menubar Collection
sprite-menu
1. Log in to blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this code  by using Ctrl+F <div id='content-wrapper'>

4.  Paste below code Before <div id='content-wrapper'> code

<div class="bloggertrix-navi1">
  <ul>
    <li class="sm1"><a href="#"></a></li>
    <li class="sm2"><a href="#"></a></li>
    <li class="sm3"><a href="#"></a></li>
    <li class="sm4"><a href="#"></a></li>
    <li class="sm5"><a href="http://www.bloggertrix.com/"></a></li>
  </ul>
</div>

*Replace # With your URL

5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below one of code Before ]]></b:skin> tag (choose a style as your like.)

Style 1

/*menubar by bloggertrix.com */
.bloggertrix-navi1 {
    display:block;
    height:72px;
    margin:30px auto;
    position:relative;
    width:525px; }
.bloggertrix-navi1 ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.bloggertrix-navi1 ul li {
    background-image:url(http://2.bp.blogspot.com/-kcIT3Tdn9XE/UBgJ2wzNYBI/AAAAAAAACk8/cDY8cPzhQd4/s1600/bloggertrix.com-tab-1.png);
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.bloggertrix-navi1 ul li a {
    display:block;
    height:100%;
    width:100%; }
.bloggertrix-navi1 ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.bloggertrix-navi1 ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.bloggertrix-navi1 ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.bloggertrix-navi1 ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.bloggertrix-navi1 ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.bloggertrix-navi1 ul li:hover {
    z-index:1000; }
.bloggertrix-navi1 ul li.sm1:hover {
    background-position:0 -75px; }
.bloggertrix-navi1 ul li.sm2:hover {
    background-position:-125px -75px; }
.bloggertrix-navi1 ul li.sm3:hover {
    background-position:-249px -75px; }
.bloggertrix-navi1 ul li.sm4:hover {
    background-position:-373px -75px; }
.bloggertrix-navi1 ul li.sm5:hover {
    background-position:-498px -75px; }
/*menubar by bloggertrix.com */

Style 2

/*menubar by bloggertrix.com */
.bloggertrix-navi1 {
    display:block;
    height:72px;
    margin:30px auto;
    position:relative;
    width:525px; }
.bloggertrix-navi1 ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.bloggertrix-navi1 ul li {
    background-image:url(http://1.bp.blogspot.com/-TsNV6G2xc5U/UBf9jfk7J7I/AAAAAAAACkc/ZAiSDxQV6fM/s1600/tab-2.png);
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.bloggertrix-navi1 ul li a {
    display:block;
    height:100%;
    width:100%; }
.bloggertrix-navi1 ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.bloggertrix-navi1 ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.bloggertrix-navi1 ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.bloggertrix-navi1 ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.bloggertrix-navi1 ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.bloggertrix-navi1 ul li:hover {
    z-index:1000; }
.bloggertrix-navi1 ul li.sm1:hover {
    background-position:0 -75px; }
.bloggertrix-navi1 ul li.sm2:hover {
    background-position:-125px -75px; }
.bloggertrix-navi1 ul li.sm3:hover {
    background-position:-249px -75px; }
.bloggertrix-navi1 ul li.sm4:hover {
    background-position:-373px -75px; }
.bloggertrix-navi1 ul li.sm5:hover {
    background-position:-498px -75px; }
/*menubar by bloggertrix.com */
7. Now save your template
     you are done.
If you cant change menu names yourself, Leave a comment with your names. ill do it for you.
Read More

Monday, July 30, 2012

Social Bookmark Buttons Below To Post Title In Blogger

Social bookmarking helps you to drive quick
traffic to your blog.To get quick traffic, you
have to submit your all post to social networks.
Therefore,you have to add social sharing
gadgets to your blog. It will helps to share your
blog post with social networks.I made a post
about Slide out buttons ,Spinning effect buttons
and more to click here. This tutorial will helps to
add social sharing button below to your blog title.
Follow these steps to add it to your blog.

Social-Widget

1. Log in to blogger and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    </head>

4. Paste below code Before </head>  tag

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

5. Now Find this code  by using Ctrl+F <data:post.body/>

6.  Paste below code Before <data:post.body/> code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:4px;'>
<table border='0'>
<tbody><tr>
<td>
<div style='margin-right:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='mybloggertips' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</td>
<td>
<div style='margin-right:10px;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/>
</div>
</td>
<td>
<div style='margin-right:10px;'>
<g:plusone expr:href='data:post.url' size='medium'/>
</div>
</td>
<td><div style='margin-right:10px;'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>  
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
</td>
<td>
<div style='margin-right:10px;'>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>
</div>
</td>
</tr>
</tbody></table></div>
</b:if>

7. Now save your template
     cheers
Read More

Sunday, July 29, 2012

Customize Blogger Comment Box with Nice Background

This post about how to customize your comment
box back ground.Actually default comment box
isn't attractive.So most are like to change it.This
is the tutorial for it.I made a post about How To
Change Default Anonymous Avatar In Blogger
Comments.
You can follow this easy steps to
add it to your blog.

Customize Blogger Comment Box

1. Log in to blogger  Design > Edit HTML.

2. Find this tag by using Ctrl+F   ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

#mbt-form iframe{ 
background:#ffffff url(http://4.bp.blogspot.com/-mNhAkLamIz8/TnOlHefpjzI/AAAAAAAAFFE/agkd-EA7pUA/s400/11.png) repeat-x; 
border:1px solid #ddd; 
-moz-border-radius:6px; 
-webkit-border-radius:6px; 
box-shadow: 5px 5px 5px #CCCCCC; 
padding:5px; 
font:normal 12pt "ms sans serif", Arial; 
color:#2F97FF; 
width:560px; height:213px !important; 
}
#mbt-form a{ 
color:#fff; 
}

4. Find again this code by using Ctrl+F   <div class='comment-form'>

5.
Now replace <div class='comment-form'> with below code

<div id='mbt-form'>

6.
Now save your Template
You are done...
Read More

Saturday, July 28, 2012

How To Add Attractive Menubar With Icons For Blogger

This is a another nice menubar for your blog.
Its look very attractive. because it include with
icons.So , if you want to make a attractive blog.
you can add this cool menubar for your blog.
you can do it with easy steps.Earlier i created
more horizontal menubars, click below links to
view all. most of are include with demo.

Menubar Collection


DEMO

1. Log in to blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

/*menubar by bloggertrix.com */
#bloggertrix-bar{
margin:10px;}
#bloggertrix-bar .link a{
float:left;
padding:8px;
background-color:#eeeeee;
display:block;
margin-right:9px;
text-decoration:none;
-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
font-family:Tahoma, Geneva, sans-serif;
font-size:15px;
color:#666;
font-weight:bold;
text-shadow:1px 1px 1px #fff;
}
#bloggertrix-bar .link a:hover{
background-color:#d2cece;
text-shadow:1px 1px 1px #fff;
}
/*menubar by bloggertrix.com */

5. Now Find this code  by using Ctrl+F <div id='content-wrapper'>

6.  Paste below code Before <div id='content-wrapper'> code

<div id="bloggertrix-bar">
<div class="link">
<a href="Link"><img align="absbottom" alt="" border="0" height="16" src="http://4.bp.blogspot.com/-6pKneIlZSI4/UBP2JEu69WI/AAAAAAAABB0/oMfpAIXWy1Y/s1600/www.bloggertrix.com_home.png" vspace="0" width="16" /> Home</a></div>
<div class="link">
<a href="Link"><img align="absbottom" alt="" border="0" height="16" src="http://2.bp.blogspot.com/-Z3HELjpFW_A/UBP2HgINN4I/AAAAAAAABBk/c9hxJ7lyw40/s1600/www.bloggertrix.com_contact.png" vspace="0" width="16" /> Contact</a></div>
<div class="link">
<a href="Link"><img align="absbottom" alt="" border="0" height="16" src="http://4.bp.blogspot.com/-rNMh1B2h-oM/UBP2D8fcufI/AAAAAAAABBM/fRgmahQSrWA/s1600/www.bloggertrix.com_+Help.png" vspace="0" width="16" /> Forum</a></div>
<div class="link">
<a href="Link"><img align="absbottom" alt="" border="0" height="16" src="http://1.bp.blogspot.com/-neDobFC5fBs/UBP2IaUTXfI/AAAAAAAABBs/rp7iIXMP5JA/s1600/www.bloggertrix.com_design.png" vspace="0" width="16" /> Advertise</a></div>
<div class="link">
<a href="Link"><img align="absbottom" alt="" border="0" height="16" src="http://1.bp.blogspot.com/-5HOkvEdwU_8/UBP2GJatn2I/AAAAAAAABBU/ecrr8x3z2eg/s1600/www.bloggertrix.com_001.png" vspace="0" width="16" /> Rss</a></div>

<div class="link">
<a href="http://www.bloggertrix.com"><img align="absbottom" alt="" border="0" height="16" src="http://1.bp.blogspot.com/-QT9d7xUEQzk/UBP1_TSVm9I/AAAAAAAABBE/ZhaOhtuPZkQ/s1600/www.bloggertrix.com-add.png" vspace="0" width="16" /> Add This</a></div>


</div>

*Replace Link With your URL
*Replace Names with as your like.

7. Now save your template
 you are done.
Read More

Social Network Sidebar Gadget For Blogger

Social Bookmark site helps to get more traffic to
your blog.There fore we need some more followers
for our social profile. By using this gadget you can
link your profile with this gadget. Your users can
follow you from your site. It include Facebook fan,
Twitter followers, and Rss subscribers. you can do
with easy steps. Follow these steps to add it your blog.
My earlier post Social Network Widget With Spinning
Hover Effect For Blogger



DEMO

1. Log in to blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag
#col2 {
float: left;
width: 320px;
}
.subcol {
width: 150px;
}
.subcol h2 {
font-size: 14px;
padding: 0 0 10px;
color: #999999;
}
#subscribe { background:#none; width:308px;  font-size:8px; }
.subscribe_icons { width:286px; margin:0px auto; }
.subscribe_icons li { display:inline; float:left; margin:0px 2px 5px 2px; width:52px; text-align:center; font-size:11px; }
.subscribe_icons a { display:block; padding:40px 0px 2px; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; color:#444 !important; }
.subscribe_icons a:hover { color:#26b !important; text-decoration:none; -moz-box-shadow:0px 2px 4px hsla(0,0%,0%,.35); -webkit-box-shadow:0px 2px 4px hsla(0,0%,0%,.35); }
.subscribe_icons .subscribe_buzz a { background:url(http://1.bp.blogspot.com/_ubwIhqPcR6M/TIZY0sbO0OI/AAAAAAAAA9c/1xJF5-MDwhg/s1600/buzz.png) center top no-repeat; }
.subscribe_icons .subscribe_twitter a { background:url(http://1.bp.blogspot.com/_ubwIhqPcR6M/TIZZDKoUuUI/AAAAAAAAA9k/5tMMs9lM198/s1600/twitter1.png) center top no-repeat; }
.subscribe_icons .subscribe_facebook a { background:url(http://4.bp.blogspot.com/_ubwIhqPcR6M/TIZZXPQXpOI/AAAAAAAAA9s/eUtxrhfsQnw/s1600/facebook1.png) center top no-repeat; }
.subscribe_icons .subscribe_rss a { background:url(http://4.bp.blogspot.com/_ubwIhqPcR6M/TIZZpMLXofI/AAAAAAAAA90/38UW2P6muCw/s1600/rss1.png) center top no-repeat; }
.subscribe_icons .subscribe_email a { background:url(http://3.bp.blogspot.com/_ubwIhqPcR6M/TIZZ2uMQeWI/AAAAAAAAA98/Rl3vTdU58gU/s1600/email.png) center top no-repeat; 

4. Now Go to Design >> Page Element

5. Click Add Gadget and select 'HTML/Javascript'

6. Paste  below code.

<!-- www.bloggertrix.com -->
<div id='col2'>
<div id='subscribe'>
<ul class='subscribe_icons'>
<li class='subscribe_buzz'><a href='ADD HERE YOUR GOOGLE PROFILE URL' rel='nofollow' target='_blank'>Buzz</a></li>
<li class='subscribe_twitter'><a href='ADD HERE YOUR TWITTER URL' rel='nofollow' target='_blank'>Twitter</a></li>
<li class='subscribe_facebook'><a href='ADD HERE YOUR FACEBOOK URL' rel='nofollow' target='_blank'>Facebook</a></li>

<li class='subscribe_rss'><a href='ADD HERE YOUR FEEDBURNER URL' rel='nofollow' target='_blank'>RSS</a></li>
<li class='subscribe_email'><a href='ADD HERE YOUR FEEDBURNER EMAIL URL' rel='nofollow' target='_blank'>Email</a></li>
</ul>
<!-- End -->

Replace highlighted word with your URLs

7. Now save 'HTML/Javascript'
 you are done.
Read More

Friday, July 27, 2012

Round Hover Effect Css Menubar For Blogger

Simple css menu bar for blogger.Its include nice
hover style.You can add this to simple blogs and
can link with main pages.menu bars,Check it here
you ca do with easy steps. Follow these steps to
add it your blog.

Round Hover Effect Css Menubar

DEMO

1. Log in to blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

/*menubar by bloggertrix.com */
#bloggertrixmenu{
display:block;
width:100%;
overflow:hidden;
background:url("") repeat-x scroll 0 -357px #E3E3E3;
border-bottom:1px solid #FFFFFF;
border-top:1px solid #FFFFFF;
height:35px;
position:relative;
}
#btrixmenu1{
margin: 0px 10px;
padding: 0px;
width:940px;
height:88px;
}
#btrixmenu1 ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#btrixmenu1 li {
float: left;
list-style: none;
margin: 5px 0px;
padding: 0px 5px;
line-height:20px;
border-left:1px solid #FFFFFF;
border-right:1px solid #CCCCCC;
}
#btrixmenu1 li a, #btrixmenu1 li a:link, #btrixmenu1 li a:visited {
color:#FFFFFF;
display:block;
display: block;
margin: 0px;
padding: 0px 10px ;
color:#4E4E4E;
font:bold 120%/20px 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif;
text-align:center;
text-decoration:none;
text-shadow:1px 1px 1px #FFFFFF;height:23px;
}
#btrixmenu1 li a:hover {
background:#282828;
color: #fff;
margin: 0px;
padding: 0px 10px ;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: none;
}
#btrixmenu1 li.current_page_item a{
background:#7a8c12;
color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 1px 1px 1px #535F0C;
}
/*menubar by bloggertrix.com */

5. Now Find this code  by using Ctrl+F <div id='content-wrapper'>

6.  Paste below code Before <div id='content-wrapper'> code

<div class='clear'></div>
<div id='bloggertrixmenu'>
<div class='btrixmenu1' id='btrixmenu1'><ul>
<li><a class='home' href='YOUR BLOG ADDRESS HERE'>Home</a></li>
<li><a href='URL'>TITLE 1</a></li>
<li><a href='URL'>TITLE 2</a></li>
<li><a href='URL'>TITLE 3</a></li>
<li><a href='URL'>TITLE 4</a></li>
<li><a href='URL'>TITLE 5</a></li>
<li><a href='http://www.bloggertrix.com/'>Add This</a></li>
</ul></div></div>

*Replace Url With your URL
*Replace Title with as your like.

7. Now save your template
 you are done.
Read More

Table Of Content / Sitemap Generator For Blogger

This is also another great widget for your blog.
It automatically generate table of content in your
blog.Its a site map. Your visitors can look at
complete structure of your blog.it will show
"New!!" as latest 10 posts. Actually this is
more important in Seo. you better add this
widget to your blog.

Table Of Content Sitemap

Demo

How to add it to your blog.
1. Log in to blogger account and Go to Posing>> Edit Page >> Create Page



2. Now paste below code

<script src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js">
</script>
<script src="http://bloggertrix.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

*Replace Bloggertrix.com with your blog address.

3. Click Publish Post 

Tip: After publish it, you can get  URL of your contact us page. So you can add it to your
menu bar,its more relevant, because your visitors can easily get it.you can get nice menubar here
Cheers.
Read More

Thursday, July 26, 2012

Fade/Greyscale jQuery Mouse Hover Effect For Blogger

 This is also another jquery photo fade effect.
Its back and white hover style. you have to use
two image for this.you can add it to your blogger
with easily. Earlier I made a post about How To
Add Attractive Css Image Hover Effect To
Blogger
, So, you can try one of this.its easy.





Demo 

1.
Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    </head>

3. Paste below code before </head> tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
//]]>
</script>

4. Find this tag by using Ctrl+F    ]]></b:skin>

5. Paste below code before ]]></b:skin> tag

span.fadehover {
position: relative;
}

img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

img.b {
position: absolute;
left: 0;
top: 0;
}

6. HTML Code (you can use this code in post area or sidebar as your like)

<span class="fadehover">

<img src="URL_of_normal_image" alt="" class="a" />

<img src="URL_of_greyscale_image" alt="" class="b" />

</span>

* Replace URL_of_normal_image with your image URL
* Replace URL_of_greyscale_image with back and white image URL

7.  Now save your template
You are done.
Read More

Wednesday, July 25, 2012

Wide Style Feedburner Subscribe Box With Share Buttons To Blogger

As we discussed earlier, Feed-burner subscription
is important part of blogger.If we have enough
traffic we can try to increase our subscribers
with few ways. Awesome 8 Tips To Get More
Traffic To Your Blog
. Follow that 8 tips to get
more traffic to your blog.You can increase
subscribers by adding nice subscribe gadget to
your blog.Earlier also i posted about 3 In 1
Social Subscription Widget Below Blogger Posts
.
or try collections of subscription gadgets by
click here. Follow these steps to add it to your
blog.

Subscribebox+with+share+button


1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Add check mark in Expand Widget Templates.

3. Find this tag by using Ctrl+F   ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

#subscrbie_posts {padding: 10px;border:1px solid #E9E5B1;background:#FFF3D6;text-align:left;font-size:100%;line-height:1em;color:#272727;font-weight:normal;}
.subscr-right {border-left:1px solid #D2D8DE;width:160px;padding-left:10px;float:right;}
.subscr-right header{color: #333;font: normal normal bold 17px/17px Arial, sans-serif;margin-bottom: 10px; padding: 0px;text-align:center;}
.subscr-right ul{display: block;list-style-type: none;margin: 0px; padding: 0px;}
.subscr-right ul li{list-style-type: none;padding: 0px;margin: 0px;}
.subscr-right ul li a{color: #333;font: normal normal bold 12px/12px Arial, sans-serif;line-height: 25px;padding-left: 10px;}
#subscrbie_posts header{color:#333;font: normal normal bold 17px/17px Arial, sans-serif;margin-bottom:10px;text-align:center;}
.digg a, .stumble a, .delicious a, .facebook a, .twitter a{padding-left:20px;font:bold 12px/12px Arial, sans-serif;line-height:25px;color:#333;}
.digg{background:url(http://4.bp.blogspot.com/_ar9PeTUrwMY/SnmMitkOefI/AAAAAAAAAvw/mQdgqyJVhvY/digg.png) no-repeat 0 center;}
.stumble{background:url(http://3.bp.blogspot.com/_ar9PeTUrwMY/SnmM0Ze235I/AAAAAAAAAwg/jMLPYyDdCSs/stumble.png) no-repeat 0 center;}
.delicious {background:url(http://4.bp.blogspot.com/_ar9PeTUrwMY/SnmMf-cBJuI/AAAAAAAAAvo/WFFPRRl9dcg/delicious.png) no-repeat 0 center;}
.facebook{background:url(http://4.bp.blogspot.com/_ar9PeTUrwMY/SnmMldgnvuI/AAAAAAAAAv4/FhIAkFW-ZTw/facebook.png) no-repeat 0 center;}
.twitter{background:url(http://2.bp.blogspot.com/_ar9PeTUrwMY/SnmM69WzUkI/AAAAAAAAAww/6b8npnF677I/twitter.png) no-repeat 0 center;}
.thumb-img {float:left;padding:0 10px 0 0;}

5. Find this tag by using Ctrl+F   <div class='post-footer-line post-footer-line-1'/>

6. Paste below code before <div class='post-footer-line post-footer-line-1'/> code

<div id='subscrbie_posts'>
<div class='subscr-right'>
<header>Share This Article</header>
<div class='facebook'><a href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='share on facebook'>Share on Facebook</a>
</div>
<div class='twitter'><a href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='share on twitter'>Tweet on Twitter</a></div>

<div class='stumble'><a href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='share on stumbleupon'>Stumble This Article</a>
</div>
<div class='delicious'><a href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='share on delicious'>Bookmark on Delicious</a>
</div>


</div>
<div>
<header>Email Subscription</header>
    To subscribe through email,<strong>Enter your Email here:</strong>

<p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(\'your feedburner url here\', \'popupwindow\', \'scrollbars=yes,width=550,height=520\');return true' target='popupwindow'><input name='email' style='width:240px' type='text' value='enter email address here...'/><input name='uri' type='hidden' value='YOUR BLOG NAME HERE'/><input name='loc' type='hidden' value='en_us'/><input type='submit' value='subscribe'/></form>
</p>
    Don't forget to confirm your email subcription.
<p><a href='YOUR FEEDBURNER URL HERE' rel='alternate' type='application/rss+xml'><img alt='' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a><a href='http://feeds.feedburner.com/feed39' rel='alternate' type='application/rss+xml'>Subscribe in a reader</a>
</p>
</div>
</div>
<div style='clear: both;'></div>



Replace with Your Feed-burner URL Here with your feedburner URL

7. Now save your Template. You are done.
Read More

Monday, July 23, 2012

Social Sharing Buttons With Spinning Hover Effect For Blogger

This is also Nice social Bookmark buttons.
You can add this buttons to end of the post
Its have nice hover style.Earlier i posted
another spinning hover effect buttons.
Social Network Widget With Spinning
Hover Effect For Blogger
. Follow These
steps.
DEMO

1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Add check mark in Expand Widget Templates.

3. Find this tag by using Ctrl+F   ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

.spinning_icons a{
width:48px;
height:48px;
display:inline-block;
text-indent:-9999em;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
}

.spinning_icons a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}
.twitter{ background:url('http://1.bp.blogspot.com/-mxUHRwVg-0g/TzvZYtAEyrI/AAAAAAAACts/f7_QxX03c9k/s1600/twitter_32.png'); }
.delicious{ background:url('http://1.bp.blogspot.com/-fxvge7IVP_0/TzvZTJdLHGI/AAAAAAAACs4/W_1mS4jVBw8/s1600/delicious_32.png'); }
.digg{ background:url('http://2.bp.blogspot.com/-ooYCSeCOB5I/TzvZTy7y41I/AAAAAAAACs8/4yuBMS3tUPA/s1600/digg_32.png'); }
.facebook{ background:url('http://3.bp.blogspot.com/-TScBRGxU9Lc/Tzvlcv90XGI/AAAAAAAACuE/chFHrMti4HA/s1600/facebook_32.png'); }
.linkedin{ background:url('http://1.bp.blogspot.com/-4NFlcfudgWg/TzvZXZcmSbI/AAAAAAAACtc/7mn2HcWX00g/s1600/linkedin_32.png'); }
.stumbleupon{ background:url('http://3.bp.blogspot.com/-rPU_iNN7Wk8/TzvZYPlQLPI/AAAAAAAACtk/LT-XQiVJZpY/s1600/stumbleupon_32.png'); }
.youtube{ background:url('http://4.bp.blogspot.com/-zJVHywcJLgQ/TzvZZfljGUI/AAAAAAAACt0/jKrO2ijfC3c/s1600/youtube_32.png'); }

5. Find this tag by using Ctrl+F   <div class='post-footer-line post-footer-line-1'/>

6. Paste below code before <div class='post-footer-line post-footer-line-1'/> code

<div class="spinning_icons">
<a href="http://twitter.com/share?text=&quot; + data:post.title + &quot;&amp;url=&quot" class="twitter" title="twitter">Twitter</a>

<a href="http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot" class="delicious" title="delicious">Delicious</a>

<a href="http://digg.com/submit?phase=&quot; + &quot;2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot" class="digg" title="digg">Digg</a>

<a href="http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot" class="facebook" title="facebook">Facebook</a>

<a href="http://www.linkedin.com/shareArticle?mini=&quot; + &quot;true&amp;url=&quot" class="linkedin" title="linkedin">Linkedin</a>

<a href="http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot" class="stumbleupon" title="stumbleupon">Stumbleupon</a>

</div>



7. Now save your Template. You are done.
Read More

Sunday, July 22, 2012

Attractive/Cool Css Buttons Styles For Blogger

This is nice buttons style for your blog.
You can follow this easy steps to add it
to your blog.
Css+Buttons+Styles+For+Blogger.jpg

DEMO

1. Log in to blogger  Design > Page Element.

2. Find this tag by using Ctrl+F   ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

.awesome, .awesome:visited {
    background: #222 url(http://2.bp.blogspot.com/-Rugz3Sx02dI/UAr7ubzYL2I/AAAAAAAACT0/4g24oIDf0r8/s1600/overlayy.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
        border-radius:5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
font-family:Calibri, Arial, sans-serif;
}

    .awesome:hover                            { background-color: #111; color: #fff; }
    .awesome:active                            { top: 1px; }
    .small.awesome, .small.awesome:visited             { font-size: 18px; padding: ; }
    .awesome, .awesome:visited,
    .medium.awesome, .medium.awesome:visited         { font-size: 24px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
    .large.awesome, .large.awesome:visited             { font-size: 30px; padding: 8px 14px 9px; }
   
    .green.awesome, .green.awesome:visited        { background-color: #91bd09; }
    .green.awesome:hover                        { background-color: #749a02; }
    .blue.awesome, .blue.awesome:visited        { background-color: #2daebf; }
    .blue.awesome:hover                            { background-color: #007d9a; }
    .red.awesome, .red.awesome:visited            { background-color: #e33100; }
    .red.awesome:hover                            { background-color: #872300; }
    .magenta.awesome, .magenta.awesome:visited        { background-color: #a9014b; }
    .magenta.awesome:hover                            { background-color: #630030; }
    .orange.awesome, .orange.awesome:visited        { background-color: #ff5c00; }
    .orange.awesome:hover                            { background-color: #d45500; }
    .yellow.awesome, .yellow.awesome:visited        { background-color: #ffb515; }
    .yellow.awesome:hover                            { background-color: #fc9200; }

    .pink.awesome, .pink.awesome:visited        { background-color: #e22092; }
    .pink.awesome:hover                            { background-color: #c81e82; }

4. Now HTML Code here

For Large Buttons
<a href="LINK" class="small awesome">NAME</a>
<a href="LINK" class="small blue awesome">NAME</a>
<a href="LINK" class="small pink awesome">NAME</a>
<a href="LINK" class="small magenta awesome">NAME</a>
<a href="LINK" class="small green awesome">NAME</a>
<a href="LINK" class="small red awesome">NAME</a>
<a href="LINK" class="small orange awesome">NAME</a>
<a href="LINK" class="small yellow awesome">NAME</a>

For Small Buttons
<a href="LINK" class="large awesome">NAME</a>
<a href="LINK" class="large blue awesome">NAME</a>
<a href="LINK" class="large pink awesome">NAME</a>
<a href="LINK" class="large magenta awesome">NAME</a>
<a href="LINK" class="large green awesome">NAME</a>
<a href="LINK" class="large red awesome">NAME</a>
<a href="LINK" class="large orange awesome">NAME</a>
<a href="LINK" class="large yellow awesome">NAME</a>
Replace  Name with your any name.

7. Now save your HTML/Javascript'.

    You are done...
Read More

Saturday, July 21, 2012

Attractive Rss Subscription Widget With Nice Style For Blogger

Feed Subscription is important in bloggers.Because
it helps to get new post by email.So, today i bring
a nice feed subscription widget with counter. It
Include Twitter and Technorati.You can check my
other Rss subscribe widget from here. Follow this
simple steps to add it to your blog.


1.  Log in to blogger account > Go to Design >> Page Element

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste below code.

<div class='widget-content'>
<div class='third' style="border:0px solid #000;">
<center>
<form style="padding-top:6px;" id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" value="Enter your email address..." id="subbox" onfocus="if (this.value == &#39;Enter your email address...&#39;) {this.value = &#39;&#39;;}" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email address...&#39;;}" name="email" style="width:200px;" />
<input type="hidden" value="Bloggertrix" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input style="
        padding-left:3px;
        padding-right:3px;
        border: 1px solid #333333;
        cursor: pointer;
        background-color: #000000; 
        color: #FFFFFF;" 
type="submit" value="Submit" />
</form>

</center>
<center>
<table border="0">
<tr>
<td>
<a href="http://twitter.com/bloggertrix" target="_blank" title="Follow Me On Twitter">
<img style="width:54px; height:54px;" src="http://lh4.ggpht.com/_So-xppeH7x0/TNUBEwgLHkI/AAAAAAAAAi8/iHhPS0qT7Nc/s800/EAB_twitter%2520icon.png" /></a>
</td>
<td>
<a href="http://technorati.com/faves?sub=addfavbtn&add=http://www.bloggertrix.com" target="_blank" title="Add To Technorati">
<img style="width:54px; height:54px;" src="http://lh6.ggpht.com/_So-xppeH7x0/TNUBE_mNq2I/AAAAAAAAAi4/OhNOr78rMsc/s800/EAB_technorati%2520icon.png" /></a>
</td>
<td>
<a href="http://feeds.feedburner.com/bloggertrix" target="_blank" title="Subscribe Via RSS">
<img style="width:54px; height:54px;" src="http://lh5.ggpht.com/_So-xppeH7x0/TL2iasX5TrI/AAAAAAAAAbo/ahCkHG6qOB8/s800/EAB_rss.png" /></a>
</td><td><td>
<br/><br/>
<a href="http://feeds.feedburner.com/bloggertrix"><img src="http://feeds.feedburner.com/~fc/bloggertrix?bg=99CCFF&amp;fg=444444&amp;anim=1" height="26" width="88" alt="Fellow Readers" /></a>
</td></td></tr></table></center></div></div>

Replace bloggertrix with your Facebook fan page Id
Replace bloggertrix with your twitter Username
Replace bloggertrix with your Feedburner Id 
Replace bloggertrix.com with your site name
                                 
4. Save HTML/Javascript. you are done.
Read More

Friday, July 20, 2012

How To Add Cool Jquery Fade Effect To Blogger Images

This is a smooth jquery photo fade effect.you can
add it to your blogger, with easily. your post images
will appear like below image when you move the
courser on it.you can try it. Earlier I made a post
about How To Add Attractive Css Image Hover
Effect To Blogger
, So, you can try on of ths.its easy.

How To Add Cool Jquery Fade Effect To Blogger Images

1.
Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    </head>

3. Paste below code before </head> tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>

9. Now save your template
You are done.
Read More

Thursday, July 19, 2012

How To Add Cool Vertical Jquery Slide Menubar To Blogger

Vertical bar is also really helpful, when
we need to keep some link on side bar.
So, this vertical bar include nice hover
style like dancing style.Earlier i posted
about How To Add Cool Vertical Drop
Down Menu For Blogger
. Its also include
nice style with drop down.You can follow
this easy steps to add it to your blog.

Vertical+Jquery+Slide+Menubar

DEMO

1. Log in to blogger  Design > Edit HTML.

2. Find this tag by using Ctrl+F   </head>

3. Paste below code Before </head> tag

<script src='http://bloggtrix.googlecode.com/files/jquery.js' type='text/javascript'/><script src='http://bloggtrix.googlecode.com/files/sliding_effect.js' type='text/javascript'/>
<style>
ul#sliding-navigation li.sliding-element h3{color: #none;background:url() repeat-y;font-weight: normal;}
#hide {position:absolute;top:30px;left:-190px;}
ul#sliding-navigation{background:url();list-style: none;font-size: 14px;margin: 30px 0;}
ul#sliding-navigation li.sliding-element h3,ul#sliding-navigation li.sliding-element a{display: block;width: 150px;padding: 5px 2px;margin-top:-7px;margin-left:10px;margin-bottom: -2px;}
ul#sliding-navigation li.sliding-element h3{color: #fff;background: #none;border: 1px solid #1a1a1a;font-weight: normal;}
ul#sliding-navigation li.sliding-element a{color: #999;background: #none;border: 0px solid #1a1a1a;text-decoration: none;padding:6px 0 6px 12px;margin:0;background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/TSvOmftxKHI/AAAAAAAALOM/o-RDw0JV9_g/s1600/widget-list.png) left 11px no-repeat;border-bottom:1px solid #e6f2fa;}}
ul#sliding-navigation li.sliding-element a:hover { color: #000000; }
</style>

4. Now Go to DesignPage Element.

5.Click Add Gadget and select 'HTML/Javascript

6. Paste below code.

<ul id="sliding-navigation"><center><h2>
Navigation Title</h2>
</center>
<li class="sliding-element"></li>
<li class="sliding-element"><a href="#">Link 1</a></li>
<li class="sliding-element"><a href="#">Link 2</a></li>
<li class="sliding-element"><a href="#">Link 3</a></li>
<li class="sliding-element"><a href="#">Link 4</a></li>
<li class="sliding-element"><a href="http://www.bloggertrix.com/">Get This</a></li>
</ul>

Replace # with your Links
Replace Links name with your any name.

7. Now save your HTML/Javascript'.

    You are done...
Read More

Wednesday, July 18, 2012

How To Add Attractive Css Image Hover Effect To Blogger

This is nice hover effect for blogger images.
so you can add it to your blog with simple steps.
You can check my earlier post about images.
Jquery Image Zoom Effect For Blogger, and
How To Add CSS Cool Image Effect For
Blogger
. you can try it.Check below for demo.

Attractive Css Image Hover Effect

1. Log in to blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

.bteffect {
-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.bteffect:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}

4. Now, when you make a post, you can paste below code.

<img class="bteffect" 
src="http://4.bp.blogspot.com/-TjvggPytqQs/T_SJgYeG7xI/AAAAAAAABzQ/nvLOAZqqdHM/s1600/Your_Choice_is_Your_Way_by_Osokin.jpg" width="320" />

Now you can replace your image link with highlighted link above.
Now Publish post and check it. you are done.








Read More

Tuesday, July 17, 2012

Add Attractive Ding-Dong Menu Bar To Blogger

This is a simple menu-bar. It include nice hover
style.Those who like simple menu-bar,you can
use this to your blog and can link with main pages.
menu bars,Check it here you ca do with easy
steps. Follow these steps to add it your blog.
DEMO

1. Log in to blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

#bloggertrix-navigation  {
height : 27.5%;
margin-top : 0;
font-size : 12px;
}
#bloggertrix-navigation ul, #navigation li {
list-style-type : none;
display : inline;
margin : 0;
padding : 0;
}
#bloggertrix-navigation a:link, #navigation a:visited {
float : left;
display : block;
height : 33px;
line-height : 33px;
text-decoration : none;
background-image : url(http://1.bp.blogspot.com/-lAGBlJ6Ymjs/UARpNL5UILI/AAAAAAAACOw/ZRH5qOz3oss/s1600/bloggertrix.com-topmenu.jpg);
text-align : center;
width : 113px;
text-transform : none;
background-repeat : no-repeat;
overflow : hidden;
margin : 0 3px 0 0;
}
#bloggertrix-navigation a:hover, #navigation li#current a {
font-weight : 700;
padding-left : 0;
background-image : url(http://1.bp.blogspot.com/-lAGBlJ6Ymjs/UARpNL5UILI/AAAAAAAACOw/ZRH5qOz3oss/s1600/bloggertrix.com-topmenu.jpg);
background-repeat : no-repeat;
margin-top : 5px;
} 
}

5. Now Find this code  by using Ctrl+F <div id='content-wrapper'>

6.  Paste below code Before <div id='content-wrapper'> code

<table><tbody>
<tr><td width="56"></td> <td width="740"><div id="bloggertrix-navigation">
<div class="moduletable">
<ul id="mainlevel-nav">
<li><a href="#">Home</a></li>
<li><a class="mainlevel-nav" href="#">Downloads</a></li>
<li><a class="mainlevel-nav" href="#">Categories</a></li>
<li><a class="mainlevel-nav" href="#">About</a></li>
<li><a class="mainlevel-nav" href="http://www.bloggertrix.com/">Add This</a></li>
<li>
</li>
</ul>
</div>

</div>
</td></tr>
</tbody></table>

*Replace # With your URL
*Replace Name with as your like.

7. Now save your template
 you are done.
Read More

Monday, July 16, 2012

Attractive Slide Out Social Network Sharing Buttons To Blogger

This is also great social share buttons.its
showing bottom left and, share button showing
with hover style.So, this also helps you to
share your articles easily.you can try it.Check
my earlier post about social buttons.Social
Network Widget With Spinning Hover Effect
For Blogger
.Try below steps.

DEMO

1.
Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    </head>

3. Paste below code before </head> tag

<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>


6. Find this code by using Ctrl+F </body>

7.  Paste below code before </body>  code

<div class="addthis_toolbox addthis_peekaboo_style addthis_default_style addthis_label_style addthis_32x32_style">
    <a class="addthis_button_more">Share</a>
    <ul>
        <li><a class="addthis_button_preferred_1"></a></li>
        <li><a class="addthis_button_preferred_2"></a></li>
        <li><a class="addthis_button_preferred_3"></a></li>
        <li><a class="addthis_button_preferred_4"></a></li>
    </ul>
</div>


9. Now save your template
You are done.
Read More

Sunday, July 15, 2012

How Add Attractive Jquery Slide Show Feature For Blogger

Actually slide show helps to show main ideas
of our blog. If we are doing some service via
blog. we can add  images with description
which according to our service.So adding
slide show getting more eye contact.So,
there have more advantage of adding it.you
can check my earlier slideshow.How Add
Cool Jquery Slide Show For Blogger

Follow these simple steps to add it to your
blog. check below link for demo.

Jquery Slide Show Feature

DEMO

1.
Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F    </head>

3. Paste below code before </head> tag

<style type='text/css'>
#s3slider {
background: none repeat scroll 0 0 #FFFFFF;
border: 4px solid #149CD5;
height: 280px;
margin-bottom: 25px;
margin-top: 0;
overflow: hidden;
position: relative;
text-shadow: 0 1px 0 #000000;
width: 585px;
}
#s3sliderContent {
background: none repeat scroll 0 0 #FFFFFF;
height: 300px;
list-style: none outside none;
margin-left: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: -14px;
width: 585px;
}
.s3sliderImage {
float: left;
position: relative;
width: 585px;
}
.s3sliderImage span {
background-color: #000000;
color: #FFFFFF;
display: none;
font-size: 12px;
height: 300px;
line-height: 16px;
opacity: 0.7;
overflow: hidden;
padding: 10px 13px;
position: absolute;
right: 0;
top: 0;
width: 180px;
}
.s3sliderImage strong a {
font-family: 'Myriad Pro',Helvetica,Arial,Sans-Serif;
font-size: 20px;
}
.s3sliderImage strong a:hover {
color: #FFFFFF;
}
</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
/* ------------------------------------------------------------------------
 s3Slider
 
 Developped By: Boban Karišik -> http://www.serie3.info/
        CSS Help: Mészáros Róbert -> http://www.perspectived.com/
 Version: 1.0
 
 Copyright: Feel free to redistribute the script/modify it, as
      long as you leave my infos at the top.
-------------------------------------------------------------------------- */


(function($){  

    $.fn.s3Slider = function(vars) {       
        
        var element     = this;
        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var current     = null;
        var timeOutFn   = null;
        var faderStat   = true;
        var mOver       = false;
        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
        var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
            
        items.each(function(i) {
    
            $(items[i]).mouseover(function() {
               mOver = true;
            });
            
            $(items[i]).mouseout(function() {
                mOver   = false;
                fadeElement(true);
            });
            
        });
        
        var fadeElement = function(isMouseOut) {
            var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
            thisTimeOut = (faderStat) ? 10 : thisTimeOut;
            if(items.length > 0) {
                timeOutFn = setTimeout(makeSlider, thisTimeOut);
            } else {
                console.log("Poof..");
            }
        }
        
        var makeSlider = function() {
            current = (current != null) ? current : items[(items.length-1)];
            var currNo      = jQuery.inArray(current, items) + 1
            currNo = (currNo == items.length) ? 0 : (currNo - 1);
            var newMargin   = $(element).width() * currNo;
            if(faderStat == true) {
                if(!mOver) {
                    $(items[currNo]).fadeIn((timeOut/6), function() {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        } else {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        }
                    });
                }
            } else {
                if(!mOver) {
                    if($(itemsSpan[currNo]).css('bottom') == 0) {
                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    } else {
                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    }
                }
            }
        }
        
        makeSlider();
    };  
})(jQuery);  
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>


6. Find this code by using Ctrl+F <div id="main-wrapper">

7.  Paste below code before <div id="main-wrapper">  code

<div id="s3slider">

<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="http://3.bp.blogspot.com/-r0qLumEI0HU/UAF37DrEHII/AAAAAAAAAGw/6W-gv0scKlk/s1600/image1.jpg" />
<span><strong><a href="ADD HERE POST1 URL">POST TITLE</a></strong>
<p>DESCRIPTION</p>
</span>
</li>

<li class="s3sliderImage">
<img src="http://1.bp.blogspot.com/-XbDPTu89MEw/UAF3-bzwW2I/AAAAAAAAAG4/nA9nxqRvV_c/s1600/image2.jpg" />
<span><strong><a href="ADD HERE POST2 URL">POST TITLE</a></strong>

<p>DESCRIPTION</p>

</span>
</li>
<li class="s3sliderImage">
<img src="http://1.bp.blogspot.com/-6xVIl-rNzY0/UAF7fpd6iCI/AAAAAAAAAHg/7ON87thE5dE/s1600/image5.jpg" />
<span><strong><a href="ADD HERE POST2 URL">POST TITLE</a></strong>

<p>DESCRIPTION</p>

</span>
</li>

<li class="s3sliderImage">
<img src="http://3.bp.blogspot.com/-vRaCkKg5KnY/UAF7p9xPg6I/AAAAAAAAAHo/mX4rNL6dTHs/s1600/image6.png" />
<span><strong><a href="ADD HERE POST2 URL">POST TITLE</a></strong>

<p>DESCRIPTION</p>

</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

* Replace Post Title with your title
* Replace DESCRIPTION with your short description.
* You can change the images by changing links.

9. Now save your template
You are done.
Read More

Saturday, July 14, 2012

Social Network Widget With Spinning Hover Effect For Blogger

This is cool widget for your blog. This is
cool social widget. you can add it on side bar.
Its have nice hover style.So, it will helps to
attractive your blog.Black And White Social
Network Widget With Color Hover Style
For Blogger
. Follow these steps to add it
to your blog.

cool-social-widget
Demo

1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Now Paste Below code.


<style>p#socialicons img {
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
p#socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
/* Spinning Social Icons Widget By bloggertrix.com */
</style> 
<center><p id="socialicons">
    <a href="http://www.facebook.com/bloggertrix/">
<img border="0" src="http://4.bp.blogspot.com/-U4-lm-VG-Rs/UAFFARjvXBI/AAAAAAAACKg/5eXZk3g6JTw/s1600/facebook.png" /></a>
    <a href="http://www.twitter.com/bloggertrix/">
<img border="0" src="http://1.bp.blogspot.com/-v1j9lvjPaks/UAFFDtW2I2I/AAAAAAAACK4/7ux4VptLkk0/s1600/twitter.png" /></a>
    <a href="https://plus.google.com/107955298793879607964">
<img border="0" src="http://1.bp.blogspot.com/-TatTDxZ7QlQ/UAFFBg8qgCI/AAAAAAAACKo/_iyTQXBwEEw/s1600/googleplus.png" /></a>
    <a href="http://www.feeds.feedburner.com/bloggertrix/">
<img border="0" src="http://1.bp.blogspot.com/-y8Gyyv6mVpY/UAFFCqff4dI/AAAAAAAACKw/p84nEbEoIIo/s1600/rss.png" /></a>
    <a href="http://www.youtube.com/bloggertrix/">
<img border="0" src="http://2.bp.blogspot.com/-UykY0xp20bw/UAFFEpCKPAI/AAAAAAAACLA/eOimlneyMyc/s1600/youtube.png" /></a>
</p></center>



After paste above code
* Replace bloggertrix with your facebook username
*Replace bloggertrix  with your  twitter Username
*Replace 107955298793879607964 with Google plus id
*Replace bloggertrix with feedburner username
*Replace bloggertrix with your your-tube username.
4. Now save your HTML/Javascript'.

    You are done...
Read More

Attractive Feed Subscription Form Widget For Blogger

This is a Cool Rss Subscribe box. Actually
if we hope to increase our Rss, we must have
good article with attractive subscription gadget.
Therefore visitors force to subscribe via Rss
because they can get quality articles via emails.
Earlier I posted about How To Add Search
Box With Subscriber Gadget For Blogger



1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Now Paste One of below code style as your like

Style 1

<style type="text/css">
#btrix-emailbox {
    background: url(http://4.bp.blogspot.com/-FsFbieQ3GZE/UABV-yVoQfI/AAAAAAAACKE/V1Aku-s7SII/s1600/btrix-red.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
 
form#btrix-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
 
form#btrix-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
 
form#btrix-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
 
<div id="btrix-emailbox">
    <form id="btrix-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="bloggertrix" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "enter your e-mail here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "enter your e-mail here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>


Style 2
<style type="text/css">
#btrix-emailbox {
    background: url(http://4.bp.blogspot.com/-YSQN11W_1GI/UABWA9X4n_I/AAAAAAAACKM/T0N4wNPe7uw/s1600/btrix-silver.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
 
form#btrix-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
 
form#btrix-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
 
form#btrix-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
 
<div id="btrix-emailbox">
    <form id="btrix-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="bloggertrix" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "enter your e-mail here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "enter your e-mail here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>
Style 3
<style type="text/css">
#btrix-emailbox {
    background: url(http://4.bp.blogspot.com/-Ug4YzfUkksc/UABWCxRoTQI/AAAAAAAACKU/ltp9e_ISKHw/s1600/btrix.blue.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
 
form#btrix-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
 
form#btrix-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
 
form#btrix-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
 
<div id="btrix-emailbox">
    <form id="btrix-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="bloggertrix" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "enter your e-mail here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "enter your e-mail here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>


After paste one of above code
* Replace bloggertrix with your feedburner name

4. Now save your HTML/Javascript'.

    You are done...
Read More

Friday, July 13, 2012

Black And White Social Network Widget With Color Hover Style For Blogger

As I told earlier ,social bookmarking is very
important for bloggers.Because we can get
quality traffic.If you have account in social
networks. you can link to account from your
blog.So , this tutorial will help you to link
your social networks from your blog.It
include nice hover style too. Earlier i posted
How To Add Simple Subscribe Widget To
Blogger
. Go to end post for demo.

color-hover-with+back-and-white
1. Log in to blogger account and Go to Design >> Edit HTML
  
2. Find this tag by using Ctrl+F    ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

*social icons bloggertrix.com*/
#head-soc{width:300px }
#head-soc ul li {list-style :none; padding: 0 0 0 1px; float: left;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0; background: url(http://2.bp.blogspot.com/-ty1Qs7bbr1M/UAA4AN4OPjI/AAAAAAAACIs/QKFNJeAvb3w/s1600/bloggertrix.com-image.gif) no-repeat; display: block;}

#head-soc li#g a {background-position: 0px 0px;}
#head-soc li#g a:hover {background-position: 0px -32px;}

#head-soc li#rss a {background-position: -32px 0px;}
#head-soc li#rss a:hover {background-position: -32px -32px;}

#head-soc li#sub a {background-position: -64px 0px;}
#head-soc li#sub a:hover {background-position: -64px -32px;}

#head-soc li#fb a {background-position: -96px 0px;}
#head-soc li#fb a:hover {background-position: -96px -32px;}

#head-soc li#twit a {background-position: -128px 0px;}
#head-soc li#twit a:hover {background-position: -128px -32px;}

#head-soc li#li a {background-position: -160px 0px;}
#head-soc li#li a:hover {background-position: -160px -32px;}

#head-soc li#youtube a {background-position: -192px 0px;}
#head-soc li#youtube a:hover {background-position: -192px -32px;}
/*Social Icons bloggertrix.com */

4. Now Go to Design >> Page Element

5.  Click Add Gadget and select 'HTML/Javascript'

6. 
Paste below code

<div id="head-soc">
<ul>
<li id="g"><a href="https://plus.google.com/107955298793879607964
">Google+</a></li>
<li id="rss"><a href="http://feeds.feedburner.com/bloggertrix">RSS Feed</a> </li>
<li id="sub"><a href="http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix&amp;loc=en_US">Subscribe</a></li>
<li id="fb"><a href="http://facebook.com/bloggertrix">Facebook</a></li>
<li id="twit"><a href="http://twitter.com/bloggertrix">Twitter</a></li>
<li id="li"><a href="http://www.linkedin.com/Username">LinkedIn</a></li>
<li id="youtube"><a href="http://www.youtube.com/username">YouTube</a></li>
</ul>
</div>

*Replace 107955298793879607964 With your Google Plus profile id
*Replace Bloggertrix with your feedburner name
*Replace Bloggertrix with your Facebook username
*Replace Bloggertrix with your Twitter Username
*Replace Username with your Youtube username
*Replace Username with your Youtube username

6.  Save HTML/Javascript. you are done.

Demo

Read More