Sunday, September 30, 2012

Add Css Jungle Menu Bar For Blogger

This is also nice menu-bar for blogger.It has more nice hover and im using just CSS and HTML for this bar.You can increase bar width with adding more links. you can check my earlier menu-bar post
post by clicking here

jungle-menu
Demo


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
2. Find this tag by using Ctrl+F    ]]></b:skin>

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

#menu2{
 width:90%;
 margin:25px auto;
}
#menu2 ul{
 list-style:none;
}
#menu2 li{
 display:block;
 float:left;
}
#menu2 li a{
 background:#979797 url(http://2.bp.blogspot.com/--edusZsZGx0/UGhWN4eVKYI/AAAAAAAAEcc/KQR2mqrUHT0/s1600/menu_bg.gif) repeat-x;
 border:2px solid #939393;
 margin:0 1px;
 padding:15px 15px 15px 15px;
 display:block;
 float:left;
 color:#fff;
 text-transform:uppercase;
 text-decoration:none;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-size:13px;
 font-weight:bold;
 height: 50px;
}
#menu2 li a span{
 color:#636363;
 font-size:10px;
 text-transform:lowercase;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-weight:normal;
}
#menu2 li a:hover{
 background:#e46825 url(http://4.bp.blogspot.com/-fqTGBCr0Ycs/UGhWPXE259I/AAAAAAAAEck/R9p6sUSFJjE/s1600/menu_hover.gif) repeat-x;
 border:2px solid #939393;
 text-decoration:none;
}
#menu2 li a:hover span{
 color:#636363;
}
.current{
 background:#bcbcbc url(http://4.bp.blogspot.com/-fqTGBCr0Ycs/UGhWPXE259I/AAAAAAAAEck/R9p6sUSFJjE/s1600/menu_hover.gif) repeat-x;
 border:2px solid #aeaeae;
 margin:0 1px;
 padding:15px 15px 15px 15px;
 display:block;
 float:left;
 color:#fff;
 text-transform:uppercase;
 text-decoration:none;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-size:13px;
 cursor:pointer;
 font-weight:bold;
 height: 50px;
}
.current span{
 color:#636363;
 font-size:10px;
 text-transform:lowercase;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 font-weight:normal;
}

4. Go to blogger and click Layout

5. Click Add Gadget and select 'HTML/Javascript

6. Paste below code.

<!--MenuBar Starts-->
<div id="menu2">
 <ul>
  <li class="current">Home<br /><span>takes you to<br /> home page</span></li>
  <li><a href="#">About Us<br /><span>takes you to<br />about us page</span></a></li>  
  <li><a href="#">Products<br /><span>takes you to<br />products page</span></a></li>
  <li><a href="#">Partners<br /><span>takes you to<br />partners page</span></a></li>  
  <li><a href="#">Contact Us<br /><span>takes you to<br />contact page</span></a></li></ul>
</div><!--MenuBar Ends--

Replace with your links.

7. Now save your HTML/Javascript'.

    You are done...
Read More

Saturday, September 29, 2012

Add Awesome Table Of Content / Site Map To Your Blogger

This is also great widget for you blog.Because Every table of content what categorize, showing
here with links.So, your visitors can check every post according to categories.Try to add it to your
blog. Its awesome You can check demo from below link.Earlier also i posted about same thing with different style.Look at it from here Hope you will like this.

Table+Of+Content+/+Site+Map
Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

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

.judul-label{ 
background-color:#E5ECF9; 
font-weight:bold; 
line-height:1.4em; 
margin-bottom:5px; 
overflow:hidden; 
white-space:nowrap; 
vertical-align: baseline; 
margin: 0 2px; 
outline: none; 
cursor: pointer; 
text-decoration: none; 
font: 14px/100% Arial, Helvetica, sans-serif; 
padding: .5em 2em .55em; 
text-shadow: 0 1px 1px rgba(0,0,0,.3); 
-webkit-border-radius: .5em; 
-moz-border-radius: .5em; 
border-radius: .5em; 
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
-moz-box-shadow: 1px 1px 4px #AAAAAA; 
box-shadow: 0 1px 2px rgba(0,0,0,.2); 
color: #e9e9e9; 
border: 2px solid white !important; 
background: #6e6e6e; 
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); 
background: -moz-linear-gradient(top,  #888,  #575757); 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757'); 
} 
.data-list{ 
line-height:1.5em; 
margin-left:5px; 
margin-right:5px; 
padding-left:15px; 
padding-right:5px; 
white-space:nowrap; 
text-align:left; 
font-family:"Arial",sans-serif; 
font-size:12px; 
} 
.list-ganjil{ 
background-color:#F6F6F6; 
} 
.headactive{ 
    color: #fef4e9; 
    border: 2px solid white !important; 
    background: #1C8DFF; 
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2)); 
    background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2); 
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2'); 
}

7. Now click Pages on left side like below.


8. Now click blank image like below.
9. Paste below code in HTML area

<script src="http://nurulimaminfo.googlecode.com/files/daftarisiv2-pack.js">

</script> 
<script src="http://www.bloggertrix.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script> 
<script type="text/javascript">
var accToc=true; 
</script> 
<script src="http://deroc.googlecode.com/files/accordion-pack.js" type="text/javascript">
</script>
Replace Bloggertrix with your site name.

10. Now click publish.

You can add this link to menu bar.
You are done...
Read More

Friday, September 28, 2012

Add Rollover Css Menubar For blogger

This is also nice menu-bar for blogger.Im using CSS and HTML for this menu-bar.It include nice hover effect.You can add it to your blog easily.Im include demo for figure-out easily.you can check my earlier menu-bar post post by clicking here

Demo

Rollover-Css-Menubar

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
2. Find this tag by using Ctrl+F    ]]></b:skin>

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

#menu12 {
 position:relative; 
 display:block;
 width:350px;}
#menu12 ul {
 list-style-type: none;
 width: 800px;}
#menu12 ul li {
 display: block;
 float: left;
 width: 200px;
 height: 60px;}
#menu12 a, #menu a:visited {
 display: block;
 width:200px; 
 height:60px; 
 background:url(http://4.bp.blogspot.com/-1Qo3p4dSMsE/UGVOfq0VorI/AAAAAAAAEXI/UOTvZpENaio/s1600/nav_block.jpg); 
 background-position:left top; 
 background-color:transparent; 
 text-align:center; 
 color:black; 
 line-height:60px; 
 text-decoration:none; 
 font-family:arial, sans-serif; 
 font-weight:bold; 
 margin-top:5px;
font-size:18px;}
#menu12 a:hover {
 background-position:left center; 
 line-height:60px; 
 overflow:hidden; 
 color:white;
}
#menu12 a#selected {
 background-position:left bottom; 
 line-height:60px; 
}
#menu12 a#selected:hover {
 color:white;
}

4. Go to blogger  Design > Page Element.

5. Click Add Gadget and select 'HTML/Javascript

6. Paste below code.

<!--MenuBar Starts-->
<div id="menu12">
<ul>
<li><a href="#" id="selected">Home</a></li>
<li><a href="#">Menu Item </a></li>
<li><a href="#">Menu Item </a></li>
<li><a href="#">Menu Item </a></li>
</ul>
</div><!--MenuBar Ends--

Replace with your links.

7. Now save your HTML/Javascript'.

    You are done...
Read More

Thursday, September 27, 2012

Attractive Jquery Sliding Image Gallery For Blogger

This is a nice Jquery widget.It sliding image gallery.Im using jquery,Css and HTML for this. you can add your own images with your links. you can change scrolling left right from hover buttons.so you can try this for your home page. Attractive Photo Gallery With Jquery Zoom  Effect is another Jquery image gallery.Follow these steps to add it to your blog.Im included demo for this post. you can check it.

Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

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

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

.js-disabled img { width:100px; height:100px; display:block; float:left; margin:30px 0 0; }
#outerContainer {
width:900px;
height:202px;
 margin:auto;
position:relative; }
#imageScroller{
width:900px;
height:202px;
position:relative;
background:#000000 url(http://1.bp.blogspot.com/-fAiXPAx4bFY/T6-RfXMw8mI/AAAAAAAAB44/mgfkw-YnknI/s1600/1.png) no-repeat; }
#viewer {
 width:880px;
height:182px;
overflow:hidden; margin:auto;
position:relative; top:10px; }
#imageScroller a:active, #imageScroller a:visited { color:#000000; }
#imageScroller a img { border:0; }
#controls {
width:900px;
height:47px;
 background:url(http://1.bp.blogspot.com/--jemYBfwW5I/T6-QDcwWjGI/AAAAAAAAB4w/YM2Wi91Bhjs/s1600/1.png) no-repeat; position:absolute;top:4px; left:4px; z-index:10;}
#controls a {
 width:37px;
height:35px;
position:absolute; top:3px; }
#controls a:active, #controls a:visited { color:#0d0d0d; }
#title { color:#ffffff; font-family:arial; font-size:23px; font-weight:bold; width:100%; text-align:center; margin-top:10px; }
#rtl {background:url(http://1.bp.blogspot.com/-UDdR8ia8VRg/T6-EMJkOa_I/AAAAAAAAB38/yAlBZsPFIOg/s1600/rtl.png) no-repeat; left:100px; }
#rtl:hover {background:url(http://1.bp.blogspot.com/-UDdR8ia8VRg/T6-EMJkOa_I/AAAAAAAAB38/yAlBZsPFIOg/s1600/rtl.png) no-repeat; left:99px; }
#ltr {background:url(http://3.bp.blogspot.com/-vzam19EhobY/T6-EKCsNh2I/AAAAAAAAB3w/JlF_gyDGsD0/s1600/ltr.png) no-repeat; right:100px; }
#ltr:hover {background:url(http://2.bp.blogspot.com/-292fELblPsA/T6-ELUa8IjI/AAAAAAAAB30/5P2DAt34ZYU/s1600/ltr_over.png) no-repeat; }

7. Go to blogger  and click drop-down like  1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below code.

<div id="outerContainer">
<div id="imageScroller">
<div id="viewer" class="js-disabled">
<a class="wrapper" href="Link URL 1" title="First-Image-Title"><img class="logo" id="blogger" src="Image-URL 1" alt="First-On-Hover-Title" /></a>
<a class="wrapper" href="Link URL 2" title="First-Image-Title"><img class="logo" id="digg" src="Image-URL 2" alt="Second-On-Hover-Title" /></a>
<a class="wrapper" href="Link URL 3" title="Second-Image-Title"><img class="logo" id="facebook" src="Image-URL 3" alt="Third-On-Hover-Title" /></a>
<a class="wrapper" href="Link URL 4" title="Third-Image-Title"><img class="logo" id="friendfeed" src="Image-URL 4" alt="Forth-On-Hover-Title" /></a>
<a class="wrapper" href="Link URL 5" title="Forth-Image-Title"><img class="logo" id="stumbleupon" src="Image-URL 5" alt="Fifth-On-Hover-Title" /></a>                                                                                                                                                                                      
<a class="wrapper" href="Link URL 6" title="Sixth-Image-Title"><img class="logo" id="twitter" src="Image-URL 6" alt="Sixth-On-Hover-Title" /></a></div>
   </div>
  </div>
  <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
   $(function() {
     //remove js-disabled class
    $("#viewer").removeClass("js-disabled");
     //create new container for images
    $("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length * 170).height(170).appendTo("div#viewer");
    //add images to container
    $(".wrapper").each(function() {
     $(this).appendTo("div#container");
    });
    //work out duration of anim based on number of images (100 second for each image)
    var duration = $(".wrapper").length * 3000;
    //store speed for later (distance / time)
    var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;   
    //set direction
    var direction = "rtl";
    //set initial position and class based on direction
    (direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ;
    //animator function
    var animator = function(el, time, dir) {
     //which direction to scroll
     if(dir == "rtl") {
       //add direction class
      el.removeClass("ltr").addClass("rtl");
      //animate the el
      el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() {   
       //reset container position
       $(this).css({ left:$("div#imageScroller").width(), right:"" });
       //restart animation
       animator($(this), duration, "rtl");
       //hide controls if visible
       ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;     
      });
     } else {
       //add direction class
      el.removeClass("rtl").addClass("ltr");
      //animate the el
      el.animate({ left:$("div#viewer").width() + "px" }, time, "linear", function() {    
       //reset container position
       $(this).css({ left:0 - $("div#container").width() });
       //restart animation
       animator($(this), duration, "ltr");
       //hide controls if visible
       ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;   
      });
     }
    }
    //start anim
    animator($("div#container"), duration, direction);
    
    //pause on mouseover
    $("a.wrapper").live("mouseover", function() {
     //stop anim
     $("div#container").stop(true);
     //show controls
     ($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:0.7 }).slideDown("slow") : null ;
     ($("a#rtl").length == 0) ? $("<a>").attr({ id:"rtl", href:"#", title:"rtl" }).appendTo("#controls") : null ;
     ($("a#ltr").length == 0) ? $("<a>").attr({ id:"ltr", href:"#", title:"ltr" }).appendTo("#controls") : null ;
     //variable to hold trigger element
     var title = $(this).attr("title");
     //add p if doesn't exist, update it if it does
     ($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ;
    });
    //restart on mouseout
    $("a.wrapper").live("mouseout", function(e) {
     //hide controls if not hovering on them
     (e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null ;
     //work out total travel distance
     var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());      //work out distance left to travel
     var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))) ;
     //new duration is distance left / speed)
     var newDuration = distanceLeft / speed;
     //restart anim
     animator($("div#container"), newDuration, $("div#container").attr("class"));
    });       
    //handler for ltr button
    $("#ltr").live("click", function() {    
     //stop anim
     $("div#container").stop(true);
     //swap class names
     $("div#container").removeClass("rtl").addClass("ltr");     
     //work out total travel distance
     var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
     //work out remaining distance
     var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));
     //new duration is distance left / speed)
     var newDuration = distanceLeft / speed;
     //restart anim
     animator($("div#container"), newDuration, "ltr");
    });
    //handler for rtl button
    $("#rtl").live("click", function() {    
     //stop anim
     $("div#container").stop(true); 
     //swap class names
     $("div#container").removeClass("ltr").addClass("rtl");
     //work out total travel distance
     var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
     //work out remaining distance
     var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));
     //new duration is distance left / speed)
     var newDuration = distanceLeft / speed;
     //restart anim
     animator($("div#container"), newDuration, "rtl");
    });
   });
  </script>


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

Wednesday, September 26, 2012

7 Tips To Reduce Your Blog / Website Loadtime

Website load time is important to increasing your blog traffic.Blog loading time has both direct and indirect impacts on search engine.its a major role for getting best ranking and best earning.Actually most of visitors hope to view  your site in    the first 3 seconds.So, if your blog doesn't load properly soon,you will loose your traffic.That's why important to keep your blog speed.

Check your blog speed
First of all Check your blog speed.There have many tools for it
Im suggest you to use  Google speed test tool.
Go to Google Speed Test Tool
You can Enter your blog and click analyze. If you can check your score on there.
If you are get below to 90. I think you have to work for it. Follow below tips for
reduce your blog time loading speed.

Optimize image load time
This is the one of common mistake.We have to use choose low resolution images.For example,
you need a 200x200 pixel images and you are use 500x500 pixel.So,it will take some more
time to load.Just use exactly size you need. Use Photoshop,you can reduce resolution easily.
If you can compress your image that more better.you can use Yahoo Smushit  for compress
your images.and other thing is, Use a correct image extension for increase site speed.
Don't use high resolution image for blogger background.I'm suggest u to use come CSS color
for background image because, background image take, some more time to load.

Number of post showing on home page
This is also another important thing.newly designed templates are manage it well.
But default blogger templates are not manage it well. so we have to manage it.
I saw some bloggers are using 5-10 post in home page. Its takes lot time to load.
I recommend you to add 5 post in your home page.If you can try read-more function.
that work well.How to add readmore function.

Reduce advertisement

Don't use more advertisement in your home page, you can use, show gadget specific page.
to add advertisement inside posts.

Avoid unwanted java script sand flashes
You can remove unwanted java script, flashes.
java script also affect to your blog loading speed.

Don't use lot of social sharing buttons
Some people are using lot of social sharing buttons.
Just use some social button gadget to share your post and keep your blog neat.

This is the main thing u have to focus to make your blog page faster.You can apply
this tips to your blog, you can reduce your blog loading time.
Read More

Tuesday, September 25, 2012

Stylish Rss Subscription Box For Blogger

In this tutorial , im going to to explain How to add Rss feed subscription box below your ever post.Rss helps you to get more trafficto your blog.Most of website owners use this Every post updates sending to rss subscribers email. This is easy to add, follow these steps. Check my earlier Rss subscribe box here

rss-feed

 Demo


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5. Put checked marked in Expand Widget Templates
   
6. Find this tag by using Ctrl+F    </head>

7. Paste below code Before </head> tag

<style type='text/css'>
.sub-box{
width: 600px;
background: #fff;
padding: 2px 5px 7px 7px;
border: 2px solid #000;
border-radius: 15px;
}
.sub-box:hover{
border:2px solid #511111;
}
.followlinks h1{
font-family:Cabin Condensed;
font-weight: bold;
color: #000;
padding: 0px 0px 2px 40px;;
font-size:17px;
}
.followlinks ul{
font-family:Cabin Condensed;
font-weight: bold;}

.followlinks ul li{
float:left;
width:90px;
padding-left:40px;
margin:0 0 0 5px !important;
line-height:35px !important;}

.followlinks ul li a{
font-size:20px !important;
text-decoration:none;
font-weight:normal;}

.followlinks ul li.otrss{
background:url(http://3.bp.blogspot.com/-CMD8tTcyanA/UGEoXF32zpI/AAAAAAAAEQM/E1OgMW6SZvc/s1600/bloggertrix-rss-icon.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otgoogleplus{
background:url(http://2.bp.blogspot.com/-lhm8DqIzDpI/UGEoWe4xv9I/AAAAAAAAEQA/a850kufuzxw/s1600/bloggertrix-google-icon.png) no-repeat scroll left center transparent;
}
.followlinks ul li.ottwitter{
background:url(http://1.bp.blogspot.com/-cDAZzZi29P0/UGEoYMJQYrI/AAAAAAAAEQQ/otQiWtPk-mc/s1600/bloggertrix-twitter-icon.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otfacebook{
background:url(http://1.bp.blogspot.com/-8FUcdaI0SwQ/UGEoVTiWRWI/AAAAAAAAEP8/NN3_sprT6Xo/s1600/bloggertrix-facebook-icon.png) no-repeat scroll left center transparent;
}
form.emailform{
margin:5px 0 0;
display:block;
clear:both;
}
.emailtext{
background:url(http://4.bp.blogspot.com/-DMrSxx8BJqo/TteQx1ijO2I/AAAAAAAABF0/Qd1ROb_8oeA/s1600/ot-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#444;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width: 550px;
}
.emailtext:focus{
outline: none;
}
.sub-button{
color:#444;
font-weight:bold;
text-decoration:none;
padding:6px 10px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 5px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
.sub-button:hover{
background: -moz-linear-gradient(top, #e7e7e7 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#e7e7e7&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
    background: linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);

}</style>
<script type='text/javascript'>
  WebFontConfig = {
    google: { families: [ &#39;Cabin+Condensed::latin&#39; ] }
  };
  (function() {
    var wf = document.createElement(&#39;script&#39;);
    wf.src = (&#39;https:&#39; == document.location.protocol ? &#39;https&#39; : &#39;http&#39;) +
      &#39;://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js&#39;;
    wf.type = &#39;text/javascript&#39;;
    wf.async = &#39;true&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

8. again Find this tag by using Ctrl+F    <data:post.body/>

9. Paste below code after <data:post.body/> tag

<div class='sub-box'>
<div class='followlinks'>
<h1>Get Free Email Updates and Like us on your Social networking site</h1>
<ul>
<li class='otrss'><a href='http://feeds.feedburner.com/Bloggertrix' target='_blank'>RSS</a></li>
<li class='otgoogleplus'><a href='http://plus.google.com/107955298793879607964' target='_blank'>Google+</a></li>
<li class='ottwitter'><a href='http://twitter.com/bloggertrix' target='_blank'>Twitter</a></li>
<li class='otfacebook'><a href='https://www.facebook.com/bloggertrix' target='_blank'>Facebook</a></li>
</ul>
</div>
<br/>
<div style='text-align: left; display: inline-block;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Everfreetech&apos;,
 &apos;popupwindow&apos;, 
&apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

<input name='uri' type='hidden' value='blogggertrix'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailtext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input alt='' class='sub-button' title='' type='submit' value='SignUp'/>
</form></div></div>

Replace selected names with your uersnames

10. Now save your template.

    You are done...
Read More

Monday, September 24, 2012

FeedBurner Subscribers Dropped to Zero September 2012

Yesterday morning when i check my website,I was shock because, My email subscriber count goes to
zero. Therefore FeedBurner  chicklet showing my email subscriber 0  readers.There was over 1000
readers earlier.Actually I don't have any idea, why suddenly subscriber had come down to zero.Because Google not inform about this before happen. i think all of site owners faced this problem.This is temporary, Google will fix this problem as soon as they can. Just relax.

feedburner-zero
However feedburner process runs as usual. visitors can subscribe via feedburner. If you are think your website visitors discourage about seening this, you can remove chicklet.Actually, One thing you can do for this.You can see your, email subscribers without problem. Just backup it. It will more safe.
You c an follow these steps to backup it.

1. Log in to feedburner

2. Click your feed name.

3. Go to Publicize tab.

4. Under service, click Email Subscription like below.

feedburner-subscriber
5. Go to bottom of the page and click View Subscriber Details

6. Under  click  Export: CSV it will save to txt file
backup-feedburner

So your feedburner emails are backup successfully. Google will provide a solution for this soon./
we have to just wait for it.If you are got a news about it. let us know. :)
Read More

Sunday, September 23, 2012

Attractive Recommendation Social Widget For Blogger

Social bookmarking is really important in blogger.Between social site,Facebook, Google+ and twitter are more popular.because we are creating fan page and follower for our blog. Actually, its the one of way to get traffic. Today im going to explain,how to add scrolling recommendation box for your blog.check demo link below. you will get it when scrolling to bottom.


Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

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

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

#socialslide{background:#f3f3f3;border-radius:9px;
-moz-border-radius:9px;-webkit-border-radius:9px;-moz-box-shadow:inset 0 0 3px #333;
-webkit-box-shadow:inset 0 0 3px #333;box-shadow:inner 0 0 3px #333;
padding:12px 14px 12px 14px;width:300px;position:fixed;bottom:13px;
right:2px;display:none;z-index:3;height:65px;}


7. Go to blogger  and click drop-down like  1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below code.

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

<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#msocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div style="display: none;" id="socialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closesocialslide();">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>

<div style="float:left; margin:15px;"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloggertrix&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>

<div style="float:left; margin:15px;"><a href="https://twitter.com/bloggertrix" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @hannygames</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>

<div class='clear'></div>

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

Saturday, September 22, 2012

Attractive Rss Subscribe Box For Blogger

This Tutorial will help you to add beautiful subscribe box for your blogger.This is WordPress style.You can add this subscribe box to end of the post.So, you can add this easily.Follow thissteps.Old post about Rss Subscription box. here


   Demo


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5. Put checked marked in Expand Widget Templates
   
6. Find this tag by using Ctrl+F    ]]></b:skin>

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

#Subscribe{background:#D00 url(https://lh4.googleusercontent.com/-rlmc0ojAP6w/UEBbz7z4kvI/AAAAAAAABAU/YuSXNdMxB6U/s72/email.png) no-repeat 98% center;border-radius:5px;box-shadow:0 0 30px #600 inset;height:100px;margin:5px auto 0;padding:10px;width:700px;}
#Subscribe .Arrow{background:url(https://lh6.googleusercontent.com/-GpemTsHpc4w/UEBbgb44xHI/AAAAAAAABAE/mDTUyfvnksg/s72/Left.png) no-repeat;float:left;height:70px;margin:0 0 0 10px;width:80px}
#Subscribe form input.Text{background:#FFF;border:1px solid #800;border-radius:5px;box-shadow:0 0 5px #600 inset;color:#333;float:left;padding:5px 10px;width:145px}
#Subscribe .headline{color:#FFF;font-size:24px;margin:5px 0 0 60px}
#Subscribe table{margin:10px 0 0 100px;}
#Subscribe form input.Button{background-color:#148314;background-image:url(http://lh4.googleusercontent.com/--9RbYGLhmI8/UAp2hm47JEI/AAAAAAAAAxI/t_neer3k3IM/s36/Subscribe.png);border:1px solid #7a7a7a;border-radius:5px;color:#fff;padding:5px 10px;position:relative;width:125px}

6. again Find this tag by using Ctrl+F    <data:post.body/>

7. Paste below code after <data:post.body/> tag

<!--NewsLetter Starts-->
<div id="Subscribe">
<p class="headline">Subscribe Updates, Its FREE!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' 
onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?
uri=bloggertrix&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,
height=520&apos;);return true' target='popupwindow'> <table><tr><td><td>
<input name='Name' onblur='if (this.value == &quot;&quot;) 
{this.value = &quot;Enter Your Name&quot;;}' onfocus='if 
(this.value == &quot;Enter Your Name&quot;) {this.value = &quot;&quot;;}'
 class="Text" type='text' value='Enter Your Name'/></td><td><input name='email'
 onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email&quot;;}'
 onfocus='if (this.value == &quot;Enter Your Email&quot;) {this.value = &quot;&quot;;}'
 class="Text" type='text' value='Enter Your Email'/> <input name='uri' type='hidden'
 value='bloggertrix'/><input name='loc' type='hidden' value='en_US'/></td><td><input type='submit' class="Button" value='Subscribe Now'/></td></tr></table></form>
</div>
<!--NewsLetter Ends-->

Replace bloggertrix with your feed name

11. Now save your template.

    You are done...
Read More

Friday, September 21, 2012

How To Add Watercolor Effect Menu For Blogger

Last tutorial i posted about Simple CSS menu bar,So, this post also about menu bar.Actually this menu bar include with water color background.I think this will important to blogger template designers. Its easy to add it to your blog.It just include. CSS and HTML.Other menu bars here.

Demo


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
2. Find this tag by using Ctrl+F    ]]></b:skin>

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

#menu2 {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 774px;
    height: 210px;
    background: url(http://2.bp.blogspot.com/-PxOxTawQPZQ/UFvneKpEFMI/AAAAAAAAEFI/XoJI2lkDJ6s/s1600/menu-bg.jpg) no-repeat;
    position: relative;}
#menu2 span {
    display: none;
    position: absolute;}
#menu2 a {
    display: block;
    text-indent: -900%;
    position: absolute;
    outline: none;}
#menu2 a:hover {
    background-position: left bottom;}
#menu a:hover span{
    display: block;}
#menu2 .home {
    width: 144px;
    height: 58px;
    background: url(http://3.bp.blogspot.com/-fqQm6M8Qr6A/UFvndPSj2kI/AAAAAAAAEFA/6jGlYCHLAZ4/s1600/home.gif) no-repeat;
    left: 96px;
    top: 73px;}
#menu2 .home span {
    width: 86px;
    height: 14px;
    background: url(http://4.bp.blogspot.com/-H5zqfytQHd8/UFvncE-6CwI/AAAAAAAAEE4/Ty43UCkVMgc/s1600/home-over.gif) no-repeat;
    left: 28px;
    top: -20px;}
#menu2 .about {
    width: 131px;
    height: 51px;
    background: url(http://2.bp.blogspot.com/-uvVX3SNefjg/UFvnbPEbeHI/AAAAAAAAEEw/amd1DkdGPUg/s1600/about.gif) no-repeat;
    left: 338px;
    top: 97px;}
#menu2 .about span {
    width: 40px;
    height: 12px;
    background: url(http://1.bp.blogspot.com/-vDJfxpUpsUM/UFvnaeZ0C0I/AAAAAAAAEEo/7qjQk4v8IEY/s1600/about-over.gif) no-repeat;
    left: 44px;
    top: 54px;}
#menu2 .rss {
    width: 112px;
    height: 47px;
    background: url(http://4.bp.blogspot.com/-OjjKCeiREjw/UFvngPzcIQI/AAAAAAAAEFY/cLhpShIpfDI/s1600/rss.gif) no-repeat;
    left: 588px;
    top: 94px;}
#menu2 .rss span {
    width: 92px;
    height: 20px;
    background: url(http://3.bp.blogspot.com/-KdmqcfQag_M/UFvnfUHd-yI/AAAAAAAAEFQ/zl7d02lEx6s/s1600/rss-over.gif) no-repeat;
    left: 26px;
    top: -20px;
}

4. Go to blogger  Design > Page Element.

5. Click Add Gadget and select 'HTML/Javascript

6. Paste below code.

<!--MenuBar Starts-->
<ul id="menu2">
<li><a class="home" href="http://www.bloggertrix.com/">Home</a></li>
<li><a class="about" href="http://www.bloggertrix.com/">About</a></li>
<li><a class="rss" href="http://www.bloggertrix.com/">RSS</a></li>
</ul>
<!--MenuBar Ends--

Replace with your links.

7. Now save your HTML/Javascript'.

    You are done...
Read More

Thursday, September 20, 2012

How To Add Simple CSS Menubar For Blogger

This is simple CSS menu bar for your blog. You can add it easily.From this post I will explain tutorial for new blogger interface. because now we cant get back old interface. Hope you can understand it well.Other menu bars here.

Demo


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
2. Find this tag by using Ctrl+F    ]]></b:skin>

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

#demo-container{padding:25px 15px 0 15px;background:#67A897;}

ul#simple-menu{list-style-type:none;width:100%;position:relative;height:27px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:13px;font-weight:bold;margin:0;padding:11px 0 0 0;}
ul#simple-menu li{display:block;float:left;margin:0 0 0 4px;height:27px;}
ul#simple-menu li.left{margin:0;}
ul#simple-menu li a{display:block;float:left;color:#fff;background:#4A6867;line-height:27px;text-decoration:none;padding:0 17px 0 18px;height:27px;}
ul#simple-menu li a.right{padding-right:19px;}
ul#simple-menu li a:hover{background:#2E4560;}
ul#simple-menu li a.current{color:#2E4560;background:#fff;}
ul#simple-menu li a.current:hover{color:#2E4560;background:#fff;}

4. Go to blogger  Design > Page Element.

5. Click Add Gadget and select 'HTML/Javascript

6. Paste below code.

<!--MenuBar Starts-->
<div id="demo-container">
<ul id="simple-menu">
<li><a class="current" href="http://www.bloggertrix.com/" title="Home">Home</a></li>
<li><a href="http://www.bloggertrix.com/" title="Home">Resources</a></li>
<li><a href="http://www.bloggertrix.com/" title="Home">Inspiration</a></li>
<li><a href="http://www.bloggertrix.com/" title="Home">Community Forums</a></li>
<li><a href="http://www.bloggertrix.com/" title="Home">About Us</a></li>
<li><a href="http://www.bloggertrix.com/" title="Home">Contact Us</a></li>
</ul>
</div>
<!--MenuBar Ends--

Replace with your links.

7. Now save your HTML/Javascript'.

    You are done...
Read More

Wednesday, September 19, 2012

Stylish Menu Bar With Search Box For Blogger

This is a nice menubar for your blog. But, it include with sear box. Its also nice look and match for the menubar. you can try it. its easy. check my earlier search box and menubar below.

Menu bar collection
Search box collection

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

#MenuBar{background:#333;display:block;font:18px;font-weight:400;height:32px;border-bottom:1px solid #ccc;min-width:960px;padding:5px 0}
#Menu a{color:#fff;display:block;font-weight:400;padding:5px 10px}
#Menu a:hover{background:#f4f4f4;color:#333;display:block;text-decoration:none}
#Menu ul{height:30px;list-style:none;margin:0;padding:0}
#Menu li{height:30px;float:left;margin:0;padding:0}
#MSA{width:960px;margin:0 auto;}
#MSD{width:960px;}
#Menu{height:30px;width:700px;float:left;}
#SearchBox {height:35px;float:right;width:220px;}
#SearchBox input[type="text"]{background-color:#2A2A2A;border:1px solid #484848;border-radius:5px;color:#7E7E7E;height:25px;outline:0;position:relative;-webkit-appearance:none;padding:3px 0 3px 8px}
#SearchBox input[type="submit"]{background-color:#248334;border-radius:5px;color:#fff;height:28px;width:35px;border:1px solid #7a7a7a;background-image:url(http://lh4.googleusercontent.com/--9RbYGLhmI8/UAp2hm47JEI/AAAAAAAAAxI/t_neer3k3IM/s36/Subscribe.png);padding:3px}

4. Go to blogger  Design > Page Element.

5. Click Add Gadget and select 'HTML/Javascript

6.Paste below code.

<!--MenuBar Starts-->
<div id='MenuBar'>
<div id='MSA'>
<div id='MSD'>
<div id='Menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#' rel='author'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Advertise</a></li>
<li><a href='#'>Write For Us</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='http://www.bloggertrix.com/'>Add This</a></li>
</ul>
</div>
<div id='SearchBox'>
<form action='/search' method='get'>
<input name='q' onblur='if (this.value == "") {this.value = "Search Here...";}' onfocus='if (this.value == "Search Here...") {this.value = "";}' type='text' value='Search Here...'/>
<input type='submit' value='Go'/>
</form>
</div>
</div>
</div>
</div>
<!--MenuBar Ends--

Replace with your links.

7. Now save your HTML/Javascript'.

    You are done...
Read More

Monday, September 17, 2012

RGB / Hex Color Codes Generator For Blogger

Today i came up with useful tool. Because color code are very important in blogger designs.Every CSS codes are using some color code for generating color effects. In my earlier post also , most of time i used hex color codes. But some codes are not hex codes and its RGB color codes,So, some  people don't know how to  change rgb colors. You can use below colors or use generator tools to get the color easily. hope this helpto you all.





Read More